Using CSS3DRenderer

[rschick]

Does it make sense to use react-three-fiber with the CSS3DRenderer? I tried doing something similar to the example linked here but didn't get anywhere. I think the issue is that the reconciler is designed to render three.js Object3D elements, whereas CSS3DRenderer works with DOM elements wrapped in CSS3DObject. I think it would require a different custom renderer, but before I dive in and try to build one I want to make sure something doesn't already exist. It would be great to be able to build react style declarative UI with CSS3D.

[drcmda]

i have never tried css3drenderer, but shouldn't it still handle threejs meshes and standard geometry? it was the same thing with the svg renderer. if that were the case you could exchange it, just like in the codesandbox demo under the link you posted.

[rschick]

It seems to be completely different from the webgl and svg renderers. The only objects you can add to the scene are CSS3DObject and CSS3DSprite, which are wrappers around DOM elements, and it renders DOM elements with CSS transforms instead of into a canvas. I think it might be pretty easy to create a react custom renderer for it, but I've never made one before so I can't say for sure. When I get some time I will play around with it.

[drcmda]

going through the examples, i think it would be possible to do this if you exchange the renderer like in the svg example. and then use the "extend" function to add these special css objects to the known catalogue of objects. then you could build your tree in react. if you want you can leave this issue open and start putting the renderer together in a codesandbox. i can help you later with the react graph stuff.

[RichardLindhout]

This approach is also quite nice https://github.com/mrdoob/three.js/blob/master/examples/css3d_orthographic.html

It renders the css3D renderer on top of the 3d renderer and let the css3d render control the camera of the 3d scene