Dimension outlines with SVG

[jukibom]

So this is kinda gross but with some regex madness we rip the x, y div coordinates from the slot's shadow dom div css transform string and updating an SVG canvas inside requestAnimationFrame we managed this neat effect 🎉

(and a feature request would be an API to get hotspot positions in screenspace because while the SVG works well, getting those positions is quite brittle wrt future model-viewer updates on our side! 🙏)

dimensions-test.mp4

[elalish]

That's amazing! I've told a number of people these kinds of dimensions weren't feasible, so well done in proving me wrong. I'm open to a PR exposing this. Happy to give feedback on API shape (you can always open a PR before you do any coding so we can discuss first if you like).

Still, one thing this approach will never give you is proper 3D occlusion. I'm about to start on a much bigger API addition to allow for multiple 3D models in the scene. I believe that will allow an alternative solution to dimension lines (along with many other use cases).

[jukibom]

Thanks! I've made a draft PR #3844 with a working example to kick off a discussion.

Still, one thing this approach will never give you is proper 3D occlusion.

Yeah, unfortunately so - but I'd probably say the trade-off of drawing with SVG or canvas2d is worth it. Drawing UI elements in world space / webgl is really painful 😅