THREE.js не загружает мои файлы .mtl и .obj

Question

Я пытаюсь создать средство просмотра 3d-модели с помощью three.js, но оно не загружает файлы .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 .

three.js r92.