211101.md

threeJS 渲染 3D 字体

动态渲染 3D 字体

需要加载器

FontLoader 来加载字体

import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
...
new FontLoader().load(
    "/font/SimHei_Regular.json",
    function (font) {
        //加载完毕字体后进行渲染操作
    },
    () => {
        // 加载进度
    },
    (err) => {
        // 加载错误
        console.log(err);
    }
);
...

值得注意的是在 vue3 中要把字体 json 文件放在根目录下的 public 文件内

渲染 3D 字体

TextGeometry

var geometry = new TextGeometry("hello word", {
    font: this.font,
    size: 50,
    height: 8,
    curveSegments: 10,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 6,
    bevelSegments: 5,
});

1. font — THREE.Font的实例。就是引入的字体对象，必须先引入
2. size — Float。字体大小，默认值为100。
3. height — Float。文本的厚度。默认值为50。
4. curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
5. bevelEnabled — Boolean。是否开启斜角，默认为false。
6. bevelThickness — Float。文本上斜角的深度，默认值为20。
7. bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
8. bevelSegments — Integer。斜角的分段数。默认值为3。

动态渲染文字

// 删除上一个定义好 3D 字体材质
this.mesh && this.scene.remove(this.mesh);
// 重新渲染最新 3D 字体材质
var geometry = new TextGeometry(this.text, {
    font: this.font,
    size: 50,
    height: 8,
    curveSegments: 10,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 6,
    bevelSegments: 5,
});
const material = new three.MeshLambertMaterial({
    color: 0x008800,
});
console.log(geometry);
const mesh = new three.Mesh(geometry, material);
mesh.translateX(-180);
this.mesh = mesh;
// 视角加入 3D 字体
this.scene.add(this.mesh);
this.render.render(this.scene, this.camera)

渲染3D中文

需要将包含中文的 ttf 文件转换为字体 json 文件引入

1. 引入，在https://gero3.github.io/facetype.js/这个网站生成中文ttf的json文件。

2. 下载完后引入