# Three.js loading object from glb file looks washed out

**URL:** <https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121>\
**Category:** Questions\
**Tags:** angular, threejs\
**Created:** [August 5, 2022, 10:54am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121 "2022-08-05T10:54:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 5, 2022, 10:54am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/1 "2022-08-05T10:54:07Z")

</div>

[![enter image description here](https://i.stack.imgur.com/rYstD.png)](https://i.stack.imgur.com/rYstD.png)

That’s how my model is looking on [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/).

And How it’s looking in my code?  
[![enter image description here](https://i.stack.imgur.com/uHEmk.png)](https://i.stack.imgur.com/uHEmk.png)

I know I should share the code too and will but before that, I would like to know what might be going wrong.

1. Is this a problem with lighting?
2. Is this a problem of shadow? (I don’t think so)
3. Is this related to the opacity of the object? (I don’t think so because it shows opacity: 1 in code)
4. Is this related to the material of the object?

Here are some snippets of code. I’m using Angular.

HTML file:

```nohighlight
<div class="canvas-container">
  <canvas class="webgl" linear flat></canvas>
</div>

```

JavaScript:

```nohighlight
    const canvas: HTMLCanvasElement = document.querySelector('canvas.webgl');
    const scene = new THREE.Scene();
    const sizes = {
      width: window.innerWidth,
      height: window.innerHeight
    };
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
    camera.position.set(10, 35, 20);
    camera.layers.enableAll();
    camera.layers.toggle(1);
    this.loadTexture(scene);
    this.loadModels(scene);
const renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true
    });
    renderer.physicallyCorrectLights = true;
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.textureEncoding = THREE.sRGBEncoding;
    renderer.toneMappingExposure = 0.2;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(window.devicePixelRatio);
    const canvas_container = document.querySelector('.canvas-container');
    const controls = new OrbitControls(camera, canvas_container);
    controls.maxDistance = 50;

    const tick = () => {
      window.requestAnimationFrame(tick);
      controls.update();
      renderer.render(scene, camera);
    };

    tick();

```

LoadTexture Fn:

```nohighlight
  loadTexture(scene) {
    const cubeTextureLoader = new THREE.CubeTextureLoader();
    const debugObject: any = {};
    const environmentMap = cubeTextureLoader.load([
      '/assets/3d.js/textures/environmentMaps/4/px.jpg',
      '/assets/3d.js/textures/environmentMaps/4/nx.jpg',
      '/assets/3d.js/textures/environmentMaps/4/py.jpg',
      '/assets/3d.js/textures/environmentMaps/4/ny.jpg',
      '/assets/3d.js/textures/environmentMaps/4/pz.jpg',
      '/assets/3d.js/textures/environmentMaps/4/nz.jpg'
    ]);
    environmentMap.encoding = THREE.sRGBEncoding;
    scene.background = environmentMap;
    scene.environment = environmentMap;
    debugObject.envMapIntensity = 0.001;
  }

```

LoadModels Fn:

```nohighlight
loadModels(scene) {
    const gltfLoader = new GLTFLoader();
    const updateAllMaterials = () => {
      scene.traverse(child => {
        if (child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
          child.material.needsUpdate = true;
          child.castShadow = true;
          child.receiveShadow = true;
          console.log(child.material);
        }
      });
    };

    gltfLoader.load('/assets/3d.js/models/Tank.glb', gltf => {
      console.log(gltf);
      gltf.scene.scale.set(1, 1, 1);
      gltf.scene.position.set(-4, 0, 0);
      gltf.scene.rotation.y = Math.PI * 0.5;
      scene.add(gltf.scene);

      updateAllMaterials();
    });
  }

```

I’ve commented all other lines which I think are not necessary.

---

<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:** [August 5, 2022, 11:00am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/2 "2022-08-05T11:00:02Z")

</div>

> [@Harsh\_Vats](#):
>
> `renderer.textureEncoding = THREE.sRGBEncoding;`

The renderer has no property `textureEncoding`.

Apart from that, I suggest you load a HDR instead of a LDR environment map via e.g. `RGBELoader` or `HDRCubeTextureLoader` similar to the official examples. Use [webgl\_loader\_gltf](https://threejs.org/examples/webgl_loader_gltf) as an example.

If the HDRI is the only light source in your scene, you can turn of shadows (since an environment map does not support shadow mapping).

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 5, 2022, 2:00pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/3 "2022-08-05T14:00:41Z")

</div>

I’ve not much idea of what you’re talking here.

Designer gave me a design in glb file, I googled how to load glb file on web apps and it worked fine earlier, everything good.

But the file size was large. As the files contains multiple same assets so i thought why not just get one asset file and load the same multiple times, that would save some bandwidth for the client right? Turns out file size got reduced but now it has this problem. I didn’t change much of the code.

So, if you can modify the code a little bit, that would be helpful.

I tried to change CubeTextureLoader to RGBELoader, but it throws below error:  
Error: export ‘RGBELoader’ (imported as ‘THREE’) was not found in ‘three’

Any idea?

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 7, 2022, 6:32pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/4 "2022-08-07T18:32:07Z")

</div>

any update yet plz? @Mugen87

---

<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:** [August 7, 2022, 9:06pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/5 "2022-08-07T21:06:03Z")

</div>

> [@Harsh\_Vats](#):
>
> Error: export ‘RGBELoader’ (imported as ‘THREE’) was not found in ‘three’

You have to import `RGBELoader` separately like demonstrated in the above linked example.

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 4:27am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/6 "2022-08-08T04:27:45Z")

</div>

![Screenshot 2022-08-08 at 9.54.35 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/5750b0485970e39fafd4163467815685bb7ed05c.png)

It’s showing just black. I tried both `HDRCubeTextureLoader` and `RGBELoader`.

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 7:12am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/7 "2022-08-08T07:12:43Z")

</div>

can you provide me with your model?

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 8:12am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/8 "2022-08-08T08:12:56Z")

</div>

[Tank.glb](https://discourse.threejs.org/uploads/short-url/djcRpvoQO2oBeQ5BSkCFAh4uNH9.glb) (189.3 KB)

Here is the glb file for tank asset.

---

<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:** [August 8, 2022, 8:13am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/9 "2022-08-08T08:13:51Z")

</div>

Unfortunately, screenshots are not sufficient to investigate your issue. It’s actually best if you share your code as a live example.

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 8:14am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/10 "2022-08-08T08:14:40Z")

</div>

should i share code on stackblitz?

---

<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:** [August 8, 2022, 8:19am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/11 "2022-08-08T08:19:17Z")

</div>

I’m not familiar with stackblitz, sorry. If it’s comparable to jsfiddle, codepen or codesandbox then fine.

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 8:22am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/12 "2022-08-08T08:22:27Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/557dc7db97bd47ab20d5d0389c360ef434985cfe.jpeg)  
The model looks fine, your scene may not be using lighting or hdr causing your model to look black.  
use of hdr

```javascript
new RGBELoader()
        .setPath('textures/equirectangular/')
        .load('royal_esplanade_1k.hdr', function (texture) {
     texture.mapping = THREE.EquirectangularReflectionMapping
     scene.environment = texture
})

```

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 8:37am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/13 "2022-08-08T08:37:48Z")

</div>

@Qiumeng12 what is this equirectangular texture?

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 8:43am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/14 "2022-08-08T08:43:48Z")

</div>

you can look at this example.  
[https://threejs.org/examples/?q=gltf#webgl\_loader\_gltf](https://threejs.org/examples/?q=gltf#webgl_loader_gltf)

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 8:48am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/15 "2022-08-08T08:48:17Z")

</div>

is it required to use hdr file for texture instead of png or jpg? @Qiumeng12

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 8:57am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/16 "2022-08-08T08:57:55Z")

