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

Question

我在我的网络应用程序中使用杜布先生的元素周期表代码：

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

我在 Helix 视图中使用它。当我向左旋转物体时，我也会将相机的 Y 位置移动一定量。我的愿望是在您旋转相机时给人一种 Helix 垂直上下螺旋形的印象。这是我正在使用的代码，其中 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 控件垂直平移时，我看到了相同的效果。我相信另一种描述效果的方式是，当相机垂直移动时，对象似乎会上下倾斜。

我想要的效果是自动升降机上的洗窗器在建筑物的侧面上下升降，无论相机当前的 Y 位置如何，建筑物的侧面对相机来说都是完全平坦的。

p>

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

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);

}