클릭하고 약간 드래그하지 않으면 Three.js를 사용하는 mousedown 이벤트가 작동하지 않습니다.

Question

몇 가지 이유로 아래 코드에서 객체를 단순히 클릭하면 "intersects"변수에 onDocumentMouseDown 이벤트 핸들러에 항목이 없습니다 . 클릭 한 객체를 탐지하려면 클릭 한 항목을 클릭하기 전에 마우스를 클릭하고 약간 드래그해야합니다. 그게 중요하다면 나는 또한 trackballcontrols를 사용하고있다. 큐브에 클릭 jsfiddle 예에서 http://jsfiddle.net/marktreece/xvQ3f/

예상대로 색이 변경되지 않습니다주의 사항 : 나는 여기에 jsfiddle 예를 들어 있습니다. 이제 큐브를 클릭하고 마우스 버튼을 놓기 전에 커서를 약간 움직이면 색상이 바뀝니다. 객체를 단순히 클릭하면 충분할 수 있도록 어떻게 만들 수 있습니까? 나는 당신의 예를 들어 raycasting에서 볼 수있는에서

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
    projector.unprojectVector(vector, camera); 
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 
    var intersects = raycaster.intersectObjects(scene.children, true); 
    if (intersects.length > 0) { 
     intersects[ 0 ].object.material.color.setHex(Math.random() * 0xffffff); 
    } 
} 

Answer 1

가 잘 작동하고 변수가 비어 있지 교차 :

은 여기 내 mousedown 이벤트 핸들러입니다. 문제는 TrackballControls를 사용하면서 카메라가 위치를 바꿀 때만 렌더링이 수행된다는 것입니다. 그것이 마우스의 작은 드래그로 인해 상자의 색상이 변경되는 이유입니다.

아래에는 애니메이션 기능과 함께 렌더링 기능이 새로 추가되었습니다. 이렇게하면 문제가 해결됩니다. 그러나 렌더링이 모든 프레임에서 수행되므로 이것이 가장 효율적인 솔루션은 아닙니다. 이 도움이

function animate() { 
    try{ 
     requestAnimationFrame(animate); 
     controls.update(); 
     render(); 
    } 
    catch(err){ 
     alert("animate error. " + err.message); 
    } 
} 

희망!