javascript - 一旦放置在高 Angular 或低 Angular ，相机就会表现得很奇怪

Question

我有一个简单的 Three.js 场景，我想围绕它移动相机。相机不仅需要能够移动，还需要能够改变某个焦点周围的 Angular 。焦点实际上是相机位置，在渲染时，我实际上只是通过 cameraBuff 平移相机并将其放置在球体上，然后我告诉它看焦点.

在移动相机之前，一切正常，我可以旋转相机等等。但是，一旦我开始移动，似乎有什么东西坏了!在正常 Angular (垂直，0 < x < 180)它只是卡住并且根本不能围绕焦点旋转。一旦我将它向下移动一点，一切都会重新开始工作。详细说明一下，一旦 cameraBuff 点垂直于表面，问题就会发生。

这是我用来围绕焦点旋转 cameraBuff 矢量/点的代码:

//mouse.onDown* things are recorded once the mouse is initially pressed
theta = -((event.clientX - mouse.onDownPosition.x) * 0.5) + mouse.onDownTheta;
phi = ((event.clientY - mouse.onDownPosition.y) * 0.5) + mouse.onDownPhi;

phi = Math.min(180, Math.max(0, phi));

cameraBuff.x = radius * Math.sin(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
cameraBuff.y = radius * Math.sin(phi * Math.PI / 360 );
cameraBuff.z = radius * Math.cos(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );

一旦我将 phi = Math.min(180, Math.max(0, phi)); 更改为 phi = Math.min(160, Math.max(20, phi ));，例如，一切正常，但我什至无法让相机垂直于表面，甚至无法降低它。

例如，按下 w 时会发生这种情况:

if (input.w)
{
    var speed = [game.direction.x*60, game.direction.z*60];

    game.camera.position.x -= speed[0]; //camera.position and focus are basically the same point all the time.
    game.focus.x -= speed[0];

    game.camera.position.z -= speed[1];
    game.focus.z -= speed[1];
}

方向是这样计算的:

var c = Math.sqrt(cameraBuff.x*cameraBuff.x + cameraBuff.z*cameraBuff.z);
var rat = 1/c;

game.direction.x = cameraBuff.x*rat;
game.direction.z = cameraBuff.z*rat;

有人可以解释我的代码有什么问题吗？

Answer 1

3D 相机需要矢量才能知道如何倾斜相机。这通常是向上方向，并且是正 Y 向量。如果相机平行于向上方向，它不知道什么是向上的，所以它会猜测，而且你不能倾斜相机。要让相机倾斜，需要修改向上方向。

我没有用过 Three.js，但我认为你可以使用 camera.up 向量。

您也可以通过将 Angular 限制为 0.1 < x < 179.9 来使其工作