three.js 创建文字的几种方法

1. DOM + CSS

传统网页html实现

2. 将文字绘制到画布中，并将其用作Texture（纹理）

将文字保存为图片格式，再将其当作一张蒙皮材质，贴到某个物体上

3. 在你所喜欢的3D软件里创建模型，并导出给three.js

建模实现，成本高，效果好

4. three.js自带的文字几何体

1. 构造器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	var geometry = new THREE.TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
	} );
} );

TextGeometry(text : String, parameters : Object)
text — 将要显示的文本。
parameters — 包含有下列参数的对象：

font — THREE.Font的实例。
size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer。斜角的分段数。默认值为3。

2. 可用的字体

文本几何体使用 typeface.json所生成的字体。 一些已有的字体可以在/examples/fonts中找到，且必须在页面中引入。

5. 位图字体

BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。 详情请参阅three-bmfont-text。

现有库存的字体在项目中同样可用，就像A-Frame Fonts一样， 或者你也可以从任何TTF字体中创建你自己的字体，优化时，只需要包含项目中所需的字符即可。

这是一些有用的工具：

msdf-bmfont-web (web-based)
msdf-bmfont-xml (commandline)
hiero (desktop app)

Y Blog服务器是收费的，感谢您的捐助。

• ← Previous Post
• Next Post →