时间戳

首页 > 解决方案 > ThreeJS - 垂直平移相机而不倾斜？

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

问题描述

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

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 位置如何，建筑物的侧面对相机来说都是完全平坦的。

我怎样才能用相机实现这种效果？

标签： three.jscamerapan

解决方案

让相机看向目标，但在与相机相同的 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);

}

推荐阅读