Threejs PlayBook — Three.js 3D & AR on React Native (Android)

Threejs PlayBook — Three.js 3D & AR on React Native (Android)

Hi everyone,

I’ve just released Threejs PlayBook on Google Play:

https://play.google.com/store/apps/details?id=com.vlabworks.threejsplaybook&pcampaignid=web_shareapp

Threejs PlayBook is an Android app built with React Native (Expo) and Three.js, designed to demonstrate real-time 3D rendering and AR experiences on mobile devices.

What the app includes:

Procedural 3D Models
All models are generated in code (no heavy asset files). Users can rotate, zoom, and pan with smooth touch controls. Examples include:

  • Engineering: Simple Motor, Gate Valve, Elbow Joint

  • Furniture: Leather Chair, Relax Lounger, Ash Table

  • Objects: Wire Basket, Bottles, and more

Mobile AR Viewer

  • Place and scale 3D models on real-world surfaces using the device camera

  • Interactive controls: move, rotate, resize

Developer Learning Section

  • Three.js setup guides

  • Tutorials and code snippets

  • Guides on scene setup, lighting, materials, and rendering

Technical highlights

  • 100% procedural geometry

  • Small app size and fast load times

  • Responsive rendering optimized for mobile GPUs

  • Offline ready

  • Theme system with multiple UI styles


Why I built this

I wanted to explore how Three.js can be integrated in a React Native environment, especially for interactive 3D and AR experiences without large external assets.

I’d appreciate feedback from the community on performance improvements, mobile rendering tricks, structuring procedural geometries, or AR enhancements.

Looking forward to hearing your thoughts!

2 Likes

This app is very useful for beginners of threejs .

This is a really solid project, especially for something running on mobile with React Native + Three.js.

What stands out first is the decision to go fully procedural. That’s honestly a big win. No heavy assets means faster load times, smaller app size, and way more flexibility. It also shows you actually understand geometry instead of just importing models, which is something a lot of people skip.

The AR part is also a strong addition. A lot of Three.js demos stop at rendering, but you pushed it into real-world interaction. Being able to place, scale, and move objects makes it feel like an actual product, not just a demo.

The learning section is a smart move too. That gives the app a second purpose beyond showcasing. It makes it useful for beginners, which can help it grow more.

If you’re looking for feedback, a few thoughts:

Performance-wise, procedural is great but can get expensive depending on how complex the geometry is. You might want to look into instancing if you reuse parts, and maybe memoizing geometry so it’s not regenerated unnecessarily.

For rendering, mobile GPUs can struggle with lighting. If you aren’t already, baking lighting into materials or using simpler light setups can help keep things smooth.

On the AR side, stability and tracking quality matter a lot. If you can improve how objects stick to surfaces or reduce jitter, that’ll noticeably improve the experience.

Structurally, if your procedural models get more complex, separating them into reusable generators or parameter-based builders could make your codebase easier to scale.

Overall, this feels like a strong mix of engineering and product thinking. Not just “look what I made,” but something people can actually explore and learn from. If you keep pushing performance and polish, this could turn into a really impressive portfolio piece or even a serious tool.

1 Like

Thank you for your thoughtful and detailed feedback. I truly appreciate the time you took to review the project.

I’m glad the procedural approach and AR integration resonated with you. Your suggestions regarding performance optimization, rendering, and AR stability are very insightful, and I will certainly incorporate them as I continue refining the application.

Thanks again for your valuable input.

Best regards,

Alan Joseph