1. 創(chuàng)建文字幾何體
使用threejs自帶的helvetiker_bold.typeface字體文件來進行渲染，僅支持渲染英文
export class Text {
static font: Font;
data: Mesh;
static async getFont() {
if(!this.font) {
const loader = new FontLoader();
this.font = await loader.loadAsync('fonts/helvetiker_bold.typeface.json');
}
return this.font;
}
async setText(text: string) {
const font = await Text.getFont();
const geometry = new TextGeometry(text, {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
});
const material = new MeshLambertMaterial({ color: 0x0000ff });
this.data = new Mesh(geometry, material);
}
}
渲染英文
自帶的 helvetiker_bold 字體并不支持中文乾蓬，需要找個 ttf 中文字體在 http://gero3.github.io/facetype.js/ 上轉(zhuǎn)換為TypeFace格式久妆，這里以阿里普惠體為例誉帅，渲染效果如下
阿里普惠體
但是有兩個缺點：
- 需要額外加載字體文件仲闽，中文字體文件大小高達41.3M，實際使用的話需要對字體文件進行裁剪
- 無法渲染emoji表情雀彼，都會被渲染為纺阔？
2. 使用CSS2DRenderer直接渲染dom
threejs不僅提供了3d渲染器瘸彤，還提供了把dom元素渲染在3d場景的CSS2DRenderer渲染器
// CSS2DRenderer
this.labelRenderer = new CSS2DRenderer();
this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.labelRenderer.domElement);
// CSS2DObject
this.scene = new Scene();
const div = document.createElement("div");
div.className = "label";
div.textContent = text;
this.text= new CSS2DObject(div);
this.scene.add(this.text);
優(yōu)點：這樣渲染出來的都是真實的dom節(jié)點，可以很方便的編寫交互邏輯州弟，如果只需要平面的文字钧栖，這一方面明顯比創(chuàng)建文字幾何體更好
缺點：縮放相機時，dom節(jié)點沒有縮放效果婆翔，這個時候可以考慮使用CSS3DRenderer
