You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.6 KiB
172 lines
4.6 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<base href="../../../" />
|
|
<script src="page.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
</head>
|
|
<body>
|
|
[page:BufferGeometry] → [page:ExtrudeGeometry] →
|
|
|
|
<h1>文本缓冲几何体（[name]）</h1>
|
|
|
|
<p class="desc">
|
|
一个用于将文本生成为单一的几何体的类。
|
|
它是由一串给定的文本，以及由加载的font（字体）和该几何体[page:ExtrudeGeometry]父类中的设置所组成的参数来构造的。
|
|
请参阅[page:FontLoader]页面来查看更多详细信息。
|
|
</p>
|
|
|
|
<script>
|
|
|
|
// iOS iframe auto-resize workaround
|
|
|
|
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
|
|
|
|
const scene = document.getElementById( 'scene' );
|
|
|
|
scene.style.width = getComputedStyle( scene ).width;
|
|
scene.style.height = getComputedStyle( scene ).height;
|
|
scene.setAttribute( 'scrolling', 'no' );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<h2>代码示例</h2>
|
|
|
|
<code>
|
|
const loader = new FontLoader();
|
|
|
|
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
|
|
|
|
const geometry = new TextGeometry( 'Hello three.js!', {
|
|
font: font,
|
|
size: 80,
|
|
height: 5,
|
|
curveSegments: 12,
|
|
bevelEnabled: true,
|
|
bevelThickness: 10,
|
|
bevelSize: 8,
|
|
bevelSegments: 5
|
|
} );
|
|
} );
|
|
</code>
|
|
|
|
<h2>例子</h2>
|
|
|
|
<p>
|
|
[example:webgl_geometry_text geometry / text ]
|
|
</p>
|
|
|
|
<h2>构造器</h2>
|
|
|
|
<h3>[name]([param:String text], [param:Object parameters])</h3>
|
|
<p>
|
|
text — 将要显示的文本。<br />
|
|
parameters — 包含有下列参数的对象：
|
|
<ul>
|
|
<li>font — THREE.Font的实例。</li>
|
|
<li>size — Float。字体大小，默认值为100。</li>
|
|
<li>height — Float。挤出文本的厚度。默认值为50。</li>
|
|
<li>curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。</li>
|
|
<li>bevelEnabled — Boolean。是否开启斜角，默认为false。</li>
|
|
<li>bevelThickness — Float。文本上斜角的深度，默认值为20。</li>
|
|
<li>bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。</li>
|
|
<li>bevelSegments — Integer。斜角的分段数。默认值为3。</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h2>可用的字体</h2>
|
|
|
|
<p>
|
|
文本几何体使用 <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a>所生成的字体。
|
|
一些已有的字体可以在<b>/examples/fonts</b>中找到，且必须在页面中引入。
|
|
</p>
|
|
<table>
|
|
<tr>
|
|
<th>字体</th>
|
|
<th>字重</th>
|
|
<th>风格</th>
|
|
<th>文件路径</th>
|
|
</tr>
|
|
<tr>
|
|
<td>helvetiker</td>
|
|
<td>normal</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/helvetiker_regular.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>helvetiker</td>
|
|
<td>bold</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/helvetiker_bold.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>optimer</td>
|
|
<td>normal</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/optimer_regular.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>optimer</td>
|
|
<td>bold</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/optimer_bold.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>gentilis</td>
|
|
<td>normal</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/gentilis_regular.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>gentilis</td>
|
|
<td>bold</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/gentilis_bold.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>droid sans</td>
|
|
<td>normal</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>droid sans</td>
|
|
<td>bold</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>droid serif</td>
|
|
<td>normal</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
|
|
</tr>
|
|
<tr>
|
|
<td>droid serif</td>
|
|
<td>bold</td>
|
|
<td>normal</td>
|
|
<td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>属性</h2>
|
|
<p>共有属性请参见其基类[page:ExtrudeGeometry]。</p>
|
|
|
|
<h3>[property:Object parameters]</h3>
|
|
<p>
|
|
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。
|
|
</p>
|
|
|
|
<h2>方法(Methods)</h2>
|
|
<p>共有方法请参见其基类[page:ExtrudeGeometry]。</p>
|
|
|
|
<h2>源代码</h2>
|
|
|
|
<p>
|
|
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/TextGeometry.js examples/jsm/geometries/TextGeometry.js]
|
|
</p>
|
|
</body>
|
|
</html>
|
|
|