Needle Engine
  • README
  • Code Of Conduct
  • HOW TO
  • documentation
    • SUMMARY
    • _backlog-mermaid
    • _backlog
    • _meta-test
    • Automatic Component Generation
    • Needle Core Components
    • How To Debug
    • Deployment and Optimization
    • embedding
    • Everywhere Actions
    • Example Projects ✨
    • Exporting Assets, Animations, Prefabs, Materials, Lightmaps...
    • Questions and Answers (FAQ) 💡
    • Feature Overview
    • This page has been moved: continue here
    • getting-started
    • Frameworks, Bundlers, HTML
    • index
    • Additional Modules
    • Networking
    • Needle Engine Project Structure
    • Samples Projects
    • Scripting Examples
    • Creating and using Components
    • Live
    • Live
    • About
    • Live
    • Live
    • Live
    • Live
    • Support, Community & AI
    • Technical Overview
    • Testimonials
    • Testing on local devices
    • Using Needle Engine directly from HTML
    • vision
    • VR & AR (WebXR)
    • blender
      • Needle Engine for Blender
    • cloud
      • Needle Cloud
    • custom-integrations
      • index
    • getting-started
      • Scripting Introduction for Unity Developers
      • Getting Started & Installation
      • Scripting in Needle Engine
    • reference
      • needle.config.json
      • <needle-engine> Configuration
      • @serializable and other decorators
    • three
      • index
    • unity
      • Editor Sync
      • Needle Engine for Unity
    • lang
      • de
        • 404
        • SUMMARY
        • Automatische Komponenten-Generierung
        • Needle-Kernkomponenten
        • Debugging
        • Bereitstellung und Optimierung
        • embedding
        • Everywhere Actions
        • Beispielprojekte ✨
        • Assets, Animationen, Prefabs, Materialien, Lightmaps exportieren...
        • Fragen und Antworten (FAQ) 💡
        • Funktionsübersicht
        • Diese Seite wurde verschoben: hier fortfahren
        • getting-started
        • Frameworks, Bundler, HTML
        • index
        • Zusätzliche Module
        • Netzwerkfunktionen
        • Needle Engine Projektstruktur
        • Beispielprojekte
        • Scripting Beispiele
        • Erstellen und Verwenden von Komponenten
        • Live
        • Live
        • Über
        • Live
        • Live
        • Live
        • Live
        • Support und Community
        • Technischer Überblick
        • Erfahrungsberichte
        • Testen auf lokalen Geräten
        • Needle Engine direkt aus HTML verwenden
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine für Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Einführung in das Scripting für Unity-Entwickler
          • Erste Schritte & Installation
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • <needle-engine> Konfiguration
          • @serializable und andere Decorators
        • three
          • index
        • unity
          • Editor Synchronisierung
          • Needle Engine für Unity
      • es
        • SUMMARY
        • Generación Automática de Componentes
        • Componentes principales de Needle
        • Cómo Depurar
        • Despliegue y optimización
        • embedding
        • Acciones Everywhere
        • Proyectos de Ejemplo ✨
        • Exportación de Assets, Animaciones, Prefabs, Materiales, Lightmaps...
        • Preguntas Frecuentes (FAQ) 💡
        • Resumen de Características
        • Esta página ha sido movida: continúe aquí
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Módulos Adicionales
        • Redes
        • Estructura de Proyecto de Needle Engine
        • Proyectos de ejemplo
        • Ejemplos de scripting
        • Crear y usar Components
        • En vivo
        • En Vivo
        • Acerca de
        • En vivo
        • En vivo
        • En vivo
        • En vivo
        • Soporte y Comunidad
        • Resumen técnico
        • Testimonios
        • Testing on local devices
        • Usando Needle Engine directamente desde HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine para Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introducción al Scripting para Desarrolladores de Unity
          • Primeros pasos e instalación
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • Configuración de <needle-engine>
          • @serializable y otros decoradores
        • three
          • index
        • unity
          • Editor Sync
          • Needle Engine para Unity
      • fr
        • SUMMARY
        • Génération automatique de composants
        • Composants principaux de Needle
        • Comment déboguer
        • Déploiement et Optimisation
        • embedding
        • Everywhere Actions
        • Exemples de Projets ✨
        • Exporter des Assets, des Animations, des Prefabs, des Matériaux, des Lightmaps...
        • Questions et Réponses (FAQ) 💡
        • Aperçu des fonctionnalités
        • Cette page a été déplacée : continuez ici
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Modules supplémentaires
        • Réseau
        • Structure du projet Needle Engine
        • Projets d'exemples
        • Exemples de Scripting
        • Créer et utiliser des Components
        • showcase-bike
        • En direct
        • À propos
        • En direct
        • Jouer
        • En direct
        • En direct
        • Support et Communauté
        • Vue d'ensemble technique
        • Témoignages
        • Tester sur les appareils locaux
        • Utiliser Needle Engine directement depuis HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine pour Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introduction au Scripting pour les Développeurs Unity
          • Premiers pas et installation
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • <needle-engine> Configuration
          • @serializable et autres décorateurs
        • three
          • index
        • unity
          • Synchronisation de l'Editor (Editor Sync)
          • Needle Engine pour Unity
      • hi
        • SUMMARY
        • कंपोनेंट का स्वतः जनरेशन
        • नीडल कोर कंपोनेंट्स
        • How To Debug
        • Deployment and Optimization
        • embedding
        • Everywhere Actions
        • उदाहरण प्रोजेक्ट ✨
        • एसेट, एनिमेशन, प्रीफैब, मटेरियल, लाइटमैप्स... को एक्सपोर्ट करना
        • प्रश्न और उत्तर (FAQ) 💡
        • सुविधा अवलोकन
        • यह पृष्ठ स्थानांतरित कर दिया गया है: यहां जारी रखें
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • अतिरिक्त मॉड्यूल
        • नेटवर्किंग
        • Needle Engine प्रोजेक्ट स्ट्रक्चर
        • samples-and-modules
        • स्क्रिप्टिंग उदाहरण
        • कंपोनेंट बनाना और उपयोग करना
        • लाइव
        • लाइव
        • परिचय
        • लाइव
        • लाइव
        • लाइव
        • लाइव
        • समर्थन और समुदाय
        • तकनीकी अवलोकन
        • प्रशंसापत्र
        • Testing on local devices
        • HTML से सीधे Needle Engine का उपयोग करना
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine for Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Unity डेवलपर्स के लिए स्क्रिप्टिंग परिचय
          • आरंभ करना और इंस्टॉलेशन
          • Needle Engine में स्क्रिप्टिंग
        • reference
          • needle.config.json
          • <needle-engine> कॉन्फ़िगरेशन
          • @serializable and other decorators
        • three
          • index
        • unity
          • Editor Sync
          • Unity के लिए Needle Engine
      • ja
        • SUMMARY
        • 自動コンポーネント生成
        • Needleコアコンポーネント
        • デバッグの方法
        • デプロイと最適化
        • embedding
        • Everywhere Actions
        • サンプルプロジェクト ✨
        • アセット、アニメーション、Prefab、マテリアル、ライトマップなどのエクスポート
        • よくある質問(FAQ)💡
        • 機能概要
        • このページは移動しました: こちらからどうぞ
        • getting-started
        • フレームワーク、バンドラー、HTML
        • index
        • 追加モジュール
        • ネットワーキング
        • Needle Engineプロジェクトの構造
        • サンプルプロジェクト
        • スクリプティング例
        • Creating and using Components
        • ライブ
        • showcase-castle
        • 概要
        • ライブ
        • ライブ
        • ライブ
        • ライブ
        • サポートとコミュニティ
        • 技術概要
        • お客様の声
        • ローカルデバイスでのテスト
        • HTMLからNeedle Engineを直接使用する
        • vision
        • VR & AR (WebXR)
        • blender
          • Blender 用 Needle Engine
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Scripting Introduction for Unity Developers
          • はじめに & インストール
          • Needle Engineでのスクリプティング
        • reference
          • needle.config.json
          • <needle-engine> 設定
          • @serializable およびその他のデコレーター
        • three
          • index
        • unity
          • Editor Sync
          • Unity用Needle Engine
      • pt
        • SUMMARY
        • Automatic Component Generation
        • Componentes Principais do Needle
        • Como Depurar
        • Implementação e Otimização
        • embedding
        • Everywhere Actions
        • Projetos de Exemplo ✨
        • Exportar Recursos, Animações, Prefabs, Materiais, Lightmaps...
        • Perguntas e Respostas (FAQ) 💡
        • Visão Geral dos Recursos
        • Esta página foi movida: continue aqui
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Módulos Adicionais
        • Redes
        • Estrutura do Projeto Needle Engine
        • Projetos de Exemplo
        • Exemplos de Scripting
        • Criar e usar Componentes
        • Ao Vivo
        • Ao Vivo
        • Sobre
        • Ao Vivo
        • Ao Vivo
        • Ao Vivo
        • Ao Vivo
        • Suporte e Comunidade
        • Visão Geral Técnica
        • Depoimentos
        • Testar em dispositivos locais
        • vanilla-js
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine para Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introdução à Scripting para Developers Unity
          • Começar e Instalação
          • Scripting no Needle Engine
        • reference
          • needle.config.json
          • needle-engine-attributes
          • @serializable e outros decorators
        • three
          • index
        • unity
          • Sincronização do Editor
          • Needle Engine para Unity
      • vn
        • 404
        • SUMMARY
        • Automatic Component Generation
        • Các Component Cốt lõi của Needle
        • Cách gỡ lỗi
        • Triển khai và Tối ưu hóa
        • embedding
        • Hành động ở mọi nơi (Everywhere Actions)
        • Các Dự Án Ví Dụ ✨
        • Xuất Tài sản, Hoạt ảnh, Prefab, Vật liệu, Lightmap...
        • Câu hỏi thường gặp (FAQ) 💡
        • Tổng quan tính năng
        • Trang này đã được di chuyển: tiếp tục tại đây
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Các Module Bổ Sung
        • Kết nối mạng
        • Cấu trúc dự án Needle Engine
        • samples-and-modules
        • Ví dụ về Scripting
        • Tạo và sử dụng Component
        • Trực tiếp
        • Trực tiếp
        • Giới thiệu
        • Trực tiếp
        • Chơi thử
        • Trực tiếp
        • Demo trực tiếp
        • Hỗ trợ và Cộng đồng
        • Tổng quan kỹ thuật
        • Lời chứng thực
        • Testing on local devices
        • Sử dụng Needle Engine trực tiếp từ HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine cho Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Giới thiệu về Scripting cho các nhà phát triển Unity
          • Getting Started & Installation
          • Scripting trong Needle Engine
        • reference
          • needle.config.json
          • Cấu hình <needle-engine>
          • @serializable và các decorator khác
        • three
          • index
        • unity
          • Editor Sync
          • Needle Engine cho Unity
      • zh
        • SUMMARY
        • 自动生成组件
        • Needle 核心组件
        • 如何调试
        • 部署与优化
        • embedding
        • Everywhere Actions
        • 示例项目 ✨
        • 导出资源、动画、预制体、材质、光照贴图...
        • 常见问题 (FAQ) 💡
        • 功能概览
        • 此页面已移动:请在此处继续
        • getting-started
        • 框架、打包器、HTML
        • index
        • 附加模块
        • 网络
        • Needle Engine 项目结构
        • 示例项目
        • Scripting Examples
        • Creating and using Components
        • 实时示例
        • 实时
        • 关于
        • 实时演示
        • 在线试玩
        • 实时演示
        • 现场演示
        • 支持与社区
        • 技术概述
        • 用户评价
        • Testing on local devices
        • 使用 Needle Engine 直接从 HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine for Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Scripting Introduction for Unity Developers
          • 入门与安装
          • 在 Needle Engine 中编写脚本
        • reference
          • needle.config.json
          • <needle-engine> 配置
          • @serializable and other decorators
        • three
          • index
        • unity
          • 编辑器同步
          • Unity 版 Needle Engine
