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

По какой-то причине в приведенном ниже коде переменная «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
person marktreece    schedule 14.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person grey-eminence    schedule 15.02.2014