ArcballControls error on mobile devices

[krotalias]

Description

Please, read:

https://discourse.threejs.org/t/arcballcontrol-problems-on-mobile/70160/3

Reproduction steps

1. Set camera position after the creation of ArcballControls object.
2. On mobile devices, the model vanishes because this._nearPos0 < 0 in ArcballControls.js
3. It does not depend on the browser used.

Code

// code goes here

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

r168

Device

Mobile

Browser

Safari

OS

iOS

[Mugen87]

When a control class manages a camera, it can lead to side effects if you change the state of the camera e.g. by changing it position. Usually, you have to notify the controls somehow so they can update their internal state. Using update() of ArcballControls is the intended workflow.

What I don't understand right now is why mobile devices exhibit an issue that does not pop up on Desktop. Do you mind updating the following fiddle so the issue is demonstrated? https://jsfiddle.net/6sxo0bd3/

The fiddle changes the camera position with a simple timeout callback after 2 seconds. I couldn't reproduce the issue on a Pixel 8a with Chrome.

[krotalias]

The whole point is that (according to the doc) "controls.update()" should take care of it. However, this way works for all controls, but zoom and pan on mobile devices using ArcballControls.

Running jsfiddle on mobiles is a nightmare. I created a version that produces the error on mobiles using the official example, the Cerberus (with or without GUI):

https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.html?gui=1 https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.html?gui=1

https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.html https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.html

It does run fine on desktops, but on mobile devices, as soon as two fingers are used, the model vanishes. The only thing that does not work on desktops is the "reset" option (in red). Nonetheless, in my app it worked (go figure). The "fix" is using controls.setCamera() + controls.update(), which is nonsense...

It is basically the original script, but I am just using promises and loadAsync, because it is the proper way in my opinion. I also split the file in two: html + js

The source is here:

https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.js https://krotalias.github.io/cwdc/13-webgl/examples/three/content/misc_controls_arcball.js

It took me sometime to figure out the problem… inspecting the object ArcballControls, you can see some weird negative values for the near clipping plane.

Cheers,

/Paulo Roma

On Sep 16, 2024, at 6:06 AM, Michael Herzog @.***> wrote:

When a control class manages a camera, it can lead to side effects if you change the state of the camera e.g. by changing it position. Usually, you have to notify the controls somehow so they can update their internal state. Using setCamera() for ArcballControls is the intended workflow.

What I don't understand right now is why mobile devices exhibit an issue that does not pop up on Desktop. Do you mind updating the following fiddle so the issue is demonstrated? https://jsfiddle.net/Ldypsq7u/1/ https://jsfiddle.net/Ldypsq7u/1/ The fiddle changes the camera position with a simple timeout callback after 2 seconds.

— Reply to this email directly, view it on GitHub https://github.com/mrdoob/three.js/issues/29417#issuecomment-2352370184, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHYIIW3ATGWKWMCNKSCDXULZW2NQVAVCNFSM6AAAAABOIDI4Y6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNJSGM3TAMJYGQ. You are receiving this because you authored the thread.