caseEditor/src/core/box/object/PureTextLabel.js

import * as THREE from "three";

export default class PureTextLabel extends THREE.Mesh {
  constructor(text, outline) {
    let res = 5;
    const width = 150 * res;
    const height = 15 * res;
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let fontFamily = "Arial";
    let fontSize = 7 * res;
    let offsetX = 75 * res;
    let offsetY = 10 * res;
    var context = canvas.getContext("2d");

    context.fillStyle = "transparent";
    context.rect(0, 0, width, height);
    context.fill();
    context.font = "normal " + fontSize + "px " + fontFamily;
    context.fillStyle = "#000000";
    context.textAlign = "center";
    context.fillText(text, offsetX, offsetY);
    const canvas_map = new THREE.Texture(canvas);
    canvas_map.colorSpace = THREE.SRGBColorSpace;
    canvas_map.needsUpdate = true;
    canvas_map.anisotropy = 4;

    const g = new THREE.PlaneGeometry(1.5, 0.15);
    g.rotateX(-Math.PI / 2);

    // const texture = new THREE.CanvasTexture(canvas_map);

    const m = new THREE.MeshBasicMaterial({
      map: canvas_map,
      transparent: true, // 允许材质透明
    });
    super(g, m);

    this.name = "textlabel_" + text;
  }
}