Threejs——3D文字

Threejs——3D文字

引言

在threejs项目中总有一些需要显示文字的地方，有些地方用2D就可以，但是有些使用3D效果能更好点，这时候就需要使用threejs的3D文字了。

官方提供的字体文件都是英文的，想要显示中文需要自己来生成中文字体。

步骤

生成字体

字体路径：从自己的电脑中就可以找到字体文件（C:\Windows\Fonts），这里面有各式各样的中文字体，根据自己的需求选择对应的字体即可。

网址：Facetype.js (gero3.github.io)

在这个网站可以生成FontLoader加载字体的json文件，好像字体格式有限制，.ttc的没有生成成功，.ttf的可以。

引用文字

官方网址：FontLoader – three.js docs (threejs.org)

示例源码

add3DFont("中文测试");
/**
     * 添加3D文字
     * @param {string} message 文字内容
     */
function add3DFont(message) {
    new FontLoader().load('/fonts/SimHei_Regular.json', function (font) {
        let textGeo = new TextGeometry(message, {
            font: font,
            size: 5,
            height: 0.1,
        });
        let materials = [
            new THREE.MeshPhongMaterial({ color: 0xff0000, flatShading: true }), // front
            new THREE.MeshPhongMaterial({ color: 0xffff00 }) // side
        ];
        let textMesh = new THREE.Mesh(textGeo, materials);

        scene.add(textMesh);
    });
}
}

效果

尾语：

本人是一个初学threejs的，写的不对的地方欢迎各位大佬批评指正。