Three.js实际项目开发中，经常会遇到跟随3D的文字UI元素，比如测量3D模型的标尺、贴在平面上的文字，跟随场景旋转的文字模型等，对于这类文字的展示，开发中一般采用canvas2D 的绘图API绘制相关的信息，然后当作贴图 CanvasTexture, 直接贴在Plane 的材质贴图上进行展示。
three.js官网中也给出了如何创建canvas 文字的一些方法：
这里，我们采用 TypeScript 进行实际编码：
创建label
写ts我们采用面向对象的写法，以类为主，这里写一个方法类，命名为 LabelUtils ，默认导出。
export default class LabelUtils { }
接口时ts编码中最常用的，面向接口编程也是高级编程的一部分。
这里我们定义下label的返回格式：
接着写创建 label 的静态方法：
- 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
- 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 方法类
最后在 scene 中加入 pmesh 看下文字效果。