为什么Three.js中的DirectionalLight无法正常工作？

我在Three.js中响了。我需要添加摄像头和照明。相机工作还可以，但是照明有问题。这是我的代码：

<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>

我尝试将其更改DirectionalLight为AmbientLight和SpotLight，但是它们都没有用。对我而言，这将是什么样的光都没有关系，我只需要显示3d形状即可。