three.js 添加字体

最新推荐文章于 2024-07-08 09:56:34 发布

RongJoy

最新推荐文章于 2024-07-08 09:56:34 发布

阅读量4.2k

点赞数 2

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/You_Ta/article/details/102582610

版权

three.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇文章是对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，依然小写。
three.js引入文件名称修改
使用方法：

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 中就可以了。