three.js : 카메라 회전 제한

Question

실제 카메라를 모델링하려고 시도하면서 three.js로 작업하고 있습니다. 따라서 회전 축을 x 축과 y 축을 따라 90 도로 제한하고 싶습니다.

이 작업을 수행하는 간단한 방법이 있습니까? 내 현재 코드는 특히 잘 작동 (당신은 X지나 카메라를 이동하려고 시도와 동시에 Y 경계 때 미쳐 간다) 어떤 조언이 크게 감상 할 수

if(xRot != null && xRot != undefined){ 
 
    camera.rotateX(xRot);    
 
} 
 

 
if(yRot != null && yRot != undefined){ 
 
    camera.rotateY(yRot); 
 
} 
 

 
if(camera.rotation.x < minCameraRotX){ 
 
    camera.rotation.x = minCameraRotX; 
 
}else if (camera.rotation.x > maxCameraRotX){ 
 
    camera.rotation.x = maxCameraRotX; 
 
}  
 

 
if(camera.rotation.y < minCameraRotY){ 
 
    camera.rotation.y = minCameraRotY; 
 
}else if(camera.rotation.y > maxCameraRotY){ 
 
    camera.rotation.y = maxCameraRotY; 
 
}

하지 않습니다!

Answer 1

실제로 PointerLock이라는 라이브러리에 대한 Three.js 데모의 기존 코드 중 일부를 확인하여 해결책을 찾았습니다. 아이디어는 실제로 여러 객체를 서로 쌓는 것입니다. 가로로 움직이는 객체 (요 객체)로 시작하고, 세로로 이동하는 요 객체 (피치 객체) 안에 다른 객체를 배치 한 다음 실제 카메라를 피치 내에 배치합니다 목적.

그런 다음 바깥 쪽 개체 (요와 피치)를 해당 축을 따라 회전하므로 두 개체를 모두 회전 시키면 자체 수정됩니다. 예를 들어, y 축을 따라 y 축을 45도 회전 (오른쪽으로 돌림) 한 다음 피치를 45도 회전시켜 (아래로 돌리면) 피치가 이미 45도 각도로 내려갑니다 (Yaw가 이미 회전 한 상태에서 ). 위치.

카메라가 둘 다 안에 있다고 가정하면, 요와 피치가 지시하는 곳이면 어디든 가리킬뿐입니다. 또한 https://github.com/mrdoob/three.js/blob/acda8a7c8f90ce9b71088e903d8dd029e229678e/examples/js/controls/PointerLockControls.js

,이 종류의 치즈이지만,이 작은 비행기 만화 나 시각적 도움 : 여기

내가 참조 소스 코드의 코드

/* 
 
* CAMERA SETUP 
 
* 
 
* Root object is a Yaw object (which controls horizontal movements) 
 
* Yaw object contains a Pitch object (which controls vertical movement) 
 
* Pitch object contains camera (which allows scene to be viewed) 
 
* 
 
* Entire setup works like an airplane with a 
 
* camera embedded in the propellor... 
 
* 
 
*/ 
 

 
// Yaw Object 
 
var yawObject = new THREE.Object3D(); 
 

 
// Pitch Object 
 
var pitchObject = new THREE.Object3D();  
 

 
// Camera Object 
 
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 
 

 
// Max Camera angles (in radians) 
 
var minCameraRotX = 0.5; 
 
var maxCameraRotX = 0.5; 
 
var minCameraRotY = 1; 
 
var maxCameraRotY = 1; 
 

 

 
// Setup 
 
yawObject.add(pitchObject); 
 
pitchObject.add(camera); 
 

 
scene.add(yawObject); 
 

 
... 
 

 
var rotateCamera = function(xRot, yRot, zRot){ 
 
    yawObject.rotation.y += yRot; 
 
    pitchObject.rotation.x += xRot; 
 

 
    // Enforce X-axis boundaries (rotates around y-axis) 
 
    yawObject.rotation.y = Math.max(minCameraRotY, Math.min(maxCameraRotY, yawObject.rotation.y)); 
 

 
    // Enforce Y-axis boundaries (rotates around x-axis) 
 
    pitchObject.rotation.x = Math.max(minCameraRotX, Math.min(maxCameraRotX, pitchObject.rotation.x)); 
 
}

여기

입니다 정확히 내 설정에서 무슨 일이 있었는지