Unity场景转Three.js：免费插件导出与Web 3D应用实践

1. 项目概述：为什么我们需要 UnityToThreeExporter？

如果你是一个 Unity 开发者，同时又对 Web 3D 应用、在线展厅或者基于浏览器的游戏感兴趣，那你大概率遇到过这个困境：辛辛苦苦在 Unity 里搭建了一个精美的场景，有复杂的模型、精心调整的光照和材质，但怎么把它搬到网页上，让用户不用下载几个 G 的客户端，打开浏览器就能流畅体验呢？这就是UnityToThreeExporter这个工具诞生的核心原因。

简单来说，UnityToThreeExporter 是一个免费的 Unity 编辑器插件。它的作用就像一个“翻译官”，能把 Unity 引擎里用 C# 和其自有数据格式描述的场景、模型、材质、光照等信息，“翻译”成 Web 端最流行的 3D 图形库three.js能够理解和加载的 JSON 格式文件。这样一来，你就能在网页里，用 three.js 近乎 1:1 地复现出 Unity 编辑器里的视觉效果。我最近在一个需要将建筑可视化项目进行 Web 端展示的需求中亲测了它，整个过程虽然有些“复古”（因为插件年久失修），但核心功能依然可用，并且是完全免费的，对于预算有限或者想快速验证想法的个人开发者和小团队来说，价值巨大。

这个工具特别适合以下几类人：独立游戏开发者想将游戏的一部分（如角色展示、场景漫游）做成网页版 Demo 用于宣传或募资；教育培训机构需要将复杂的 3D 教学模型（如机械结构、生物细胞）通过网页分享给学生；电商或房地产公司希望制作在线的 3D 产品展示或虚拟看房。它的核心价值在于，复用你在 Unity 中已有的、成熟的工作流和资产，避免了为 Web 端重新建模、重新制作材质的巨大成本。

2. 核心原理与工作流程拆解

在深入实操之前，我们有必要搞清楚这个“翻译官”到底是怎么工作的。理解其原理，能帮助你在后续使用中更好地预测结果、排查问题。

2.1 数据转换的核心：从 Unity 到 Three.js 的映射

Unity 和 three.js 是两套不同的系统。Unity 是一个完整的、封闭的实时渲染引擎，而 three.js 是一个运行在浏览器 JavaScript 环境中的底层图形库。UnityToThreeExporter 的核心任务，就是建立两者之间关键概念的映射关系。

• 几何体（Mesh）：这是最基础的转换。Unity 中的MeshFilter组件存储的顶点（Vertices）、三角面（Triangles/Indices）、法线（Normals）、UV 坐标等信息，会被提取并按照 three.js 的BufferGeometry格式重新组织，写入 JSON。这里需要注意的是坐标系差异：Unity 是左手坐标系（Y轴向上），而 three.js 默认是右手坐标系（Y轴向上）。插件内部会处理这个转换，但有时在旋转等数据上可能会留下隐患，我们后面会提到。
• 材质（Material）：这是转换中最复杂、也最容易出问题的一环。Unity 的材质系统（无论是 Standard, URP, HDRP）都非常强大且复杂，包含了大量的贴图（Albedo, Normal, Metallic, Emission等）和着色器（Shader）逻辑。而 three.js 的材质系统相对简单。插件主要做的是“降级”和“近似”：
  • 它会尝试提取 Unity 材质的主颜色（Albedo Color）和主贴图（Main Texture）。
  • 对于法线贴图（Normal Map）、高光/金属度贴图，如果 three.js 对应材质类型支持，也会进行导出。
  • 但是，任何复杂的自定义 Shader Graph 或 Surface Shader 效果，几乎都无法被正确导出。导出的结果通常是一个基础的MeshLambertMaterial或MeshPhongMaterial，仅包含漫反射颜色和贴图。
• 变换（Transform）：物体的位置（Position）、旋转（Rotation）、缩放（Scale）信息会被直接导出。这是转换中相对可靠的部分。
• 光照（Light）：Unity 中的平行光（Directional Light）、点光源（Point Light）、聚光灯（Spot Light）会被转换为 three.js 中对应的光源类型。但光照的强度、颜色范围、阴影参数（Bias, Normal Bias等）的映射可能不完全精确，需要在 three.js 端进行二次调整。
• 相机（Camera）：相机的视野（FOV）、近裁面/远裁面（Near/Far Clip Plane）等参数会被导出。这对于确定网页中的初始视角至关重要。

