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.
175 lines
4.6 KiB
175 lines
4.6 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<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">
|
||
|
|
A class for generating text as a single geometry. It is constructed by providing a string of text, and a set of
|
||
|
|
parameters consisting of a loaded font and settings for the geometry's parent [page:ExtrudeGeometry].
|
||
|
|
See the [page:FontLoader] page for additional details.
|
||
|
|
</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>Code Example</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,
|
||
|
|
bevelOffset: 0,
|
||
|
|
bevelSegments: 5
|
||
|
|
} );
|
||
|
|
} );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Examples</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[example:webgl_geometry_text geometry / text ]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Constructor</h2>
|
||
|
|
|
||
|
|
<h3>[name]([param:String text], [param:Object parameters])</h3>
|
||
|
|
<p>
|
||
|
|
text — The text that needs to be shown. <br />
|
||
|
|
parameters — Object that can contains the following parameters.
|
||
|
|
<ul>
|
||
|
|
<li>font — an instance of THREE.Font.</li>
|
||
|
|
<li>size — Float. Size of the text. Default is 100.</li>
|
||
|
|
<li>height — Float. Thickness to extrude text. Default is 50.</li>
|
||
|
|
<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
|
||
|
|
<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
|
||
|
|
<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
|
||
|
|
<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
|
||
|
|
<li>bevelOffset — Float. How far from text outline bevel starts. Default is 0.</li>
|
||
|
|
<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Available Fonts</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
|
||
|
|
Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
|
||
|
|
</p>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>Font</th>
|
||
|
|
<th>Weight</th>
|
||
|
|
<th>Style</th>
|
||
|
|
<th>File Path</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>Properties</h2>
|
||
|
|
<p>See the base [page:ExtrudeGeometry] class for common properties.</p>
|
||
|
|
|
||
|
|
<h3>[property:Object parameters]</h3>
|
||
|
|
<p>
|
||
|
|
An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Methods</h2>
|
||
|
|
<p>See the base [page:ExtrudeGeometry] class for common methods.</p>
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/TextGeometry.js examples/jsm/geometries/TextGeometry.js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|