将位置设置为其他对象的位置在 THREE.js 中不起作用答案

【问题标题】：Setting position to position of other object does not work in THREE.js将位置设置为其他对象的位置在 THREE.js 中不起作用
【发布时间】：2014-12-04 00:07:47
【问题描述】：

我正在尝试 Three.js，我正在尝试将 SpotLight 定位在相机的位置。我使用以下代码（剥离窗口创建）：

$(document).ready(function() {
    init();
});

function init() {
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set(50, 10, 0);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    var spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position = camera.position;
    console.log(camera.position);
    console.log(spotLight.position);
}

我得到的输出是 camera.position 是 50,10,0（如预期的那样）但 spotLight.position 是 0,1,0 - 即使很难我只是将它设置为指向相同的值？

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

试试

spotLight.position.set(camera.position.x, camera.position.y, camera.position.z)

位置是只读的

【讨论】：

但是如何让它自动跟随相机呢？我必须在我的渲染循环中调用它吗？
当相机位置变化看起来足够了......我是three.js的新手，所以我不知道是否存在自动执行此操作的东西。
当相机位置改变时：spotLight.position.copy( camera.position ).

【解决方案2】：

由于 SpotLight 和 Camera 是对象 (Object3D)，您可以简单地将聚光灯添加到相机。灯光将随相机移动、旋转等，无需任何进一步的位置复制。在这种情况下，您必须相对于相机定位灯光：

camera.add(spotLight);
spotLight.position.set(0,0,1);
spotLight.target = camera;

【讨论】：