What is the best way to style html elements within CSS3DObjects?
Im able to use some elements from React-Bootstrap and regular Bootstrap as well. But the CSS3DRenderer does not seem to recognize all flexbox grid features. For instance, react-bootstrap Buttons render properly but Containers do not format as I’d expect. I had some luck with injecting a separate stylesheet.css but weird things happening there also - the imported stylesheet seems to be affecting all of my 2D components even if the stylesheet was not imported into that component. I’ll test this approach more, but please let me know if you have advice on best practices for styling CSS3DRenders.
Thanks,
Preston Chaplin
It’s hard to pinpoint the source of the problem when you describe it as “weird things are happening”.
The recommended approach is to leave the Three.js-generated elements alone, and only style the elements inside of them. You can’t use flexbox for the CSS3DRenderer element to automatically do your layout in 3D space. Flexbox wasn’t designed for 3D layouts, you’ll have to set positions manually in Javascript with object.position.set(x, y, z);. However, you can create a CSS3DObject, which has flexbox rules inside of it, since its contents are in 2D again.
Also, make sure your CSS selectors are actually targeting the desired DOM elements. I know that React can try to get really granular with selector inheritance. The 3D renderer adds a few untitled <div>s to create the 3D effect, so maybe the React-Bootstrap CSS hierarchy gets lost on the way.
It turns this:
#container > #content
Into this:
#container > div > div > #content