0

I have an application that includes meshes rendered with MeshPhongMaterials. They work well with the full suite of lights available in three.js.

However, I want to combine them with imported GLB/GLTF models. In order to have the models lit, I believe I must use an environment map such as the following:

function _Environment() {
    const env_scene = new THREE.Scene();
    const roomMaterial = new THREE.MeshStandardMaterial( { side: THREE.BackSide } );
    const room = new THREE.Mesh( new THREE.BoxGeometry(), roomMaterial );
    room.position.set( 0, 0, 0 );
    room.scale.set( 40, 40, 40 );
    env_scene.add( room );
    const env_alight = new THREE.AmbientLight(0xFFFFFF, .1);
    env_scene.add(env_alight);
    return env_scene;
   }

function main() {
    canvas = document.getElementById('c');
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.outputEncoding = THREE.sRGBEncoding;
    
    const aspect = 4/3;  // the canvas default
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(5, 0, 2);
    camera.up.set(0,1,0);
    camera.lookAt(new THREE.Vector3());
    camera.updateProjectionMatrix()

    const environment = new _Environment();
    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    scene = new THREE.Scene();
    scene.background = new THREE.Color(DefaultBackgroundColor);
    scene.environment = pmremGenerator.fromScene(environment).texture;
    dlight = new THREE.DirectionalLight(0xFFFFFF, .7);
    dlight.position.set(5, 5, 10);
    dlight.target.position.set(0, 0, 0);
    scene.add(dlight);
    scene.add(dlight.target);

    alight = new THREE.AmbientLight(0xFFFFFF, .3);
    scene.add(alight);

    requestAnimationFrame(render);
}

However, it seems that the environment map causes the Phong materials to show up saturated and I cannot find a good combination of lights that work.

One can always convert everything to PBR, but am I missing something? Can Phong and PBR co-exist in a well lit, natural looking scene?

Morne
  • 11
  • 3
  • 1
    Keep in ming that `scene.environment` only affects PBR materials. If you want to apply the environment map to phong materials, too, you have to assign it to their `envMap` property. – Mugen87 Feb 15 '21 at 16:07
  • In the end, after playing around with the scene.environment and some different lighting arrangements in the scene, I settled on an approach that seems to work well together. I use ambient lightening in the scene.environment only, and a directional light in the scene only (not in the environment map). I made both lights' intensity adjustable and refresh the scene.environment when I do. I also converted all materials to MeshStandard. This seems to give the best results for me, and it is easier to use than the mixed material type scenario. – Morne Feb 17 '21 at 06:40

0 Answers0