Hi everyone,
We have built a fully 3D Interactive Animated story for Kids (ages 4 to 12+)
, running entirely on the Web. It has an approximate runtime of 5 minutes and 30 seconds. It is now publicly released at - https://www.quantales.in/ , you can experience it there!
We’re exploring a new way of storytelling at Quantales - bringing immersive, cinematic experiences for Kids directly to the web using Three.js. 
Development
The experience was built from scratch with the help of -
-
Three.js
-
React Three Fiber & Drei
-
GSAP timelines
It involves:
-
Real-time 3D rendering
-
Custom shaders
-
Interactable story progression & interactable objects
-
Mobile gyroscope support for immersive shots
The development time for this took us nearly 1 year and 8 months with a small team of 2-3 devs and help from more people on the Art side.
And it runs well on these platforms – Android mobile devices, Desktops/Laptops and Macbooks.
iOS support couldn’t be provided due to iOS browser memory limitations.
The engine of the experience is built purely using Three.js and react three fiber. Scene staging & lighting is all hardcoded and timeline sequencing is done by the use of GSAP, while the audio mix (Music, Dubbing & SFX) works as the spine of the experience using the GSAP ticker to keep the scenes and animations in time.
The visuals were crafted in code and by the use of in-house browser tools that helped us adjust lighting, fog, camera placements and the like.
Cinematic workflow
A large portion of development has gone into camera systems and cinematic workflow.
Each scene is defined as a series of shots (as in any movie), with camera position, target, field of view, and interaction settings stored separately from scene logic. This made it possible to re-use scenes for certain shots so that storytelling can work seamlessly.
Screenshots/Recordings
Motive
This is our first step. There’s still a long way to go. We’re a small team based out of India with a vision to build Interactive Animated Stories (that run on any platform) that teaches Humanities, Values & Creative Thinking to Kids, and redefines the conventional education system that is being followed worldwide.
Built with a lot of hard-work, passion, iteration, debugging, and occasionally drawing questionable diagrams on paper.
One of the main inspirations that initiated our spark was a story from Three.js showcase (Thanks to the devs behind this) - https://exp-my-little-storybook.lusion.co/
Also, this experience was created and published by my studio - 3D ENGINERD. (https://www.3denginerd.com/) and I have personally worked on the Production, Cinematography, Editing and Direction.
If this experience really feels worth it, we would love it if it was featured on the Three.js Website showcase!
Thanks, and do let us know your feedback 