클릭 한 위치에 스프라이트 그리기

Question

https://threejs.org/examples/?q=inter#canvas_interactive_cubes을 읽은 후 noobie가 three.js인데, 내 프로젝트 (로드 및 디스플레이 stl 파일)에 클릭 한 함수 그리기 지점을 추가하고 싶습니다.이 예에서 수식을 사용했습니다. ,

mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

는하지만 스프라이트 내가 클릭 한 위치에 그려진 것이 아니라, 낮은 조금, 당신은 http://static.medi-tool.cn/share/ds1/index.html에서 볼 수있는 경우 발견 (첫 번째 스프라이트를 그릴 것입니다 모델을 클릭, 두 번째는 스프라이트를 그리고 계산합니다 두 점 사이의 거리가 있으면 2 초 안에 두 개의 스프라이트가 제거됩니다. 아무도 왜 내게 말할 수 있습니까? 고마워.

Answer 1

제가 div를 가지고 있기 때문에 캔버스에, 수식을 사용할 때, 그 div의 높이를 마이너스로해야한다는 것을 알았습니다. 즉, mouse.x, mouse.y, '이벤트를 계산할 때 .clientX '&'event.clientY '는 뷰포트가 아닌 캔버스에 상대적이어야합니다.

질문의 테스트 페이지가 이제 정상입니다.