three.js가 두 번 클릭 됨 3d 객체

Question

Ciao,이 작업을 수행하려고합니다. 3D 객체가 내 장면에서 두 번 클릭되고 카메라 위치를 애니메이션하여 화면 가운데에 객체가 나타나게합니다. .

내가 raycaster 및 프로젝터를 사용하는 대화 형 큐브 예를 적응 성공없이 시도 ...

http://www.gioblu.com/GiO/web/solarsystem/index_backup

당신이 공간에서 탐색하고 오른쪽 마우스 왼쪽 버튼으로 카메라의 위치를 ​​변경할 수 있습니다 볼 수 있듯이 . 행성을 두 번 클릭하면 초기 카메라 위치 (화면 중심의 지구)로 돌아갈 수 있습니다.

Answer 1

예제를 적용하여 왜 성공하지 못했습니까? 발생하는 오류는 무엇입니까? this 예를 나타 냈습니까? 레이 캐스터와 프로젝터는 당신이 찾고있는 방식입니다.

우선 컨테이너의 ondblclick 이벤트에 대한 eventListener가 필요합니다. 이벤트 함수에서 링크 된 예에서 & 붙여 넣기를 복사 할 수 있습니다 :

1) 저장 마우스 좌표

mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

2) 프로젝트는 카메라를 통해 세계 체제 좌표와 선을 만들

var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
projector.unprojectVector(vector, camera); 
raycaster.set(camera.position, vector.sub(camera.position).normalize()); 

3) 더블 클릭 한 요소가 당신의 행성인지 확인하십시오

var intersects = raycaster.intersectObject("your_planet"); 
if (intersects.length > 0) { 
    reset your camera 
} 

희망이 도움이됩니다!