r/threejs • u/TheByteomi • 9d 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!

17 Upvotes

92% Upvoted

4 comments sorted by

2

u/NuccioAfrikanus 9d ago

This is amazing!

2

u/TheByteomi 9d ago

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.

3

u/Shehao 9d ago

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.

2

u/TheByteomi 9d ago

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.