整个导出过程，可以理解为插件遍历你指定的 Unity 场景根节点，递归地访问每一个 GameObject，检查其上的组件，然后将这些组件的数据“扁平化”为一个巨大的、结构化的 JSON 对象。

2.2 插件的局限性与版本“坑点”

根据其 GitHub 主页的说明，这个插件目前只兼容到 Unity 5.4。这是一个非常古老的版本（当前主流是 2022 LTS 或 2023 LTS）。这意味着如果你在更新的 Unity 版本中使用，肯定会遇到 API 不兼容导致的编译错误或运行时异常。这是使用这个工具前必须明确的第一大前提。

为什么它停更了？因为 Unity 的编辑器 API 迭代很快，而 three.js 的版本也在不断更新。维护这样一个桥梁式的工具需要持续投入，但需求相对小众。不过，正因为其开源，我们有机会通过修改部分源码来适配新版本，这也是后面实操中会涉及的高级技巧。

它的局限性也很明显：

1. 材质支持弱：复杂材质、Shader 效果、后处理（Post-Processing）基本丢失。
2. 动画不支持：Animator或Animation组件控制的骨骼动画、形变动画无法导出。
3. 物理系统不支持：Collider 和 Rigidbody 信息虽然声称支持，但导出的更多是碰撞体的几何形状，用于视觉参考，无法直接在 three.js 中复现物理交互。
4. 脚本逻辑丢失：所有用 C# 编写的游戏逻辑全部无法导出。Web 端的交互必须用 JavaScript/TypeScript 在 three.js 中重写。

所以，请务必调整你的预期：UnityToThreeExporter 最适合导出静态的、材质相对简单的展示型场景。对于动态的、交互复杂的项目，它可能只是一个“模型和场景结构导出器”。

3. 环境准备与插件安装

虽然插件标称只支持到 Unity 5.4，但经过我的测试和代码修改，在 Unity 2018.4 LTS 甚至 2020.3 LTS 上也能成功运行并导出核心数据。这里我以Unity 2018.4 LTS这个相对稳定且 API 变化不是特别剧烈的版本为例，演示如何让它“起死回生”。

3.1 获取插件源码

首先，你需要从 GitHub 获取插件的源代码。

1. 访问仓库：https://github.com/nickjanssen/UnityToThreeExporter。
2. 点击绿色的 “Code” 按钮，选择 “Download ZIP”，将整个项目下载到本地。
3. 解压 ZIP 包，你会看到一个名为UnityToThreeExporter-master的文件夹，里面包含一个ThreeExporter目录。这个ThreeExporter就是我们需要的 Unity 项目。

3.2 在旧版 Unity 中打开并编译

1. 启动你的 Unity 2018.4 LTS（或其他你打算尝试的版本，建议先用 2018.4）。
2. 选择Open Project，浏览到刚才解压的ThreeExporter文件夹，打开它。
3. Unity 会开始导入项目。由于项目古老，可能会提示一些 API 过时的警告，暂时忽略。
4. 打开项目后，在 Project 窗口找到Assets/ThreeExporter目录。里面应该有一个Editor文件夹，存放着插件的核心 C# 脚本。
5. 此时，尝试点击菜单栏Window，你应该能看到一个Three.js Exporter的选项。如果能看到，恭喜，插件在旧版本上可能直接就能用。但更可能的情况是，点击它会报编译错误。

3.3 修复常见的编译错误（关键步骤）

当你在新版 Unity 打开旧项目时，最常见的错误是某些命名空间或 API 已经废弃。我们需要手动修改几处代码。找到Assets/ThreeExporter/Editor/ThreeExporter.cs文件，用 Visual Studio 或任何代码编辑器打开。

错误1：UnityEditorInternal.InternalEditorUtility相关代码旧代码中可能使用了InternalEditorUtility来获取所有标签（Tags）和图层（Layers），但这个 API 在新版本中可能已变更。查找类似下面的代码：

