ThreeJS - 垂直平移相机而不倾斜？

Question

我在我的网络应用程序中使用 Mr Doob 的定期 table 代码：

https://threejs.org/examples/css3d_periodictable.html

我在 Helix 视图中使用它。当我向左旋转物体时，我也会将相机的 Y 位置移动一定量。我的愿望是给人的印象是，当您旋转相机时，Helix 是 corkscrewing 垂直上下。这是我正在使用的代码，其中 angle 和 panAmount 是控制每秒发生多少旋转和垂直平移的常量：

    let g_RotationMatrix = new THREE.Matrix4();

    g_RotationMatrix.makeRotationY(angle);

    // Apply matrix like this to rotate the camera.
    self.object.position.applyMatrix4(g_RotationMatrix);

    // Shift it vertically too.         
    self.object.position.y += panAmount;

    // Make camera look at the target.
    self.object.lookAt(self.target);

我遇到的问题是，从相机的角度来看，当相机垂直移动时，对象似乎分别向您倾斜和远离您，具体取决于旋转方向。这对我来说很有意义，因为我猜测 lookat() 函数会导致相机查看目标的中心，而不是目标上最近点的点到它，所以相机必须倾斜以聚焦在目标的质心上。当我使用鼠标通过 Orbit 控件垂直平移时，我看到了相同的效果。我相信另一种描述效果的方法是，当相机垂直移动时，物体看起来 上下倾斜 。

我想要的效果是自动升降机上的 window 垫圈在建筑物的一侧上下升降，建筑物的一侧在相机看来完全平坦，无论相机的角度如何当前 Y 位置。

如何用相机实现这种效果？

Answer 1

让相机注视目标，但与相机处于相同的 y 水平。

假设self.target是一个vector3对象，self.object是相机：

例如，如果 self.target 是对象的相机旋转中心，则您不会想要更改实际的 self.target 矢量。先复制一份。

const newTarget = new THREE.Vector3( );

function render( ){

    // copy the target vector to newTarget so that the original self.target 
    // will not change and the camera can still rotate around the original
    // target.
    newTarget.copy( self.target );

    // Set newTarget's Y from the camera Y. So that is looks horizontal.
    newTarget.y = self.object.position.y; 

    // Make the camera look at the objects newTarget
    self.object.lookAt( newTarget);

}

ThreeJS - 垂直平移相机而不倾斜？

ThreeJS - pan camera vertically without tilting?

three.js

camera

pan