OrbitControls double-click breaks with multiple scenes

Questions
1

When double-clicking in OrbitControls with multiple scenes, the controls will usually break and stop letting you drag the camera around, instead showing a not-allowed cursor. It occurs in this official Three.js example and is currently breaking my project. I’m not sure whether this is an implementation error or a bug, but any advice on how to solve this issue or if to report it would be appreciated.

What it looks like (on the Three.js example page)

2

I repeated your question, When double-clicking in OrbitControls with multiple scenes, the controls will usually break and stop letting you drag the camera around, instead showing a not-allowed cursor.

but we can drag the camera around in other scene, And then we can drag in the last scene , it become normal

3

Have you managed to solve this problem? I ran into her too.

4

This sounds like an interaction with other UI elements, perhaps an overlaid component, stealing/holding focus. Double clicks sometimes become a drag select on some parts of the UI and can be hard to spot. Does the problem go away if you hit the ESC key?

5

Yes, it is a selection issue as manthrax mentioned. It’s been a while so I forgot the specifics of how I prevented it, but you could probably remove all selections on the page on click of your element.

6

I noticed the same behaviour and fixed it by preventing the double click event for my whole application.

Only apply on the Three js canvas

// Assuming `renderer` is your Three.js WebGLRenderer
const canvas = renderer.domElement;

// Prevent default double click behavior on the canvas
canvas.addEventListener('dblclick', event => {
    event.preventDefault();
}, false);

Or apply on the entire page

//Disable default double-click behavior on the entire document
document.addEventListener('dblclick', event => {
    event.preventDefault();
    event.stopPropagation(); // Stop the event from reaching other elements
}, false);

If the problem persist you can disable selection for the page as follow in CSS:
You can allow selection on certain parts by adding the class selectable to your HTML tags
or allow it on a whole set. Like all .h1 for example, …

/* Disable text selection for all elements */
* {
  user-select: none;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
}

/* Allow text selection for elements with class "selectable" */
.selectable {
  user-select: auto;
}
7

Unfortunately, the problem remains after clicking on ESC. The rotation of the model stops working on a single click, but starts working on a double click
bug scene

8

Can you add a mouseenter /mouseleave listener on your canvas, and call controls.reset() ?

9

I tried to do it, but the problem remains

10

The solution from stickske helped. I added user-select: none; to the scene tag and the problem stopped appearing. Thanks.
Do you think there is no other way to solve this problem?

2 Likes
11

That sounds fine to me if it works. :smiley: