Javascript 使用Three.js的mousedown事件不会'；除非单击并稍微拖动，否则无法工作

出于某种原因，在下面的代码中，当我简单地单击一个对象时，“intersects”变量在onDocumentMouseDown事件处理程序中不包含任何项。为了让它检测到被点击的对象，我必须在鼠标拾取被点击的项目之前点击并稍微拖动鼠标。如果有必要的话，我也在使用轨迹球控制。这里有一个JSFIDLE示例：

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

这是我的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 );
    }
}

---

从我所看到的，在您的示例中，光线投射效果很好，并且intersects变量不是空的。问题在于，在使用轨迹球控件时，仅当摄影机更改其位置时才执行渲染。这就是为什么拖动鼠标会改变框的颜色

下面我包括了动画函数和一个新的渲染函数调用。这就解决了问题。但是，请注意，这不是最有效的解决方案，因为渲染是每帧执行的

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

希望这有帮助