为什么 Three.js 中的 DirectionalLight 不起作用？

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 } );