javascript - 如何将模型和相关纹理从 Blender 导入到 Three.js？

Question

我是 Open/WebGL 的新手，在从下载的 Blender 模型中获取纹理/皮肤以显示在 three.js 中时遇到问题。我可以从 Chrome 的网络选项卡中验证它正在下载所有纹理文件，但由于某种原因它们没有被渲染。

我使用 webgl_loader_collada.html 示例作为将示例 3D 模型从搅拌机导入到 three.js 的基础。

作为输入，我使用了 NASA 网站上提供的 MESSENGER 模型。作为参考，可以在此处查看NASA 3D 模型的完整图库。

我目前的步骤：

• 在 Blender 中下载并打开模型
• 文件->导出-> Collada (.dae)

查看：

• 修改 threejs/examples/webgl_loader_collada.html 的副本以指向导出的 .dae 文件
• 删除第 59 行的缩放。

使用 Blender 导出中的默认选项，生成的渲染没有所有纹理。如果我启用“包含材质纹理”，我最终会在模型的主要部分呈现金色，但没有映射其他纹理，太阳能电池板也变得完全黑色。或者，如果我还选中“包括 UV 纹理”，我会得到一个没有纹理的全灰色渲染。

我还尝试了 Blender 的 three.js JS 导出器插件，但在这种情况下（使用适当的演示模板）我得到的只是一个 JS 异常“无法读取未定义的属性'不透明度'”。

是我在翻译过程中做错了什么，还是源模型有问题？如果是后者，我该如何修复原始模型或其导出形式？

谢谢， - 大卫

Answer 1

非常好的项目，感谢您的链接。

对于 collada 出口

• 不包括 UV 纹理
• 包括材质纹理
• 不要复制（您可以使用提供的纹理图像）
• 仔细检查 .dae 文件中的纹理路径，在<library_images>标签中，使用相对路径

我自己尝试过，如果你想要https://github.com/vincent/three.js-nasa，在这里，但它并不完美，例如没有使用法线贴图的箔效果。

Answer 2

也许尝试 GLTF 格式而不是 collada？它是一种更现代的格式，专为实时/网络资产交付而设计并被广泛采用。

搅拌机出口商： https ://github.com/KhronosGroup/glTF-Blender-Exporter

导出为 .glb 文件后，可以将其拖到此处进行检查：

https://gltf-viewer.donmccurdy.com/

然后使用 THREE 中的 THREE.GLTFLoader() 来加载它。