Built with Spline

Interactive HVAC Product Modeling in Spline 3D

Ayaka Fuji

Interactive HVAC Product Modeling in Spline 3D🌡️

📝Project Information

In this project, I developed a series of interactive 3D models to visualize HVAC systems and components using Spline.
The goal was to create responsive, lightweight, and visually intuitive scenes for both technical explanation and sales presentation.
Heat Exchanger Visualization: A click triggers heat conduction animation via color change.
Parallel & Series Fan Systems: A UI switch toggles between fan types, showing functional differences.
HVAC System Model: Multiple UI panels activate damper, fan, and dual-mode heating/cooling animations.
All models were built from scratch using reference images and technical documents, with a focus on clarity, responsiveness, and web optimization.

Project Team

Ayaka Fuji (Spline 3D Designer)
The client for this project is confidential and cannot be disclosed publicly.

My role

Spline 3D Modeling Creation
Material Setting
Interaction / Animation

🎯Our Goal

Our goal was to create lightweight, interactive 3D models that clearly demonstrate complex HVAC systems and product configurations. Using Spline, we focused on responsive performance, intuitive animation, and visual clarity for both technical and sales presentations.

● Heat Exchanger Visualization

Interactive Heat Exchanger Visualization
This 3D model illustrates a heat exchanger mechanism built in Spline. When you click on the heat exchanger, the pipe colors transition from grey to red, visually representing heat conduction in progress. Live preview : Click anywhere on the scene below 👇

● Interactive 3D Model of HVAC System

This interactive 3D scene visualizes the internal structure and control logic of an HVAC system, fully modeled from scratch in Spline based on technical PDFs and reference images.

🎥Animation

Click the Open/Close panel to trigger damper opening and closing animations.
damper opening and closing animations
The ElecHeat Stg1 panel activates a dual-mode animation that visually shows simultaneous cooling (blue) and heating (red) processes.
When you click FanCmd, the internal fan spins to simulate airflow.
Designed with a clean and minimal style for clarity, this model focuses on functionality and is optimized for lightweight performance and responsive use across devices.
It was created specifically for a sales presentation, delivering an engaging and intuitive way to explain HVAC operations in real-time.

● Interactive Visualization of Parallel and Series Fan Systems

Interactive Visualization of Parallel and Series Fan Systems 3D model made in Spline
This 3D scene demonstrates the difference between Parallel Fan and Series Fan configurations in HVAC systems, fully modeled and optimized in Spline for minimal data size and smooth web performance.

🎥Animation

In the Parallel Fan setup, the Supply Fan is positioned on the rear left side.
In the Series Fan, the Supply Fan moves to the right side, showing a different airflow path.
Additionally, selecting Electric Heat or Hot Water Heat triggers heat conduction animations, changing the pipe color to visually represent thermal activation.

👆Interaction

Clicking the Switch Fan UI panel allows users to toggle between the two fan types in real time, highlighting structural and positional differences through interactive animation.
By leveraging lightweight 3D modeling in Spline, this interactive demo visually explains the configuration differences between Parallel and Series Fan systems while maintaining optimal performance.

Live Demo Links

👀Looking for a Spline 3D Designer? As a certified Spline Expert, I offer interactive 3D design services. Check my services via my Contra Service Page.
👀Want to see more of my work? ✨ Check out my portfolio for the latest Spline 3D showcases!
Like this project

Posted Jun 23, 2025

Interactive 3D models of HVAC systems built in Spline. Lightweight, responsive, and optimized for product demo and technical visualization.

Likes

2

Views

26

Timeline

Apr 30, 2025 - May 18, 2025

Spline x Webflow Project : Energy Creates💡
3D Concrete Manufacturing Plant Design in Spline🏭
Interactive 3D Modeling for Ice Axe Product
Spline Physics and Variables Scene for a Cubic Game

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc