除非我单击并轻轻拖动，否则使用 Three.js 的 mousedown 事件不起作用答案

【问题标题】：The mousedown event using Three.js doesn't work unless I click and slightly drag除非我单击并轻轻拖动，否则使用 Three.js 的 mousedown 事件不起作用
【发布时间】：2014-03-14 11:57:43
【问题描述】：

由于某种原因，在下面的代码中，当我简单地单击一个对象时，“intersects”变量不包含 onDocumentMouseDown 事件处理程序中的任何项目。为了让它检测到单击的对象，我必须单击并轻轻拖动鼠标，然后它才能拾取单击的项目。如果这很重要，我也在使用轨迹球控制。我在这里有一个 jsfiddle 示例：http://jsfiddle.net/marktreece/xvQ3f/

在 jsfiddle 示例中，单击立方体并注意颜色没有按预期改变。现在单击立方体，在释放鼠标按钮之前，稍微移动它，颜色就会改变。我怎样才能做到只需单击对象就足够了？

这是我的 mousedown 事件处理程序：

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 );
    }
}

【问题讨论】：

标签： javascript three.js mousedown trackball

【解决方案1】：

据我所见，在您的示例中，光线投射工作正常，并且 intersects 变量不为空。问题在于，当您使用 TrackballControls 时，仅当相机更改其位置时才会执行渲染。这就是为什么轻轻拖动鼠标会改变框的颜色。

在下面，我将您的 animate 函数与一个新的渲染函数调用一起包含在内。这解决了问题。但是请注意，这不是最有效的解决方案，因为渲染是每帧执行的。

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

希望这会有所帮助！

【讨论】：