Three.js Prevent Raycast through dat.gui combobox

Question

I already asked a almost similar question here: Three.js prevent Raycast through Gui

This worked:

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

         enableRaycasting = false;

     } );

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

        enableRaycasting = true;

     } );

but there's a problem stil appearing: There is a combobox in my dat.gui which has some items in it. When the box has less then 6 elements, everything is fine, but if it has more then 5 elements in it, it sticks out of the gui (because the gui is in an upper corner) and goes into the raycasted scene. Then i can't select the item in the box anymore and raycast is enabled. How can i prevent the raycast, when an item of the combobox is out of the area of the gui.domElement?

EDIT: Sometimes its even working and sometimes not. It depends whether the gui is clicked before and on the focus somehow, i don't know exactly..

Can you please enhance the existing live example (https://jsfiddle.net/gnwz5ae7/) from your other post and demonstrate the issue? — Mugen87, Nov 18 '19 at 13:33
@Mugen87 i think i changed the example: https://jsfiddle.net/v046m7ob/1/ — derseitzer, Nov 19 '19 at 07:40

score 1 · Accepted Answer · answered Nov 18 '19 at 23:51

Your previous question has the event listener bound to the entire document object, like this:

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

Doing this hijacks every mousedown event that happens anywhere on the page, including those occurring on the Dat.gui elements. You should be a little more granular with how you target your events, so it doesn't encompass the entire document. You could, for example, only target the <canvas> element that the THREE.js renderer creates:

// Init renderer
var renderer = new THREE.WebGLRenderer();

// Add canvas to HTML body
document.body.appendChild( renderer.domElement );

// Assign event listener to only target this canvas
renderer.domElement.addEventListener( 'mousedown', onCanvasMouseDown, false );
function onCanvasMouseDown( event ) {
    if (event){}
}

This way clicking on the dat.gui elements won't trigger the canvas' mousedown event, and you don't have to worry about tracking .mouseenter and .mouseleave states, which can get a bit complicated.

Three.js Prevent Raycast through dat.gui combobox

1 Answers1