Powered by GitBook
On this page
  • 📦 导出 glTF 文件
  • 懒加载和多关卡/场景
  • 每个 glTF 的推荐复杂度
  • 预制体
  • 场景资源
  • 🏇 导出动画
  • 🌍 导出天空盒
  • ✨ 导出材质
  • 基于物理的材质 (PBR)
  • 自定义着色器
  • 💡 导出光照贴图
  • 推荐的光照贴图设置
  • 混合烘焙和非烘焙对象
Edit on GitHub
  1. documentation
  2. lang
  3. zh

导出资源、动画、预制体、材质、光照贴图...

Previous示例项目 ✨Next常见问题 (FAQ) 💡

Last updated 26 days ago

向您的 Unity 场景添加一个 ExportInfo 组件,以根据模板生成新的 Web 项目,链接到您要导出的现有 Web 项目,设置对其他库和包的依赖关系,并部署您的项目。

默认情况下,您的场景将在保存时导出。可以通过禁用 ExportInfo 组件中的 Auto Export 来更改此设置。

📦 导出 glTF 文件

要导出网格、材质、动画、纹理等,请在您的层级视图中创建一个新的 GameObject 并向其添加一个 GltfObject 组件。这是新的 glTF 文件的根对象。每当您更改场景并保存时,它都会被导出。

