중심 이동 된 원 (카메라) 주위로 카메라 교정

Question

메신저를 움직여서 3 개의 j로 카메라를 이동하려고합니다. 모든 것이 제대로 작동하고 메신저는 무엇 내가 지금 추가 할 것은 카메라 (위치 0/0 인 원에 중간을 얻을 수 있다는 것입니다 -1에서 1까지의 위치를 ​​얻을 수

function onMouseMove(event) { 
    mousePosition.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mousePosition.y = - (event.clientY/window.innerHeight) * 2 + 1; 
} 

를 사용하여 브라우저 화면의). 설명하기가 어렵지만 x 또는 y 값이 -0.5에서 0.5 범위를 벗어날 때까지이 원의 반지름을 중심으로 카메라를 선 위로 이동하려고합니다. 이것은 카메라가 업데이트되는 방식입니다 :

camOffset.x += (mousePosition.x - camOffset.x) * 0.1; 
camOffset.y += (mousePosition.y - camOffset.y) * 0.1; 
camera.position.x += camOffset.x * 30; 
camera.position.y += camOffset.y * 30; 

당신이 나를 도울 수 있기를 바랍니다! 감사!

Answer 1

나는 자바 스크립트의 구문을 모르는 (또는이 코드는 무엇이든)하지만,이 같은 작업을해야합니다 : 마우스의 위치가 0.5보다 작은 크기를 가지고

mag2 = camera.position.x * camera.position.x + camera.position.y * camera.position.y; 
if(mag2 < 0.01) // to prevent divide-by-zero if the camera hits the origin 
    camera.position.x = 0.5; 
else 
if(mag2 < 0.25) 
    { 
    k = 0.5/sqrt(mag2); 
    camera.position.x *= k; 
    camera.position.y *= k; 
    } 

Answer 2

x, y, z를 phi, theta로 효율적으로 변환하려면 THREE.Spherical()를 사용하십시오. 그것은 당신의 노력을 줄이고 카메라 움직임에 대한 더 나은 이해를 줄 것입니다. 카메라의 세타 만 변경하여 원 안에 회전시킵니다.

var delta = mousePosition.x - camOffset.x; 
    var rotMult = delta * rollSpeed;// adjust this according to your need. 
    var vector = new THREE.Vector3(); 
    var center = new THREE.Vector3(); 
    var spherical = new THREE.Spherical(); 
    vector.copy(camera.position).sub(center); 
    spherical.setFromVector3(vector); 
    spherical.theta += this.rotationVector.y * rotMult; 
    spherical.makeSafe(); 
    vector.setFromSpherical(spherical); 
    camera.position.copy(center).add(vector); 
    camera.lookAt(center); 

Answer 3

var mag2 = mousePosition.x * mousePosition.x + mousePosition.y * mousePosition.y; 
    var radius = 0.3; 
    if(mag2 < radius){ 
     if(mousePosition.x <=0 && mousePosition.y >=0){ //1 quadrant 
      camOffset.x += ((mousePosition.x - camOffset.x)-radius) * 0.1; 
      camOffset.y += ((mousePosition.y - camOffset.y)+radius) * 0.1;    
     }else if(mousePosition.x >0 && mousePosition.y >=0){ //2 quadrant 
      camOffset.x += ((mousePosition.x - camOffset.x)+radius) * 0.1; 
      camOffset.y += ((mousePosition.y - camOffset.y)+radius) * 0.1;     
     }else if(mousePosition.x <=0 && mousePosition.y <0){ 
      camOffset.x += ((mousePosition.x - camOffset.x)-radius) * 0.1; 
      camOffset.y += ((mousePosition.y - camOffset.y)-radius) * 0.1;     
     }else if(mousePosition.x >0 && mousePosition.y <0){ 
      camOffset.x += ((mousePosition.x - camOffset.x)+radius) * 0.1; 
      camOffset.y += ((mousePosition.y - camOffset.y)-radius) * 0.1;    
     }  
     camera.position.x += camOffset.x * 30; 
     camera.position.y += camOffset.y * 30; 
    }else{ 
     camOffset.x += (mousePosition.x - camOffset.x) * 0.1; 
     camOffset.y += (mousePosition.y - camOffset.y) * 0.1; 
     camera.position.x += camOffset.x * 30; 
     camera.position.y += camOffset.y * 30; 
    }