"Sticky Mouse" problem in Three.js project

Questions
1

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

https://fractionalownership.io/BadCube/index-BIG-WALL.html

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.

WHY?

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!

2

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

3

@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