只有位于这些根对象上和内部的脚本和数据会被导出。位于它们之外的脚本和数据不会被导出。

将一个立方体添加为您的根对象的子对象并保存您的场景。请注意,输出的 assets/ 文件夹(参见 )现在包含一个新的 .glb 文件,其名称与您的根 GameObject 相同。

您可以启用 Smart Export 设置(通过 Edit/Project Settings/Needle)仅在此对象层级发生更改时进行导出。

:::details 如何防止特定对象被导出 带有 EditorOnly 标签的对象将被忽略导出,包括其子对象层级。 请注意,这比禁用对象更可取,因为禁用对象在稍后被启用时仍会被导出。 :::

懒加载和多关卡/场景

如果您想将应用程序拆分为多个关卡或场景,只需使用 SceneSwitcher 组件即可。然后,您可以将应用程序构建成多个场景或预制体,并将它们添加到 SceneSwitcher 数组中以便在运行时加载和卸载。这是避免预加载所有内容并保持加载时间较短的绝佳方法(例如,我们在 上就是这样做的,将网站的每个部分拆分为独立的场景,并在需要时才加载它们)。

每个 glTF 的推荐复杂度

  • 未压缩的最大导出尺寸 50 MB(通常压缩后约为 10-20 MB)

  • 最大 50 万顶点(如果也面向移动 VR,则更少)

  • 最大 4x 2k 光照贴图

