Cubic
EN / [ä¸æ–‡]
Interactive Interior Experience ToolA web-based 3D decision-support prototype that turns interior material selection into an interactive experience, helping non-architectural users compare finish options and understand their spatial impact in real time.
What is Cubic
Cubic is a browser-based prototype that transforms a simple interior room model into an interactive material selection interface. Users can explore the space, switch finish options, inspect interior surfaces, and save material combinations for comparison. The prototype tests how architectural visualization can become more useful as a decision-making workflow, especially for clients and non-technical users.
The Problem Behind the Prototype
Interior material decisions are often made through fragmented communication: renderings, finish schedules, reference images, samples, emails, and meeting notes. For clients or non-design users, it can be difficult to understand how a selected material will feel inside the actual space, or how different choices affect the overall composition.
Cubic was created to test a more interactive workflow: instead of asking users to imagine the final result from static images, the tool allows them to directly explore the space and compare options visually.
Before
After
Use Scenario
Cubic fits best in early interior design, client presentation, residential finish selection, modular housing customization, and productized spatial design workflows.
It can support moments where the design is developed enough to have a clear room layout, but material decisions are still open. In this stage, the tool can help designers and clients discuss options more efficiently, reduce ambiguity, and turn subjective visual preferences into clearer decision records.
For example, a designer could use Cubic during an early client meeting to compare two wall finishes, test floor/cabinet combinations, and save preferred options before moving into renderings, specifications, or pricing discussions.
Product idea
The core idea behind Cubic is simple:
Turn interior material selection from a presentation task into an interactive decision process.
Instead of treating visualization as the final output, Cubic treats the 3D room as an interface. Users can explore the space, inspect specific surfaces, switch material groups, and save comparison states. This creates a bridge between architectural representation and product interaction.
What I was thinking while building it
While developing Cubic, I focused on three product questions:
How can a 3D space become easy to navigate for non-technical users?
This led to the separation between Explore Mode and Inspect Mode.
How can material options be compared without overwhelming the user?
This led to simplified material categories, real-time switching, and Save A / Save B comparison logic.
How can architectural spatial logic remain visible inside a product interface?
This led to the plan-cut legend and inspection-view system, connecting the 3D experience back to readable architectural information.
Core Experience
Cubic is organized around a few key interactions:
Explore
Users can orbit around the model and understand the overall spatial and material relationship.
Inspect
Users can switch into controlled interior elevation views to read wall surfaces more clearly.
Apply materials
Users can test different finishes on walls, floors, cabinets, and other surface groups.
Compare options
Users can save material combinations and return to them for side-by-side decision-making.
Read the space
The legend and cut-view logic help users understand where they are looking from and how the inspected view relates to the room layout.
My Role
I led Cubic as a self-initiated product prototype, combining architectural design knowledge, 3D asset preparation, UX thinking, and AI-assisted front-end development.
My role covered the full process from product concept to live deployment: defining the user workflow, preparing the spatial model, designing interaction modes, guiding the React / Three.js implementation, testing usability, and deploying the prototype online.
Rather than treating Cubic as a conventional visualization project, I approached it as a decision-support interface. I focused on how non-architectural users could navigate a 3D space, understand material changes, compare options, and make more confident design choices.
Key responsibilities included:
Product concept and user workflow
Defined Cubic as an interactive material decision tool instead of a static rendering viewer.
UX and interaction design
Structured the experience around Explore Mode, Inspect Mode, material selection, and Save A / Save B comparison.
3D asset and material workflow
Prepared the room model, organized material groups, tested texture behavior, and connected visual changes to user-facing controls.
AI-assisted front-end development
Used React, Three.js / React Three Fiber, Vite, GitHub, Vercel, and AI coding assistants to build, debug, and deploy the prototype.
Design-system thinking
Translated architectural logic, such as plan views, interior elevations, and material schedules, into a more accessible web product interface.