3D Asteroids with the Earth🌎
Ayaka Fuji
Spline 3D Asteroids with the Earth🌎 - Loop Animation for Online Lesson
Project Information
Inquisitive AU is a Sydney-based online 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, assessments, and teaching tools to 70% of Australian primary schools across Science, History, Geography, Maths, and English.
The creative director at Inquisitive Craig entrusted me with the task of creating a 3D loop animation for their online lessons, featuring an asteroid scene set in the galaxy.
As an educational asset on their learning platform, we created a 3D interactive loop animation and exported it as an HTML/JS file from Spline.
Project Team
- Craig Barker (Creative Director from Inquisitive AU)
- Ayaka Fuji (Spline 3D Designer)
My role
- Spline 3D Modeling Creation
- Spline Interactive Scene Creation
- Spline 3D loop animation
- Convert Spline scene to HTML / JS file
Clients
Inquisitive AU
Website :https://www.inquisitive.com/au
Concept
Inquisitive AU has been providing a wide range of curriculum categories since 2018 and has grown to be used by 50,000 teachers in 5,000 Australian primary schools.
In this project, we created an asteroid scene in the galaxy with a rotating Earth animation.
To enhance students' and teachers' learning experiences, we designed a beautiful asteroid scene illuminated by realistic sunlight.
Modeling
The creative director, Craig, initially provided me with a 3D asteroid model, so we started by exploring the material for the asteroids.
First, I tried to create a model using Blender and imported them into Spline, but in the end we decided to use Spline AI to generate the asteroid shapes.
I created multiple different asteroid shapes and combined them with material textures. Using Spline AI for modeling saved us significant time.
For the Earth, I created a simple sphere and added image textures with offsets, so the Earth and clouds move at slightly different speeds, adding to the realism of the scene.
The background combines an image of the galaxy with tiny star shapes. Some stars blink every few seconds and change color on their own.
Mouse Click Interaction
We added a simple interaction where, once the students click on the scene, the camera slightly moves closer to the asteroids and changes the angle.
This small movement helps students feel immersed in the beautiful galaxy scene and makes the content more engaging.
Loop Animation
The asteroids are animated to pass through the screen from left to right.
To show depth of field, we created several motion paths for the asteroid trails.
Each asteroid rotates at different angles and speeds, but all the animations are beautifully looped on the screen.
The Challenge of Showing Depth with Clear Visuals
First, we tested Spline's Perspective view for the camera. This angle looked more dynamic, with the asteroids appearing to come closer to the camera before passing through.
However, after exporting the animation as a JS file, the perspective view had changed the camera's zoom value.
Therefore, I contacted the Spline development team and we found that the perspective view might be the reason for the zoom setting change.
As a result, I switched to Orthographic view, adjusted the motion paths and resized the asteroids to better represent the distance from the camera.
Although Spline has a Depth of Field effect that adds a cool visual element, we decided not to use it this time because we wanted to clearly display the details of the materials.
Lighting
One of the exciting parts of this project was setting up the lighting for the galaxy scene.
The creative director Craig helped a lot in making the scene lighting more realistic. Eventually, we succeeded in showing strong sunlight that illuminates both the Earth and the asteroids.
I carefully adjusted the lighting values, angles and positions to achieve the right contrast between light and shadow.
Final Output
For the final output, I exported the scene with a specific canvas size for their platform and created a JS file.
Additionally, I edited the script in the JS file to ensure the scene was positioned at the center of their canvas and successfully completed the project by submitting the HTML/JS files.
I also created another demo scene where all the asteroids were made using Spline’s AI tool, which saved a lot of time and allowed for a wider variety of asteroid shapes.
As someone with a background in learning design creating eLearning content, working with Craig reminded me of how exciting it is to design instructional materials for educators.
Using Spline for interactive content adds a new layer of excitement for students and provides teachers with engaging tools to teach various subjects. I believe this will help foster passionate learning and teaching :)
I look forward to continuing to explore the possibilities of using Spline in educational content. If you're interested, feel free to contact me. Stay tuned for the next project! 🌟
