# 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:** 15\
**Page:** 2

<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:17am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/21 "2022-08-08T09:17:29Z")

</div>

> [@Harsh\_Vats](#):
>
> `RGBELoader`

use CubeTextureLoader

```javascript
      const pmremGenerator = new THREE.PMREMGenerator(renderer);
      pmremGenerator.compileCubemapShader();
      const ldrUrls = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
      let ldrCubeMap = new THREE.CubeTextureLoader()
        .setPath('./textures/cube/pisa/')
        .load(ldrUrls, function () {

          ldrCubeMap.encoding = THREE.sRGBEncoding;

          let ldrCubeRenderTarget = pmremGenerator.fromCubemap(ldrCubeMap);

          scene.environment = ldrCubeRenderTarget.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:20am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/22 "2022-08-08T09:20:31Z")

</div>

![Screenshot 2022-08-08 at 2.50.17 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/5/15cb580759a2fabe38a512c92072c5ae64e6f175.png)  
same black

---

<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:22am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/23 "2022-08-08T09:22:29Z")

</div>

How is your code written?

---

<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:25am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/24 "2022-08-08T09:25:11Z")

</div>

I’m trying your code now but i don’t understand from where does this `./textures/cube/pisa/` came?

```javascript
loadTexture(scene, renderer) {
    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileCubemapShader();
    const ldrUrls = [
      '/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'
    ];
    let ldrCubeMap = new THREE.CubeTextureLoader().setPath('./textures/cube/pisa/').load(ldrUrls, function () {
      ldrCubeMap.encoding = THREE.sRGBEncoding;

      let ldrCubeRenderTarget = pmremGenerator.fromCubemap(ldrCubeMap);

      scene.environment = ldrCubeRenderTarget.texture;
    });
  }

```

EDIT1:  
I can’t make new replies here now so will be editing here: @Qiumeng12

Now the asset is completely white which isn’t correct also.

 ![Screenshot 2022-08-08 at 2.58.43 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/6/e6c49d2e1191866fac39a625a011db3432e26257.png)

EDIT2:  
Maybe it’s the lighting issue. Can you plz try to edit the code locally? I think there’s no problem with the cube as you yourself said the model looks fine.

EDIT3:  
I have the below code for lighting. Can you see if there’s any problem with it?

```javascript
addLight(scene, showHelper) {
    const light = new THREE.DirectionalLight(0x1d1d1d, 0);
    light.position.set(0, 10, -10);
    light.castShadow = true;
    light.shadow.camera.top = 2;
    light.shadow.camera.bottom = -2;
    light.shadow.camera.left = -2;
    light.shadow.camera.right = 2;
    light.shadow.camera.near = 0.1;
    light.shadow.camera.far = 100;
    scene.add(light);
    showHelper && scene.add(new THREE.CameraHelper(light.shadow.camera));
  }

```

The colors are good but there is no dark/bright sides of the tank. That’s why it looks washed out. Any way to fix it?

---

<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:26am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/25 "2022-08-08T09:26:47Z")

</div>

you don’t need to write this.

> [@Harsh\_Vats](#):
>
> `.setPath('./textures/cube/pisa/')`

```javascript
new THREE.CubeTextureLoader().load

```

---

<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:32am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/26 "2022-08-08T09:32:36Z")

</div>

First of all, do you add other light sources to your scene, and does your cubemap reflect white?

---

<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:51am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/27 "2022-08-08T09:51:01Z")

</div>

If there are no other lights in the scene, the model reflects the cubemap color you used.

使用[editor](https://threejs.org/editor/)能更好帮助你理解光照，你可以将你的模型添加到editor的场景里，并在场景里添加各种光源，在这里你可以调整光源的位置和方向.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a04a4f84148de3aa624b16c603d01fb1917528d.png)

---

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

</div>

@Qiumeng12 I’m not able to understand it easily. Can you plz edit the code?

---

<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 9, 2022, 9:09am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/29 "2022-08-09T09:09:00Z")

</div>

> [@Harsh\_Vats](#):
>
> `const light = new THREE.DirectionalLight(0x1d1d1d, 0);`

A directional light with an intensity of 0 will not produce light

---

<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 9, 2022, 10:42am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/30 "2022-08-09T10:42:37Z")

</div>

This is how it looks for intensity 1.

```javascript
const light = new THREE.DirectionalLight(0x1d1d1d, 1);

```

 ![Screenshot 2022-08-09 at 4.12.04 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/4/1440b0c209f59b17ba7f14f8b3d263c3512d5d21.jpeg)

---

<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 10, 2022, 7:36pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/31 "2022-08-10T19:36:31Z")

</div>

@Mugen87 can you plz help here?

---

<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 10, 2022, 9:02pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/32 "2022-08-10T21:02:44Z")

</div>

Sorry, I can’t debug the issue until you share a proper live example.

Besides, the code snippets @Qiumeng12 has shared are not 100% correct. In newer `three.js` releases, it is not necessary to work with `PMREMGenerator` anymore. The renderer automatically prepares environment maps for the use with PBR materials.

---

<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 11, 2022, 2:46am UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/33 "2022-08-11T02:46:01Z")

</div>

like this?

```javascript
const ldrUrls = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
let ldrCubeMap = new THREE.CubeTextureLoader() .setPath('./textures/cube/pisa/')
.load(ldrUrls, function () {
          ldrCubeMap.encoding = THREE.sRGBEncoding;
          ldrCubeMap.mapping = THREE.CubeReflectionMapping;
          scene.environment = ldrCubeMap
}）

```

---

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

</div>

I did share the link [Three.js loading object from glb file looks washed out - #17 by Harsh\_Vats](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/17)

---

<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 11, 2022, 2:18pm UTC](https://discourse.threejs.org/t/three-js-loading-object-from-glb-file-looks-washed-out/41121/35 "2022-08-11T14:18:10Z")

</div>

Yes, but it unfortunately does not load an asset so the example is incomplete. Consider to host the asset at GitHub, it should then be possible to load it via a `https://raw.githack.com/` URL.

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