| 56 | }; |
| 57 | |
| 58 | export function createControls() { |
| 59 | let height = 0; |
| 60 | |
| 61 | const scope = { |
| 62 | ...partialScope, |
| 63 | target: new Vector3(), |
| 64 | onChange: (_event: { target: typeof partialScope }) => {}, |
| 65 | }; |
| 66 | |
| 67 | const internals = { |
| 68 | moveStart: new Vector3(), |
| 69 | rotateStart: new Vector2(), |
| 70 | rotateEnd: new Vector2(), |
| 71 | rotateDelta: new Vector2(), |
| 72 | dollyStart: 0, |
| 73 | dollyEnd: 0, |
| 74 | panStart: new Vector2(), |
| 75 | panEnd: new Vector2(), |
| 76 | panDelta: new Vector2(), |
| 77 | panOffset: new Vector3(), |
| 78 | |
| 79 | spherical: new Spherical(), |
| 80 | sphericalDelta: new Spherical(), |
| 81 | |
| 82 | scale: 1, |
| 83 | |
| 84 | state: STATE.NONE, |
| 85 | }; |
| 86 | |
| 87 | const functions = { |
| 88 | shouldClaimTouch(event: GestureResponderEvent) { |
| 89 | // If there's 1 touch it may not be related to orbit controls, |
| 90 | // therefore we delay "claiming" the touch, as on older devices this stops the |
| 91 | // event propagation to prevent bubbling. |
| 92 | // This option is disabled by default because on newer devices (I tested on |
| 93 | // Android 8+ and iOS 15+) this behavior is (happily) inexistent (the |
| 94 | // propagation only stops if the code explicitly tells it to do so). |
| 95 | // See https://github.com/TiagoCavalcante/r3f-native-orbitcontrols/issues/27 |
| 96 | // Unfortunately, this feature may cause bugs in newer devices or browsers, |
| 97 | // where the first presses (quick or long) aren't detected. |
| 98 | // See https://github.com/TiagoCavalcante/r3f-native-orbitcontrols/issues/30 |
| 99 | // See https://github.com/TiagoCavalcante/r3f-native-orbitcontrols/issues/31 |
| 100 | // Therefore it is **not** recommended to enable it if you are targeting newer |
| 101 | // devices. |
| 102 | // There are other options to fix this behavior on older devices: |
| 103 | // 1. Use the events `onTouchStart`, `onTouchMove`, `onTouchEnd`, |
| 104 | // `onTouchCancel` from @react-three/fiber's `Canvas`. I didn't choose this |
| 105 | // option because it seems to be slower than using the gesture responder |
| 106 | // system directly, and it would also make it harder to use these events |
| 107 | // in the `Canvas`. |
| 108 | // 2. Add a transparent `Plane` that covers the whole screen and use its |
| 109 | // touch events, which are exposed by @react-three/fiber. I didn't choose |
| 110 | // this option because it would hurt performance and just seems to be too |
| 111 | // hacky. |
| 112 | // 3. Use `View`'s `onTouchStart`, `onTouchMove`, etc. I think this would have |
| 113 | // the same behavior in older devices, but I still didn't test it. If you |
| 114 | // want me to test it, please just open an issue. |
| 115 | // Note that using @react-three/fiber's |