提交 2c2ff5c9 编写于 作者: M Mugen87

Docs: Added TextBufferGeometry

上级 a0bc2bdf
<!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 ]<br/>
[example:webgl_geometry_text2 geometry / text2 ]
</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/[path].js src/[path].js]
</body>
</html>
......@@ -168,6 +168,7 @@ var list = {
"SphereGeometry": "api/geometries/SphereGeometry",
"TetrahedronBufferGeometry": "api/geometries/TetrahedronBufferGeometry",
"TetrahedronGeometry": "api/geometries/TetrahedronGeometry",
"TextBufferGeometry": "api/geometries/TextBufferGeometry",
"TextGeometry": "api/geometries/TextGeometry",
"TorusBufferGeometry": "api/geometries/TorusBufferGeometry",
"TorusGeometry": "api/geometries/TorusGeometry",
......
......@@ -977,6 +977,75 @@ var guis = {
},
TextBufferGeometry : function( mesh ) {
var data = {
text : "TextBufferGeometry",
size : 5,
height : 2,
curveSegments : 12,
font : "helvetiker",
weight : "regular",
bevelEnabled : false,
bevelThickness : 1,
bevelSize : 0.5,
bevelSegments : 3
};
var fonts = [
"helvetiker",
"optimer",
"gentilis",
"droid/droid_serif"
];
var weights = [
"regular", "bold"
];
function generateGeometry() {
var loader = new THREE.FontLoader();
loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
var geometry = new THREE.TextBufferGeometry( data.text, {
font: font,
size: data.size,
height: data.height,
curveSegments: data.curveSegments,
bevelEnabled: data.bevelEnabled,
bevelThickness: data.bevelThickness,
bevelSize: data.bevelSize,
bevelSegments: data.bevelSegments
} );
geometry.center();
updateGroupGeometry( mesh, geometry );
} );
}
//Hide the wireframe
mesh.children[ 0 ].visible = false;
var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
folder.add( data, 'text' ).onChange( generateGeometry );
folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'font', fonts ).onChange( generateGeometry );
folder.add( data, 'weight', weights ).onChange( generateGeometry );
folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
generateGeometry();
},
TorusBufferGeometry : function( mesh ) {
var data = {
......@@ -1349,7 +1418,7 @@ function chooseFromHash ( mesh ) {
}
if ( selectedGeometry === 'TextGeometry' ) {
if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
return { fixed : true };
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册