THREE.js - 트랙볼 컨트롤과 마찬가지로 카메라 회전

Question

장면에서 트랙볼 컨트롤을 사용하고 있으며 캔버스에서 마우스를 드래그하는 것처럼 카메라를 회전하는 기능을 구현하려고합니다. 어떻게 그렇게 할 수 있습니까? Trackball 컨트롤 모듈의 코드를 살펴 봤지만 시작해야 할 항목을 찾을 수 없습니다.

편집 : 나는 여러 페이지를 보았는데, 세 개의 문서와 겹침 선은 보이지만 여전히 트랙볼 스타일 회전을 재현 할 수는 없습니다. 나는 quaternions도 사용하고 있지만 행동을 재현 할 수는 없다. 어떤 도움이 필요합니까?

편집 2 : 내가 찾고 이런 일을 할 수있는 방법입니다 : button가 버튼을 나타내는 HTML 요소입니다

function rotateCam(angle) { // code } 

var angle = 0.01; //some value 
rotateCam(angle); 
$('#button').addEventListener('mousedown', function() { rotateCam(angle); }); 

.

Answer 1

쿼터니언을 통해 회전하는 트랙볼 컨트롤이 일부 거리를 수정하기 위해 확대/축소를 수행한다는 것을 알아 챘습니다. 나는 코드를 읽으려고 노력했고, 이것을 얻었다 :

function rotate(L) { 
    var vector = controls.target.clone(); 
    var l = (new THREE.Vector3()).subVectors(camera.position, vector).length(); 
    var up = camera.up.clone(); 
    var quaternion = new THREE.Quaternion(); 

    // Zoom correction 
    camera.translateZ(L - l); 

    quaternion.setFromAxisAngle(up, 0.015); 
    camera.position.applyQuaternion(quaternion); 
    camera.lookAt(vector); 
    renderer.render(scene, camera); 
} 

누군가가 이것을 유용하게 생각하기를 바랍니다. ;)

Answer 2

은 내가 이런 짓을 ... 내가 생각하는 올바른 방법에있어 : ​​

function rotate() { 
    if (this.showCase) { 
     var vector = controls.target.clone(); // controls is a TrackballControls 
     var up = camera.up.clone(); 
     var quaternion = new THREE.Quaternion(); 
     quaternion.setFromAxisAngle(up, 0.015); 
     camera.position.applyQuaternion(quaternion); 
     camera.lookAt(vector); 
     renderer.render(this.scene, this.camera); 
    } 
}, 

그러나 그것은 TrackballControls 회전과 같은 권리 권리를 보이지 않는다.

Answer 3

function cameraRotate(distance, angle){ 

      camera.position.x = distance * Math.cos(angle); 
      camera.position.z = distance * Math.sin(angle); 

} 

이렇게하면 카메라가 장면 주변의 지정된 거리와 각도로 회전합니다. 부드러운 회전을 원하면 예를 들어 입력에 따라 animate-loop에서 약간의 각도 증가로이를 호출 할 수 있습니다.