This project involved designing a 3D concrete manufacturing plant in Spline, featuring ON/OFF scene states and interactive elements.

Cement bag colours are controlled via JavaScript using Spline variables, and the entire scene was exported in vanilla.js and integrated into a custom web interface.

Working in collaboration with software engineer Jamie, we tested and fine-tuned all variables and events using Node.js to ensure smooth web integration. Playful factory animations were added using gears, pipes, and particle effects to bring the scene to life.

Jamie Perkins (Software Engineer)

Ayaka Fuji (Spline 3D Designer)

Spline 3D Modeling Creation

Material Setting

Variable Setting

3D animation

Website : https://inorganik.net/

The goal of this project was to design a 3D scene of a concrete manufacturing plant in Spline, where cement bags are produced.

The scene was required to have two distinct states, ON and OFF with the ability to toggle between them via a switch or similar interaction.

A key feature of the project was the ability to control the cement bag colours using variables. These variables could be manipulated through JavaScript from the web browser, allowing real-time changes without editing the scene in Spline.

To reflect the factory theme, I incorporated mechanical elements such as gears and pipes. I aimed to create a playful and engaging 3D experience using simple animations, particle effects, and other interactive features available in Spline.

Most of the 3D models in this project were created natively in Spline. However, the cement bag posed a challenge due to its folded structure, which was difficult to model accurately in Spline. To solve this, I used a pre-made Blender 3D asset and imported it into the scene.

To kick off the modeling process, I gathered reference images and created a mood board to share with my client. We agreed to include several essential elements: the main machine, speed meter, cement bags, pipes, cement manufacturing tower, and silos. To help clearly differentiate the ON and OFF scenes, I added a switch bar and indicator lights.

Additionally, I incorporated extra design details such as air vents, side buttons and bars, and a funnel with animated steam — all contributing to a more playful, factory-like aesthetic.

The early concept included a more detailed concrete batching plant on the side, but we later decided to simplify the design for clarity and performance.

To highlight variable colours, I initially added a colour selection screen to the machine. Later, we came up with the idea of using ink tanks instead, which made the function more visually engaging.

I also added a small window so viewers can see the ink inside the machine.

This was a very flexible and creative project.

My client Jamie, gave me the freedom to explore and design with an open mind.

It was truly enjoyable to build most of the models from scratch directly in Spline!

For the materials, this project followed the same tone as a previous one we worked on, using pastel colours with outlined styles for a soft and playful look.

Initially, I created both orange and blue versions. After reviewing both, we decided to move forward with the blue one.

The 3D objects designed as metal components use reflective, silver materials to simulate a metallic finish. By combining soft pastel tones with realistic metallic textures, I aimed to strike a balance between playfulness and a rich, three-dimensional feel, something that Spline handles beautifully✨

In this scene, we used Spline variables to control material colours, the speed meter needle, and the appearance of cement bags. On my end, I set up all the variables directly in Spline and exported the scene using the vanilla.js format.

With the help of Jamie, a specialist in software engineering ,we tested the exported code using Node.js to ensure everything worked correctly.

Together, we updated parts of the HTML and JavaScript, and successfully made it possible to control Spline variables directly from the web browser.

For the animation, I created a looping motion for the conveyor belt causing the rollers to rotate when the scene switches to the "On" state.

The side bar moves upward, and the small bars on the side begin looping up-and-down movements. The funnel on the machine also starts emitting steam, generated by a particle emitter in Spline. Additionally, the machine includes two gears that rotate continuously.

For the final rendering, I created three versions: one tank, two tanks, and three tanks. Each version includes two scenes, an "Off" state and an "On" state.

When you mouse down on the light on the machine, it triggers a scene switch.

The "Off" scene features red lighting with static 3D models, while the "On" scene activates a green light and plays all animations.

I exported the project from Spline using the web export (vanilla.js).

With Jamie's guidance, we tested all variables and events using Node.js to ensure the Spline setup works seamlessly on the web development side.

This project is connected to another cube-creation project with Jamie. He’ll be launching an exciting game using these Spline scenes, so stay tuned!⚡

Cement Factory (Early Concept Model) ➡ Preview Link🔗

Cement Factory (Final Output) ➡ Preview Link🔗

Click the red light to turn on the scene👇