Can't understand why mesh color is wrong

Questions
1

I cannot understand why the cube is not white with these settings:


  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf4f5f5);

  const ambientLight = new THREE.AmbientLight(0xffffff);
  ambientLight.position.set(1, 1, 1).normalize();
  scene.add(ambientLight);

  const geometry = new THREE.BoxGeometry(2, 2, 2);
  const matArray = [
    new THREE.MeshPhongMaterial({ color: 0xffffff }),
    new THREE.MeshPhongMaterial({ color: 0x000000 }),
    new THREE.MeshPhongMaterial({ color: 0xffffff }),
    new THREE.MeshPhongMaterial({ color: 0xffffff }),
    new THREE.MeshPhongMaterial({ color: 0xffffff }),
    new THREE.MeshPhongMaterial({ color: 0xffffff }),
  ];
  const cube = new THREE.Mesh(geometry, matArray);

What I get:

image

I’d expect sides to be white but they’re grey. Other colors produce similarly “wrong” results… Something to do with lighting? Camera position?

2

If you are using Three r155, then you need to increase the intensity of the ambient light.

scene.add(new THREE.AmbientLight(0xffffff, Math.PI));

“The intensities for ambient, hemisphere, directional lights and light maps can be restored by multiplying PI with the existing light intensity values” → Migrating

Also, this line does nothing when using the ambient light

1 Like
3

Thank you @seanwasere

Yes, I’m using r155. I tried with the ambient light setting, but it makes no change in my case. What I figured out is that if I swap MeshPhongMaterial with either MeshStandardMaterial or MeshBasicMaterial then I get the colors I expect. But with this mesh shadows stop working, which they did with MeshPhongMaterial …

1 Like
4

This three.js docs helped me understand how shadows work. Now I get the expected colors with any mesh type.

5

Here is an example showing the effect of the ambient light on various materials.
The materials in order are MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshPhysicalMaterial & MeshToonMaterial
Example : Ambient Light
You can change the intensity to see which materials are effected.

image
image855Ă—312 55.8 KB

MeshBasicMaterial is self illuminating, so does not react to changes in lighting.