Is there any particular reason there isn’t any sort of html to three.js converter other than cssrenderer? Creating and managing text in threejs is so unnecessarily hard rn, I’d love to make simple looking sites that’d have post processing effects applied to its elements, but other than manually creating a textgeometry for every single sentence, there doesn’t seem to be an easy solution
I’m thinking of implementing my own half assed solution through a library of some sort, but wanted to hear thoughts from more experienced people before I sink too much time into it
Nope, there isn’t - there’s uikit but it’s not exactly the thing you’ve described.
The problem isn’t really in converting text to webgl, that’s trivial. Problem is in making that text then follow the behaviour of the browser text / layout. WebGL is rendered to a canvas, which is not responsive and does not rescale well at all - so the moment user scales down their browser (or just starts with a lower resolution to begin with), browser text and layouts will try to apply word-breaks, while canvas will just scale down its aspect ratio - which will either cut the WebGL text or scale it down, neither being a nice result.
Maybe it’s the freemium nature of the request. Most web/3d hobbyists would propose a canvas texture. In this case, there is no limitation other than your project scope or license approval. Of course, some things will not render, or perhaps you want to sniff mime types… which is the nature of XHTML. The standards exists so the only technical hurdle is transcription. It is confounded by issues such as DPI, optimization, quirks, and customization. Custom is an endless waterfall of thankless forgotten scope. XHTML text could be raster, path, FontLoader… and state management…?
But back to why html-to-canvas isn’t popular? Enterprise solutions aren’t searching for ways to hemmorage resources.
uikit is now running in vanilla as well and the html thing will be available as a tool (html23). there’s another converter for figma out soon https://www.f2r3.com
But you can always make your own library (or function) that builds 3D texts exactly the way you need. I have already done this in the past. For example, in Suica, text could be created either as HTML tag or JS command:
this is super sick but definitely needs some work, i thought about rendering css3drenderer onto rendertexture, then slapping that onto a plane, wouldn’t that be easier?
css3drenderer is just regular html on top of the canvas transformed with css3d, you can’t render that into textures unless you make snapshots from the dom. you will loose the runtime aspect and interaction. but then again if you just need a dead picture why not making a real uv texture in figma/photoshop.
the html23 thing is in development but is rapidly improving. by the end of this month it’s probably ready for beta.
I’m successful using HTMLMesh. There is zero documentation about it, and text wrapping doesn’t work as expected but I think it’s the best suitable solution for your problem
I have tried a few of the above mentioned libraries, but I was never able to get the results or functionality I wanted for my use case.
In the end I used cssRenderer as you then have access to your standard html component libraries (dropdowns, textinputs, etc). I would however second antocorr’s HTMLMesh suggestion, rather than cssRenderer.