Three.js 杂记（八）—— 文本几何体

关注

发布于: 2021 年 03 月 22 日

FontLoader

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

var loader = new THREE.FontLoader();

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	} );})

复制代码

使用示例：

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title>day09_TweenMax学习</title>		<script src="./js/three.js" type="text/javascript" charset="utf-8"></script>		<script src="./js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>		<style type="text/css">			*{				margin: 0;				padding: 0;			}		</style>	</head>	<body>		<div id="app"></div>				<script type="text/javascript">			var scene = new THREE.Scene();			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);			render = new THREE.WebGLRenderer({				antialias: true			});			render.setPixelRatio(window.devicePixelRatio);			render.setSize(window.innerWidth, window.innerHeight)						var app = document.getElementById("app");			app.appendChild(render.domElement);			/********************************************************/			// 文本几何体			var loader = new THREE.FontLoader();			var geometry;			var material = new THREE.MeshBasicMaterial( {				color: '#ff0000' ,			} );						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				} );								var mesh = new THREE.Mesh( geometry, material );				mesh.scale.set(0.03,0.03,0.03);				scene.add(mesh)			})						// 相机			camera.position.set(20, 20, 40); //设置相机位置			camera.lookAt(new THREE.Vector3(0, 0, 0))						// 鼠标控件			var controls = new THREE.OrbitControls(camera, render.domElement);						/********************************************************/			function animate() {				render.render(scene, camera);				window.requestAnimationFrame(animate);			}			animate();		</script>			</body></html>

复制代码

具体效果：

中文乱码问题

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

Hello three.js! --- > 你好 three.js!

显示样式：

这是由于使用的 helvetiker_regular.typeface.json 不支持中文的缘故

之后我使用了 Microsoft YaHei_Regular.json，可以使得中文正常显示

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 YaHeiRegular.json 和 helvetikerregular.typeface.json 可以从下面两个地方进行下载：

百度网盘：https://pan.baidu.com/s/1T8SLJs7HLkum2cSE3kqCTQ

提取码：730t

CSDN 下载：https://download.csdn.net/download/qq_36171287/15365234

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

发布于: 2021 年 03 月 22 日阅读数: 7

原文链接:【http://xie.infoq.cn/article/5dab2629be5f20c13fe56a222】。

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者，在线水文

发布

暂无评论

创作场景

Three.js 杂记（八）—— 文本几何体

FontLoader

TextGeometry

中文乱码问题

字体包

空城机

评论