THREE.TextGeometry: `.height` -> `.depth` (#27949)

* THREE.TextGeometry: `.height` -> `.depth`

- depreciating `height` parameter in TextGeometry options for `depth`
  for consistency with ExtrudeGeometry, which refers to the thickness
  the Text will be extruded. using `height` is still supported but
  will emit a warning in the console
- updated examples, manual and docs

* missed one reference

docs/examples/en/geometries/TextGeometry.html

@@ -38,7 +38,7 @@
 			const geometry = new TextGeometry( 'Hello three.js!', {
 				font: font,
 				size: 80,
-				height: 5,
+				depth: 5,
 				curveSegments: 12,
 				bevelEnabled: true,
 				bevelThickness: 10,
@@ -64,7 +64,7 @@
 		<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>depth — 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>

docs/examples/zh/geometries/TextGeometry.html

@@ -38,7 +38,7 @@
 			const geometry = new TextGeometry( 'Hello three.js!', {
 				font: font,
 				size: 80,
-				height: 5,
+				depth: 5,
 				curveSegments: 12,
 				bevelEnabled: true,
 				bevelThickness: 10,
@@ -63,7 +63,7 @@
 		<ul>
 			<li>font — THREE.Font的实例。</li>
 			<li>size — Float。字体大小，默认值为100。</li>
-			<li>height — Float。挤出文本的厚度。默认值为50。</li>
+			<li>depth — Float。挤出文本的厚度。默认值为50。</li>
 			<li>curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。</li>
 			<li>bevelEnabled — Boolean。是否开启斜角，默认为false。</li>
 			<li>bevelThickness — Float。文本上斜角的深度，默认值为20。</li>

examples/jsm/geometries/TextGeometry.js

@@ -5,7 +5,7 @@
  *  font: <THREE.Font>, // font
  *
  *  size: <float>, // size of the text
- *  height: <float>, // thickness to extrude text
+ *  depth: <float>, // thickness to extrude text
  *  curveSegments: <int>, // number of points on the curves
  *
  *  bevelEnabled: <bool>, // turn on bevel
@@ -35,7 +35,15 @@ class TextGeometry extends ExtrudeGeometry {
 
 			// translate parameters to ExtrudeGeometry API
 
-			parameters.depth = parameters.height !== undefined ? parameters.height : 50;
+			if ( parameters.depth === undefined && parameters.height !== undefined ) {
+
+				console.warn( 'THREE.TextGeometry: .height is now depreciated. Please use .depth instead' ); // @deprecated, r163
+
+			}
+
+			parameters.depth = parameters.depth !== undefined ?
+				parameters.depth : parameters.height !== undefined ?
+					parameters.height : 50;
 
 			// defaults
 

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -189,7 +189,7 @@
 					const labelgeo = new TextGeometry( labeldata[ i ].label, {
 						font: font,
 						size: labeldata[ i ].size,
-						height: labeldata[ i ].size / 2
+						depth: labeldata[ i ].size / 2
 					} );
 
 					labelgeo.computeBoundingSphere();

examples/webgl_custom_attributes_lines.html

@@ -110,7 +110,7 @@
 					font: font,
 
 					size: 50,
-					height: 15,
+					depth: 15,
 					curveSegments: 10,
 
 					bevelThickness: 5,

examples/webgl_geometry_text.html

@@ -50,7 +50,7 @@
 				fontName = 'optimer', // helvetiker, optimer, gentilis, droid sans, droid serif
 				fontWeight = 'bold'; // normal bold
 
-			const height = 20,
+			const depth = 20,
 				size = 70,
 				hover = 30,
 
@@ -298,7 +298,7 @@
 					font: font,
 
 					size: size,
-					height: height,
+					depth: depth,
 					curveSegments: curveSegments,
 
 					bevelThickness: bevelThickness,
@@ -328,7 +328,7 @@
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = - hover;
-					textMesh2.position.z = height;
+					textMesh2.position.z = depth;
 
 					textMesh2.rotation.x = Math.PI;
 					textMesh2.rotation.y = Math.PI * 2;

examples/webgl_loader_ttf.html

@@ -35,7 +35,7 @@
 			let firstLetter = true;
 
 			let text = 'three.js';
-			const height = 20,
+			const depth = 20,
 				size = 70,
 				hover = 30,
 				curveSegments = 4,
@@ -193,7 +193,7 @@
 					font: font,
 
 					size: size,
-					height: height,
+					depth: depth,
 					curveSegments: curveSegments,
 
 					bevelThickness: bevelThickness,
@@ -224,7 +224,7 @@
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = - hover;
-					textMesh2.position.z = height;
+					textMesh2.position.z = depth;
 
 					textMesh2.rotation.x = Math.PI;
 					textMesh2.rotation.y = Math.PI * 2;

examples/webgl_materials_toon.html

@@ -119,7 +119,7 @@
 						font: font,
 
 						size: 20,
-						height: 1,
+						depth: 1,
 						curveSegments: 1
 
 					} );

examples/webgl_modifier_curve.html

@@ -110,7 +110,7 @@
 					const geometry = new TextGeometry( 'Hello three.js!', {
 						font: font,
 						size: 0.2,
-						height: 0.05,
+						depth: 0.05,
 						curveSegments: 12,
 						bevelEnabled: true,
 						bevelThickness: 0.02,

examples/webgl_modifier_curve_instanced.html

@@ -123,7 +123,7 @@
 					const geometry = new TextGeometry( 'Hello three.js!', {
 						font: font,
 						size: 0.2,
-						height: 0.05,
+						depth: 0.05,
 						curveSegments: 12,
 						bevelEnabled: true,
 						bevelThickness: 0.02,

examples/webgl_modifier_tessellation.html

@@ -105,7 +105,7 @@
 					font: font,
 
 					size: 40,
-					height: 5,
+					depth: 5,
 					curveSegments: 3,
 
 					bevelThickness: 2,

examples/webgl_shadowmap.html

@@ -203,7 +203,7 @@
 						font: font,
 
 						size: 200,
-						height: 50,
+						depth: 50,
 						curveSegments: 12,
 
 						bevelThickness: 2,

examples/webgl_shadowmap_performance.html

@@ -173,7 +173,7 @@
 						font: font,
 
 						size: 200,
-						height: 50,
+						depth: 50,
 						curveSegments: 12,
 
 						bevelThickness: 2,

examples/webgpu_camera_logarithmicdepthbuffer.html

@@ -201,7 +201,7 @@
 					const labelgeo = new TextGeometry( labeldata[ i ].label, {
 						font: font,
 						size: labeldata[ i ].size,
-						height: labeldata[ i ].size / 2
+						depth: labeldata[ i ].size / 2
 					} );
 
 					labelgeo.computeBoundingSphere();

manual/en/primitives.html

@@ -192,7 +192,7 @@ And finally create the geometry and call <code class="notranslate" translate="no
     const geometry = new TextGeometry('three.js', {
       font: font,
       size: 3.0,
-      height: .2,
+      depth: .2,
       curveSegments: 12,
       bevelEnabled: true,
       bevelThickness: 0.15,

manual/examples/primitives-text.html

@@ -124,7 +124,7 @@ function main() {
 			const geometry = new TextGeometry( 'three.js', {
 				font: font,
 				size: 3.0,
-				height: .2,
+				depth: .2,
 				curveSegments: 12,
 				bevelEnabled: true,
 				bevelThickness: 0.15,

manual/examples/primitives.html

@@ -361,7 +361,7 @@ function main() {
 			const geometry = new TextGeometry( 'three.js', {
 				font: font,
 				size: 3.0,
-				height: .2,
+				depth: .2,
 				curveSegments: 12,
 				bevelEnabled: true,
 				bevelThickness: 0.15,

manual/fr/primitives.html

@@ -201,7 +201,7 @@ Et enfin, nous créons la géométrie et appelons <code class="notranslate" tran
     const geometry = new TextGeometry('three.js', {
       font: font,
       size: 3.0,
-      height: .2,
+      depth: .2,
       curveSegments: 12,
       bevelEnabled: true,
       bevelThickness: 0.15,

manual/ja/primitives.html

@@ -169,7 +169,7 @@ function addObject(x, y, obj) {
     const geometry = new TextGeometry('three.js', {
       font: font,
       size: 3.0,
-      height: .2,
+      depth: .2,
       curveSegments: 12,
       bevelEnabled: true,
       bevelThickness: 0.15,

manual/resources/threejs-primitives.js

@@ -538,7 +538,7 @@ return geometry;
 			ui: {
 				text: { type: 'text', maxLength: 30, },
 				size: { type: 'range', min: 1, max: 10, precision: 1, },
-				height: { type: 'range', min: 1, max: 10, precision: 1, },
+				depth: { type: 'range', min: 1, max: 10, precision: 1, },
 				curveSegments: { type: 'range', min: 1, max: 20, },
 				// font', fonts ).onChange( generateGeometry );
 				// weight', weights ).onChange( generateGeometry );
@@ -548,7 +548,7 @@ return geometry;
 				bevelSegments: { type: 'range', min: 0, max: 8, },
 			},
 			addConstCode: false,
-			create( text = 'three.js', size = 3, height = 0.2, curveSegments = 12, bevelEnabled = true, bevelThickness = 0.15, bevelSize = 0.3, bevelSegments = 5 ) {
+			create( text = 'three.js', size = 3, depth = 0.2, curveSegments = 12, bevelEnabled = true, bevelThickness = 0.15, bevelSize = 0.3, bevelSegments = 5 ) {
 
 				return new Promise( ( resolve ) => {
 
@@ -557,7 +557,7 @@ return geometry;
 						resolve( new TextGeometry( text, {
 							font: font,
 							size,
-							height,
+							depth,
 							curveSegments,
 							bevelEnabled,
 							bevelThickness,
@@ -578,7 +578,7 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
   const geometry = new THREE.TextGeometry(text, {
     font: font,
     size: 3,  // ui: size
-    height: 0.2,  // ui: height
+    depth: 0.2,  // ui: depth
     curveSegments: 12,  // ui: curveSegments
     bevelEnabled: true,  // ui: bevelEnabled
     bevelThickness: 0.15,  // ui: bevelThickness