1. 創(chuàng)建文字幾何體

使用threejs自帶的helvetiker_bold.typeface字體文件來進(jìn)行渲染，僅支持渲染英文

export class Text {
  static font: Font;

  data: Mesh;

  static async getFont() {
    if(!this.font) {
      const loader = new FontLoader();
      this.font = await loader.loadAsync('fonts/helvetiker_bold.typeface.json');
    }
    return this.font;
  }

  async setText(text: string) {
    const font = await Text.getFont();
    const geometry = new TextGeometry(text, {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
    });
    const material = new MeshLambertMaterial({ color: 0x0000ff });
    this.data = new Mesh(geometry, material);
  }
}

渲染英文

自帶的 helvetiker_bold 字體并不支持中文，需要找個(gè) ttf 中文字體在 http://gero3.github.io/facetype.js/ 上轉(zhuǎn)換為TypeFace格式，這里以阿里普惠體為例，渲染效果如下

阿里普惠體

但是有兩個(gè)缺點(diǎn)：

1. 需要額外加載字體文件，中文字體文件大小高達(dá)41.3M，實(shí)際使用的話需要對字體文件進(jìn)行裁剪
2. 無法渲染emoji表情，都會被渲染為？

2. 使用CSS2DRenderer直接渲染dom

threejs不僅提供了3d渲染器，還提供了把dom元素渲染在3d場景的CSS2DRenderer渲染器

    // CSS2DRenderer
    this.labelRenderer = new CSS2DRenderer();
    this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.labelRenderer.domElement);

    // CSS2DObject
    this.scene = new Scene();
    const div = document.createElement("div");
    div.className = "label";
    div.textContent = text;
    this.text= new CSS2DObject(div);
    this.scene.add(this.text);

優(yōu)點(diǎn)：這樣渲染出來的都是真實(shí)的dom節(jié)點(diǎn)，可以很方便的編寫交互邏輯，如果只需要平面的文字，這一方面明顯比創(chuàng)建文字幾何體更好
缺點(diǎn)：縮放相機(jī)時(shí)，dom節(jié)點(diǎn)沒有縮放效果，這個(gè)時(shí)候可以考慮使用CSS3DRenderer