2

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 } );
Mugen87
  • 28,829
  • 4
  • 27
  • 50
derseitzer
  • 149
  • 1
  • 9

1 Answers1

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/

Mugen87
  • 28,829
  • 4
  • 27
  • 50
  • This was very helpful, but there's still an issue: If a dropdown menu of the dat.gui is too big and not in the area of the gui.domElement anymore, sometimes (not everytime) raycast will be enabled. – derseitzer Nov 04 '19 at 11:06