TextGeometry changes and support in editor

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( '.height in TextGeometry is now depreciated. Please use .depth instead' );
+
+			}
+
+			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/geometries/Geometries.js

@@ -19,3 +19,4 @@ export * from './TorusGeometry.js';
 export * from './TorusKnotGeometry.js';
 export * from './TubeGeometry.js';
 export * from './WireframeGeometry.js';
+export * from '../../examples/jsm/geometries/TextGeometry.js';