Best practice for 3d text viewed from the back

How to prevent this? Except locking orbit or so.

Here is something written about css. But I wondered if there is some ‘default’ solution for the issue that you see text from the back. Maybe have text automatically rotated or regenerated after some specific angle. No idea what is possible.

I assume this is the most efficient way to put text in the scene?

https://threejs.org/examples/?q=text#webgl_geometry_text_shapes

This is one of the possible ideas:

https://codepen.io/boytchev/full/BaEjzdJ

2 Likes

You can render a text with svg (or even html put in the foreignObject) and then use this svg like a texture for a mesh, in particular for a plane. But your need to convert this svg with all styles and fonts to the data-url that will be used as a source for the TextureLoader. Or You can draw a text on the 2d-canvas and use a canvas texture for the material of you mesh for text rendering.

1 Like

currently decided to use sprites, not sure yet what the disadvantages are.

          const sprite = new SpriteText("test");
          sprite.color = "black";
          sprite.textHeight = 2;
          model.add(sprite);