JAMESXDIGITAL

Welcome to the deep-dive into Spline.Design.

Every single object and material was designed and put together by me.

This page is also a test drive for Spline’s ability to embed any project onto a webpage (which work flawlessly). Below, I have embedded two slightly different versions:

• The default experience with a fixed camera 🎥
• A free camera version where you can have a better look around the project 🤳

🎥 Default fixed camera 🤳 Free camera

Depending on your internet speed, you’ll just see a ⬜️ white screen until it fully loads. ⏳

🎥 Default fixed camera - full screen

🤳 Free camera - full screen

🧍‍♂️ Character Illustration

For the character, I wanted to draw inspiration from Cabeza Patata’s trademark style. I first designed the character with Photoshop to get the initial idea before building it in Spline, which was the fun part! 🏗

It’s a long process as everything from each hair curl (which are just spheres) to each shoelace (which are cut-out toruses 🍩) had to be created.

Everything is then parented to each other so that when different states are activated (such as doing a kickflip), attached limbs move as they would in real life. 🦾

💻 Laptop Design

The main laptop body has a convincing metallic material, but I am most proud of the keys. Using the ‘Depth’ material, it was possible to give a subtle radial gradient to give the keyboard signs of use. ⌨️

Each character and icon have been either made from scratch or are text with a font applied. 🆒

Each key has different states and actions. When pressing a ⚪ white key, the key moves down then up only. But when you press a 🔵 blue key, there are a whole bunch of actions that are activated. 🎬

🌃 Environment Design

A lot of performance considerations had to be made when creating the environment.

Inititally the skateboarder physically moved across a long scene, and once at the end, it would return to the beginning and repeat. I eventually figured that this was not the best idea, so I re-developed it so that the skateboarder stays still and instead the environment moves and repeats. 🔁

For the 🛣️ road, I made the texture as short as possible, as I could then repeat it, rather than having duplicated pixels.

For the 🌃 side walls, I wanted to add more variations, so the texture is longer, but I still designed it so that it repeats perfectly.

Both textures were designed in Photoshop and then optimized to make them as small as possible.

🏗 Material Design and Action Setup

In total, there are 24 different material assets that I have made for this project. The beauty of assigning material assets to objects is that it is possible to change the appearance of multiple objects that share the same material at once. This could be a useful feature when implementing a “change character’s clothing” feature, that actions with the click of a button. 🤔

There are hundreds of different object states and events in the project. Everything from the environment, the skateboard, to the character’s eyes have multiple states and events within them alone. The scrolling GIF here gives an insight into all of the events that are attached to only one of the laptop keyboard keys. 🤯

Adding these details is the most fun part of building and designing in Spline. It’s easy to get carried away and keep implementing details that only the creator will ever notice. 🎨

Here are some other details that you may have not noticed in this project:

• The character is breathing in and out (by scaling the torso up and down) 😮‍💨
• His eyes are moving around (by offsetting the eye image texture between two different values) 👀
• His arms are moving (using the following mouse feature) 💪
• His hair moves in the wind (by simply moving the hair sphere’s up and down and giving each sphere a different delay value for some randomness) 🦱

Feel free to comment below if you have any questions about this project! Thanks ✌️