Fly controls locks up when used with dat.gui

Questions
,
1

Hey all.
I’ve made an orbit simulation, essentially my camera is orbiting around the earth and i’m using flycontrols to look around like it was first person (essentially movement speed = 0, and dragToLook = true). I’m also using dat.gui in order to adjust the time scale of the scene. However, i’ve noticed that when I use the slider in my gui and move my mouse off the gui bar into the scene and release, the gui doesn’t set the number. Instead, it acts as though I was still clicked into it, adjusting the slider based on where my mouse is until i go back into the gui to click on it again. After this, fly controls no longer works. Anyone have enough experience with both these to have any ideas?
Thanks!

2

Can you please demonstrate the issue with a live example? I’ve already included dat.gui and FlyControls so it should be easier for you to get started.

3

Check on this example https://jsfiddle.net/Ispringe/j8htufng/

I’ve put both fly controls and orbit controls in, which can be changed by a boolean set up in the middle. When you click on the gui slider and release the slider off of the gui tab, it breaks the fly controls, but not the orbit controls.

4

Yes, I can reproduce the issue. Is the problem solved with the following fiddle?

https://jsfiddle.net/50htwngp/1/

It performs now a call of event.preventDefault(); in the mousemove event listener, similar to OrbitControls.

5

From what I’m seeing, it’s still not working even in that new fiddle, fly controls is still disabled after the clicking in and out of the gui like I’ve described above.

7

Same as your question，What should I do?

8

@Guo-Zhiqiang Can you please check if it does work with the following fiddle?

https://jsfiddle.net/cwvr2Lud/

It uses an updated version of FlyControls?

I think I understand now the real issue better than before. Similar to OrbitControls, the issue can be solved by adding the event listeners for mousemove and mouseup in the mousedown event listener. Both listeners are added to document and removed again in the mouseup handler. This works when FlyControls is used with dragToLook = true however it breaks the default case where you can look around by just moving the mouse (so without a previous click interaction). Since this circumstance makes a PR more complicated, I guess we need to handle this with a custom modification of FlyControls for now.