Skill
Role
Software
3D Modeling
3D Animation
Interaction Design
HTML/JavaScript
3D Modeling
3D animation
Interaction Design
Implement it into HTML/JS
Spline
Inquisitive Pty Ltd
3D Interactive Animations for Inquisitive
As a Spline 3D designer, I collaborated with Inquisitive, an Australian learning platform designed for primary schools.
My role involved creating two interactive 3D scenes for their digital lessons: one showcasing realistic asteroids and Earth within a galaxy, and another illustrating how daylight shifts during summer and winter.
Project Summary and Objectives
Inquisitive AU is a Sydney-based digital educational resource company with a mission to simplify access to quality primary lessons, helping teachers enjoy teaching and students learn with purpose.
They provide high-quality lessons and teaching tools to over 5,000 Australian primary schools.
In this project, I created 3d interactive animation for their Science lesson using Spline.
Using Spline Mouse Down Events to Create a 3D Interactive Scene
We implemented a simple interaction in the 3D scene featuring asteroids and Earth. When users click on the scene, the camera subtly moves closer to the asteroids and changes its angle. This small adjustment immerses students in the stunning galaxy setting, making the content more engaging.
This interaction is also touch-enabled for tablets and mobile devices. To enhance the sense of depth and realism, I adjusted the motion paths and resized the asteroids to better represent their distance from the camera.
For another 3D scene demonstrating how sunlight works during summer and winter, we created UI components such as buttons in Spline and set up multiple interactive animations. Users can interact with the 3D scene to rotate the Earth and shift the sunlight position for winter or summer.
For the final output, I exported the Spline scene with a specific canvas size tailored for their platform and created a web component folder that includes both HTML and JS file. This allows them to integrate the Spline 3D scene into their digital lessons while ensuring it works responsively.
For the final output, I exported the Spline scene with a specific canvas size tailored for their platform and created a web component folder that includes both HTML and JS file. This allows them to integrate the Spline 3D scene into their digital lessons while ensuring it works responsively.
FINAL OUTPUTS
3D Interactive Animations for Inquisitive
.png)
Using Spline AI 3D Generation
For the scene of 3d asteroids and the earth, I created multiple different asteroid 3d models using Spline AI tool and combined them with material textures. Using Spline AI for modeling saved us significant time.
_gif.gif)
The Biggest Challenge of This Project
One of the challenging parts of this project was setting up the complex interactive design in Spline, such as linking the mouse-down action of the each buttons to control the light’s position and the angle of the 3D Earth.
When users click on each buttons or on the Earth itself, they can see which areas of the Earth are illuminated by sunlight. We experimented with multiple states in Spline and successfully implemented the interaction without any conflicts.
Additionally, setting up the text "Alaska" to follow the highlighted Alaska area while always facing forward to maintain visibility was tricky - I successfully achieved this by combining 3D text and map pin with the follow event in Spline.
Using Spline AI 3D Generation
For the scene of 3d asteroids and the earth, I created multiple different asteroid 3d models using Spline AI tool and combined them with material textures. Using Spline AI for modeling saved us significant time.
The Biggest Challenge of This Project
One of the challenging parts of this project was setting up the complex interactive design in Spline, such as linking the mouse-down action of the each buttons to control the light’s position and the angle of the 3D Earth.
When users click on each buttons or on the Earth itself, they can see which areas of the Earth are illuminated by sunlight. We experimented with multiple states in Spline and successfully implemented the interaction without any conflicts.
Additionally, setting up the text "Alaska" to follow the highlighted Alaska area while always facing forward to maintain visibility was tricky - I successfully achieved this by combining 3D text and map pin with the follow event in Spline.
Integrating 3D interactive assets into digital lessons
For the scene featuring realistic asteroids and Earth within a galaxy, I added subtle animations to the starry sky, where the colors of individual stars gradually change. To optimize the data size, I combined a static image with 3D shapes in Spline that have color-changing states, instead of relying on MP4 video assets.
Using interactive assets enhances the realism of the 3D scenes, immersing students in a rich, engaging, and joyful learning experience.
If you're interested in their delightful and easy-to-teach lessons, visit the Inquisitive AU website. Each lesson is supported by captivating materials such as eBooks, videos, maps, interactive elements and more!
3D Interactive Animations for Inquisitive
