Three.js loading object from glb file looks washed out

use CubeTextureLoader

      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;
        });


same black

How is your code written?

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

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.

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?

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?

you don’t need to write this.

new THREE.CubeTextureLoader().load

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

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

使用editor能更好帮助你理解光照,你可以将你的模型添加到editor的场景里,并在场景里添加各种光源,在这里你可以调整光源的位置和方向.

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

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

This is how it looks for intensity 1.

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

@Mugen87 can you plz help here?

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.

like this?

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
})

I did share the link Three.js loading object from glb file looks washed out - #17 by Harsh_Vats

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.