1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>创建文字（[name]）</h1>
<div>
<p>有时候，您可能需要在你的Three.js应用程序中使用到文本，这里有几种方法可以做到。
</p>
</div>
<h2>1. DOM + CSS</h2>
<div>
<p>
使用HTML通常是最简单、最快速的添加文本的方法，这是大多数的Three.js示例中用于添加描述性叠加文字的方法。
</p>
<p>你可以在这里添加内容</p>
<code><div id="info">Description</div></code>
<p>
然后使用CSS来将其绝对定位在其它具有z-index的元素之上，尤其是当你全屏运行three.js的时候。
</p>
<code>
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
</code>
</div>
<h2>2. 将文字绘制到画布中，并将其用作[page:Texture]（纹理）</h2>
<div>
<p>如果你希望在three.js的场景中的平面上轻松地绘制文本，请使用此方法。</p>
</div>
<h2>3. 在你所喜欢的3D软件里创建模型，并导出给three.js
</h2>
<div>
<p>如果你更喜欢使用3D建模软件来工作并导出模型到three.js，请使用这种方法。</p>
</div>
<h2>4. three.js自带的文字几何体</h2>
<div>
<p>
如果你更喜欢使用纯three.js来工作，或者创建能够由程序改变的、动态的3D文字，你可以创建一个其几何体为THREE.TextGeometry的实例的网格：
</p>
<p>
<code>new THREE.TextGeometry( text, parameters );</code>
</p>
<p>
然而，为了使得它能够工作，你的TextGeometry需要在其“font”参数上设置一个THREE.Font的实例。
<br>
请参阅 [page:TextGeometry] 页面来阅读如何完成此操作的详细信息，以及每一个接收的参数的描述，还有由three.js分发、自带的JSON字体的列表。
</p>
<h3>示例</h3>
[example:webgl_geometry_text WebGL / geometry / text]<br />
[example:canvas_geometry_text canvas / geometry / text]<br />
[example:webgl_shadowmap WebGL / shadowmap]
<p>
如果Typeface已经关闭，或者没有你所想使用的字体，这有一个教程:[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]<br>
这是一个在blender上运行的python脚本，能够让你将文字导出为Three.js的JSON格式。
</p>
</div>
<h2>5. 位图字体</h2>
<div>
<p>
BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。
详情请参阅[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]。
</p>
<p>
现有库存的字体在项目中同样可用，就像[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]一样，
或者你也可以从任何TTF字体中创建你自己的字体，优化时，只需要包含项目中所需的字符即可。
</p>
<p>
这是一些有用的工具：
</p>
<ul>
<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
</ul>
</div>
</body>
</html>
|
