THREE.js（三）：跟随3D的文字UI元素

Three.js实际项目开发中，经常会遇到跟随3D的文字UI元素，比如测量3D模型的标尺、贴在平面上的文字，跟随场景旋转的文字模型等，对于这类文字的展示，开发中一般采用canvas2D 的绘图API绘制相关的信息，然后当作贴图 CanvasTexture, 直接贴在Plane 的材质贴图上进行展示。

three.js官网中也给出了如何创建canvas 文字的一些方法：

这里，我们采用 TypeScript 进行实际编码：

创建label

写ts我们采用面向对象的写法，以类为主，这里写一个方法类，命名为 LabelUtils ，默认导出。

export default class LabelUtils { }

接口时ts编码中最常用的，面向接口编程也是高级编程的一部分。
这里我们定义下label的返回格式：

    interface ILabel{
        height:number;
        width:number;
        canvas:any;
    }

接着写创建 label 的静态方法：

    static createLabel(text:string, fontf:string, color:string, fontSize:number): ILabel {
        const canvas = document.createElement("canvas");
        const height = fontSize * 2.5;
        const width = text.length * fontSize * 2;
        canvas.height = height;
        canvas.width = width;

        const ctx = canvas.getContext("2d"); 
        ctx.font = `${fontSize}px ${fontf}`;
        ctx.fillStyle= color;
        ctx.textAlign = "start";
        ctx.textBaseline = "bottom";
        ctx.fillText(text, width/2, height/2);
        return {
            height,
            width,
            canvas,
        };
    };

• text 为要传入的文本内容。
• fontf 为要传入的字体。
• color 为字体的颜色。
• fontSize  为字体大小。

document.createElement(“canvas”) 创建一个canvas ，用于承载 文本 内容。
canvas.getContext(“2d”) 获取上下文，进行字体的填充。
ctx.font = ${fontSize}px ${fontf}; ${fontSize} 为字体大小，例如 50px. fontf为字体，例如 ‘宋体’ ‘微软雅黑’ 等。
ctx.fillStyle= color 为字体颜色， color 可以传入 ‘rgb(255,255,0)’ 或者 '#ffff00’等
ctx.textAlign = “start”; 为文本的锚点，可以通过下面理解

ctx.textBaseline = “bottom”; 同样的，可以通过下图理解

ctx.fillText(text, width/2, height/2); 用于填充文本。
最后，createLabel 方法返回文本的 宽高以及canvas, 用于之后的调用。

创建Three.js 字体

我们这里命名为 createFont

static createFont(text:string, fontf:string, color:string, fontSize:number, angle:number,pos:number[]): Mesh {
        const c = this.createLabel(text, fontf, color, fontSize);
        const texture = new CanvasTexture(c.canvas);

        const labelMaterial = new MeshBasicMaterial({
            map: texture,
            side: DoubleSide,
            depthWrite:false,
            depthTest:false,
            transparent : true        
        });
        const plane = new PlaneGeometry(1, 1);
        const pmesh = new Mesh(plane, labelMaterial)
        pmesh.scale.set(c.width/200, c.height/200, 0);
        pmesh.rotation.z = Math.PI / 180 * angle;
        pmesh.rotation.x = -Math.PI / 2;
       
        pmesh.position.set(pos[0], 0, pos[1]);
        return pmesh;
    }

• text 为要传入的文本内容。
• fontf 为要传入的字体。
• color 为字体的颜色。
• fontSize  为字体大小。
• angle 为字体旋转角度
• pos 为字体位置。
  首先， const c = this.createLabel(text, fontf, color, fontSize); 用于获取canvas 信息。
  const texture = new CanvasTexture(c.canvas); 这里的 CanvasTexture 是 THREE.CanvasTexture()
  构造函数如下，具体可以参考Three.js官网。

CanvasTexture( canvas : HTMLElement, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number )

接下来，创建一个 labelMaterial = new MeshBasicMaterial()，这里建议使用MeshBasicMaterial，将texture 赋值给 map, 同时一定要设置 transparent : true 用于背景透明，毕竟我们只需要显示字体。

如果需要字体在其他层之上，可以设置depthWrite:false, depthTest:false 用于禁用深度写入和深度测试。

下面就是创建mesh的基本流程：
使用 PlaneGeometry 面片承载 canvas 贴图，设置下 缩放、旋转、位置等。

LabelUtils 方法类

import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry } from "three";

export default class LabelUtils {
    
    static createLabel(text:string, fontf:string, color:string, fontSize:number): any {
        const canvas = document.createElement("canvas");
        const height = fontSize * 2.5;
        const width = text.length * fontSize * 2;
        canvas.height = height;
        canvas.width = width;

        const ctx = canvas.getContext("2d"); 
        ctx.font = `${fontSize}px ${fontf}`;
        ctx.fillStyle= color;
        ctx.textAlign = "start";
        ctx.textBaseline = "bottom";
        ctx.fillText(text, width/2, height/2);
        return {
            height,
            width,
            canvas,
        };
    };

    static createFont(text:string, fontf:string, color:string, fontSize:number, angle:number,pos:number[]): Mesh {
        const c = this.createLabel(text, fontf, color, fontSize);
        const texture = new CanvasTexture(c.canvas);

        const labelMaterial = new MeshBasicMaterial({
            map: texture,
            side: DoubleSide,
            depthWrite:false,
            depthTest:false,
            transparent : true        
        });
        const plane = new PlaneGeometry(1, 1);
        const pmesh = new Mesh(plane, labelMaterial)
        pmesh.scale.set(c.width/200, c.height/200, 0);
        pmesh.rotation.z = Math.PI / 180 * angle;
        pmesh.rotation.x = -Math.PI / 2;
       
        pmesh.position.set(pos[0], 0, pos[1]);
        return pmesh;
    }

}

最后在 scene 中加入 pmesh 看下文字效果。