项目实训(五):three.js点光源跟随相机

在之前的章节中我们已经可以使用three.js轻松地导入我们想要的模型啦~

但是，如果这个时候我们使用之前的orbitcontrols控件对物体进行旋转的话：

这种情况出现的原因很简单，就是在设置场景scene的时候，我们使用了点光源，并给它设置了一个固定的位置：

       /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(0, 0, 100); //点光源位置
        scene.add(point); //点光源添加到场景中

所以无论我们如何旋转场景，光源也在跟着旋转，因此光源就只会照亮模型的正面，观察到侧面和后面就很吃力。

经过一番测试，我可以确定，orbitcontrols对于旋转的逻辑是通过移动相机来实现的。然后就查阅camera的相关函数，最后找到了：

var vector = camera.position.clone();

这个函数可以把相机此刻的位置克隆下来，这样我们就能把它赋给一个向量了。

接下来我们只需要把相机的位置赋给点光源，就可以实现光源跟随相机啦~

function render() {
            var vector = camera.position.clone();
            //console.log(vector.x);
            point.position.set(vector.x,vector.y,vector.z); //点光源位置
            renderer.render(scene,camera);//执行渲染操作
            //console.log(vector.x);
        }

记得要写在render()里，这样才能保证每次移动都跟随。

效果展示：