The purpose of these demos is to set up a React Native app with a 3D scene. 🧊🚀

It should be cross-platform (mobile apps and web) and support mouse and touch input.

Technology stack: Expo, Three.js, OrbitControls, and React-Three-Fiber (optional).

PRs are much appreciated to help make the demos work 100% on all platforms. 💪😊

These links serve as inspiration for the demos:

• Twitter - App by Shopify that uses React-Three-Fiber and OrbitControls
• Code example - using React Native with "standard" Three.js and OrbitControls (click the arrow to see the code)
• Code example - using React Native with "standard" Three.js (mouse and touch gestures without OrbitControls)

OrbitControls defines the mouse and touch gestures that will result in the following actions:

• Orbit: left mouse / touch: one-finger move
• Zoom: middle mouse, or mouse-wheel / touch: two-finger spread or squish
• Pan: right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move

Therefore, these are the expected outcomes in the demos in the app. For each demo is listed the test results.

The app has several demos, each using different technologies to set up the 3D scene. Screenshots below.

• This uses expo-three-orbit-controls, which was recently upgraded to version 2. As mentioned on that page, the package has some limitations, including some known bugs, plus it uses PanResponder instead of React Native Gesture Handler.
• The demo is almost identical to the expo-three-orbit-controls example, which uses "standard" Three.js functionality.
• Test results:
  • Web + Mouse: Orbit: ✔️. Zoom: ✔️. Pan: ❌.
  • Web + Touch: Orbit (works, but bad performance): ⚠️. Zoom: ❌. Pan: ❌.
  • Mobile + Mouse: Orbit: ✔️. Zoom: ❌. Pan: ❌.
  • Mobile + Touch: Orbit: ✔️. Zoom: ❌. Pan: ❌.

• This demo supports mouse and touch input without OrbitControls.
• It's based on GitHub: history-expo, which seems to be based on GitHub: expo-three-template.
• Work in progress.

• This demo uses React-Three-Fiber "on top" of Three.js.
• It uses the OrbitControls helper from the drei package (only that file is copied into this repository, because adding the whole package as dependency will make the app crash on non-web platforms).
• Test results:
  • Web + Mouse: Orbit: ✔️. Zoom: ✔️. Pan: ✔️.
  • Web + Touch: Orbit: ✔️. Zoom: ✔️. Pan: ✔️.
  • Mobile + Mouse: Orbit: ❌. Zoom: ❌. Pan: ❌.
  • Mobile + Touch: Orbit: ❌. Zoom: ❌. Pan: ❌.
  • Other: Clicks on the boxes are detected (unrelated to OrbitControls). However, on mobile the click coordinates are off by around 20 pixels in the y-direction (this started appearing after the scene was added to a React Navigation screen).