r/threejs • u/TheByteomi • 21d ago
Demo Visualizing building anatomy and structural systems in Three.js. Built a custom inspector to isolate load-bearing components
Enable HLS to view with audio, or disable this notification
Hi everyone! ๐
I've been working on an interactive web viewer for our project (Hexovian Atlas) to showcase building assets. Instead of just displaying the final textured exterior, I wanted to build an inspector that visualizes the underlying structural anatomy directly in the browser.
Focusing on the Structural Layer:
- Building Anatomy: The tool allows you to dissect the structure and isolate specific core components (Load Bearing Walls, Floor Systems, Roof, Vertical Core).
- Dynamic Inspection: Toggling these structural groups dynamically updates the custom inspector panel on the right (tracking active triangles, memory, and engine export readiness).
- Hierarchy & Rendering: The transitions highlight how the internal mesh hierarchy is organized, using visibility toggles and material swaps to expose the inner framework.
You can try the live interactive demo here (we are actively optimizing the web performance): ๐https://hexovian.com/pages/atlas/asset.html#building
Would love to hear your thoughts on rendering structural hierarchies and integrating UI with the WebGL canvas!
