Three.js |从Blender模型应用纹理

Question

我正在使用来自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：

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

Answer 1

此模型中存在一些小的复杂性，我认为这会给Blender出口商带来问题。他们并没有“错误”＃34;但他们很难让出口商在没有清理的情况下处理。您可以手动修复它们（在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。