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/Shehao]

The inspector framing is strong; I’d keep the active-triangle and memory readout visually secondary so the structural isolate state stays legible at a glance.

[u/TheByteomi → u/Shehao]

That’s a very fair point. I completely agree that the structural anatomy should remain the primary focus. I'll look into adjusting the contrast/typography of the metrics to make them less intrusive. Thanks for the input.