</div>

If using jpg or png format.

```javascript
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
new THREE.TextureLoader().load('textures/equirectangular.png', function (texture) {
        texture.encoding = THREE.sRGBEncoding;
        const pngCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
        scene.environment = pngCubeRenderTarget.texture;
})

```

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 8:58am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/17 "2022-08-08T08:58:14Z")

</div>

stackblitz doesn’t support static assets.

The only thing you can do right now is to copy the code locally and use this glb file.

> **[Angular Ivy (forked) - StackBlitz](https://stackblitz.com/edit/angular-ivy-35cvms?file=src%2Fapp%2Ffacility-overview.component.ts)**
>
> A angular-cli project based on @angular/animations, @angular/compiler, @angular/core, @angular/common, @angular/platform-browser-dynamic, @angular/forms, @angular/platform-browser, rxjs, tslib, zone.js and @angular/router.

[Tank.glb](https://discourse.threejs.org/uploads/short-url/djcRpvoQO2oBeQ5BSkCFAh4uNH9.glb) (189.3 KB)

Plz if you can help, i’m really frustrated ☹

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 9:08am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/18 "2022-08-08T09:08:12Z")

</div>

> [@Harsh\_Vats](#):
>
> `scene.environment = environmentMap;`

You are using it wrong, you should use it like this

```javascript
const pmremGenerator = new THREE.PMREMGenerator( renderer );
pmremGenerator.compileCubemapShader();
const Target = pmremGenerator.fromCubemap( environmentMap)
scene.environment = Target.texture

```

---

<div class="post-metadata">

**Author:** ![Harsh\_Vats](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harsh_vats/32/28591_2.png) [@Harsh\_Vats](https://discourse.threejs.org/u/Harsh_Vats)\
**Post date:** [August 8, 2022, 9:14am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/19 "2022-08-08T09:14:01Z")

</div>

Do you mean like this?

```javascript
loadTexture(scene, renderer) {
    const cubeTextureLoader = new RGBELoader();
    const debugObject: any = {};
    const environmentMap = cubeTextureLoader.load([
      '/assets/3d.js/textures/environmentMaps/4/px.jpg',
      '/assets/3d.js/textures/environmentMaps/4/nx.jpg',
      '/assets/3d.js/textures/environmentMaps/4/py.jpg',
      '/assets/3d.js/textures/environmentMaps/4/ny.jpg',
      '/assets/3d.js/textures/environmentMaps/4/pz.jpg',
      '/assets/3d.js/textures/environmentMaps/4/nz.jpg'
    ]);
    environmentMap.encoding = THREE.sRGBEncoding;
    scene.background = environmentMap;
    // scene.environment = environmentMap;
    debugObject.envMapIntensity = 0.001;

    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileCubemapShader();
    const Target = pmremGenerator.fromCubemap(environmentMap);
    scene.environment = Target.texture;
  }

```

It’s throwing below error

 ![Screenshot 2022-08-08 at 2.45.06 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/4/c4cbdd99d6e84931113f3763d59a32fbd40e08c7.png)

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 8, 2022, 9:15am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/20 "2022-08-08T09:15:23Z")

</div>

you can try.

[Next page](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121.md?page=2)