Three.js obj/mtl 模型突然变黑

Question

我的 three.js 应用程序曾经运行良好，但当我今天试用该应用程序时，obj/mtl 模型突然显示为黑色。

原来它是这样的：

虽然我没有更改任何代码，但现在它看起来像这样：

这是我的相关代码：

HTML:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
  <script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>

Three.js:

const scene = this.scene;
        const modelPath = 'assets/models/stereo/';
        const mtlLoader = new THREE.MTLLoader();
        mtlLoader.setCrossOrigin(true);
        mtlLoader.setPath(modelPath);
        mtlLoader.load("1281_HIFI_Stereo.mtl", function (materials) {
            materials.preload();
            const objLoader = new THREE.OBJLoader();
            objLoader.setCrossOrigin(true);
            objLoader.setMaterials(materials);
            objLoader.setPath(modelPath);
            objLoader.load("1281_HIFI_Stereo.obj", function (object) {
                object.name = "stereo";
                object.position.set(0, -15, -60);
                object.rotation.set(0, THREE.Math.degToRad(-90), 0);
                scene.add(object);
            });
        });

你可以从https://glitch.com/edit/#!/cuinjune-face-dj

看到我的完整代码

我也尝试过使用旧版本的OBJLoader.js和MTLLoader.js，但仍然没有解决问题。

是什么原因导致了这个问题，我该如何解决？

Answer 1

正如在 GitHub 中提到的，您正在混合不同版本的 three.js。您正在导入最新版本的 OBJLoader 和 MTLLoader，但使用 three.js 发布 r110.

的主库

尝试使用这些导入，它应该可以工作：

  <script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.110.0/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.110.0/examples/js/loaders/MTLLoader.js"></script>

已更新故障：https://chain-efficacious-professor.glitch.me

Three.js obj/mtl 模型突然变黑

Three.js obj/mtl model is suddenly shown black

3d

three.js

3d-model