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

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:

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…

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

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

1 Like