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 看下文字效果。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghege
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13