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

**URL:** <https://discourse.threejs.org/t/glb-gltf-model-not-rendering-properly-using-threejs-gltfloader/12995>\
**Category:** Questions\
**Tags:** glb, gltf-loader, models, blender\
**Created:** [February 24, 2020, 1:00pm UTC](https://discourse.threejs.org/t/glb-gltf-model-not-rendering-properly-using-threejs-gltfloader/12995 "2020-02-24T13:00:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shonsirsha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shonsirsha/32/8962_2.png) [@shonsirsha](https://discourse.threejs.org/u/shonsirsha)\
**Post date:** [February 24, 2020, 1:00pm UTC](https://discourse.threejs.org/t/glb-gltf-model-not-rendering-properly-using-threejs-gltfloader/12995/1 "2020-02-24T13:00:54Z")

</div>

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/)](https://gltf-viewer.donmccurdy.com/):

 ![Screenshot 2020-02-24 at 13.54.58](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/be2dcb657c9002bced5031386ab3ce726c4e8803.jpeg)

And this is how it turned out:

 ![Screenshot 2020-02-24 at 13.56.24](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f783fe844e45d929d88c8971b98ebba2fd61a2a4.jpeg)

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](https://discourse.threejs.org/uploads/short-url/bMX1eCkGzqf6QpFyQFYolq7o9Jg.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!!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 24, 2020, 1:07pm UTC](https://discourse.threejs.org/t/glb-gltf-model-not-rendering-properly-using-threejs-gltfloader/12995/2 "2020-02-24T13:07:39Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![shonsirsha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shonsirsha/32/8962_2.png) [@shonsirsha](https://discourse.threejs.org/u/shonsirsha)\
**Post date:** [February 24, 2020, 1:21pm UTC](https://discourse.threejs.org/t/glb-gltf-model-not-rendering-properly-using-threejs-gltfloader/12995/3 "2020-02-24T13:21:36Z")

</div>

> [@Mugen87](#):
>
> ```javascript
> renderer.outputEncoding = THREE.sRGBEncoding;
> 
> ```

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 😕

edit:

It works!