OrbitControl dragging error after leaving canvas

🌵 Needle Engine
1

Hello,

I got a little error with my OrbitControl, when I click on my canvas and I drag on my canvas it works fine (my scene rotate etc).
But, if I press click on my canvas and I unpress my click outside of my canvas, when i come back on it my scene rotate whithout pressing my left click.

Which is pretty problematic because I’m using HTML beacon on my canvas so it “breaks” my orbit control management if I unpress my click on another html element.

I tried to dispatch end event on leaving my canvas etc by I didn’t succeed to prevent this behaviour.

Does somebody has an idea ?

Original Post on Discord

by user 224464722878005248

2

This might be a problem in the three.js OrbitControls script.
As a workaround: can you try disabling our OrbitControls component during the time your cursor is not over the canvas?

3

I tried by OB.enabled = false when I got a leave event from my canvas

by user 224464722878005248

4

But if I use mouseenter event to OB.enabled = true, it’s like the OB was never disabled

by user 224464722878005248

5

Hello,

I retried it with a new project to verify it in the last needle version 3.25.2
I got the same error, if I stay my click pressed from my canvas to an html element and I unpress.
Then my orbitControl rotate when my mouse come back on my canvas.

I need to regenerate a mouseup event by clicking my canvas if I want that my orbitcontrol stop rotating.

by user 224464722878005248

6

These events are handled by three’s OrbitControls tho. We just give it the canvas and call update (our component is basically a wrapper around it with some extra functionality for lerping the camera and setting look at focus)

7

Can you try calling needleOrbitControls.controls.saveState and then resetState when your pointer exits the canvas? (The threejs orbitcontrols is exposed via the controls property on the needle engine component)

8

This should set the OrbitControls state to none as if the pointer up event was received: three.js/examples/jsm/controls/OrbitControls.js at 4527c3e8498ebdc42e7eb40fcfa90435b9c95514 · mrdoob/three.js · GitHub

9

Okay thanks I will try

by user 224464722878005248

10

I think it would be much better if OrbitControls would expose the state (or a way to reset it without modifying the positions). Maybe it’s worth making a PR in three to allow for it

11

Okay it works
But it stops my rotation when my mouse meet an html beacon
I think I will try to generate dynamically Hotspots like you do in one of your sample

by user 224464722878005248

12

But it seems very complex to do it only with js because I need to generate a lot of different components to make it working :confused:
HotspotManager, Mesh Renderer, Canvas, HotSpot… etc etc

by user 224464722878005248

13

Then you just want to stop when youre out of the canvas (the browser event contains e.g. the html element youre hovering)

14

You could set them up in your scene already and then just generate the hotspot points containing the text and positions

15

I will try

by user 224464722878005248

16

I tried to update my project but now it’s completly broke… (see the Discord)

by user 224464722878005248

17

image.png
image.png705Ă—169 11.2 KB

by user 224464722878005248

18

Sorry, where come from this script ?

by user 224464722878005248

19

In the Hotspots sample

by user 224464722878005248

20

Is it possible to use the hover function for the Button Component ?
There is an onClick.addEventListener but not onHover
I tried with its onPointerEnter but it doesn’t work

by user 224464722878005248