Allowing full scene camera rotation using ArcballControls instead of OrbitControls

[javierlopezrodriguez]

Hello everyone,

I have found that ui.scene does not allow full camera rotation in some directions, making the interaction with the scene feel clunky. Upon investigation, I discovered that this is due to the limitation of OrbitControls, which is used internally by NiceGUI to manage scene interactions.

Problem:

• OrbitControls cannot fully rotate the scene in certain directions, particularly when trying to move upside-down or achieve full freedom in rotation. This is a known limitation of OrbitControls in three.js, as explained here.

Cause:

• In the scene.js file, NiceGUI uses OrbitControls for camera manipulation:

  this.controls = new OrbitControls(this.camera, this.renderer.domElement);

Proposed Solution:

• This limitation could be solved by using ArcballControls instead of OrbitControls. ArcballControls allow full scene rotation without being restricted by the up vector, providing a smoother experience. ArcballControls Documentation

Would it be possible to add support for ArcballControls in NiceGUI? I don't know how easy or feasible it is to integrate it with the existing scene.js code. If not, I would be grateful if someone could suggest any alternative to make the interaction with the scene feel smoother.

Thanks!

[falkoschindler]

Thanks for the suggestion, @javierlopezrodriguez!

As mjurczyk mentioned here:

This object is not rotating - it’s the camera orbiting around it.

If the camera wouldn't stop above the object, you would end up upside down on the other side, leading to unintuitive "rotations" over there. But I agree that ArcballControls could have advantages in certain applications, and it's probably not too hard to implement both option. We could simply add a parameter like controls: Literal['orbit', 'arc'] = 'orbit' and adjust the line

nicegui/nicegui/elements/scene.js

Line 146 in 4c2cd6e

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

to use the corresponding class.