Three.js 정확하지 않은 Raycaster

Question

Plane 메쉬에서 클릭을 감지하려고합니다. 예제를 가이드로 사용하여 레이 캐스터를 설정했습니다. 당신이 마커 선 아래를 클릭하면 더 클릭은 클릭이 (마커 라인은 효과가 없습니다) 비행기 내부에도 불구하고 발견되지 않습니다 http://jsfiddle.net/BAR24/o24eexo4/2/

: 여기

는 코드입니다.

화면의 크기를 조정 해보세요. 그런 다음 마커 선 위의 클릭 만해도 작동하지 않을 수 있습니다.

아마도 이것은 정사각형 카메라의 사용과 관련이 있습니까? 또는 일부 필수 매트릭스를 업데이트하지 않습니까?

function onMouseDown(event) { 
    event.preventDefault(); 

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

    raycaster.setFromCamera(mouse, camera) 

    var intersects = raycaster.intersectObjects(objects); 

    if (intersects.length > 0) { 
    console.log("touched:" + intersects[0]); 
    } else { 
    console.log("not touched"); 
    } 
} 

Answer 1

CSS가 레이 캐스팅 계산에 영향을 미칩니다. 자세한 내용은 THREE.js Ray Intersect fails by adding div를 참조 당신이 할 수있는 한 가지가

body { 
    margin: 0px; 
} 

설정됩니다.

윈도우 크기 조정도 올바르게 처리해야합니다. 일반적인 패턴은 다음과 같습니다.

function onWindowResize() { 

    var aspect = window.innerWidth/window.innerHeight; 

    camera.left = - frustumSize * aspect/2; 
    camera.right = frustumSize * aspect/2; 
    camera.top = frustumSize/2; 
    camera.bottom = - frustumSize/2; 

    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 

} 

three.js 예를 살펴보십시오. 특히 http://threejs.org/examples/webgl_interactive_cubes_ortho.html을 참조하십시오.

또한 정사각형 카메라를 올바르게 인스턴스화하는 방법을 설명하는 this answer을 읽으십시오.

three.js를 R.80

Answer 2

이 ... 그것은 어디도 당신이 여유를 가지고 스크롤 작동합니다보십시오!

function onMouseDown(event) { 
     event.preventDefault(); 

     var position = $(WGL.ctx.domElement).offset(); // i'm using jquery to get position 
     var scrollUp = $(document).scrollTop(); 
     if (event.clientX != undefined) { 
      mouse.x = ((event.clientX - position.left)/WGL.ctx.domElement.clientWidth) * 2 - 1; 
      mouse.y = - ((event.clientY - position.top + scrollUp)/WGL.ctx.domElement.clientHeight) * 2 + 1; 
     } else { 
      mouse.x = ((event.originalEvent.touches[0].pageX - position.left)/WGL.ctx.domElement.clientWidth) * 2 - 1; 
      mouse.y = - ((event.originalEvent.touches[0].pageY + position.top - scrollUp)/WGL.ctx.domElement.clientHeight) * 2 + 1; 
     } 

     raycaster.setFromCamera(mouse, camera) 
     var intersects = raycaster.intersectObjects(objects); 
    }