TextGeometry changes and support in editor

docs/examples/en/geometries/TextGeometry.html

@@ -38,7 +38,7 @@ <h2>Code Example</h2>
 			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 @@ <h3>[name]([param:String text], [param:Object parameters])</h3>
 		<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 @@ <h2>代码示例</h2>
 			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 @@ <h3>[name]([param:String text], [param:Object parameters])</h3>
 		<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>

editor/js/Editor.js

@@ -1,5 +1,7 @@
 import * as THREE from 'three';
 
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
 import { Config } from './Config.js';
 import { Loader } from './Loader.js';
 import { History as _History } from './History.js';
@@ -657,6 +659,8 @@ Editor.prototype = {
 	fromJSON: async function ( json ) {
 
 		var loader = new THREE.ObjectLoader();
+		loader.registerGeometry( 'TextGeometry', TextGeometry );
+
 		var camera = await loader.parseAsync( json.camera );
 
 		this.camera.copy( camera );

editor/js/Menubar.Add.js

@@ -1,5 +1,8 @@
 import * as THREE from 'three';
 
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
 import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
 
 import { AddObjectCommand } from './commands/AddObjectCommand.js';
@@ -248,6 +251,44 @@ function MenubarAdd( editor ) {
 	} );
 	options.add( option );
 
+	// Text
+
+	option = new UIRow();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/add/text' ) );
+	option.onClick( function () {
+
+		const loader = new FontLoader();
+		loader.load( '../examples/fonts/helvetiker_bold.typeface.json', function ( font ) {
+
+			const text = 'THREE.JS';
+
+			const geometry = new TextGeometry( text, {
+				text: text,
+				font,
+				size: 70,
+				depth: 20,
+				curveSegments: 4,
+
+				bevelEnabled: false,
+				bevelThickness: 10,
+				bevelSize: 8,
+				bevelOffset: 0,
+				bevelSegments: 3,
+				scale: 0.01
+
+			} );
+
+			const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Text';
+
+			editor.execute( new AddObjectCommand( editor, mesh ) );
+
+		} );
+
+	} );
+	options.add( option );
+
 	// Torus
 
 	option = new UIRow();

editor/js/Sidebar.Geometry.TextGeometry.js

@@ -0,0 +1,150 @@
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
+import { UIDiv, UIRow, UIText, UINumber, UIInteger, UIInput, UICheckbox } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters.options;
+
+	// text
+
+	const textRow = new UIRow();
+	const text = new UIInput().setValue( parameters.text ).onChange( update );
+
+	textRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/text' ) ).setClass( 'Label' ) );
+	textRow.add( text );
+
+	container.add( textRow );
+
+	// size
+
+	const sizeRow = new UIRow();
+	const size = new UINumber().setPrecision( 3 ).setValue( parameters.size ).onChange( update );
+
+	sizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/size' ) ).setClass( 'Label' ) );
+	sizeRow.add( size );
+
+	container.add( sizeRow );
+
+	// depth
+
+	const depthRow = new UIRow();
+	const depth = new UINumber().setPrecision( 3 ).setValue( parameters.depth ).onChange( update );
+
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/depth' ) ).setClass( 'Label' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// curveSegments
+
+	const curveSegmentsRow = new UIRow();
+	const curveSegments = new UIInteger( parameters.curveSegments ).setRange( 1, Infinity ).onChange( update );
+
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/curveseg' ) ).setClass( 'Label' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+
+	// scale
+
+	const scaleRow = new UIRow();
+	const scale = new UINumber().setPrecision( 4 ).setValue( parameters.scale ).onChange( update );
+
+	scaleRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/scale' ) ).setClass( 'Label' ) );
+	scaleRow.add( scale );
+
+	container.add( scaleRow );
+
+	// bevelEnabled
+
+	const bevelEnabledRow = new UIRow();
+	const bevelEnabled = new UICheckbox( parameters.bevelEnabled ).onChange( update );
+
+	bevelEnabledRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelenabled' ) ).setClass( 'Label' ) );
+	bevelEnabledRow.add( bevelEnabled );
+
+	container.add( bevelEnabledRow );
+
+	// bevelThickness
+
+	const bevelThicknessRow = new UIRow();
+	const bevelThickness = new UINumber( parameters.bevelThickness ).setPrecision( 3 ).setRange( 0, Infinity ).onChange( update );
+
+	bevelThicknessRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelthickness' ) ).setClass( 'Label' ) );
+	bevelThicknessRow.add( bevelThickness );
+
+	container.add( bevelThicknessRow );
+
+	// bevelSize
+
+	const bevelSizeRow = new UIRow();
+	const bevelSize = new UINumber( parameters.bevelSize ).setRange( 0, Infinity ).onChange( update );
+
+	bevelSizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelsize' ) ).setClass( 'Label' ) );
+	bevelSizeRow.add( bevelSize );
+
+	container.add( bevelSizeRow );
+
+	// bevelOffset
+
+	const bevelOffsetRow = new UIRow();
+	const bevelOffset = new UINumber( parameters.bevelOffset ).setRange( 0, Infinity ).onChange( update );
+
+	bevelOffsetRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelOffset' ) ).setClass( 'Label' ) );
+	bevelOffsetRow.add( bevelOffset );
+
+	container.add( bevelOffsetRow );
+
+
+	// bevelSegments
+
+	const bevelSegmentsRow = new UIRow();
+	const bevelSegments = new UIInteger( parameters.bevelSegments ).setRange( 0, Infinity ).onChange( update );
+
+	bevelSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelseg' ) ).setClass( 'Label' ) );
+	bevelSegmentsRow.add( bevelSegments );
+
+	container.add( bevelSegmentsRow );
+
+	function update() {
+
+		const options = {
+
+			text: text.getValue(),
+			font: parameters.font,
+
+			size: size.getValue(),
+			depth: depth.getValue(),
+			curveSegments: curveSegments.getValue(),
+
+			bevelEnabled: bevelEnabled.getValue(),
+			bevelThickness: bevelThickness.getValue(),
+			bevelSize: bevelSize.getValue(),
+			bevelOffset: bevelOffset.getValue(),
+			bevelSegments: bevelSegments.getValue(),
+
+			scale: scale.getValue(),
+
+		};
+
+		const geometry = new TextGeometry( options.text, options );
+
+		editor.execute( new SetGeometryCommand( editor, object, geometry ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };
+

editor/js/Strings.js

@@ -39,6 +39,7 @@ function Strings( config ) {
 			'menubar/add/icosahedron': 'Icosahedron',
 			'menubar/add/octahedron': 'Octahedron',
 			'menubar/add/tetrahedron': 'Tetrahedron',
+			'menubar/add/text': 'Text',
 			'menubar/add/torus': 'Torus',
 			'menubar/add/tube': 'Tube',
 			'menubar/add/torusknot': 'TorusKnot',
@@ -208,6 +209,17 @@ function Strings( config ) {
 			'sidebar/geometry/sphere_geometry/thetastart': 'Theta start',
 			'sidebar/geometry/sphere_geometry/thetalength': 'Theta length',
 
+			'sidebar/geometry/text_geometry/text': 'Text',
+			'sidebar/geometry/text_geometry/size': 'Font size',
+			'sidebar/geometry/text_geometry/depth': 'Extrude depth',
+			'sidebar/geometry/text_geometry/scale': 'Scale',
+			'sidebar/geometry/text_geometry/curveseg': 'Curve segments',
+			'sidebar/geometry/text_geometry/bevelenabled': 'Bevel enabled',
+			'sidebar/geometry/text_geometry/bevelthickness': 'Bevel thickness',
+			'sidebar/geometry/text_geometry/bevelsize': 'Bevel size',
+			'sidebar/geometry/text_geometry/bevelOffset': 'Bevel offset',
+			'sidebar/geometry/text_geometry/bevelseg': 'Bevel segments',
+
 			'sidebar/geometry/torus_geometry/radius': 'Radius',
 			'sidebar/geometry/torus_geometry/tube': 'Tube',
 			'sidebar/geometry/torus_geometry/radialsegments': 'Radial segments',
@@ -1059,7 +1071,7 @@ function Strings( config ) {
 
 		getKey: function ( key ) {
 
-			return values[ language ][ key ] || '???';
+			return values[ language ][ key ] || `???${key.split('/').pop().substring(0, 8)}`;
 
 		}
 

examples/jsm/geometries/TextGeometry.js

@@ -15,6 +15,7 @@
  * }
  */
 
+import { Font } from '../loaders/FontLoader.js';
 import {
 	ExtrudeGeometry
 } from 'three';
@@ -35,7 +36,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
 
@@ -45,12 +54,39 @@ class TextGeometry extends ExtrudeGeometry {
 
 			super( shapes, parameters );
 
+			// for conversion of font to object units (ie. px -> m)
+
+			const scale = parameters.scale;
+
+			if ( scale !== undefined ) {
+
+				this.computeBoundingBox();
+				this.scale( scale, scale, scale );
+
+			}
+
 		}
 
 		this.type = 'TextGeometry';
 
 	}
 
+	toJSON() {
+
+		const data = super.toJSON();
+		return data;
+
+	}
+
+	static fromJSON( data ) {
+
+		const options = data.options;
+
+		options.font = new Font( options.font.data );
+		return new TextGeometry( options.text, options );
+
+	}
+
 }
 
 

src/loaders/ObjectLoader.js

@@ -69,6 +69,8 @@ class ObjectLoader extends Loader {
 
 		super( manager );
 
+		this.Geometries = Object.assign( {}, Geometries );
+
 	}
 
 	load( url, onLoad, onProgress, onError ) {
@@ -261,6 +263,12 @@ class ObjectLoader extends Loader {
 
 	}
 
+	registerGeometry( type, klass ) {
+
+		this.Geometries[ type ] = klass;
+
+	}
+
 	parseGeometries( json, shapes ) {
 
 		const geometries = {};
@@ -284,9 +292,9 @@ class ObjectLoader extends Loader {
 
 					default:
 
-						if ( data.type in Geometries ) {
+						if ( data.type in this.Geometries ) {
 
-							geometry = Geometries[ data.type ].fromJSON( data, shapes );
+							geometry = this.Geometries[ data.type ].fromJSON( data, shapes );
 
 						} else {