I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by the labels and not propagate to the Renderer.
I have created a simplified version of the code to showcase the problem.
https://i.sstatic.net/iNQfY.png
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
overflow: hidden;
}
#overlay {
position: absolute;
top: 40%;
left: 40%;
width: 20%;
height: 20%;
background-color: #f00;
padding: 3%;
text-align: center;
color: #fff;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- This div below stops the OrbitControls events, why? -->
<div id="overlay">I am a div with position:absolute</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<!-- https://raw.githubusercontent.com/mrdoob/three.js/r87/examples/js/controls/OrbitControls.js -->
<script src="orbit-controls.js"></script>
<script>
var container;
var camera, scene, renderer;
var uniforms, material, mesh;
var controls;
init();
animate();
function init() {
container = document.getElementById('container');
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1500);
camera.position.set(1, 1, 1);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
Below is a link to a related project where the labels do not prevent the event propagation, allowing the camera to follow the mouse interaction. I have not yet identified why this example works and mine does not.
How can I ensure that OrbitControls continue to function behind the <div> labels?