// 可能旧的写法 string[] tags = UnityEditorInternal.InternalEditorUtility.tags; string[] layers = UnityEditorInternal.InternalEditorUtility.layers;

将其修改为 Unity 新版中通用的获取方式：

// 修改后的写法 string[] tags = UnityEditorInternal.InternalEditorUtility.tags; // 对于 layers，可能需要通过序列化对象获取，或者如果只是需要名称，可以这样简单处理（但可能不完整）： List<string> layerNames = new List<string>(); for (int i = 0; i < 32; i++) { string layerName = LayerMask.LayerToName(i); if (!string.IsNullOrEmpty(layerName)) { layerNames.Add(layerName); } } // 然后将 layerNames 用于你的逻辑

注意：这是一个简化的修复。如果插件深层逻辑严重依赖旧的 InternalEditorUtility API，修复会变得复杂。对于基础导出功能，上述修改可能足够。

错误2：PrefabUtility.GetPrefabType已废弃在 Unity 2018.3 之后，Prefab 系统进行了大改，GetPrefabType方法被废弃。在代码中搜索这个方法：

PrefabType prefabType = PrefabUtility.GetPrefabType(gameObject);

需要将其替换为新的 Prefab 系统 API：

#if UNITY_2018_3_OR_NEWER PrefabAssetType prefabAssetType = PrefabUtility.GetPrefabAssetType(gameObject); bool isPrefabInstance = PrefabUtility.IsPartOfAnyPrefab(gameObject); // 根据你的逻辑，用 prefabAssetType 和 isPrefabInstance 判断 #else // 保留旧的 PrefabUtility.GetPrefabType 代码 PrefabType prefabType = PrefabUtility.GetPrefabType(gameObject); #endif

由于我们的目标是让插件运行起来，如果这个判断不是核心导出逻辑（比如只是用来记录或跳过某些对象），一个更粗暴但有效的办法是直接注释掉相关代码块，或者返回一个默认值。

错误3：其他过时的 API（如GUILayout.BeginHorizontal/EndHorizontal的返回值）一些 UI 相关的 API 可能从返回void改为了返回bool或Rect。根据编译器的错误提示，进行相应调整。通常这些修改不影响核心功能。

修改并保存后，回到 Unity，错误应该会减少或消失。如果还有错误，继续根据错误信息搜索和修改。核心原则是：保证代码能编译通过，即使某些边缘功能被我们暂时阉割掉。我们的首要目标是让导出 Mesh、Transform、基础材质的功能跑通。

4. 实操：导出你的第一个 Three.js 场景

假设我们已经修复了代码，插件菜单可以正常打开。现在我们来导出一个简单的场景。

4.1 场景准备与优化

为了获得最好的导出效果，减少问题，在导出前请对你的 Unity 场景做以下优化：

1. 简化材质：将所有需要导出的物体的材质，尽可能替换为 Unity 的标准材质（Standard Shader），并且只使用 Albedo 颜色和 Albedo 贴图。暂时移除法线贴图、金属度贴图等。你可以创建一份专门用于导出的“简化材质”副本。
2. 检查模型比例：确保你的模型比例在 Unity 中是合理的（1单位=1米）。three.js 中默认也是这个比例，可以避免导入后模型过大或过小。
3. 烘焙光照（重要）：由于动态光照导出可能不完美，对于静态场景，强烈建议在 Unity 中烘焙光照贴图（Lightmap）。UnityToThreeExporter 支持导出 Lightmap。在Window -> Rendering -> Lighting Settings中，勾选Baked Global Illumination，然后点击Generate Lighting。烘焙完成后，场景的光照信息就会存储在光照贴图中，导出时会被包含进去，在 three.js 中通过加载这张贴图来还原静态光照效果，效果远好于尝试导出动态光源。
4. 组织场景结构：将你想要导出的所有物体放在一个共同的空 GameObject 下，作为根节点。这样在导出时，只需要选中这个根节点，就能导出整个子树。

4.2 执行导出操作

