Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Docs: Updated with new TextGeometry API.

Mr.doob 9 years ago
parent
f0e0f5be24
commit
a2f63e32d1
5 changed files with 32 additions and 149 deletions
Unified View Show Diff Stats
  1. 0 115
      docs/api/extras/FontUtils.html
  2. 1 3
      docs/api/extras/geometries/TextGeometry.html
  3. 6 7
      docs/list.js
  4. 1 11
      docs/scenes/geometry-browser.html
  5. 24 13
      docs/scenes/js/geometry.js

+ 0 - 115
docs/api/extras/FontUtils.html
View File 

@@ -1,115 +0,0 @@
 
-<!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 class="desc">A class for text operations in three.js (See [page:TextGeometry])</div>
 
-
 
-
 
-		<h2>Properties</h2>
 
-
 
-
 
-
 
-		<h3>[property:number divisions]</h3>
 
-		<div>
 
-		The amount of segments in a curve. Default is 10.
 
-		</div> 
-
 
-		<h3>[property:string style]</h3>
 
-		<div>
 
-		The style of the used font. Default is "normal".
 
-		</div> 
-
 
-		<h3>[property:string weight]</h3>
 
-		<div>
 
-		The weight of the used font. Default is "normal".
 
-		</div> 
-
 
-		<h3>[property:string face]</h3>
 
-		<div>
 
-		The name of the font. Default is "helvetiker".
 
-		</div> 
-
 
-		<h3>[property:object faces]</h3>
 
-		<div>
 
-		All Fonts which are already loaded in.
 
-		</div> 
-
 
-		<h3>[property:number size]</h3>
 
-		<div>
 
-		The size of the used Font. Default is 150.
 
-		</div> 
-
 
-		<h2>Methods</h2>
 
-
 
-
 
-
 
-		<h3>[method:Object drawText]([page:string text])</h3>
 
-		<div>
 
-		text -- The text to draw.
 
-		</div>
 
-		<div>
 
-		Calculates the path and offset of the text in the used font. It returns an  object like { paths : fontPaths, offset : width }.
 
-		</div>
 
-
 
-		<h3>[method:Array Triangulate]([page:Array contour], [page:Boolean indices])</h3>
 
-		<div>
 
-		contour -- Array of vector2 to define an contour <br />
 
-		indices -- A boolean indicating if you need to return indices.
 
-		</div>
 
-		<div>
 
-		Triangulates a contour into an array of faces.
 
-		</div>
 
-
 
-		<h3>[method:Object extractGlyphPoints]([page:string c], [page:string face], [page:number scale], [page:number offset], [page:Path path])</h3>
 
-		<div>
 
-		c -- The character to extract. <br />
 
-		face -- The face to use. <br />
 
-		scale -- The scale of the character. <br />
 
-		offset -- The offset of the character compared to begin of the path. <br />
 
-		path -- The path to which to add the character points.
 
-		</div>
 
-		<div>
 
-		This ectracts the glyphPoints of the character of the face and returns an object containing the path and the new offset.
 
-		</div>
 
-
 
-		<h3>[method:Array generateShapes]([page:string text], [page:Object parameters])</h3>
 
-		<div>
 
-		text -- The text to generate the shapes from.<br />
 
-		parameters -- The parameter containing <br />
 
-			size -- Default is 100.
 
-			curveSegments -- Default is 4.
 
-			font -- Default is "helvetiker".
 
-			weight -- Default is "normal".
 
-			style -- Default is "normal".
 
-
 
-		</div>
 
-		<div>
 
-		Generates shapes from the text and return them as an Array of [page:Shape].
 
-		</div>
 
-
 
-		<h3>[method:Object loadFace]([page:Object data])</h3>
 
-		<div>
 
-		data -- The data of the face.
 
-		</div>
 
-		<div>
 
-		This loads and saves the data of the face and return the data. When you add the font Data as javascriptfile, then this automatically get called. So there is no need to do this yourself.
 
-		</div>
 
-
 
-		<h3>[method:Object getFace]()</h3>
 
