Threejs——3D文字

Threejs——3D文字

Threejs——3D文字

引言

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

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

步骤

生成字体

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

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

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

引用文字

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

示例源码

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 }), // frontnew THREE.MeshPhongMaterial({ color: 0xffff00 }) // side];let textMesh = new THREE.Mesh(textGeo, materials);scene.add(textMesh);});
}
}

效果

尾语：

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