CODEWITHSUNDEEP
three.js3d3d-model
Zack Lee
Zack Lee

Reputation: 3044

Three.js obj/mtl model is suddenly shown black

My three.js app used to work fine but when I tried the app today, the obj/mtl model is suddenly shown just black.

So this is how it used to look like: enter image description here

But now it looks like this although I didn't change any code: enter image description here

Here's my relevant code:

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);
            });
        });

You can see my full code from https://glitch.com/edit/#!/cuinjune-face-dj

I also tried using the old version of OBJLoader.js and MTLLoader.js but it still doesn't fix the problem.

What could be causing this issue and how can I fix this?

Upvotes: 1

Views: 511

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Like already mentioned at GitHub, you are mixing different versions of three.js.You are importing the latest versions of OBJLoader and MTLLoader but use the three.js main library from release r110.

Try it with these imports and it should work:

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/MTLLoader.js"></script>

Updated glitch: https://chain-efficacious-professor.glitch.me

Upvotes: 2

Related Questions