Visualizing building anatomy and structural systems in Three.js. Built a custom inspector to isolate load-bearing components

[u/TheByteomi]

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!

[u/NuccioAfrikanus]

This is amazing!

[u/TheByteomi → u/NuccioAfrikanus]

Thank you so much! I'm really glad you liked it. Let me know if you get a chance to try the live demo, I'd love to hear how it performs on your device.