onClick on mobile

[carmandale]

this works on desktop and mobile
https://v5u3d.csb.app/

and works if I download it and run it in VS code. However, touch doesn't work in the Chrome dev tools responsive mobile simulator...and as I build up the project to a real project, I eventually lose the touch ability on actual mobile devices.

It seems to all stem from the Orbit Controls. If I disable that, touch events work everywhere.

Is there any known fix to get Orbit Controls to behave nicely? or do I have to build my own Orbit controls? I have tried to use onPointerUp as a replacement, but that also effects desktop and begins to get ugly.

thanks for any help.

Dale

[drcmda]

threejs orbit controls are broken, they know about it.

try OrbitControls from three-stdlib, it should make a difference. we use stdlib for all of our libs these days.

[carmandale]

I am using OrbitControls from @react-three/drei., which I believe pulls it from stdlib.

I tried adding three-stdlib OrbitControls directly, but it didn't work. I imagine that I need to extend it or something? build it traditional threejs style?

[carmandale]

I am importing as

import { OrbitControls } from 'three-stdlib/controls/OrbitControls'

but if I try to add that, it errors with

The above error occurred in the component:

OrbitControls

Suspense

Provider

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

in Canvas (created by App)

in App

[carmandale]

I found the Controls.tsx in the demos area.

That seems to be working.

[carmandale]

But I get the same problem on Chrome simulator and Android mobile where the touch events don't work. They work on iOS. But since this needs to be cross-platform, I just made a crude useDrag that is letting it all work