Three.js : 구 주위를 날아 다니는 카메라?

Question

Three.js (JavaScript/WebGL을 사용함)에서 사용자가 조정할 수있는 상태로 고정 된 높이의 구 주위를 비행하고 고정 된 정방향 속도 및 구체와 관련된 고정 된 방향을 만드는 카메라를 만드는 방법은 무엇입니까? 왼쪽과 오른쪽?

지상 근처 비행 항상 영역의 일부를보고, 지구본의 중심에 보이지 않는 문자열에 비행기를 상상해 :

(I 현재에 있도록 영역을 회전 코드가 카메라는 마치 날아가는 것처럼 보입니다 - 왼쪽 및 오른쪽 조종은 아직 구현되지 않았습니다. 그러나 앞으로 나아 가기 전에 구형 그룹이 아닌 카메라/비행기를 움직이는 것이 더 깔끔할 수도 있습니다.)

고마워요!

Answer 1

내 Ludum Dare 23 game에 무슨 뜻입니까? 나는 이것이 내가 예상했던 것보다 조금 더 복잡하다는 것을 알았다. 그것은 어렵지 않습니다.

여기 카메라의 위도와 경도와 구의 중심으로부터의 거리 (radius)를 알고 있고 카메라의 변형 행렬을 만들고 싶다고 가정합니다. 다음과 같이 다음

var rotationY = new Matrix4(); 
var rotationX = new Matrix4(); 
var translation = new Matrix4(); 
var matrix = new Matrix4(); 

때마다 카메라 이동 행렬을 만듭니다 :

는 게임 루프에 새로운 객체를 생성하지 않도록 한 번만 다음 개체를 만들기

rotationY.setRotationY(longitude); 
rotationX.setRotationX(-latitude); 
translation.setTranslation(0, 0, radius); 
matrix.multiply(rotationY, rotationX).multiplySelf(translation); 

를이 단지 한 카메라 행렬 세트 (가정 카메라는 카메라의 목적)

// Clear the camera matrix. 
// Strangely, Object3D doesn't have a way to just SET the matrix(?) 
camera.matrix.identity(); 
camera.applyMatrix(matrix); 

Answer 2

감사 F 또는 마틴의 대답! 나는 이제 다음과 같은 또 다른 접근 방식으로 잘 돌아가고있다. (마틴의 접근법 또한 완벽 할 수 있으며 Lmg 덕택이다.)

카메라를 처음부터 구의 꼭대기에 직선으로 설정한다. 높은 y 값, 반경 너머의 비트, 제 경우에는 200). 보이게 약간 낮은 :

camera.position.set(0, 210, 0); 
camera.lookAt(new THREE.Vector3(0, 190, -50)); 

빈 그룹 (AN Object3D)를 만들고 카메라를 넣어 : 화면의 절반과 관련 퍼센트에

camGroup = new THREE.Object3D(); 
camGroup.add(camera); 
scene.add(camGroup); 

트랙 마우스 위치를 :

순방향 automoving 동안 애니메이션 루프

var halfWidth = window.innerWidth/2, halfHeight = window.innerHeight/2; 
app.mouseX = event.pageX - halfWidth; 
app.mouseY = event.pageY - halfHeight; 
app.mouseXPercent = Math.ceil((app.mouseX/halfWidth) * 100); 
app.mouseYPercent = Math.ceil((app.mouseY/halfHeight) * 100); 

는 회전이 퍼센트 적용

camGroup.matrix.rotateY(-app.mouseXPercent * .00025); 
camGroup.matrix.rotateX(-.0025); 
camGroup.rotation.getRotationFromMatrix(camGroup.matrix); 

requestAnimationFrame(animate); 
renderer.render(scene, camera);