A custom textured GLTF model with touch rotation controls in React Native.
This app was created as the foundation for a future project. Originally, this was made using Three.js on web. After realising my app idea would work better on mobile, I decided to migrate it to React Native using Expo, ExpoThree and ExpoGL. However, this turned out to be a lot more difficult than anticipated and required many hours of Googling to get it working properly, especially on mobile. This may be the only example online of a textured GLTF 3D model using ThreeJS with touch to rotate controls working properly on mobile devices. Feel free to use this as a foundation for your 3D mobile app.
- Open a terminal window at
ExpoThreeModel. - Start the server.
npm start
- Metro Bunder window should open in your web browser. Scan the QR code to run using Expo Go on iOS/Android devices or Run in webbrowser.
- If you want to import your own models, make sure to export your gltf/glb models without textures, then reference the texture file seperately. Also watch out for scaling. My example coke can is quite small, so adjust the FOV of the Perspective Camera.