Событие mousedown с использованием Three.js не будет работать, если я не нажму и не слегка перетащу

Question

По какой-то причине в приведенном ниже коде переменная "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 );
    }
}

Answer 1

Из того, что я вижу, в вашем примере raycasting работает нормально и переменная пересекается не пусто. Проблема в том, что при использовании TrackballControls рендеринг выполняется только тогда, когда камера меняет свое положение. Вот почему небольшое перетаскивание мыши приводит к изменению цвета поля.

Ниже я включил вашу функцию анимации в один новый вызов функции рендеринга. Это решает проблему. Однако обратите внимание, что это не самое эффективное решение, поскольку рендеринг выполняется каждый кадр.

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

Надеюсь это поможет!