Shadows doesn't show up ThreeJS - three.js

Question

I am trying to understand what's wrong with my scene. The objects aren't casting shadows and everything looks too bright. I did everything according to the documentation but I can't understand what's wrong.
'use strict';
/* global THREE */
let loadedModel;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
const loader = new THREE.GLTFLoader();
function main() {
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry2 = new THREE.PlaneGeometry( 1000, 1000 );
const material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry2, material2 );
plane.rotateX( - Math.PI / 2);
plane.castShadow = false;
plane.receiveShadow = true;
scene.add( plane );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xcc2fff } );
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0,10,0)
cube.castShadow = true;
cube.receiveShadow = true;
scene.add( cube );
const light2 = new THREE.PointLight( 0x20202A, 50, 10 );
light2.position.set( 0 , 15, 10 );
light2.castShadow = true;
scene.add( light2 );
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( light2, sphereSize );
scene.add( pointLightHelper );
camera.position.set(20,20,20);
camera.lookAt(plane.position);
renderer.render( scene, camera );
}
main();
I tried to play around with the light but nothing changed, maybe there's something wrong with the camera? I really don't understand. I am used to Blender but doing everything manually in this manner is kind of confusing to me.

Answer 1

You use MeshBasicMaterial. This material is not affected by lights and also can't cast shadow. You should change it to MeshLambertMaterial or MeshPhongMaterial.
const geometry2 = new THREE.PlaneGeometry( 1000, 1000 );
const material2 = new THREE.MeshLambertMaterial ( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry2, material2 );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial ( { color: 0xcc2fff } );
const cube = new THREE.Mesh( geometry, material );