카메라가 높은 각도 또는 낮은 각도에 배치되면 이상하게 작동 함

Question

나는 카메라를 움직이기 원하는 간단한 Three.js 장면을 가지고 있습니다. 카메라는 움직이기 위해서뿐만 아니라 특정 초점 지점을 중심으로 각도를 변경할 수 있어야합니다. 포커스 포인트는 실제로 카메라 위치이며, 렌더링시에는 실제로 카메라를 cameraBuff으로 변환하고이를 구에 배치 한 다음 초점 점을 보도록 지시합니다.

카메라를 움직일 때까지 모든 것이 정상적으로 작동하며 카메라와 그 모든 것들을 회전시킬 수 있습니다. 그러나 일단 움직이기 시작하면 무언가가 깨지는 것 같습니다! 보통 각도 (수직, 0 < x < 180)에서는 단지 멈추고 초점 포인트를 전혀 회전 할 수 없습니다. 일단 그것을 내려 놓으면 모든 것이 다시 시작됩니다. 단지 정교하기 위해, 문제는 표면에 수직이되는 cameraBuff 포인트가되면 발생합니다.

이

내가 초점 주위 cameraBuff 벡터/포인트 회전하는 데 사용하는 코드입니다 : 나는 사물이 작동하는, 예를 들어, phi = Math.min(160, Math.max(20, phi));에 phi = Math.min(180, Math.max(0, 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); 

을, 그러나 나는조차 얻을 수 아니다 카메라가 표면에 수직이거나 심지어 더 낮아질 수 있습니다.

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; 

누군가가 내 코드에 어떤 문제가 있는지 설명 할 수

이 예를 들어, w를 눌렀을 때, 무슨 일입니까?

Answer 1

3D 카메라에는 벡터가 있어야 카메라를 기울이는 방법을 알 수 있습니다. 이것은 일반적으로 위쪽 방향이며 양의 Y 벡터입니다. 카메라가 위쪽 방향과 평행 한 경우 카메라가 위로 올라와있어 짐작할 수 없으므로 카메라를 기울일 수 없습니다. 카메라를 기울이려면 위쪽 방향을 수정해야합니다.

나는 Three.js를 사용하지 않았지만 camera.up 벡터를 사용할 수 있다고 생각합니다.

또한 0.1 < X < 179.9