Three.js에 대한 GoogleEarth와 같은 컨트롤

Question

three.js에 대한 GoogleEarth와 유사한 컨트롤을 만들기 위해 불량한 3D 지오메트리 이해와 불만족스러운 시간 낭비로 실패했습니다. 어쩌면 누군가가 나를 도울 수 있고, 이미 가지고있을 수도 있습니다. 어쨌든, 나는 three.js 라이브러리에 훌륭한 추가 기능이 될 것이라고 생각합니다. 마우스 왼쪽 버튼을 누르면 시프트

팬을 누른

1. 줌 마우스 휠과 마우스 커서 장면 주위
2. 회전 TO :

   는 여기에 내가 구축을 위해 노력하고있는 특정 기능입니다.

3. 보너스 : 위의 1과 2 작업 중에 작은 대상 아이콘을 표시하십시오.

나는 1로 가장 문제가 있으며 시도하지 않았습니다. 2 패닝은 쉽습니다 (많은 예제가 있습니다).

지금은 장면을 확대 할 수 없으므로 커서 아래 고정되어 있습니다 (그래서 화면의 오른쪽 상단을 가리키고 확대되어 여전히 커서 아래에있는 것을 볼 수 있습니다). 사전에

내 덕분에, 알렉스

Answer 1

나는 전생에 비슷한 구현했습니다. 여기서 평평한 비행기와 상호 작용하는 것으로 가정합니다. 이러한 기술을 구체에 접하는 평면으로 변환하는 것은 독자의 연습 과제로 남겨 둡니다. ;)

줌 마우스 휠과 마우스 커서

이렇게하려면, 당신은 장면에 광선을 캐스팅하고 닿을주의하는 것이 좋습니다. 그런 다음 카메라의 시점을 해당 교차점으로 번역하려고합니다. "정확함"을 느끼기 위해서는 고정 스텝 대신 일종의 비례 줌 인을 원할 것입니다. 예를 들어, 각 줌 스텝은 단지 20 단위를 이동하는 대신 현재 시점에서 타겟까지의 거리를 20 % 줄입니다. 이렇게하면 자동으로 카메라 속도가 느려집니다.

1 교대를 누른 현장 주변

회전 당신이 왼쪽 할 것입니다 오른쪽 마우스 움직임은 당신의 관점에 대해 궤도, 변화를 누릅니다. 이렇게하려면 교차점에 수직 인 축에 대해 기울일 필요가 있습니다. 광선을 장면에 던지면 (교대가 멈추고 나면) 교차점을 적어두고 그 축에 대한 카메라의 시점을 회전합니다. 회전 할 때 계속 교차점을 가리 키도록 카메라 방향을 바꾸거나 눈 방향에서 교차점까지의 벡터와 일정한 각도를 유지하도록 눈 방향을 회전해야 할 수도 있습니다.

왼쪽 마우스 버튼을 눌러 이동하십시오.

당신은 단순히 눈에 잘 벡터와 눈 위쪽 벡터를 얻고, (적절한 방향으로 이동 정규화 된 눈/오른쪽 눈이 위로 마우스 DX/DY을 곱 및 프레임 속도 독립 운동을위한 시간 단계를 곱해야

).

보너스 : 위의 1 및 2 작업 중 작은 대상 아이콘을 표시하십시오.

장면의 교차점에 작은 물체를 추가하십시오. 일단 모드를 빠져 나가면 그 대상을 제거하십시오.

Answer 2

은 첫 번째 질문에 대한 당신은 내가이 확실 도움이되기를 바랍니다 마우스 휠

mousewheel = function (event) { 
event.preventDefault(); 
var factor = 15; 
var mX = (event.clientX/jQuery(THREE_STUFF.container).width()) * 2 - 1; 
var mY = -(event.clientY/jQuery(THREE_STUFF.container).height()) * 2 + 1; 
var vector = new THREE.Vector3(mX, mY, 0.1); 
vector.unproject(camera); 
vector.sub(camera.position); 
if (event.deltaY < 0) { 
camera.position.addVectors(camera.position, vector.setLength(factor));      trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor)); 
} else { 
camera.position.subVectors(camera.position, vector.setLength(factor));      trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor)); 
} 
} 

에서이 프로그램을 사용할 수 있습니다.