Three.js Editor question: How does environment option actually work?

Questions
1

image
image1290×1106 257 KB

I have been trying trying to replicate this image which I created using Three.js editor.

Here is the scene setting that I used in this image:

image
image588×528 26.6 KB

How does the ‘environment’ option work in three.js editor? because when I set my scene’s environment nothing happens and wasn’t as straight forward as I thought…

2

Here is the code that I wrote to achieve the same effect.

const loader = new TextureLoader();
    loader.load("public/static/sky.jpg", (texture) => {
      const rt = new WebGLCubeRenderTarget(texture.image.width);
      rt.fromEquirectangularTexture(this._renderer, texture);
      this._scene.background = rt;
      this._scene.environment = this._scene.background.texture;
    });

I used basic ‘MeshPhongMaterial’ as material with map applied to certain face

3

Scene.environment only works for PBR materials. Meaning MeshStandardMaterial or MeshPhysicalMaterial.

https://threejs.org/docs/index.html#api/en/scenes/Scene.environment

1 Like