Three.js plane color is darker when adding lights

Question

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'; 
import * as dat from 'dat.gui';


const renderer = new THREE.WebGL1Renderer();

renderer.shadowMap.enabled = true

renderer.setSize(window.innerWidth,window.innerHeight)

document.body.appendChild(renderer.domElement)

const scene  = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    0.1,
    1000

)

const orbit = new OrbitControls(camera,renderer.domElement)

const axeHelper = new THREE.AxesHelper(5);
scene.add(axeHelper)

// scene.background = new THREE.Color(0XFFFFFF)

camera.position.set(-10,30,30)
orbit.update();

// Box
const boxGeometry =new THREE.BoxGeometry();
const boxMeterial = new THREE.MeshBasicMaterial({color:0x00FF00});
const box = new THREE.Mesh(boxGeometry,boxMeterial);
scene.add(box)

// paper
const planeGeometry = new THREE.PlaneGeometry(30,30);
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFFFFFF,side: THREE.DoubleSide});
const plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane); 
plane.rotation.x = -0.5 * Math.PI
plane.receiveShadow = true 

// Grid helper
const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);

// Sphere
const sphereGeometry = new THREE.SphereGeometry(4,50,50);
const sphereMeterial = new THREE.MeshStandardMaterial({color:0x0000FF });
const sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);
sphere.castShadow = true
scene.add(sphere);

sphere.position.set(-10,10,0);

// // Ambient Light
const ambientLight = new THREE.AmbientLight(0x222222 );
scene.add(ambientLight);

// // Direction Lights
const directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 0.8 );
directionalLight.position.set(-30,50,0)
directionalLight.castShadow = true;
directionalLight.shadow.camera.bottom =-12
scene.add( directionalLight ) ;


//  Direction Light Helper
const dLightHelper = new THREE.DirectionalLightHelper(directionalLight,5);
scene.add(dLightHelper)

//  Direction Light Shadow Helper
const dLightShadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(dLightShadowHelper)





// Controller
const gui = new dat.GUI();
const options = {
    sphereColor: '#ffea00',
    wireframe:false,
    speed:0.01,
}

gui.addColor(options,'sphereColor').onChange(function(e){
    sphere.material.color.set(e);
})

gui.add(options,'wireframe').onChange(function(e){
    sphere.material.wireframe = e;
})

gui.add(options,'speed',0,0.1)



// box.rotation.x = 5;
// box.rotation.y = 5;

let step = 0;
let speed  = 0.1;
// Box animation
function animate(time) {
    box.rotation.x = time/1000;
    box.rotation.y = time/1000;
    renderer.render(scene,camera);

    step += options.speed;
    sphere.position.y = 10 * Math.abs(Math.sin(step))
}

renderer.render(scene,camera);


renderer.setAnimationLoop(animate);

plane color is much darker

I am using a MacBook M1 and these days I am following three.js tutorials, I have rewritten the code like that tutorial but my three.js rendered screens are much darker after adding lights, and I can't find the solution.

I want to add more color to the plane material because before adding lights it looked white but now it looks gray therefore, the shadows are not clear, I am following the tutorial to do this but in that tutorial the plane color is white

Answer 1

I cannot see any wrong behavior. The result is as expected. The energy of the DirectionalLight depends on the direction of the light relative to the normal vector of the surface (the Bidirectional reflectance distribution function) and the intensity. When the intensity is low, everything is dark like at night in nature. If the intensity is high, everything is bright. So if you want brighter surfaces, you have to increase the intensity or use multiple light sources. Of course, you can also increase the intensity of the ambient light.