Editor: Add `TextGeometry`. (#33253)

editor/index.html

@@ -72,6 +72,8 @@
 			import { AnimationResizer } from './js/AnimationResizer.js';
 			import { Animation } from './js/Animation.js';
 
+			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
@@ -82,6 +84,8 @@
 			window.editor = editor; // Expose editor to Console
 			window.THREE = THREE; // Expose THREE to APP Scripts and Console
 
+			THREE.ObjectLoader.registerGeometry( 'TextGeometry', TextGeometry );
+
 			const viewport = new Viewport( editor );
 			document.body.appendChild( viewport.dom );
 

editor/js/Menubar.Add.js

@@ -4,6 +4,9 @@ import { UIPanel, UIRow } from './libs/ui.js';
 
 import { AddObjectCommand } from './commands/AddObjectCommand.js';
 
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
 function MenubarAdd( editor ) {
 
 	const strings = editor.strings;
@@ -267,6 +270,43 @@ function MenubarAdd( editor ) {
 	} );
 	meshSubmenu.add( option );
 
+	// Mesh / 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: 1,
+				depth: 0.5,
+				curveSegments: 4,
+
+				bevelEnabled: false,
+				bevelThickness: 0.1,
+				bevelSize: 0.01,
+				bevelOffset: 0,
+				bevelSegments: 3
+
+			} );
+
+			const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Text';
+
+			editor.execute( new AddObjectCommand( editor, mesh ) );
+
+		} );
+
+	} );
+	meshSubmenu.add( option );
+
 	// Mesh / Torus
 
 	option = new UIRow();

editor/js/Sidebar.Geometry.TextGeometry.js

