raycaster 교차점을 가진 Threejs 문제

일부 객체와 교차하는 코드를 작성하고 다른 div와 함께 html 문서에 캔버스를 넣을 때까지 잘 작동했습니다. 이제 객체에는 교차가 없습니다. 이 라이브 예제에서 : http://www.felpone.netsons.org/web-threejs/index1.html 오른쪽 상단의 버튼 십자가를 선택하고 할 수없는 도형을 이동하려고 시도한 경우. 도형의 오른쪽에 마우스를 조금두면 모양을 이동할 수 있습니다. 따라서 교차점은 완전히 잘못되었습니다. stackoverflow에 게시 된 일부 솔루션을 시도했지만 작동하지 않습니다. 누구든지 내가 이해할 수있게 도와 줄 수 있니? 나는 필사적이다.raycaster 교차점을 가진 Threejs 문제

이 라이브 예제에서는 작동 방법을 알 수 있습니다 : http://www.felpone.netsons.org/web-threejs/. 다른 솔루션을 Stackoverflow 작성된 있지만 결과없이했습니다.

아마 마우스로 따라 달라질 수 있습니다 좌표 :

여기

mouse2D.x = ((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width) * 2 - 1; 
mouse2D.y = - ((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height) * 2 + 1;

당신이 자바 스크립트 코드를 볼 수 있습니다 http://www.felpone.netsons.org/web-threejs/stereos.js

어쩌면에 의해 따라 달라질 수 있습니다 :

내가 캔버스는 서로 다른 두 가지 차원이 있다는 것을 발견 이 스크린 샷에서 볼 수 있듯이 : enter image description here

출처

2015-01-13 stefano

참조 http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div – WestLangley

팁 : 마우스가 움직일 때마다 새로운 'Raycaster'및 'Vector3'인스턴스 생성을 피하십시오 . 하나씩 만들고 다시 사용하십시오. – WestLangley

위의 촬영 화면에서 원으로 그린 태그는 중요하지 않습니다. 중요한 것은 실제 번호 (당신이 선회 한 최상위 번호)입니다. 사용자가 브라우저의 크기를 조정하면 해당 최상위 번호가 변경 될 수 있습니다. 아래 내 대답에 따라 포함 된 오프셋을 쿼리해야합니다. –

시도해보십시오. NGE 코드는 다음과 같이 당신의 DOM에서

var x = event.offsetX == undefined ? event.layerX : event.offsetX; 
var y = event.offsetY == undefined ? event.layerY : event.offsetY; 

mouse2D.x = (x/renderer.domElement.width) * 2 - 1; 
mouse2D.y = - (y/renderer.domElement.height) * 2 + 1;

출처

2015-01-13 13:58:54

나는 시도했지만 동일한 문제가있다 – stefano

pleas, 코드 –

여기에 자바 스크립트 코드를 볼 수있다 : http://www.felpone.netsons.org/web-threejs/stereos.js – stefano

는 캔버스 스크립트가 높이와 너비를 복용 곳에서 즉

<canvas width="1139" height="975"></canvas>

로 나타납니다.

그러나, 캔버스의 실제 크기는 CSS에서

width: 100%; 
height: 100%;

에서 왔습니다. 스크립트가

출처

2015-01-13 18:10:19 vals

event.clientX 브라우저 창을 기준으로 문제없이 올바른 값을 취할 수 있도록

나는 그들 중 하나를 제거합니다. 캔바스를 기준으로 오프셋을 원한다. 따라서 캔바스가 포함 된 각 요소의 오프셋을 선택해야합니다. https://stackoverflow.com/a/5932203/2195930

내가 캔버스 위에 마우스를 다루는이 코드 매번를 사용

이

당신이 원하는 것을 할 몇 가지 좋은 깨끗한 코드입니다.

간단한 테스트 케이스가 있다면 전체 솔루션을 모의하려고합니다.

출처

2015-01-13 18:52:14

raycaster 교차점을 가진 Threejs 문제

답변

관련 문제