Three.js相机看起来没有滚动？

Question

我有一个小球可以在一个方形水平滚动的小游戏。我希望相机位置跟随球，但总是看0, 0, 0。然而，将相机x和z移动到球的位置让我接近，正如您在下面的动画中看到的那样（对于任何晕车感到抱歉）：

使用camera.lookAt( new THREE.Vector3( 0, 0, 0 ) )时，相机滚动围绕其y轴（我认为？）会导致水平旋转的错觉。

我想要实现的是移动相机并在没有相机胶卷的情况下查看0,0,0。在相机移动时，水平仪的下边缘应保持相对平行屏幕的下边缘。这可能/有意义吗？我在查看它时遇到了麻烦。

我创建了一个CodePen demo来说明问题。我已经将lookAt函数提取到一个独立的函数中，这样我就可以在它返回后修改它：

function lookAtVector( sourcePoint, destPoint ) {

我基本上用手旋转和定位相机：

var cameraPosition = new THREE.Vector3(
    radius * Math.sin( Date.now() * speed ),
    radius * Math.cos( Date.now() * speed ),
    5
);

var lookAtQuaternion = lookAtVector(
    cameraPosition,
    new THREE.Vector3( 0, 0 ,0 )
);
camera.position.copy( cameraPosition );
camera.quaternion.copy( lookAtQuaternion );

如何修改相机四元数以使其不滚动，同时仍然看0,0,0？。我试过了：

• 我尝试将四元数的x，y，z和w字段设置为0，{ {1}}等尝试强行不旋转，但结果出乎意料，我还没有发现手动字段设置的组合有效。

• 我已尝试手动设置相机向上矢量（Math.PI / 2），如this question所示，但效果相同。

编辑：基本上我想像任何传统的3D软件相机一样移除相机胶卷，就像Three's OrbitControls一样。左下角和右下角的透视图应如下所示：

请注意相机如何在这些照片中滚动。

Answer 1

通过更改向上矢量解决了这个问题。不幸的是，codepen没有显示正确的示例代码（我在本地游戏中使用了稍微不同的轴系统）。但如果我将THREE.Object3D.DefaultUp更改为new THREE.Vector3( 0, 0, -1 )，那么我会得到所需的结果：

具有固定向量的完整lookAt函数：

function lookAtVector( sourcePoint, destPoint ) {

    return new THREE.Quaternion().setFromRotationMatrix(
        new THREE.Matrix4()
            .lookAt( sourcePoint, destPoint, new THREE.Vector3( 0, 0, -1 ) )
    );

}

Answer 2

您应该只修改摄像机的位置（平移），而不是旋转。您想要的位置是您拥有的原始Y和Z，并从球中复制X值（假设左右方向是X轴）。

图表：

|   |
|   |
|O  |
+---+

 C


|   |
|   |
| O |
+---+

  C


|   |
|   |
|  O|
+---+

   C

O - ball
C - camera

  

我想要实现的是移动相机并在没有旋转的情况下查看0,0,0

你会怎么做？这意味着相机只能在其方向轴（Y）上移动。