使用移动相机的场景照明

Question

<html>
    <head>
        ...
    </head>
    <body>
        <script src="three.min.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( 600, 400 );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( 2, 2, 2 );

            var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
            var material2 = new THREE.MeshLambertMaterial( { color: 0xff007b } );

            var cube = new THREE.Mesh( geometry, material );
            var cube2 = new THREE.Mesh( geometry, material2 );

            cube.position.set(0, 0, 0);
            cube2.position.set(-3, 0, 0);

            scene.add( cube );
            scene.add( cube2 );

            var render = function () {
                requestAnimationFrame( render );
                var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
                directionalLight.position.set( -3, 3, 3 );
                scene.add( directionalLight );
                var timer = Date.now() * 0.001;
                camera.position.x = Math.cos( timer ) * 10;
                camera.position.z = Math.sin( timer ) * 10;
                camera.lookAt( scene.position );
                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

我正在创建立方体，我希望它们绕着圆圈移动，所以我将整个场景绕着圆圈移动，但我在照明方面遇到了问题，因为我认为它也会随着场景移动，当我们看到背面时在立方体中，没有光。我是第一次使用这个库，所以我什至不确定我是否应该使用 directionalLight，但我希望最靠近观察者的立方体被点亮，当它们远离观察者时变得更暗。也许光线应该是静态的，我不应该移动相机，但我不知道如何在不移动每个立方体的情况下做到这一点。

Answer 1

首先，旋转整个场景不是个好主意。所有的场景child对于以后的工作来说都是很难想象的

创建var space = new Object3D(); scene.add(space); space.add(your_cubes);

和旋转一个spaceobject而不是scene。将 light 放入 scene 并将 space 设置为 light.target。

light.target = space;

使用移动相机的场景照明

Lighting of a scene with a moving camera

light

perspectivecamera

three.js