THREE.js 不会加载我的 .mtl 和 .obj 文件

Question

我正在尝试使用 Three.js 创建 3D 模型查看器，但它不会加载任何 .mtl 和 .obj 文件。我遵循了本教程https://manu.ninja/webgl-3d-model-viewer-using- Three-js/但它只加载女性模型。

这是我的脚本：

            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setBaseUrl('models/rayman2');
            mtlLoader.setPath('models/rayman2');
            mtlLoader.load('rayman_2_mdl.mtl', function (materials) {

                materials.preload();

                materials.materials.default.map.magFilter = THREE.NearestFilter;
                materials.materials.default.map.minFilter = THREE.LinearFilter;

                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials(materials);
                objLoader.setPath('models/rayman2');
                objLoader.load('rayman_2_mdl.obj', function (object) {

                    object.position.x = 0;
                    object.position.y = 0;
                    object.position.z = 0;
                    scene.add(object);

                }, null, null);

            });

Answer 1

您可以在这里将文件转换为glTF，然后按如下方式加载：

var loader = new THREE.GLTFLoader();
loader.load('rayman.glb', function (gltf) {
  var content = gltf.scene;
  content.traverse((node) => {
    if (!node.isMesh) return;
    node.material.side = THREE.DoubleSide;
    node.material.alphaTest = 0.25;
    node.material.needsUpdate = true;
  });
  scene.add(content);
}, undefined, function (e) {
  console.error(e);
});

转换为 glTF 只是简化了事情。其他更改修复了模型中的问题：

THREE.DoubleSide

确保角色头发的两侧都可见，

alphaTest

确保纹理中的透明度正确显示。

请参阅 THREE.Material 和 THREE.GLTFLoader 的文档。

三.js r92。

Answer 2

我最近在试图解决这个问题上也经历了一段糟糕的时光。我发现有效的修复是完全荒谬的，第一，确保你的图像比例设置为1，但似乎你的是默认的，这是荒谬的事情....

mtlLoader.setBaseUrl('models/rayman2'); mtlLoader.setPath('models/rayman2');

不正确，您需要在路径末尾添加 /，这样它就会显示如下：

mtlLoader.setBaseUrl('models/rayman2/'); mtlLoader.setPath('models/rayman2/');

我在我的项目中改变了这个，不知何故，它起作用了