After following the recommendations on GitHub (https://github.com/mrdoob/three.js/issues/1321) and also here on StackOverflow (Dynamically create 2D text in three.js), I decided to overlay text using HTML divs.
However, a problem arises when the user rotates the scene and the cursor crosses over any of the divs, causing the drag action to stop. Even when the cursor moves past the text div, the drag action doesn't resume, leading to an abrupt halt in movement that can only be fixed by releasing and clicking the mouse again.
You can see this issue in action on this page:
I am currently using the standard OrbitControls.js with
controls = new THREE.OrbitControls(camera, renderer.domElement);I've attempted various solutions:
(1) Trying to detect the mouseout event from the div and setting controls.enabled true, but it didn't work. Toggling controls.enabled = false does disable controls, but I couldn't get them to reactivate on mouseout.
(2) Simulating a mouseup (while over the div) followed by a mousedown on mouseout did not solve the issue either.
(3) I also experimented with hiding the div on mouseover, but this proved ineffective as well since the dragging motion had already stopped by then.
(4) Disabling text highlighting within the divs did not make a difference.
Is there a way to restart the drag motion after passing over a div? If so, how can this be achieved?
Thank you for your help.