Is there a way to make html text clickable over three.js viewport?

https://jsfiddle.net/vrpzcj7h/

You see text “dwqdwdwwd” inside of div box but it is not clikable because of three.js viewport.
I made scene as null but it looks like it has transparent rectangular three.js viewport over that html elements.

Is there a way to make any html text clickable when it is not covered by three.js object?

So that any part/pixel that isn’t covered by three.js object in viewport are ignored so html elements over three.js viewport uncovered by three.js object get higher zindex and clickable.

The pointer-events: visiblePainted; CSS property you might be thinking of works for SVG content but not WebGL.

I might do this the other way around — let clicks fall through the WebGL canvas entirely, catching clicks on the HTML content beneath, and calling e.preventDefault() to cancel those clicks if THREE.Raycaster detects an object underneath.

1 Like