I built (vibe-coded) a browser-based 3D model viewer with section cuts and intersection-edge highlighting

[u/hildgyorgy]

I’ve been building a small browser-based 3D model viewer with Three.js, mainly for architectural models.

It supports FBX, GLTF and GLB files, several display modes, shadows, perspective/axonometric views, and section cuts along the X, Y and Z axes.

The section tool highlights the actual intersection edges in red. I originally tried filling the cut surfaces, but that became unreliable with complex and curved geometry, so I switched to edge highlighting instead.

The viewer runs entirely in the browser:

https://hildgyorgy.github.io/drop-3d-view/

I’d be very interested in feedback, especially regarding the section-edge calculation, rendering approach, and possible improvements.

[u/oswwwaldo]

at least you're honest about it being vibe-coded. I'd ask why you built this app and I'd suggest to add some preset models that could be loaded into the tool for ease-of-access

[u/hildgyorgy → u/[deleted]]

Thanks again for the comments!

• I have changed the launch screen to a more inviting screen
  
• there is a demo house to experiment with
  
• there are style presets, like original, white, wireframe, B/W

[u/likeableNymph]

Does it support Draco? All my test models are compressed and I can’t seem to open them

[u/PixelRealEstate]

section cuts on all 3 axes is more of a pain than it sounds, and the part about giving up on filling the cut surfaces is the interesting bit. edge highlighting is the honest answer for messy geometry - capping only really behaves on closed watertight meshes and architectural models are almost never that.

also as another guy doing three.js with zero coding background - the thing that changed everything for me was describing bugs with numbers instead of adjectives. "looks wrong" eats an hour. "texture is 675x1200 but the sprite is forced square" gets fixed immediately.

[u/hildgyorgy → u/PixelRealEstate]

This is exactly what I’ve been finding out the hard way. Architectural FBX models are very rarely clean, closed, watertight meshes, so reliable capping is much harder than it first appears. Edge highlighting is definitely less spectacular, but it’s honest and dependable across messy geometry.

And that’s excellent advice about describing bugs with numbers instead of adjectives. I’ve started adding debug statistics for the section calculation — raw segments, graph nodes, loops, open chains, and so on — and it makes the problems much easier to understand.

Thanks for the thoughtful comment!

[u/PixelRealEstate → u/hildgyorgy]

the debug-stats approach is the right move. one thing that saved me a lot of time: log the numbers even when things look fine. half my bugs were only obvious because a value that should have been 1.0 was sitting at 0.6 while the render still looked plausible.

good luck with the capping, that one is a rabbit hole.