1. 在 Unity 编辑器中，选中你准备好的场景根节点。
2. 点击菜单栏Window -> Three.js Exporter，打开导出窗口。
3. 在导出窗口中，你应该能看到当前选中物体的路径。窗口通常会有一些选项，比如是否导出材质、是否导出光照贴图等。确保这些选项勾选。
4. 点击Export或Export Selected按钮。
5. 系统会弹出一个文件保存对话框。选择一个位置（例如你的 Web 项目目录），输入文件名（如my_scene），保存类型为.json。
6. 点击保存。Unity 编辑器可能会卡顿几秒到几分钟，取决于场景复杂度。导出完成后，你会在目标文件夹得到一个.json文件，同时通常还会有一个同名的_Textures文件夹，里面包含了从材质中提取出来的所有贴图。

4.3 在 Three.js 中加载导出的场景

现在，我们有了 JSON 文件和一个贴图文件夹。接下来就是在网页中使用 three.js 来加载它。

1. 搭建基础 Three.js 项目：创建一个标准的 HTML 文件，引入 three.js 库。你可以从 CDN 引入：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Unity Exported Scene</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="main.js"></script> <!-- 我们的加载脚本 --> </body> </html>

2. 编写加载脚本（main.js）：这是核心步骤。插件导出的 JSON 格式是为 three.js 的THREE.ObjectLoader设计的。

// main.js let scene, camera, renderer; init(); animate(); function init() { // 1. 创建基础场景 scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // 2. 添加基础光照（作为备用，如果导出的光照不理想） const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); // 3. 使用 ObjectLoader 加载导出的场景 const loader = new THREE.ObjectLoader(); // 注意：这里需要启动一个本地服务器来加载文件，直接打开HTML文件会因为CORS策略失败 loader.load( './my_scene.json', // 你的JSON文件路径 function (obj) { // 加载成功回调 // `obj` 可能是一个场景(Scene)或一个组(Group) scene.add(obj); console.log('Scene loaded successfully:', obj); // 尝试调整相机位置，使其能看到整个场景 // 你可以先导出时记录下Unity中相机的位置，或者在这里计算场景的包围盒 const box = new THREE.Box3().setFromObject(obj); const center = box.getCenter(new THREE.Vector3()); const size = box.getSize(new THREE.Vector3()); const maxDim = Math.max(size.x, size.y, size.z); const fov = camera.fov * (Math.PI / 180); let cameraZ = Math.abs(maxDim / (2 * Math.tan(fov / 2))); cameraZ *= 1.5; // 稍微拉远一点 camera.position.copy(center); camera.position.z += cameraZ; camera.lookAt(center); }, function (xhr) { // 加载进度回调 console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function (error) { // 加载失败回调 console.error('An error happened during loading:', error); } ); // 4. 窗口大小变化响应 window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }

3. 启动本地服务器：由于 JavaScript 的安全限制，直接双击 HTML 文件通过file://协议加载本地 JSON 文件会失败。你需要一个本地 HTTP 服务器。
   • 方法一（推荐）：如果你安装了 Node.js，可以在项目根目录打开终端，运行npx serve .或npx http-server。
   • 方法二：使用 Python。在项目根目录运行python -m http.server(Python 3) 或python -m SimpleHTTPServer(Python 2)。
   • 方法三：使用 VSCode 的 Live Server 插件。
4. 访问页面：打开浏览器，访问http://localhost:端口号（例如http://localhost:8080）。如果一切顺利，你应该能看到从 Unity 导出的场景在浏览器中渲染出来！

5. 导出结果深度解析与问题排查

第一次导出加载，大概率不会完美。下面我们来逐一分析可能遇到的问题和解决方案。

5.1 材质问题：为什么我的模型是粉色/黑色的？

这是最常见的问题。粉色（或洋红色）在 three.js 中通常是材质加载失败的标志。

