The best way to do this is probably to use the DOM event-handling.
Suppose you have a dom-structure like this:
<div class="container">
<canvas class="threejs-canvas"></canvas>
<div class="some-overlay"></div>
</div>
And you want interactions in .some-overlay
to not have an effect on the three.js scene in the canvas-element, you need to do two things:
- the raycaster should use only events that happen on the
.container
-element
- clicks within the overlay need to use
stopPropagation()
to stop events from bubbling up to the container
So, together this could be something like this:
var container = document.querySelector('.container');
var overlay = document.querySelector('.some-overlay');
container.addEventListener('click', function() {
// do raycasting here
});
overlay.addEventListener('click', function(ev) {
ev.stopPropagation(); // prevent event from bubbling up to .container
// ...do whatever you like
});
It gets even easier, if you listen for the events for the raycaster on the canvas-element itself. In that case, the events won't ever reach the canvas-element and there is nothing special you need to do.