.glb (.gltf) Model Not Rendering Properly using ThreeJS GLTFLoader()

Questions
, , ,
1

Hi everyone,

I have a .glb model that I want to load into my ThreeJS project and I successfully did so.
However, it isn’t rendered correctly (see pictures)

This is how it supposed to look like (I exported the same model to https://gltf-viewer.donmccurdy.com/):

Screenshot 2020-02-24 at 13.54.58
Screenshot 2020-02-24 at 13.54.581534×756 81.1 KB

And this is how it turned out:

Screenshot 2020-02-24 at 13.56.24
Screenshot 2020-02-24 at 13.56.242466×1160 95.9 KB

Using this code

    const scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    scene.background = new THREE.Color(0xdddddd);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 8;
    camera.position.y = 10;
    camera.position.z = 10;

    const controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener('change', renderer);
   
   const hlight = new THREE.AmbientLight (0xffffff,0.86);
    scene.add(hlight);

    directionalLight = new THREE.DirectionalLight(0xffffff,100);
    directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);
    const loader = new THREE.GLTFLoader();
          loader.load('./correct/scene.glb',
     ( gltf ) => {
    scene.add(gltf.scene)
    },
     ( xhr ) => {
         //progress
    },
     ( error ) => {
        console.log( error );
    }
);
const animate = () =>{
    render();
    requestAnimationFrame(animate)
}
    const render = () =>{
        requestAnimationFrame(render);
        renderer.render(scene,camera)
    }
    render();

The glb file:
glbtest.zip (2.3 MB)

As you can see, the light is not rendered correctly. Any idea what causes this and what the possible fixes are?

Thanks a lot!!

2

How does it look like if you add this line of code?

renderer.outputEncoding = THREE.sRGBEncoding;

A bit off-topic but please ensure not to mix an animation loop with renderings in change event listener. If your scene is static, remove the usage of requestAnimationFrame(). If it is animated, remove the change event listener from your controls.

1 Like
3

Hey,
first of all thanks for the tip.

I’ve added the line above, it did change the lighting on the left wall! However it’s still not reflected on the floor :confused:

edit:

It works!

1 Like