• 原因1：贴图路径错误。导出的 JSON 中记录的贴图路径是相对于 Unity 项目的绝对路径或相对路径，在 Web 服务器上自然找不到。
  • 排查：打开导出的.json文件，搜索map或texture字段，查看其url值。它可能类似于"url": "C:/MyProject/Assets/Textures/MyTexture.png"。
  • 解决：你需要手动将_Textures文件夹里的所有贴图，复制到你的 Web 项目目录下（例如一个textures文件夹），然后修改 JSON 文件中的贴图路径为相对路径，如"url": "textures/MyTexture.png"。或者，更高效的方法是在 three.js 加载后，遍历场景中的材质，动态替换贴图的路径。
  • 脚本修复示例：在loader.load的成功回调中，添加贴图路径重写的逻辑：

  function fixTexturePaths(object) { object.traverse(function (child) { if (child.isMesh && child.material) { const materials = Array.isArray(child.material) ? child.material : [child.material]; materials.forEach(mat => { if (mat.map) { // 假设我们把所有贴图都放在了 `textures/` 文件夹下 const oldPath = mat.map.image.currentSrc || ''; const fileName = oldPath.split('/').pop(); // 提取文件名 const textureLoader = new THREE.TextureLoader(); mat.map = textureLoader.load(`textures/${fileName}`); } // 同样处理法线贴图、高光贴图等 if (mat.normalMap) { /* ... */ } }); } }); } // 在加载回调中调用 loader.load('./my_scene.json', function (obj) { fixTexturePaths(obj); scene.add(obj); // ... });

• 原因2：材质类型不支持。Unity 的复杂材质被导出为 three.js 不认识的材质类型。
  • 排查：查看控制台（Console）是否有 WebGL 警告或错误，例如“未识别的材质类型”。
  • 解决：在fixTexturePaths函数中，可以强制替换材质类型。例如，将所有材质替换为THREE.MeshLambertMaterial或THREE.MeshPhongMaterial，并只保留基础颜色和贴图属性。

  function replaceMaterials(object) { object.traverse(function (child) { if (child.isMesh && child.material) { const materials = Array.isArray(child.material) ? child.material : [child.material]; const newMaterials = materials.map(oldMat => { const newMat = new THREE.MeshLambertMaterial(); newMat.color.copy(oldMat.color || new THREE.Color(0xffffff)); if (oldMat.map) { newMat.map = oldMat.map; } // 复制其他你需要的属性，如透明度 newMat.transparent = oldMat.transparent || false; newMat.opacity = oldMat.opacity !== undefined ? oldMat.opacity : 1.0; return newMat; }); child.material = newMaterials.length === 1 ? newMaterials[0] : newMaterials; } }); }

5.2 光照问题：场景一片漆黑或过亮

• 原因1：动态光源未正确导出或转换。插件对光源的导出可能不完整。
  • 解决：如前所述，优先使用烘焙光照。如果必须用动态光，在 three.js 中手动创建光源，根据 Unity 场景中的光源参数进行近似设置。可以尝试在导出后，注释掉 three.js 中手动添加的AmbientLight和DirectionalLight，看看导出的光源是否生效。
• 原因2：光照贴图未正确应用。
  • 排查：检查导出的 JSON 中，Mesh 的材质是否有lightMap属性，以及其指向的贴图文件是否被正确复制到 Web 项目。
  • 解决：确保光照贴图文件（通常在_Textures文件夹里，名字可能包含Lightmap）被复制，并在材质中正确加载。在 three.js 中，需要设置材质的lightMap属性，并且必须将材质的needsUpdate设为true，同时确保渲染器支持WebGLRenderer的physicallyCorrectLights或正确配置。

5.3 模型位置/旋转错乱

• 原因：坐标系转换残留问题。虽然插件处理了左手系到右手系的转换，但某些旋转或缩放数据的处理可能有误。
  • 排查：在 Unity 中，记录一个关键物体的 Transform 值（Position, Rotation, Scale）。在 three.js 加载后，通过console.log(child.position, child.rotation, child.scale)打印同一个物体的值，进行对比。
  • 解决：如果发现旋转不对（比如物体躺倒了），可能是欧拉角顺序不同。可以在 three.js 中手动调整物体的旋转：obj.rotation.set(x, y, z)。或者，在导出前，尽量让 Unity 中的物体旋转值归零，将旋转信息烘焙到模型的顶点数据中（在3D建模软件中操作）。

5.4 性能问题：加载缓慢或卡顿

• 原因1：单个 JSON 文件过大。复杂的场景会导致导出的 JSON 文件达到几十甚至上百 MB。
  • 解决：
    1. 分块导出：不要导出整个大型场景。将场景按区域或功能分成多个部分，分别导出为多个 JSON 文件，在 three.js 中按需加载。
    2. 模型压缩：在 Unity 导出前，使用 Mesh Compression 或第三方工具（如 Simplygon、MeshOptimizer）减少模型面数。
    3. 纹理压缩：将贴图转换为 Web 友好的格式（如 JPEG 用于颜色贴图，PNG 用于带透明通道的贴图），并降低分辨率。可以使用 Unity 的 Texture Import Settings 进行压缩，或者用外部工具如 TinyPNG。
• 原因2：Draw Call 过高。即使面数不多，材质种类太多也会导致性能下降。
  • 解决：在 Unity 中，尽量合并材质，让多个物体共享同一个材质。使用纹理图集（Texture Atlas）将多个小贴图合并成一张大贴图。这样在 three.js 中，渲染状态切换减少，性能提升显著。

6. 高级技巧与优化建议

掌握了基础导出和问题修复后，下面是一些能极大提升体验和效果的进阶技巧。

6.1 编写自定义导出后处理脚本

与其手动修改 JSON 文件，不如写一个小的 Node.js 或 Python 脚本，在导出后自动完成一系列修复工作，比如：

• 批量重写贴图路径。
• 简化材质结构，移除 three.js 不支持的属性。
• 压缩 JSON，移除不必要的空格和换行。
• 将大的 JSON 文件拆分成场景和资源两部分。

这能让你从重复劳动中解放出来，实现一键导出和部署。

6.2 与 glTF 格式对比

除了这个插件，Unity 官方也支持导出glTF格式（通过 UnityGltf 等插件）。glTF 是 Khronos Group 制定的开放标准，被誉为“3D 界的 JPEG”，得到了 three.js 的原生优秀支持。

• UnityToThreeExporter (JSON)：
  • 优点：免费、开源、直接导出 three.js 原生 JSON 格式，理论上控制更细。
  • 缺点：年久失修、兼容性差、功能有限、材质支持弱、需要大量后期处理。
• glTF 格式：
  • 优点：现代标准、广泛支持、工具链完善（如 Blender、各种引擎）、three.js 通过GLTFLoader加载效果非常好、支持动画、PBR 材质。
  • 缺点：可能需要额外的 Unity 插件（有些是付费的），导出设置需要学习。

个人建议：对于新的项目，尤其是需要动画和 PBR 材质的，优先考虑 glTF 导出方案。UnityToThreeExporter 更适合处理遗留的、静态的、材质简单的 Unity 项目，或者当你需要高度定制化的 three.js 数据结构时。

6.3 集成到现代前端工作流

如果你是在 Vue、React 等现代前端框架中使用 three.js，可以将加载过程封装成自定义 Hook 或组件。

例如，在 React Three Fiber（一个流行的 React three.js 渲染器）中，你可以这样使用：

import { useLoader } from '@react-three/fiber'; import { ObjectLoader } from 'three'; function ExportedScene({ url }) { const scene = useLoader(ObjectLoader, url); return <primitive object={scene} />; } // 然后在你的组件中 <Canvas> <ExportedScene url="./my_scene.json" /> </Canvas>

这样，场景加载、资源管理、销毁都能和 React 的生命周期完美结合。

6.4 调试利器：Three.js Inspector

在开发过程中，强烈推荐使用three.js的调试工具，比如three-inspector。它是一个浏览器书签工具，激活后可以像 Unity 编辑器一样，在网页中实时查看场景层级、物体属性、材质信息，并能动态修改参数。这对于排查“为什么这个物体不显示”、“这个材质属性是什么”等问题有巨大帮助。

使用方式：将它的书签拖到浏览器书签栏，在运行 three.js 应用的页面点击该书签，一个调试面板就会弹出。

7. 常见问题速查与解决清单

最后，我将实践中遇到的高频问题整理成表，方便你快速定位：

整个使用 UnityToThreeExporter 的过程，更像是一次考古和修复工作。它的价值不在于提供一套完美无缺的解决方案，而在于为你打开了一扇门，让你能够以较低的成本，将庞大的 Unity 生态资产迁移到开放的 Web 平台。理解其原理，耐心处理它的问题，你就能在 WebGL 的世界里，重现那些曾在 Unity 编辑器中令你满意的视觉成果。