The idea, let’s explain how I built it.

As I was thinking over those questions, searching for inspiration for my personal project, and as usual whats better than browsing the web and getting inspired from Dribble, Pinterest, and even had a chat with AI chatgpt for some creative sparks. I finally stumbled upon THE LAND on Awwwards—a super cool website crafted with three.js! It felt like fate—I knew that this was the idea I had been searching for. It was time to see how far I could push both Spline and The 3D Building Generator.

You can see the cool website here

Starting work

Requirements

I started noting down my needs and envisioning what I aimed to achieve. Here's the lineup:

• A 3D city and some trees. Maybe some water/river/sea around would be nice.
• An interactive navigation compass card 🧭
• Tooltip & property details
• A 3D floorplan as a finishing touch
• Multiple cameras attched to the navigation 3D compass card

Wireframes

With that in mind i started sketching my ideas on paper. Wireframes always keep me focused on what i need design first, give an overall blueprint structure and they dont need to be perfect.

High Fidelity

Once my wireframes felt about 80% right, it was time to move to figma and produce some high fidelity assets and bring the idea to life before moving on to Spline.

The essence I aimed for was a blurred, glassy look for the buildings, the floor, and perhaps even the card. The images used are imported from a real estate website, Realestate link, title and description are dummy data.

Interactions

When it came to interactions, simplicity was key—I wanted to keep clicks to a minimum. Setting aside interactions on the camera navigator, the steps for the property were:

Indicator +1 ⇢ Tooltip ⇢ Property details ⇢ Floorplan ⇢ End demo or restart

The compass UI would serve as a navigation tool to switch between cameras positioned around the city. Each button would correspond to a direction—East, West, North, South—and there would also be a restart option.

City map generator

The initial task of creating the 3D map and buildings was achieved using this amazing tool 3D city map generator, its free and a real time-saver.

A small challenge I faced with the generator was that the export resulted in multiple seperated 3D assets like city blocks, roads, and rivers. Furthermore, the files were in .stl format, which isn't ideal for web viewing. However, it was easy to solve you just need either blender or microsoft 3d viewer and save the files in glb format.

Lets get into Spline

Importing 2D, 3D assets and materials

Importing the figma and 3D city assets was a breeze—just drag and drop. Then, it was a matter of aligning and sizing them correctly, adjusting elements like roads, blocks, and the sea. For the directional lighting, I kept it straightforward. As for the materials, I opted for glass, white buildings, and added a touch of metallic look for the tooltip and card.

Also, for the park i used 2 Birch trees from the pack povided for free by Quaternius, Low Poly Tree assets. Feel free to show your support for the creator—it's fantastic content!

Transforming the cards into 3D

With the figma high-fi property card and tooltip pictures in perspective, I began recreating the card in 3D. It took some time and effort to align everything properly, especially since Spline doesn't offer functionalities like Figma's autolayout.

Creating the 3D compass UI and connecting cameras

Unfortunately, Spline's new UI system didn't support functions like on-click button switching cameras. So, I had to manually place card components throughout the city.

Also, Spline lacks a pointer option when you try to record a video, making the process of mouse & hover effects difficult to understand when is a button or tooltip hovered. Although I tried using a cube or triangle to follow my mouse via actions panel, it works for 1 camera, it didn't work well when changing cameras. I hope they fix this. :)

Ending the sequence with my details

For the ending, I envisioned the camera transitioning throughout the floorplan first, then smoothly moving inside and stopping at the living room, focusing on the TV. The TV would have an action programmed to detect its proximity, turning on when the camera is close enough to display the remaining content, and vice versa.

End result

Some stills of the city

The videos

Final Thoughts

I enoyed working on this project and pushing this app to its limits was fun! It provided me with a opportunity to learn new skills, from using the city 3D generator to mastering camera transitions, actions, and states. For sure i must have missed a lot of actions i could do like conditional logic and much more, but this is enough for now.

Of course, this project and its assets will be shared on Splines community for anyone to use and learn. Feel free to check it here Spline project link.

But i have to say it has limitations in regards to performance. Examples are:

• Size: Means slow workflow, but it shouldnt on a pc like mine, 4080 Super & i7 13700k. However, as a web app it shouldnt be used for heavy 3D work. Better use C4D or UE5.
• Cameras: Transitioning from a top view to inside the floorplan was quite challenging. Camera rotates randomly with an undesirable effect. I resolved this by manually moving the camera via the x, y, z panel.😹
• Lighting: While the lighting effects are good, they slow down the overall performance.
• User Interface: Occasionally, keyboard shortcuts like space and alt to orbit and navigate stopped working unexpectedly, requiring a refresh.
• Exporting Videos: Exporting videos as mp4 or webm formats could be challenging at times, resulting in laggy playback. I had to disable elements or record my screen instead for smoother video.

Despite these challenges, I believe Spline has a bright future ahead. It's an excellent choice for small projects looking to create cool 3D moving animations and integrate them to websites and more with endless possibilities for VR and AR.