I’m building a casino-style roulette game and currently the table is built entirely with React Native Views + react-native-svg. We initially tried simulating the camera movement with scale / translate / perspective / rotateX, but it doesn’t achieve the visual effect we’re after.
Here’s the reference of the experience I’m trying to achieve: [attach the screen recording]
The important part is the camera movement: I want the player to feel like they’re physically sitting at the table and looking over it, then when betting, the camera smoothly moves into a more overhead perspective. I want genuine:
3D perspective
Parallax
Depth
Realistic lighting/shadows
3D roulette wheel
3D chips
A camera that can smoothly move between POV and overhead
Current stack:
Expo SDK 54
React Native 0.81.5
TypeScript
Expo/EAS builds
React Native Reanimated
No existing 3D engine
I’m currently investigating React Three Fiber + Three.js + expo-gl, but I’d like experienced developers to challenge that choice if there’s a better approach for this specific use case.
What I’m looking for:
What would you use to build this in a React Native/Expo app?
Is R3F + Three.js + expo-gl a sensible production choice for this?
Would you use a pre-made 3D roulette model, procedural geometry, or something else?
How would you structure the 3D scene and camera system?
How would you integrate the 3D renderer with an existing React Native betting UI/state/backend?
What are the biggest performance or mobile-specific issues I should anticipate?
Are there any examples/repos of React Native casino/roulette/tabletop 3D implementations worth studying?
I’m specifically interested in hearing from people who have actually shipped mobile 3D graphics, rather than just general Three.js advice.
If you were starting this from my current architecture, how would you build it and what would you avoid?
Please try to upload the reference of what you already have and what you want to achieve so we can see it.
In general, yes. R3F works with React Native via expo-gl with a few limitations. You will get a true 3D world, parallax, depth, and smooth camera controls. Faking a 3D view in 2D isn’t a bad idea, but if you genuinely want the experience and convenience of a real 3D environment, moving to R3F is the right path.
About your questions:
React Three Fiber (@react-three/fiber/native) with Three.js and expo-gl.
Yes, that is totally fine and a viable choice for production on Expo.
Definitely get or create a 3D roulette model in Blender (or download a GLTF/GLB model). Don’t try to build complex table/wheel geometry procedurally. Bake as much ambient occlusion and lighting into textures as possible.
Use real-life perspective anchors (POV position and top-down view), then animate/lerp between them in the frame loop (or with Reanimated/drei) to tweak the feel.
Render your existing React Native betting UI as a standard 2D overlay on top of the R3F Canvas. Drive 3D camera animations and wheel spins via refs or lightweight state triggers (like Zustand) to avoid re-rendering the 3D scene tree whenever UI state updates.
High draw calls (use InstancedMesh for chips), heavy real-time shadows, asset sizes, and uncompressed textures.
I can’t recommend a specific roulette repo (haven’t worked on a roulette app specifically!).
To answer your final question, I would definitely build it in React Native using R3F and Three.js, but make sure to test early and often on actual physical hardware, especially mid-to-low tier Android devices, because something that runs smoothly in a desktop browser or simulator can easily hit GPU bottlenecks on mobile.
I wouldn’t avoid R3F out of the box, but if you plan to rely mostly on AI, you’ll hit a wall fast. You won’t be able to tackle a performance-heavy 3D project with prompts alone; AI is a great assistant, but only if you’re willing to learn 3D concepts and spend time hands-on with optimization and math.