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 看下文字效果。