您可以将场景和预制体拆分为多个 glTF 文件,然后在需要时按需加载这些文件。这可以保持加载性能快速,文件大小小巧。请参阅 。

这里的场景复杂度是推荐的,以确保在一系列支持 Web 的设备和带宽上获得良好性能。除了您设备的性能外,这没有技术限制。

预制体

导出预制体也支持嵌套:预制体中的一个组件可以引用另一个预制体,然后该预制体也会被导出。 这种机制允许构建场景尽可能轻量,并首先加载最重要的内容,然后延迟加载其他内容。

场景资源

与预制体资源类似,您可以引用其他场景资源。 入门方法是,在 Unity 中创建一个带有 UnityEditor.SceneAsset 字段的组件,并将其添加到 GltfObject 内部的某个 GameObject 中。引用的场景现在将作为单独的 glTF 文件导出,并可以作为 TypeScript 中的 AssetReference 进行加载/反序列化。

您可以在引用的场景中继续工作,同时仍更新您的主导出场景/网站。在场景保存或播放模式切换时,我们将检测当前场景是否被您当前运行的服务器使用,然后触发仅针对该 glb 的重新导出。(此检查按名称进行 - 如果您的 <web_project>/assets/ 文件夹中存在一个 glb,它将被再次导出,主场景将重新加载它。)

从自定义脚本加载预制体或场景

如果您想从您的脚本中引用并加载预制体,可以声明一个 AssetReference 类型。 这是一个最小示例:

🏇 导出动画

Needle Engine 支持 Unity 动画功能的相当大且强大的子集:

  • Timeline 包括激活轨道、动画轨道、轨道偏移

  • Animator 包括顶层状态转换

    • 目前不支持 Blend trees。

    • 目前不支持 Sub state machines。

  • AnimationClips 包括循环模式

  • 程序化动画 可以通过脚本创建

当前的一个限制是材质在导出时不会被复制——例如,如果您想用不同的颜色动画同一个材质,您当前需要将材质分成两部分。

🌍 导出天空盒

Unity 天空盒和自定义反射(如果有)在导出时会被烘焙成纹理,并自动在 NEEDLE_lightmaps 扩展中导出。

要更改天空盒分辨率,您可以向场景添加一个 SkyboxExportSettings 组件。

如果您完全不想在 glb 文件中导出天空盒,可以取消勾选 GltfObject 组件上的 Embed Skybox 选项。

✨ 导出材质

基于物理的材质 (PBR)

默认情况下,材质在导出时会被转换为 glTF 材质。glTF 支持基于物理的材质模型,并有一些扩展有助于表示复杂材质。

为了完全控制导出内容,强烈建议使用 UnityGltf 提供的 glTF 材质:

  • PBRGraph

  • UnlitGraph

::: tip 拿不准的时候,使用 PBRGraph 着色器 PBRGraph 材质具有很多功能,比 Standard 或 URP/Lit 多得多。其中包括折射、虹彩、光泽等高级功能。此外,使用 PBRGraph 和 UnlitGraph 的材质会按原样导出,无需转换。 :::

