3D Asteroids with the Earth🌎

3D Designer

3D Animator

Spline Designer

Spline

Inquisitive

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

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.

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.

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! 🌟