本文共 1364 字，大约阅读时间需要 4 分钟。

FontLoader

在three.js中，如果想要显示出文本文字的效果，可以使用FontLoader，这是使用JSON格式中加载字体的一个类。返回Font, 返回值是表示字体的Shape类型的数组。 其内部使用FileLoader来加载文件。

TextGeometry

使用FontLoader后，生成几何体时，可以使用TextGeometry。一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本，以及由加载的Font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

// 文本几何体var loader = new THREE.FontLoader(); loader.load( './Json/helvetiker_regular.typeface.json', function ( font ) {
    	geometry = new THREE.TextGeometry( 'Hello three.js!', {
   		font: font,		size: 100,		height: 5,		curveSegments: 12,		bevelEnabled: true,		bevelThickness: 10,		bevelSize: 2,		bevelSegments: 5	} );})

使用示例：

具体效果：

中文乱码问题

如果将文字内容修改为中文，就会出现乱码现象

显示样式：

loader.load( './Json/Microsoft YaHei_Regular.json', function ( font ) {
    	geometry = new THREE.TextGeometry( '你好 three.js!', {
   		font: font,		size: 100,		height: 5,		curveSegments: 12,		bevelEnabled: true,		bevelThickness: 10,		bevelSize: 2,		bevelSegments: 5	} );		var mesh = new THREE.Mesh( geometry, material );	mesh.scale.set(0.03,0.03,0.03);	scene.add(mesh)})

显示样式：

字体包

使用的字体包Microsoft YaHei_Regular.json和helvetiker_regular.typeface.json可以从下面两个地方进行下载：

CSDN下载：

也可以使用Facetype.js进行转换

转载地址：https://kongchengji.blog.csdn.net/article/details/113862694 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！