generate 3D objects from DOM elements by mixing HTML tags and R3F

[etienne-85]

What I'm looking to achieve is render HTML elements as 3D objects using their DOM properties (like width, height,...)

This topic might have been already discussed, but what I found so far was about rendering HTML over 3D objects, and not generating 3D objects from HTML DOM elements.

To illustrate with simple example: for an HTML DIV which renders as a rectangular 2D shape, that would show a corresponding 3D box object with same width, height as DOM object plus and addtional depth

My aim is to benefit from CSS properties (like margin, padding, ...) to customize a shape, and then showing it in 3D.

I know there are probably several ways to do it, but I wanted to make sure I wasn't missing anything obvious before starting coding.

Any suggestions?

[etienne-85]

Nevermind think I found my answer in css3d_sandbox example where both CSS3D object, and regular 3d Mesh are created from DOM element and displayed separately. This does pretty much I was looking for, just I thought maybe there would be a way to do it directly from R3F tags. Closing unless someone has better suggestion

[bryndsey]

If I understand your question, I think there are a couple of possible options depending on what you want to do:

1. The r3f-scroll-rig library essentially lets you "target" 3D content to DOM elements (and obviously supports scrolling as well).
2. If you are looking for flexbox-like behavior, there's react-three-flex. It's not quite as automatic as flexbox though (you might need to manually manage reflow and automatic sizing of content depending on the use-case)
3. I haven't tried it myself, but you might also be able to get what you want with tunnel-rat. I don't think it's handle positioning of 3D content based on DOM content (or vice versa) by default, but is more about letting you define one in the other. My thought is that you might be able to use it to more easily get sizing/positioning from HTML content and pass that to 3D content since the code is colocated.

[etienne-85]

Thanks for sharing those links. At first glance, seems all are relevant

1. "Tracks DOM elements and draws Three.js objects in their place using correct scale and position."
2. could be interesting too as I looked for a flex behavior to place 3d objects inside an area
3. this is a tunnel beginning in DOM and ending inside R3F, so interesting too

Will have to further look to decide which one is the most convenient, meanwhile I started coding something with threejs vanilla. If you wonder, I'm looking to generate building structure out of simple html divs, more out of curiosity than real use yet.

[bryndsey]

I'm looking to generate building structure out of simple html divs

I'm guessing that the scroll rig is probably closest to what you want for that case.