一旦放置在高角度或低角度時，相機的表現很奇怪

Question

我有一個簡單的Three.js場景，我想移動相機。相機不僅需要移動，而且還需要改變圍繞某個焦點的角度。焦點實際上是相機的位置，在渲染時，我實際上只是將相機翻譯了cameraBuff並將它放在一個球體上，然後我告訴它看看焦點。

直到相機移動，一切正常，我可以旋轉相機和所有。但是，一旦我開始移動，似乎就會破壞！在垂直角度（垂直，0 < x < 180）它只是凍結，根本不能圍繞焦點旋轉。一旦我將它往下移一點，所有事情都會重新開始。只需詳細說明，一旦點垂直於表面，問題就會發生。

這是我用來繞焦點cameraBuff矢量/點代碼：一旦我改變phi = Math.min(180, Math.max(0, phi));到phi = Math.min(160, Math.max(20, phi));，例如，工作的事情

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

，但我不能夠連得相機垂直於表面，或者甚至降低它。

這時候，例如，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矢量。

你也可以把它通過限制的角度來工作，0.1 < X < 179.9