HTML Text in threejs

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

is there already a solution for this kinda stuff?

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.

1 Like

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.

1 Like

You dont have to use threejs if you want 3d text.

The interactive 3d button in this example is CSS and HTML


i’ll check this out appreciate it, and that’s the problem i’m trying to find a solution to lol

I’d love to make simple looking sites that’d have post processing effects applied to its elements

plain css obviously doesn’t let you write shaders that would apply to text

there is a real html+css to threejs converter now via uikit postpro works as expected, has support for styles, flexbox, even tailwind classes

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

1 Like

Maybe Troika?

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:

<text3d text="example" font="arial.json" size="20,20,2">

text3d( 'example', 'arial.json', [0,0,0], [20,20,2] );

Here are a few live demos: Demo 1, Demo 2, Demo 3

1 Like

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.

you’re right my bad had a bad sleep. and yeah it’s sick, definitely gonna try it out in a project. thanks man

we do a ton of and usage in OT Sketch

  • Rendering labels on objects
  • Displaying HTML that rotates with objects
  • Occlusion behind objects
  • Allowing the user to type text

If you have any specific questions how they can be used in an app, lmk

Incase you need the image to be procedural?

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.

uikit is perfect for me, yes you technically don’t use html components but they’re the closest to real html you’re gonna get