Shuai Zhang
Have you ever felt that parametric architectural design is trapped behind a high barrier to entry? Traditionally, designers and clients must install heavy, complex software just to view or tweak a 3D model.
For my final project in the Cloud-based Data Management module, I wanted to break down this barrier. The result is “A First-Person Parametric Exhibition”—an interactive, web-based platform that gamifies the architectural design process. By combining a first-person virtual gallery with cloud computing, anyone can now explore and modify complex parametric models directly in their web browser.
🎮 Gamifying the Design Experience
When users enter the platform, they are not greeted by a boring dashboard. Instead, they step into a 3D virtual showroom built with Three.js. Just like playing a first-person video game, users can navigate the space, walk up to the exhibition wall, and “summon” a 3D parametric building with a simple click.
⚙️ Real-Time Parameters & Live Data
On the left side of the screen, a clean UI allows users to intuitively drag sliders to adjust the building’s core parameters—such as radius, height, rotation, and scale.
The true magic happens in the Live Data panel. As the model transforms on the screen, the dashboard instantly calculates the exact physical data, including bounding box dimensions, floor area, and volume. What you see is exactly what you get, allowing for precise design iterations on the fly.
🌧️ Immersive Environment & Export
To maximize immersion, I integrated an environment control system on the right panel.
- Material Swaps: Dress the architecture in Glass, Concrete, or Wood with a single click.
- Dynamic Weather: Click “Rainy” or “Snowy” to instantly shift the lighting and trigger thousands of falling particles. This helps visualize how the building feels in different climates.
- Seamless Workflow: Once satisfied with the design, users can directly export the
.3dmor.objfiles to continue their work seamlessly in Rhino.
💻 Under the Hood: The Tech Stack
How does a web browser handle such complex geometries in real-time? The answer lies in a robust front-to-back cloud workflow:
- Front-end: Built with Vue.js for a responsive user interface, and Three.js to handle the hardcore 3D rendering and particle systems.
- Back-end: Powered by Rhino.Compute. Every time a slider is moved, the data is sent to the cloud, where Grasshopper calculates the complex geometry in milliseconds and returns the updated mesh to the browser.
🙏 Acknowledgments
This project was developed during the MACAD 2025/2026 academic year. I would like to express my sincere gratitude to my faculties: Justyna Szychowska, Sophie Moore, and Chuck Driesler for their invaluable guidance and support throughout the development process.
Welcome to the future of cloud-based architectural design. Step in, play around, and let the parameters do the heavy lifting!
