admin 管理员组文章数量: 1184232
本篇文章是对three.js如何添加字体的一个总结。
1. 关于低版本three.js添加字体
我在网上找到的教程就是使用的这种办法，但是我使用的76版的threeJs已经不支持了，没有具体深究是什么时候把这个方法删除的，但据 验证，71版本还是可以用的，具体添加方法如下：
引入字体文件 ：
<script src="/font/arial_black_regular.typeface.js"></script>
关于js字体的文件名，需要使用
xxxxxxx.typeface.js
格式，且文件名需全部小写。
其次，打开 arial_black_regular.typeface.js 文件，搜索关键词 familyName ，将familyName 的值改为这个字体的名称，此处使用arialblack字体，所以改为
arialblack
，依然小写。
var options ={
size:20,// 文本大小，默认为100
height:10,// 指定文本拉伸长度，默认为50
weight:'normal',// 字体权重，'normal'、'bold'
font:'arialblack',//这个名字就是刚才修改的familyName的值
bevelThickness:1,// 斜角厚度
bevelSize:1,// 斜角尺寸
bevelSegments:1,// 斜角分段数
bevelEnabled:true,// 斜角分段数
curveSegments:1,// 曲线分段数
steps:1,// 拉伸体段数};// console.log(THREE.FontUtils.faces);const text =createMesh(newTHREE.TextGeometry("Learning", options));
text.position.z =-100;
text.position.y =100;
scene.add(text);functioncreateMesh(geom){const meshMaterial =newTHREE.MeshPhongMaterial({
specular:0xffffff,
color:0xeeffff,
shininess:100,
metal:true});const mesh=THREE.SceneUtils.createMultiMaterialObject(geom,[meshMaterial]);return mesh;}
如果你使用71版本的 three.js 有可能出现下面的情况 (71版本的three.min.js正常)，这是因为与生产版本three.min.js相比，开发版本three.js中，_typeface_js的声明部分被注释了，如图：
2. 关于高版本three.js添加字体
如果你使用以上代码报错：
THREE.TextGeometry is not a constructor
，那么恭喜上面那个方法你就不能用了，可以试试下面这种方式添加字体。
此时引入的文件改为
'JSON'
格式。
使用方法
const loader =newTHREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json',function( font ){const geometry =newTHREE.TextBufferGeometry('Hello three.js!',{
font: font,
size:80,
height:5,
curveSegments:12,
bevelEnabled:true,
bevelThickness:10,
bevelSize:8,
bevelSegments:5});const textMaterial =newTHREE.MeshBasicMaterial({ color:0xffffff});const mesh =newTHREE.Mesh(geometry, textMaterial);
mesh.position.set(0,50,0);
scene.add(mesh);});更多信息请参考：
3. three.js展示二维字体
三维字体的厚度
height
设置为 0 可展示为二维字体，也可以使用CSS2DRenderer渲染器添加二维字体，可参考
，这篇文章写的很详细。
4. 关于three.js中文乱码的解决方法：
因为 three.js 默认带的字体是不支持中文的，所以只需找一个
文件格式为TTF的中文字体
，字体可网上找一些免费版本，也可以到自己电脑C盘->windows->Fonts下看一看，最后去
转换成一个 Json 格式的文件，将转换后json文件加载到 threejs 中就可以了。
参考文章：
版权声明：本文标题：三.js开发者之路：从textGeometry错误中突破 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1772890831a3558168.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论