javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!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>
		[page:ExtrudeBufferGeometry] &rarr;

		<h1>[name]</h1>

		<div class="desc">
			A class for generating text as a single geometry. It is constructed by providing a string of text, and a hash of
			parameters consisting of a loaded [page:Font] and settings for the geometry's parent [page:ExtrudeBufferGeometry].
			See the [page:Font], [page:FontLoader] and [page:Creating_Text] pages for additional details.
		</div>

		<iframe id="scene" src="scenes/geometry-browser.html#TextBufferGeometry"></iframe>

		<script>

		// iOS iframe auto-resize workaround

		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

			var scene = document.getElementById( 'scene' );

			scene.style.width = getComputedStyle( scene ).width;
			scene.style.height = getComputedStyle( scene ).height;
			scene.setAttribute( 'scrolling', 'no' );

		}

		</script>

		<h2>Examples</h2>

		<div>
		[example:webgl_geometry_text geometry / text ]
		</div>

		<code>
		var loader = new THREE.FontLoader();

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

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

		<h2>Constructor</h2>

		<h3>[name]([page:String text], [page:Object parameters])</h3>
		<div>
		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>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
		</ul>
		</div>

		<h2>Available Fonts</h2>

		<div>
		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.
		</div>
		<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>Source</h2>

		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TextGeometry.js src/geometries/TextGeometry.js]
	</body>
</html>