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

Question

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

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

对于输入，我使用的是the MESSENGER model available from the NASA website。作为参考，可以查看 NASA 3D 模型的完整图库here。

我目前的步骤：

• 在 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()来加载它。