本篇文章是对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(new THREE.TextGeometry("Learning", options));
text.position.z = -100;
text.position.y = 100;
scene.add(text);
function createMesh(geom) {
const meshMaterial = new THREE.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 = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
const geometry = new THREE.TextBufferGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
const textMaterial = new THREE.MeshBasicMaterial(
{ color: 0xffffff }
);
const mesh = new THREE.Mesh(geometry, textMaterial);
mesh.position.set(0, 50, 0);
scene.add(mesh);
} );
更多信息请参考:three.js文档
3. three.js展示二维字体
三维字体的厚度 height
设置为 0 可展示为二维字体,也可以使用CSS2DRenderer渲染器添加二维字体,可参考THREEJS 2D文字,这篇文章写的很详细。
4. 关于three.js中文乱码的解决方法:
因为 three.js 默认带的字体是不支持中文的,所以只需找一个 文件格式为TTF的中文字体
,字体可网上找一些免费版本,也可以到自己电脑C盘->windows->Fonts下看一看,最后去 facetype.js网站 转换成一个 Json 格式的文件,将转换后json文件加载到 threejs 中就可以了。