-		<div>
 
-		Returns the used font its data based on its style and weight.
 
-		</div>
 
-
 
-		<h2>Source</h2>
 
-
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 
-	</body>
 
-</html>

+ 1 - 3
docs/api/extras/geometries/TextGeometry.html
View File 

@@ -31,12 +31,10 @@
 
 		text — The text that needs to be shown. <br />
 
 		text — The text that needs to be shown. <br />
 
 		parameters — Object that can contains the following parameters.
 
 		parameters — Object that can contains the following parameters.
 
 		<ul>
 
 		<ul>
 
+			<li>font — THREE.Font.</li>
 
 			<li>size — Float. Size of the text.</li>
 
 			<li>size — Float. Size of the text.</li>
 
 			<li>height — Float. Thickness to extrude text.  Default is 50.</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>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
 
-			<li>font — String. Font name.</li>
 
-			<li>weight — String. Font weight (normal, bold).</li>
 
-			<li>style —  String. Font style (normal, italics).</li>
 
 			<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</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>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>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>

+ 6 - 7
docs/list.js
View File 

@@ -9,11 +9,11 @@ var list = {
 
 
 
 	"Reference": {
 
 	"Reference": {
 
 		"Constants": [
 
 		"Constants": [
 
-			[ "CustomBlendingEquation", "api/constants/CustomBlendingEquations"],
 
-			[ "GLState", "api/constants/GLState"],
 
-			[ "Materials", "api/constants/Materials"],
 
-			[ "ShadowingTypes", "api/constants/ShadowingTypes"],
 
-			[ "Textures", "api/constants/Textures"]
 
+			[ "CustomBlendingEquation", "api/constants/CustomBlendingEquations" ],
 
+			[ "GLState", "api/constants/GLState" ],
 
+			[ "Materials", "api/constants/Materials" ],
 
+			[ "ShadowingTypes", "api/constants/ShadowingTypes" ],
 
+			[ "Textures", "api/constants/Textures" ]
 
 		],
 
 		],
 
 
 
 		"Cameras": [
 
 		"Cameras": [
 
@@ -151,13 +151,12 @@ var list = {
 
 
 
 		"Textures": [
 
 		"Textures": [
 
 			[ "CompressedTexture", "api/textures/CompressedTexture" ],
 
 			[ "CompressedTexture", "api/textures/CompressedTexture" ],
 
-			[ "CubeTexture", "api/textures/CubeTexture" ],			
+			[ "CubeTexture", "api/textures/CubeTexture" ],
 
 			[ "DataTexture", "api/textures/DataTexture" ],
 
 			[ "DataTexture", "api/textures/DataTexture" ],
 
 			[ "Texture", "api/textures/Texture" ]
 
 			[ "Texture", "api/textures/Texture" ]
 
 		],
 
 		],
 
 
 
 		"Extras": [
 
 		"Extras": [
 
-			[ "FontUtils", "api/extras/FontUtils" ],
 
 			[ "GeometryUtils", "api/extras/GeometryUtils" ],
 
 			[ "GeometryUtils", "api/extras/GeometryUtils" ],
 
 			[ "SceneUtils", "api/extras/SceneUtils" ]
 
 			[ "SceneUtils", "api/extras/SceneUtils" ]
 
 		],
 
 		],

+ 1 - 11
docs/scenes/geometry-browser.html
View File 

@@ -37,16 +37,6 @@
 
 		<script src="../../build/three.min.js"></script>
 
 		<script src="../../build/three.min.js"></script>
 
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
 
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
 
-		<script src="../../examples/js/geometries/TextGeometry.js"></script>
 
-		<script src="../../examples/js/utils/FontUtils.js"></script>
 
-		<script src="../../examples/fonts/gentilis_bold.typeface.js"></script>
 
-		<script src="../../examples/fonts/gentilis_regular.typeface.js"></script>
 
-		<script src="../../examples/fonts/optimer_bold.typeface.js"></script>
 
-		<script src="../../examples/fonts/optimer_regular.typeface.js"></script>
 
-		<script src="../../examples/fonts/helvetiker_bold.typeface.js"></script>
 
-		<script src="../../examples/fonts/helvetiker_regular.typeface.js"></script>
 
-		<script src="../../examples/fonts/droid/droid_serif_regular.typeface.js"></script>
 
-		<script src="../../examples/fonts/droid/droid_serif_bold.typeface.js"></script>
 
 
 
 		<script src='js/geometry.js'></script>
 
 		<script src='js/geometry.js'></script>
 
 
 
@@ -60,7 +50,7 @@
 
 			camera.position.z = 30;
 
 			camera.position.z = 30;
 
 
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );			
+			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			document.body.appendChild( renderer.domElement );
 
 			document.body.appendChild( renderer.domElement );

+ 24 - 13
docs/scenes/js/geometry.js
View File 

@@ -408,8 +408,7 @@ var guis = {
 
 			height : 2,
 
 			height : 2,
 
 			curveSegments : 12,
 
 			curveSegments : 12,
 
 			font : "helvetiker",
 
 			font : "helvetiker",
 
-			weight : "normal",
 
-			style : "normal",
 
+			weight : "regular",
 
 			bevelEnabled : false,
 
 			bevelEnabled : false,
 
 			bevelThickness : 1,
 
 			bevelThickness : 1,
 
 			bevelSize : 0.5
 
 			bevelSize : 0.5
 
@@ -419,40 +418,52 @@ var guis = {
 
 			"helvetiker",
 
 			"helvetiker",
 
 			"optimer",
 
 			"optimer",
 
 			"gentilis",
 
 			"gentilis",
 
-			"droid serif"
 
-		]
 
+			"droid/droid_serif"
 
+		];
 
 
 
 		var weights = [
 
 		var weights = [
 
-			"normal", "bold"
 
-		]
 
+			"regular", "bold"
 
+		];
 
 
 
 		function generateGeometry() {
 
 		function generateGeometry() {
 
 
 
-			var geometry = new THREE.TextGeometry( data.text, data )
 
+			var loader = new THREE.FontLoader();
 
+			loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
 
 
 
-			geometry.center()
 
+				var geometry = new THREE.TextGeometry( data.text, {
 
+					font: font,
 
+					size: data.size,
 
+					height: data.height,
 
+					curveSegments: data.curveSegments,
 
+					bevelEnabled: data.bevelEnabled,
 
+					bevelThickness: data.bevelThickness,
 
+					bevelSize: data.bevelSize
 
+				} );
 
+				geometry.center();
 
 
 
-			updateGroupGeometry( mesh, geometry );
 
+				updateGroupGeometry( mesh, geometry );
 
+
 
+			} );
 
 
 
 		}
 
 		}
 
 
 
 		//Hide the wireframe
 
 		//Hide the wireframe
 
-		mesh.children[0].visible = false;
 
+		mesh.children[ 0 ].visible = false;
 
 
 
-		var folder = gui.addFolder('THREE.TextGeometry');
 
+		var folder = gui.addFolder( 'THREE.TextGeometry' );
 
 
 
 		folder.add( data, 'text' ).onChange( generateGeometry );
 
 		folder.add( data, 'text' ).onChange( generateGeometry );
 
 		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
 
 		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
 
 		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
 
 		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
 
-		folder.add( data, 'curveSegments', 1, 20 ).step(1).onChange( generateGeometry );
 
+		folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
 
 		folder.add( data, 'font', fonts ).onChange( generateGeometry );
 
 		folder.add( data, 'font', fonts ).onChange( generateGeometry );
 
 		folder.add( data, 'weight', weights ).onChange( generateGeometry );
 
 		folder.add( data, 'weight', weights ).onChange( generateGeometry );
 
-		// folder.add( data, 'style', 1, 1 ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
 
 		folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
 
 
 
 		generateGeometry();
 
 		generateGeometry();
 
+
 
 	},
 
 	},
 
 
 
 	TorusGeometry : function( mesh ) {
 
 	TorusGeometry : function( mesh ) {