ThreeJS oribital 카메라 짧은 회전

Question

지구를 궤도에 공전하는 궤도 카메라가 있습니다. 사용자가 클릭 할 수있는 지구상에 여러 마커가 있으며 카메라가 그 지점으로 이동합니다. 이 같은 애니메이션 TweenMax를 사용

-이 위대한 작품을

TweenMax.to(currentPos, 3, { 
    theta:targetPos.theta, 
    phi:targetPos.phi, 
    radius:targetPos.radius, 
    ease:Circ.easeIn, 
    onComplete:btnZoomComplete, 
    onUpdateParams:["{self}"], 
    onComplete:SataliteTweenComplete, 
    onUpdate: function(tween) { 
     controls.setThetaPhi(tween.target.theta, tween.target.phi, tween.target.radius); 
    } 
}); 

, 그러나 거기 얻을 고려 최단 경로를 고려하지 않습니다. 그래서 그것은 아주 자주 지구의 뒤쪽으로 갈 수 있습니다.

ThreeJS는 0, 1.57 (90도에 해당), 3.14 (eq 180dg), 3.14가 -3.14, -1.57 (점에서 270dg)으로 점프 한 후 각도를 측정하는 것처럼 보입니다. , 다시 0으로 ... 그래서이 일은 내 마음을 부 풀리는 방법에 불을 붙입니다.

예를 들어, 카메라가 2.6이고 -2.61로 이동해야합니다. 카메라가 CCW (2.6에서 -2.16)까지 움직일 때 시각적으로 움직일 수있는 CW로 움직여야합니다. 2.6에서 3.14, -3.14, -2.61로 나타났다.

이 문제에 대한 도움은 정말 감사하겠습니다. 원활 -3.14로 이동> 3.14 - - 나는이 문제가 생각

, 어떻게 라운드 가서 어떤 방법으로 해결하기 위해,하지만 실제로는 2.6에서 애니메이션하는 방법> -2.61

Answer 1

을 그래서 " 이상한 단위 시스템 "은 단지 radians이고 -180 °에서 180 °까지 및 90 °에서 90 °까지의 범위에서 theta/phi 값을 측정하는 것은 매우 일반적입니다 (위도/경도, 같은 것을 생각하십시오). 변환은 간단하다 :

angleDegrees = radians/Math.PI * 180; 
radians = angleDegrees/180 * Math.PI; 

지금 트위닝 라이브러리는 단지 다른 하나 개의 값에서 보간하고 이러한 값이 무엇을 나타내는 지 알 수 없습니다. 따라서 회전에 관해서는 최단 경로를 처리하는 방법을 알 수 없습니다. 그러나 트윈을 시작하기 전에이 작업을 수행 할 수 있습니다.

우리가 2.6에서 -2.6 (-149 ° 또는 149 °)에 애니메이션을 말한다.

var from = 2.6, to = -2.6; 

이 애니메이션의 방향 각거리가

var distance = to - from; 
// === -5.2 

음수 값 여기서 반 수단

및 5.2 (~ 298 °)로 계산 될 수있는 카메라가 이동 될 "거리"이다. 이제 모든 각도가 플러스 또는 마이너스 360 ° (2 * Math.PI)라면 본질적으로 동일한 위치에 착륙한다는 것을 명심하십시오. 그래서 시도 할 수 있습니다 :

var distance = (to + 2 * Math.PI) - from; 
// === 1.083185307179586 (~62°) 

을 그래서, 당신은 -2.6 + 2 * Math.PI에 2.6에서 당신의 위치에서 회전 할 경우 (또는, 149 ° -149 °까지 + 360 ° = 211 °), 당신은 짧은와 시계 애니메이션을 얻을 것이다 통로.

모든 값이 허용 된 범위 내에서 유지되도록하려면, 우리는 제대로 랩 어라운드하기 위해의 onUpdate 기능을 약간 변경 :

controls.setThetaPhi(
    tween.target.theta % Math.PI, 
    tween.target.phi % Math.PI, 
    tween.target.radius); 

당신은 아마도 실제와 currentPos 값을 업데이트 할 것 애니메이션이 시작되기 전에 값이 계산되고 계산이 발생합니다.

남은 것은 일반적인 경우에 대해이를 풀어서 시계 방향과 시계 반대 방향으로 회전 할 때를 알아 보는 것입니다. 다른 방법이 더 짧은 지 확인하려면 거리가 180 °보다 큰지 확인해야합니다.

if (Math.abs(to - from) > Math.PI) { 
    if (to > 0) { // if to is positive we remove a full-circle, add it otherwise 
    to = to - 2 * Math.PI; 
    } else { 
    to = to + 2 * Math.PI; 
    } 
}