Built with Spline
3D Asteroids with the Earth🌎
Ayaka Fuji
Verified
Spline 3D Asteroids with the Earth🌎 - Loop Animation for Online Lesson
3D Asteroids and the Earth, with a galaxy background
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.
Rotating Earth
The background combines an image of the galaxy with tiny star shapes. Some stars blink every few seconds and change color on their own.
Asteroid models made using Spline AI
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.
3d Asteroids and the Earth, galaxy background
An interactive 3D animation scene to explain how sunlight changes during summer and winter
We also created an interactive 3D scene to demonstrate how sunlight works during summer and winter. All UI components, such as the buttons, were made in Spline.
In this scene, users can see which areas of the Earth are illuminated by sunlight. One of the challenging parts of this project was setting up the complex interactions in Spline, such as linking the mouse down action of the buttons to control the light’s position.
Additionally, the text "Alaska" follows the highlighted Alaska area, but it always faces forward to maintain visibility.
This interactive scene is used in Science lessons on Inquisitive, allowing teachers and students to explore and learn in an engaging way on tablets.
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.
Also the 3d earth and asteroids scene has color changing animation in the galaxy background.
Perspective view of scene (Demo)
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.
Perspective view of scene (Demo)
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.
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! 🌟
Like this project
What the client had to say
I highly recommend working with Aya! She did such an amazing job of creating a 3D outer space scene in Spline for us. Her communication skills are outstanding. 5 stars!
Craig Barker
Aug 28, 2024, Client
Posted Sep 12, 2024
Creating a 3D loop animation of asteroids and a rotating Earth for an online lesson by Inquisitive, a leading digital education provider in Australia.
Likes
11
Views
134
Timeline
Aug 21, 2024 - Aug 28, 2024
Clients
Inquisitive
