Why doesn't DirectionalLight in three.js work?

Question

I was doing a ring in three.js. I've needed to add camera and lighting. Camera work is ok, but I've got the problem with lighting. Here is my code:

<script src="three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js"></script>
<script>

        const scene = new THREE.Scene();

        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        const color = 0xFFFFFF;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(10, 10, 10);
        light.target.position.set(-5, 0, 0);
        scene.add(light);
        scene.add(light.target);

        document.body.appendChild( renderer.domElement );

        let controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0, 0);
        controls.rotateSpeed = 0.5;
        controls.update();

        camera.position.z = 5;

        const geometry = new THREE.RingGeometry( 1, 3, 32 );
        const material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
        const mesh = new THREE.Mesh( geometry, material );
        mesh.receiveShadow = true;
        mesh.castShadow = true
        scene.add( mesh );

        function animate() {
            requestAnimationFrame( animate );
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.01;
            renderer.render( scene, camera );
        }
        animate();

</script>

I've tried to change DirectionalLight to AmbientLight and SpotLight, but they all didn't work either. It doesn't matter for me what kind of the light it would be, I've just need to show my 3d shape.

Answer 1

MeshBasicMaterial is not affected by lights. You have to use a different material. Use a MeshPhongMaterial, that the Blinn-Phong model uses for light calculation:

const material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );

const material = new THREE.MeshPhongMaterial( { color: 0xffff00, side: THREE.DoubleSide } );