//INTRODUCTION
I developed this project to design and deploy an interactive Glass House prototype where architectural parameters are controlled through web-based sliders. As you can see from my workflow, I’ve built a system that integrates structural data—like floor thickness, footing sizes, and column counts—directly into the browser. This allows for instant geometric manipulation, bridging the gap between raw data and architectural form
//BUILDING PROCESS
To ground the model in a realistic environment, I integrated a Shadow Analysis function. By sampling and modifying lighting and camera logic from the Three.js documentation, I established a dynamic sun positioning system. I can adjust the Sun’s X, Y, and Z coordinates to observe how shadows interact with the structural grid, ensuring the environment responds accurately to every change in the camera view.
For the Materials Rendering, I created a process to explode and deconstruct the geometry down to its corner points. This allows my customized glass drawing function to ‘snap’ panels into place with precision. Using a Material Editor adapted from Three.js samples, I can toggle between glass, steel, and concrete, making the final prototype not just a static model, but a fully interactive design tool.
//OUTPUT
After applying the materials like how you want it, you can change the shadows to make it look visually pleasing. The output will be a downloaded png and if you want to do further modifying there is also a 3D download in 3dm files that can be opened on Rhino.
//CONCLUSION
In conclusion, I have successfully integrated parametric architectural design with real-time web rendering. By adapting Three.js logic for shadow mapping and material application, I’ve created a workflow where structural data immediately informs the visual environment. This prototype allows for both aesthetic and structural refinement, providing two distinct outputs: a high-quality PNG for visual presentation and a 3dm file for further professional modification in Rhino. Ultimately, this demonstrates how cloud-based tools can bridge the gap between interactive web-based design and traditional architectural workflows.
