three.js字体加载方式

242 阅读1分钟
  let mTxt;
  var loader = new THREE.FontLoader();
  loader.load('/src/drawModel/fonts/FZYaoTi_Regular.json', function (font) {
    mTxt = font;
  });
  

  /**
   * @param {内容} txt 
   * @param {字体大小} side 
   * @param {x轴} x 
   * @param {y轴} y 
   * @param {颜色} color 
   * @returns 
   */
  this.signFont = function (txt, side, x, y, color = 0xFFFF00) { // 只能传全局的数组;
    let font = typeof txt == "string" ? txt : txt.toString(); // 转换为字符串格式;
    var shapes = mTxt.generateShapes(font, side); // 文字的导出;
    var geometryText = new THREE.ShapeBufferGeometry(shapes);
    geometryText.computeBoundingBox();
    geometryText.center(); // 字体居中(默认字体左对齐)
    var meshMaterial = new THREE.MeshBasicMaterial({
      color: color
    })
    var mText = new THREE.Mesh(geometryText, meshMaterial);
    mText.position.set(x, y, 0);
    mText.renderOrder = 20; // 字体的层级
    return mText;
  }