I’ve come up into such a problem I can’t decide what to do:
I’m using ThreeJS for data visualization and I need to create a list of boxes with text labels, a box width should be equal to text width ( plus some padding on sides ).

The problem is very trivial when using HTML, but in ThreeJs world I’ve encountered some problems:

1. First I was using TextGeometry and managed to dynamically get text’s width and calculate box parameters. But then, I read that TextGeometry is not very performant and might crash if many are rendered (in my app, it should be a lot of boxes, some hundreds)
2. Then I created HTML canvas, drawText on it and loaded it with Texture. And it worked again, everything awesome, but I coudldn’t calculate Texture’s width in ThreeJS units, I get pixels and don’t know how to “transform” it..Maybe it’s not bad idea to use pixels as ThreeJS unit, but not sure…
3. At last, I tried CSS2DRenderer (and it also worked). So, I used const boundingBox = new THREE.Box3().setFromObject(myCssObject); and was very dissapointed to see that result isn’t ok: both boundingBox.max and boundingBox.min were {x: Infinity, y: Infinity, z: Infinity vectors…

So maybe someone has already done similiar things and can suggest something? Very grateful in advance