如何从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中下载并打开模型
• 文件 - ＆gt;导出 - ＆gt; Collada（。dae）

查看：

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

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

我也尝试过Blender的three.js JS导出器插件，但在这种情况下（使用相应的演示模板），我得到的是JS异常“无法读取未定义的属性'opacity'。

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

感谢， - 大卫

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.GLTFLoader（）进行加载。