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

Question

我在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 形状。

Answer 1

MeshBasicMaterial不受灯光影响。 你必须使用不同的材料。 使用Blinn-Phong模型用于光计算的MeshPhongMaterial ：

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

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