threejs绘制中文方案

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

需要找个 ttf 中文字体在 http://gero3.github.io/facetype.js/ 上转换为TypeFace格式的json文件。

import {FontLoader} from "../librarys/jsm/loaders/FontLoader.js";
import {TextGeometry} from '../librarys/jsm/geometries/TextGeometry.js';
  draw3DFont() {
    new FontLoader().load("http://localhost:8081/examples/models/gltf/PingFang.json", (response)=> {
      let hello = new TextGeometry("文字几何体", {
        font: response,
        fontName: "PingFang",
        size: 1,             // 字体大小，默认值为100
        height: 1,           // 挤出文本的厚度。默认值为50
        hover: 10,
        curveSegments: 10,   // 弧线分段数，使得文字的曲线更加光滑
        bevelThickness: 2,   // 文本上斜角的深度，默认值为20
        bevelSize: 1,        // 斜角与原始文本轮廓之间的延伸距离。默认值为8
        bevelSegments: 3,    // 斜角的分段数。默认值为3
        bevelEnabled: false  // 是否使用倒角，意为在边缘处斜切
      });
      let material = new THREE.MeshLambertMaterial({ color: 0xffffff } );
      let fontObj = new THREE.Mesh(hello, material);
      fontObj.position.set(0, 0, 0);
      this.scene.add(fontObj);
    });
  }

效果图如下：

但是有两个缺点：

1.需要额外加载字体文件
2.有些文字会变成问号

2.用canvas对象来绘制文字

  drawCanvasFont() {
    //创建canvas对象用来绘制文字
    let position = {x: 0, y: 3, z: 0};
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(35, 217, 110)";
    ctx.font = "bolder 60px arial";

    ctx.fillText("画布文字", 10, 60);
    ctx.globalAlpha = 1;

    document.body.appendChild(canvas);

    // 将画布生成的图片作为贴图给精灵使用，并将精灵创建在设定好的位置
    let texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    //创建精灵，将该材质赋予给创建的精灵
    let spriteMaterial = new THREE.PointsMaterial({
      map: texture,
      // sizeAttenuation: true,
      // size: 30,
      transparent: true,
      depthTest: false,
      depthWrite: false,
      opacity: 1
    });
    //创建坐标点，并将材质给坐标
    let geometry = new THREE.BufferGeometry();
    let vertices = [0, 0, 0];
    geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
    let sprite = new THREE.Points(geometry, spriteMaterial);
    sprite.position.set(position.x, position.y, position.z);
    this.scene.add(sprite);
  }

示例图

画布纹理适用于不经常更改的有限文本