Three.js中scene.position含义及相机每帧调用lookAt原因

场景说明 #

编写Three.js示例时，在场景中添加了一个平面，目标实现平面环绕旋转的视觉效果，相关实现代码、遇到的现象和疑问如下：

相关代码 #

相机配置 #

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1,  1000);
camera.position.set(50, 50, 60);
camera.lookAt(scene.position);

平面配置 #

var planeGeometry = new THREE.PlaneGeometry(70, 30, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({ color: green });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);

渲染与动画逻辑 #

renderScene();

function cameraUpdate() {
  camera.position.x = cameraRadius * Math.cos(step);
  camera.position.z = cameraRadius * Math.sin(step);
  camera.lookAt(scene.position);
}

function renderScene() {
 // 更新场景内对象的位置、旋转属性
  step += 0.05;
  cameraUpdate();
  requestAnimationFrame(renderScene);
  renderer.render(scene, camera);
}

实际现象 #

• 如果cameraUpdate函数中不添加camera.lookAt(scene.position)语句，旋转效果会出现异常
• 添加该语句后，即可得到预期的平面绕自身轴旋转的效果

待解答问题 #

• scene.position的具体含义是什么？
• 为什么需要在每一动画帧都调用相机的lookAt方法？相机旋转时相关数值是如何变化的，为何必须重复调用该方法才能得到正常效果？

问题解答 #

关于scene.position的含义 #

Scene是Three.js的特殊根级对象，继承自Object3D，scene.position就是这个根节点的本地坐标，默认值为三维向量(0, 0, 0)，对应世界坐标系的原点。
上述代码中没有手动修改过scene.position的取值，同时添加的平面也没有设置位置偏移，默认同样位于世界坐标原点，因此代码里的scene.position实际指代的就是平面所在的中心位置点。

关于每帧调用lookAt的原因 #

核心逻辑是：修改相机的position属性只会改变相机在3D空间的坐标，不会自动调整相机的朝向。

• 初始化阶段调用的camera.lookAt(scene.position)，仅会在初始时刻把相机朝向对准原点，不会永久生效。后续动画帧中通过三角函数修改相机x、z坐标的逻辑，本质是让相机沿着平行于XZ平面、以Y轴为中心、半径为cameraRadius的圆周运动。如果不重新调整朝向，相机会始终保持初始的固定视角，不会跟着位置移动自动对准平面，自然会出现平面偏移、跑出视野、旋转逻辑错乱的问题。
• lookAt(target)方法的作用，是基于相机当前位置和传入的目标点坐标，自动计算两点连线的方向向量，实时更新相机的旋转矩阵（对应rotation属性的三个轴旋转值），让相机视锥体的正中心始终对准目标点。
• 预期中「平面绕自身轴旋转」的视觉效果，本质是相机围绕平面中心做圆周运动+始终对准平面中心产生的相对运动效果——代码中并没有旋转平面本身，只是让相机绕平面公转。因此每一帧相机位置更新后，必须重新调用lookAt把朝向对准平面中心，才能保证平面始终处于视野正中央，最终呈现出平面自转的视觉效果。
  如果省略每帧的lookAt调用，相机移动过程中朝向始终固定，视线不会跟随位置调整，看到的画面就会完全不符合预期。

内容的提问来源于stack exchange，提问作者Pravin Poudel