threejs绘制中文方案

1. 使用threejs创建文字几何体

使用threejs自带的helvetiker_bold.typeface字体文件来进行渲染

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 字体并不支持中文，需要找个 ttf 中文字体在 http://gero3.github.io/facetype.js/ 上转换为TypeFace格式，这里以阿里普惠体为例，渲染效果如下

阿里普惠体

但是有两个缺点：

1. 需要额外加载字体文件，中文字体文件大小高达41.3M
2. 无法渲染emoji表情，都会被渲染为？