Several methods of creating text in threejs

Time:2020-6-9

1. DOM + CSS

The text implementation of traditional HTML5 is used to add descriptive overlay text. In general, absolute positioning is used, and the Z-index is large enough to display on the 3D scene.

advantage:
Consistent with css3d

Disadvantages:
Poor 3D effect and motion restoration

2. THREE.CanvasTexture

Paint the text in canvas, and then use canvas texture as the texture to map it
example

advantage:
The text effect is rich and convenient to draw.

Disadvantages:
Once generated, the resolution is fixed and the amplification will produce distortion.

3. THREE.TextGeometry / THREE.TextBufferGeometry

Use native textgeometry for rendering generation. example

advantage:
Good effect, can synchronize with the scene

Disadvantages:
The color and animation of a single font are more complex and cost more resources

4. 3D font model

Using 3D font model, using threejs for loading control. example

advantage:
Good effect, customizable effect

Disadvantages:
Loading the model is more resource consuming, and the font content cannot be customized

5. Bitmap font

The text template is generated by bmpfont and then loaded for display. Bmfonts can batch font styles into a single buffergeometry. Bmfont rendering supports the following features: automatic line wrapping, letter spacing, sentence adjustment, signed distance fields with standard deviations, multi-channel signed distance fields, and multi texture fonts. three-bmfont-text

advantage:
Customizable fonts and effects

Disadvantages:
Loading the model is more resource consuming, and the font content cannot be customized

6. Three.Sprite

Sprite load image texture

advantage:
Always facing the camera plane, suitable for display as a label

Disadvantages:
There is a problem with canvastexture

Recommended Today

Common auxiliary classes

CountDownLatch Subtraction counter import java.util.concurrent.CountDownLatch; //Counter public class CountDownLatchDemo { public static void main(String[] args) throws InterruptedException { //The total number is 6. It can be used when the task must be performed CountDownLatch countDownLatch = new CountDownLatch(6); for (int i = 0; i < 6; i++) { new Thread(()->{ System.out.println(Thread.currentThread().getName()+” Go out”); countDownLatch.countDown(); },String.valueOf(i)).start(); […]