三.js |从 Blender 模型应用纹理答案

【问题标题】：Three.js | applying texture from Blender model三.js |从 Blender 模型应用纹理
【发布时间】：2018-10-16 13:57:29
【问题描述】：

我正在使用 turbosquid 的免费 3d 模型。该模型使用的纹理如下所示：

在 Blender 中看起来不错：

但是一旦导出到three.js，好像贴图不跟uv贴图：

这是我正在使用的代码：

var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
        ship = new THREE.Mesh(geometry, materials[0]);
        scene.add(ship);
    }
);

这是我从 Blender 导出的 json：

我错过了什么？非常感谢您的帮助！

【问题讨论】：

您通常不需要手动加载纹理。尝试像ship = new THREE.Mesh(geometry, materials[0]); 那样创建您的网格。所以不要创建新材质而是使用回调的参数。
@Mugen87 你说得对，我已经编辑了我的问题，它不那么令人困惑。我仍然得到相同的结果：/
你可以试试这个GLTFExporter。您可以使用GLTFLoader 来加载资产。 JSON Blender 导出器有点问题...
@Mugen87 GLTFExporter 给了我这个错误：“three.min.js:480 THREE.Object3D.add: object not an instance of THREE.Object3D.”。我找不到从 Blender 中正确导出场景的方法，我会遗漏什么？
您可以共享.blend 文件吗？也可以试试KhronosGroup/glTF-Blender-Exporter。

标签： three.js textures blender

【解决方案1】：

这个模型有一些小的复杂性，我认为这会给 Blender 出口商带来问题。它们没有“错误”，但出口商在不清理的情况下很难处理。您可以手动修复这些问题（在 Blender 中打开 .blend 文件，应用修改器，删除除漫反射之外的所有纹理），但最简单的方法可能是将 Turbosquid 提供的 OBJ 版本转换为 glTF。转到Cesium OBJ->glTF converter（或 OBJ2GLTF，如果你需要一些程序化的东西）并拖入 OBJ/MTL/纹理将给出正确的结果。 注意：您需要将sh3.jpg 文件移动到与 MTL 文件相同的目录中；它不应该在Textures/ 文件夹中。

https://gltf-viewer.donmccurdy.com/ 上的结果 — 使用 three.js r92 和 THREE.GLTFLoader。

【讨论】：