OrbitControls Not Working on iOS 12.5.5 Chrome 92 with Three.js Latest Version

Questions
, ,
1

Issue Description:

I’m currently developing a project using the latest version of Three.js (as of this date). In this project, I’m using OrbitControls for 3D object manipulation. During the testing phase, I’ve found that OrbitControls does not function as expected when the application runs on iOS version 12.5.5 with Chrome 92. However, OrbitControls works properly with the same codebase on a more recent version of iOS (14.6) and also on other browsers/platforms.

To further investigate the issue, I tried downgrading the Three.js library to an older version (0.85.0), keeping the rest of the code unchanged. Interestingly, OrbitControls works smoothly on iOS 12.5.5 Chrome 92 with this older version of Three.js.

Steps to Reproduce:

  1. Use the latest version of Three.js and implement OrbitControls on any 3D object.
  2. Open the application on an iOS device running version 12.5.5 and using Chrome 92.
  3. Try to interact with the 3D object using OrbitControls.

Expected Result:

OrbitControls should work smoothly, allowing for the manipulation of 3D objects as per user interactions.

Actual Result:

OrbitControls does not work on iOS 12.5.5 with Chrome 92 when using the latest version of Three.js. The 3D objects cannot be manipulated as expected.

Additional Information:

The same implementation works perfectly on more modern versions of iOS (14.6). The issue seems to be specifically tied to older versions of iOS with the latest version of Three.js.

I appreciate any help or guidance on how to rectify this issue. As of now, downgrading to Three.js 0.85.0 seems to be the only workaround but ideally, I would like to leverage the improvements and features offered by the latest version.

Thanks in advance for your assistance!

Try:

2

Older OrbitControls listen to touch and mouse events.
Newer OrbitControls listen to pointer events.

Maybe on your iOS12.5.5 system pointer events are not generated, but only touch and mouse?

3

ty for the reply, yes i see in de faq https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

pointerEvents since ios 13, how can i fix this?

5

this only works with threeJS v129 or minus

6

I have never tried it. Here are a few possible ideas to try out:

  • use the latest OrbitControls with mouse/touch events
  • modify OrbitControls r153 by replacing names of events (these are just strings)
  • look for some shim that translates mouse/touch events into pointer events
  • add your listeners for mouse/touch events and generate pointer events by yourself