-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Description
Hi, I'm the developer of r3f-native-orbitcontrols.
I'm facing some issues with the Gesture Responder System — that doesn't propagate touches on older devices to prevent "bubbling", but does on newer devices —, that made me believe that an addEventListener
-like feature in native would be a great addition to R3F.
In the web version of R3F, this can be achieved with the following code:
const domElement = useThree((state) => state.gl.domElement)
useEffect(() => {
domElement.addEventListener("onTouchStart", () => { ... })
// Other touch events
}, [domElement])
This can, of course, be achieved currently in native in other ways, but none of them are optimal. The ones I know are:
- Use the Gesture Responder System from a
View
- the problem with this is that its behavior is different across devices, and has no "easy fix" (in my case, it is a trade-off between missing some presses in the OrbitControls in newer devices or blocking touch events for all elements in the canvas in older devices). - Use the
Canvas
touch events - this has the problem that a custom system of event listeners would need to be implemented to have multiple handlers for some events (which is useful if you want to use touch events in elements of the canvas along with anOrbitControls
). - Use the touch events of an element in the
Canvas
- this has the problem that a transparent element needs to be in front of everything that is being rendered (which I believe can hurt performance, but I didn't benchmark it), and is just too hacky.
I believe this can be fixed by implementing an event listener system for the touch events, injecting some code in the onContextCreate
here, or creating a "null" element which listens to all touch events (I think this can be done by modifying this code).