Problem with GTLFLoader

Questions
1

Hi,

I’m having trouble loading a glTF 3D model into my scene.

It appears miscolored, very small & not scalable (i.e. if I try to gltf.scene.scale.set(x, y, z), it just disappears) and not even centred (gltf.scene.position(x, y, z) not having any effect).

However, it works perfectly well using a glTF viewer such as https://gltf-viewer.donmccurdy.com/.

image
image3104×1880 319 KB

Here’s my code:

    new GLTFLoader().load(
      'http://localhost:5000/nike2.glb',
      (gltf) => {
        if (didCancel) { return; }
        // gltf.scene.scale.set(20, 20, 20);
        // gltf.scene.rotation.set(Math.PI / 8, -Math.PI / 1.5, Math.PI / 8);
        scene.add(gltf.scene);
      },
      undefined,
      (error) => { console.log(error); },
    );

Any idea what’s happening?

2

The viewer automatically updates camera settings to optimal values based on the model’s dimensions. It also applies a HDR environment map which is probably missing in your app.

Try to move your camera more close to the scene and apply an environment map like in this example. Also use this line to configure sRGB color space conversion:

renderer.outputEncoding = THREE.sRGBEncoding;

BTW: The following line of code is not value:

it should be:

gltf.scene.position.set(x, y, z);
3

That’s right! It’s missing the environment map. Could you tell me how I should proceed to add it to the model’s texture? Like for example if I want to set the one they have, the ‘Venice Sunset’ one. I’ve tried digging into their source code but I can’t find the piece that’s responsible for it!

Thanks a lot for all your help!

4

Do it like in this example: https://threejs.org/examples/webgl_tonemapping

The relevant code section is:

5

Amazing, it works great. For people who might need my code, you can find it here : https://github.com/theoavoyne/3d-modeling/blob/4984ab02750933639bef6fd7b8db1ed9b1b23a79/src/hooks/useAnim.js.

Thanks a lot Mungen for your help!

1 Like