Three.js - 绘制三维字体模型 - 英文和中文_threejs文本模型

作者：weixin_40725706 | 2024-05-01 20:22:02

踩

threejs文本模型

创建字体模型，需要通过THREE.FontLoader()方法，来加载json格式的字体格式类型，然后在加载成功的回调函数中，通过THREE.TextBufferGeometry()或者THREE.TextGeometry()，将需要展现的文本以及设置好的字体格式对象传递到方法中来创建Mesh对象，需要注意的是，THREE.TextBufferGeometry()，不能用作BSP 布尔操作，THREE.TextGeometry()可以进行几何体布尔运算。
浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180629/02-textGeometry.html

主要代码

此处加载的字体模型是英文字体json文件，若想加载中文字，还需要下载相应的ttf文件，然后通过这个网址[http://gero3.github.io/facetype.js/]把ttf文件转换为json文件，再通过FontLoader加载即可。
这里提供微软雅黑的ttf文件，欢迎下载：
链接：https://pan.baidu.com/s/1zZiog3YoPZSHCzMoxVLbQw 密码：5w47

var text = 'three.js';
// 使用FontLoader加载字体
var loader = new THREE.FontLoader();
loader.load('../../libs/examples/fonts/gentilis_regular.typeface.json', function (response) {
   
    // 文字配置
    var fontCfg = {
   
        font : response,
        size : 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    };
    // TextGeometry文本几何对象
    var fontGeometry = new THREE.TextGeometry(text,fontCfg);
    fontGeometry.computeBoundingBox();//绑定盒子模型

    // 文字的材质
    var fontMaterial = new THREE.MeshNormalMaterial();
    var font = new THREE.Mesh(fontGeometry, fontMaterial);

    // 计算出整个模型宽度的一半, 不然模型就会绕着x = 0,中心旋转
    font.position.x = -(fontGeometry.boundingBox.max.x - fontGeometry.boundingBox.min.x) / 2;

    scene.add(font);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

需要注意的是，对让几何文本绑定盒子模型，这样好对它的位置进行操作。

效果

这里写图片描述

完整代码

<!DOCTYPE html>
<html lang1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/520570