Three.js prevent Raycast through Gui

问题

I want to select objects with raycasting, but everytime i want to select something on the three.js gui, the Mousdownevent get triggered. How can i say something like "if the Gui is in front of the object, dont trigger"

document.addEventListener( 'mousedown', onDocumentMouseDown, false ); function onDocumentMouseDown( event ) { if (event){}

the gui is a normal three.js gui made like this:

gui = new GUI( { width: 330 } );

回答1:

One way to solve this is with jQuery and an additional control variable:

$( gui.domElement ).mouseenter(function(evt) {

    enableRaycasting = false;

} );

$( gui.domElement ).mouseleave(function() {

    enableRaycasting = true;

} );

You can then use enableRaycasting in order to determine if raycasting should happen.

Demo: https://jsfiddle.net/gnwz5ae7/

来源：https://stackoverflow.com/questions/58202842/three-js-prevent-raycast-through-gui