@@ -0,0 +1,136 @@
+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 );
+
+	// 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()
+
+		};
+
+		const geometry = new TextGeometry( options.text, options );
+
+		editor.execute( new SetGeometryCommand( editor, object, geometry ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

editor/js/Strings.js

@@ -73,6 +73,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': 'بیست وجهی',
 			'menubar/add/mesh/octahedron': 'هشت وجهی',
 			'menubar/add/mesh/tetrahedron': 'چهار وجهی',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': 'توروس (دونات)',
 			'menubar/add/mesh/tube': 'لوله',
 			'menubar/add/mesh/torusknot': 'torusknot',
@@ -242,6 +243,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': 'شروع تتا',
 			'sidebar/geometry/ring_geometry/thetalength': 'طول تتا',
 
+			'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/shape_geometry/curveSegments': 'بخش های منحنی',
 			'sidebar/geometry/shape_geometry/extrude': 'اکسترود کردن',
 
@@ -490,6 +502,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': 'Icosahedron',
 			'menubar/add/mesh/octahedron': 'Octahedron',
 			'menubar/add/mesh/tetrahedron': 'Tetrahedron',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': 'Torus',
 			'menubar/add/mesh/tube': 'Tube',
 			'menubar/add/mesh/torusknot': 'TorusKnot',
@@ -659,6 +672,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': 'Theta start',
 			'sidebar/geometry/ring_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/shape_geometry/curveSegments': 'Curve Segments',
 			'sidebar/geometry/shape_geometry/extrude': 'Extrude',
 
@@ -908,6 +932,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': 'Icosaèdre',
 			'menubar/add/mesh/octahedron': 'Octaèdre',
 			'menubar/add/mesh/tetrahedron': 'Tétraèdre',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': 'Torus',
 			'menubar/add/mesh/tube': 'Tube',
 			'menubar/add/mesh/torusknot': 'Noeud Torus',
@@ -1077,6 +1102,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': 'Début Thêta',
 			'sidebar/geometry/ring_geometry/thetalength': 'Longueur Thêta',
 
+			'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/shape_geometry/curveSegments': 'Segments de courbe',
 			'sidebar/geometry/shape_geometry/extrude': 'Extruder',
 
@@ -1326,6 +1362,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': '二十面体',
 			'menubar/add/mesh/octahedron': '八面体',
 			'menubar/add/mesh/tetrahedron': '四面体',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': '圆环体',
 			'menubar/add/mesh/torusknot': '环面纽结体',
 			'menubar/add/mesh/tube': '管',
@@ -1495,6 +1532,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': '弧度起点',
 			'sidebar/geometry/ring_geometry/thetalength': '弧度长度',
 
+			'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/shape_geometry/curveSegments': '曲线段',
 			'sidebar/geometry/shape_geometry/extrude': '拉伸',
 
@@ -1744,6 +1792,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': '二十面体',
 			'menubar/add/mesh/octahedron': '八面体',
 			'menubar/add/mesh/tetrahedron': '四面体',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': 'トーラス',
 			'menubar/add/mesh/tube': 'チューブ',
 			'menubar/add/mesh/torusknot': 'ノットトーラス',
@@ -1913,6 +1962,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': '開始角度',
 			'sidebar/geometry/ring_geometry/thetalength': '角度の大きさ',
 
+			'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/shape_geometry/curveSegments': '分割数',
 			'sidebar/geometry/shape_geometry/extrude': '押し出し',
 
@@ -2161,6 +2221,7 @@ function Strings( config ) {
 			'menubar/add/mesh/icosahedron': '이십면체',
 			'menubar/add/mesh/octahedron': '팔면체',
 			'menubar/add/mesh/tetrahedron': '사면체',
+			'menubar/add/text': 'Text',
 			'menubar/add/mesh/torus': '토러스',
 			'menubar/add/mesh/tube': '튜브',
 			'menubar/add/mesh/torusknot': '토러스 매듭',
@@ -2330,6 +2391,17 @@ function Strings( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': '시작 각도',
 			'sidebar/geometry/ring_geometry/thetalength': '각도 길이',
 
+			'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/shape_geometry/curveSegments': '곡선 분할 수',
 			'sidebar/geometry/shape_geometry/extrude': '압출',
 

examples/jsm/geometries/TextGeometry.js

@@ -2,6 +2,8 @@ import {
 	ExtrudeGeometry
 } from 'three';
 
+import { Font } from '../loaders/FontLoader.js';
+
 /**
  * A class for generating text as a single geometry. It is constructed by providing a string of text, and a set of
  * parameters consisting of a loaded font and extrude settings.
@@ -60,6 +62,22 @@ class TextGeometry extends ExtrudeGeometry {
 
 	}
 
+	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

@@ -65,6 +65,8 @@ import { Box3 } from '../math/Box3.js';
 import { Sphere } from '../math/Sphere.js';
 import { SphericalHarmonics3 } from '../math/SphericalHarmonics3.js';
 
+const _customGeometries = {};
+
 /**
  * A loader for loading a JSON resource in the [JSON Object/Scene format](https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4).
  * The files are internally loaded via {@link FileLoader}.
@@ -275,6 +277,20 @@ class ObjectLoader extends Loader {
 
 	}
 
+	/**
+	 * Registers the given geometry at the internal
+	 * geometry library.
+	 *
+	 * @static
+	 * @param {string} type - The geometry type.
+	 * @param {BufferGeometry.constructor} geometryClass - The geometry class.
+	 */
+	static registerGeometry( type, geometryClass ) {
+
+		_customGeometries[ type ] = geometryClass;
+
+	}
+
 	// internals
 
 	parseShapes( json ) {
@@ -355,9 +371,13 @@ class ObjectLoader extends Loader {
 
 							geometry = Geometries[ data.type ].fromJSON( data, shapes );
 
+						} else if ( data.type in _customGeometries ) {
+
+							geometry = _customGeometries[ data.type ].fromJSON( data, shapes );
+
 						} else {
 
-							warn( `ObjectLoader: Unsupported geometry type "${ data.type }"` );
+							warn( `ObjectLoader: Unknown geometry type "${ data.type }". Use .registerGeometry() before starting the deserialization process.` );
 
 						}