Is there way in three.js to change default black color for non illuminated parts of the mesh

Questions
1

Hi there and thanks for maintaining and answering questions for the awesome Three.js library.

As the title says, is there way in three.js to change default black color for non illuminated parts of the mesh?

My scene looks like this: video
I want the edges of the moon to match the background (I have to define the background in html). I also cannot change the material for Moon to MeshBasicMaterial, because then I will lose the desired effect

    renderer = new WebGLRenderer({
      powerPreference: "high-performance",
      alpha: true,
      antialias: true
    });

Moon:

    const geometry = new SphereGeometry(25, 64, 44);
    const material = new MeshPhongMaterial({ color: 0xffffff }); 
    mesh.moon1 = new Mesh(geometry, material);
    mesh.moon1.position.set(0, 0, -40);
    mesh.moon1.castShadow = false;
    mesh.moon1.receiveShadow = false;
    stage.add(mesh.moon1)

Light for Moon (the one that moves):

    light.spotMoon = new SpotLight("#ffffff");
    light.spotMoon.position.set(0, 0, -5);         
    light.spotMoon.target.position.set(0, 0, -40);          
    light.spotMoon.target.updateMatrixWorld();           
    light.spotMoon.castShadow = false;
    light.spotMoon.userData.intensity = 8.8;                
    light.spotMoon.intensity = 0.0;                           
    light.spotMoon.distance = 30;
    light.spotMoon.angle = 0.9;
    light.spotMoon.penumbra = 1.0;  
    light.spotMoon.decay = 0.5;
    light.spotMoon.focus = 0.6;
    scene.add(light.spotMoon);
2

That sounds like what an Ambient light is used for?

1 Like
3

I’d try with the .emissive property if you want to limit the effect only to the moon and keep the dancer black.

4 Likes
4

emissive property did the trick. Thank you @PavelBoytchev

2 Likes