可以开箱即用转换的材质:

  • BiRP/Standard

  • BiRP/Autodesk Interactive

  • BiRP/Unlit

  • URP/Lit

  • URP/Unlit

自定义着色器

要导出自定义的无光照着色器(例如使用 ShaderGraph 创建的),请将 ExportShader 资源标签添加到您要导出的着色器上。资源标签可在 Inspector 窗口底部看到。

限制

  • 我们目前仅支持自定义的无光照着色器——尚不正式支持 Lit 着色器转换。

  • 自定义 Lit 着色器目前处于实验阶段。并非所有渲染模式都受支持。

  • 不支持自定义着色器的阴影接收

  • 不支持带有自定义着色器的蒙皮网格

  • 由于从 Unity 到 three.js 和 glTF 会发生多次坐标系更改,因此可能需要进行一些更改才能使高级效果生效。我们尝试在导出时转换数据,但可能无法捕捉到所有需要转换的情况。

    • Unity 中的 UV 坐标从左下角开始;glTF 中从左上角开始。

    • glTF 中的 X 轴值与 Unity 中的相反。这是左手坐标系到右手坐标系更改的一种变体。着色器中使用的数据可能需要在 X 轴上进行翻转才能正确显示。

::: note 非 glTF 规范的一部分 请注意,自定义着色器并非 glTF 规范的官方部分。我们实现的自定义着色器使用一个称为 KHR_techniques_webgl 的扩展,该扩展将 WebGL 着色器代码直接存储在 glTF 文件中。生成的资源将在基于 Needle Engine 的查看器中工作,但在其他查看器中可能无法正确显示。 :::

💡 导出光照贴图

处理多个场景时,禁用“自动生成”并显式烘焙光照贴图。否则,Unity 会在场景切换时丢弃临时光照贴图。

推荐的光照贴图设置

  • 光照贴图编码:普通质量(在 Project Settings > Player 中调整)

  • Progressive GPU(更快,对于小场景通常足够准确)

  • 非定向光照贴图

  • 最大光照贴图尺寸 2k(可以更高,但预计文件会很大)

  • 每个场景最多 4x 2k 光照贴图(可以更高,但预计文件会很大)

  • 压缩光照贴图 关闭(提高质量;否则导出时会再次压缩)

混合烘焙和非烘焙对象

Unity 处理灯光和环境的方式与 three.js 处理方式之间没有 100% 的映射。例如,Unity 对已烘焙光照贴图和未烘焙光照贴图的对象有完全独立的执行路径(已烘焙光照贴图的对象不接收环境光,因为环境光已烘焙到它们的贴图中),而 three.js 在这方面没有区分。

这意味着为了获得最佳结果,如果您在场景中混合烘焙和非烘焙对象,我们目前推荐特定设置:

环境照明:Skybox
环境强度:1
环境颜色:黑色

如果您的场景中没有烘焙对象,则以下设置也应产生正确结果:

环境照明:Color
环境颜色:任意

页面由 AI 自动翻译

预制体可以作为独立的 glTF 文件导出并在运行时实例化。要将预制体导出为 glTF,只需引用预制体资源(来自项目视图而非场景中)。

例如,在上,每个部分都被设置为一个独立的场景,并在导出时打包成多个 glb 文件,我们按需加载这些文件:

2022-08-22-172605_Needle_Website_-Website-_Windows,_Mac,Linux-_U

@

Needle Engine 是首批支持新的 的引擎之一。 这意味着几乎所有属性,包括脚本变量,都是可动画化的。

image
image

其他材质使用属性名称启发式进行转换。这意味着根据您的材质和着色器使用的属性名称,您可能需要重构您的自定义着色器的属性以使用 URP/Lit 或 PBRGraph 的属性名称,或者将材质导出为。

2022-08-22-172029_Needle_Website_-CustomShaders-_Windows,_Mac,_Lin
2022-08-22-171650_Needle_-_Google_Chrome

要导出光照贴图,只需在 Unity 中。光照贴图将自动导出。

2022-08-22-171356_Needle_Website_-Lightmaps-_Windows,_Mac,Linux-

2021.3+

2020.3+

从您的脚本中
我们的网站
code ts twoslash
glTF 扩展 KHR_ANIMATION_POINTER
生成光照贴图
自定义着色器
needle.tools
项目结构
脚本文档中的 AssetReference 部分