search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://docs.pmnd.rs/drei
MIT License
8.42k stars 708 forks source link

`OrbitControls` blocks scroll on mobile without ability to opt-out #1233

Closed mklasinc closed 1 week ago

mklasinc commented 1 year ago

Problem description:

On touch devices it's impossible to scroll past containers with OrbitControls. The issue happens due to the OrbitControls implementation in three-stdlib, which sets a touch-action: none on the OrbitControls DOM container, without an ability to opt-out or override the setting. The type of applications affected by this are e.g. 3D model galleries, where the gallery is arranged in a list on a mobile device, but the user cannot scroll down past the first item.

Relevant code:

https://github.com/pmndrs/three-stdlib/blob/main/src/controls/OrbitControls.ts#L314-L317

Suggested solution:

Provide an opt-out solution for touch scroll, e.g.

<OrbitControls enableTouchScroll={true} />
FarazzShaikh commented 1 year ago

ThreeJS's examples/jsm/controls/OrbitControls also sets touch-action: none. I believe stdlib should mirror Three's examples directory.

But sure we can add this to Drei's <OrbitControls />

DaniloTrotta commented 1 year ago

Has there been any update regarding this case? I have the same problem and would like to opt-out of the touch-action: none

bowber commented 6 months ago

onTouchMove={(e) => e.stopPropagation()} Setting this on the scroll container will fix it.

fokichev commented 2 months ago

For me, adding onTouchMove to parent div didn't help, but adding this to <Canvas> did: style={{ touchAction: 'pan-y', pointerEvents: 'none' }}.

Obvs you can't use OrbitControls as expected anymore, but for my case where I'm setting azimuthal angle with scroll to rotate things, it works out. You can dynamically adjust these styles too if needed.

github-actions[bot] commented 2 weeks ago

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

github-actions[bot] commented 1 week ago

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!