"Sticky Mouse" problem in Three.js project

I’m having a “sticky mouse” problem with this Three.js project:


The problem occurs when I tap anywhere on the red navigation bar at the bottom of the screen: when I then move the mouse back off of it, the cube / camera spin around as though I was click dragging on them - even though I’m clearly not.
It’s very weird, cause it’s as if that single tap on the red nav bar “locks” the mouse into click-drag mode - when it shouldn’t.

Here’s how you can reproduce this problem:

  1. load the page
  2. click-drag anywhere on the screen to spin the camera around the cube
  3. Then move the mouse to the red navigation bar - and click ONCE on it anywhere (you don’t even have to tap on one of the 3 buttons - which are just dead links by the way.)

When you then move the mouse back off of the red nav-bar and into the main screen, you’ll see the whole screen is rotating.


Note: I tried making a fiddle with this code but for some reason it’s working just fine in the fiddle. But it’s still messed up in my actual project.
Here’s the fiddle: https://jsfiddle.net/62qjgzep/

This has me tearing my hair my out.

Would really appreciate any help!

It seems you are using different versions of OrbitControls in the fiddle and your app. Can you please try it with these sources:

three.js: https://cdn.jsdelivr.net/npm/three@0.128/build/three.js
OrbitControls: https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js

@Mugen87 Ok, that seems to have been the problem - thank you :handshake:

I’m wondering however if this will effect the rest of the code in my bigger project, which lets you also zoom directly into a specific part of the screen - specifically to the point where your mouse is located, as opposed to the default (0, 0, 0) point.

Busy day ahead so I won’t get to find out until tomorrow - but will certainly post a follow-up question if problems are encountered.

Thanks again!

1 Like