Three.js/교차점

Question

내 three.js 장면에서 일부 큐브가 있습니다. 마우스로 상자를 선택할 수있는 가능성을 사용자에게 제공하고 싶습니다.

이 중요한 코드 (나는 Three.js를 버전 69 사용) : 나는 큐브를 클릭하면

function init() { 
    [...] 
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR); 
    [...] 
    // in a 'for' iteration, I a many boxes in a 'objects' array : 
     abox = new THREE.Mesh(geometry, material); 
     objects.push(abox); 
    [...] 
    vector = new THREE.Vector3(0,0,0); 
    raycaster = new THREE.Raycaster(); 
    animate(); 
    document.addEventListener('mousedown', onDocumentMouseDown, false ); 
} 


function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    if (camera instanceof THREE.OrthographicCamera) { 
     vector.set((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, - 1); 
     vector.unproject(camera); 
     dir.set(0, 0, - 1).transformDirection(camera.matrixWorld); 
     raycaster.set(vector, dir); 
    } else if (camera instanceof THREE.PerspectiveCamera) { 
     vector.set((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
     vector.unproject(camera); 
     raycaster.set(camera.position, vector.sub(camera.position).normalize()); 
    } 

    var intersects = raycaster.intersectObjects(objects , false); 

    if (intersects.length > 0) { 

     var intersect = intersects[ 0 ]; 

     // change color of the face 
     intersect.object.material.color.setHex(Math.random() * 0xFF0000); 

     renderer.render(scene, camera); 

     } 

    } 

, 선택한 점 (교차)가 정확히 (근처가 아니라 정확히)하지 않습니다 어디 나는 클릭했다. 교대, 번역 (Orthographic or Perpective 카메라를 사용해 보았습니다 .... 같은 문제)이 있습니다.

어떤 도움을 환영합니다. WestLangley 나에게 제안으로

감사

Answer 1

은, 답은 약 캔버스의 상쇄되었다. 그는 여기에 좋은 설명을 썼습니다. THREE.js Ray Intersect fails by adding div