super-three 0.181.0 → 0.184.0

package/examples/jsm/controls/TrackballControls.js

@@ -281,7 +281,7 @@ class TrackballControls extends Controls {
 		this.domElement.addEventListener( 'wheel', this._onMouseWheel, { passive: false } );
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
 
 	}
 
@@ -291,13 +291,13 @@ class TrackballControls extends Controls {
 		window.removeEventListener( 'keyup', this._onKeyUp );
 
 		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 		this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
 		this.domElement.removeEventListener( 'wheel', this._onMouseWheel );
 		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
-		this.domElement.style.touchAction = 'auto'; // disable touch scroll
+		this.domElement.style.touchAction = ''; // Restore touch scroll
 
 	}
 
@@ -660,8 +660,8 @@ function onPointerDown( event ) {
 
 		this.domElement.setPointerCapture( event.pointerId );
 
-		this.domElement.addEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.addEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerup', this._onPointerUp );
 
 	}
 
@@ -719,8 +719,8 @@ function onPointerUp( event ) {
 
 		this.domElement.releasePointerCapture( event.pointerId );
 
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 
 	}
 

package/examples/jsm/controls/TransformControls.js

@@ -251,6 +251,33 @@ class TransformControls extends Controls {
 		 */
 		defineProperty( 'showZ', true );
 
+		/**
+		 * Whether the xy-plane helper should be visible or not.
+		 *
+		 * @name TransformControls#showXY
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXY', true );
+
+		/**
+		 * Whether the yz-plane helper should be visible or not.
+		 *
+		 * @name TransformControls#showYZ
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showYZ', true );
+
+		/**
+		 * Whether the xz-axis helper should be visible or not.
+		 *
+		 * @name TransformControls#showXZ
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXZ', true );
+
 		/**
 		 * The minimum allowed X position during translation.
 		 *
@@ -373,7 +400,7 @@ class TransformControls extends Controls {
 		this.domElement.addEventListener( 'pointermove', this._onPointerHover );
 		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
 
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
 
 	}
 
@@ -384,7 +411,7 @@ class TransformControls extends Controls {
 		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
 		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
 
-		this.domElement.style.touchAction = 'auto';
+		this.domElement.style.touchAction = ''; // Restore touch scroll
 
 	}
 
@@ -1784,6 +1811,11 @@ class TransformControlsGizmo extends Object3D {
 			handle.visible = handle.visible && ( handle.name.indexOf( 'Z' ) === - 1 || this.showZ );
 			handle.visible = handle.visible && ( handle.name.indexOf( 'E' ) === - 1 || ( this.showX && this.showY && this.showZ ) );
 
+			// Hide disabled plane helpers
+			handle.visible = handle.visible && ( handle.name.indexOf( 'XY' ) === - 1 || this.showXY );
+			handle.visible = handle.visible && ( handle.name.indexOf( 'YZ' ) === - 1 || this.showYZ );
+			handle.visible = handle.visible && ( handle.name.indexOf( 'XZ' ) === - 1 || this.showXZ );
+
 			// highlight selected axis
 
 			handle.material._color = handle.material._color || handle.material.color.clone();

package/examples/jsm/csm/CSM.js

@@ -13,6 +13,7 @@ import { CSMShader } from './CSMShader.js';
 const _cameraToLightMatrix = new Matrix4();
 const _lightSpaceFrustum = new CSMFrustum( { webGL: true } );
 const _center = new Vector3();
+const _origin = new Vector3();
 const _bbox = new Box3();
 const _uniformArray = [];
 const _logArray = [];
@@ -367,7 +368,7 @@ export class CSM {
 
 		// for each frustum we need to find its min-max box aligned with the light orientation
 		// the position in _lightOrientationMatrix does not matter, as we transform there and back
-		_lightOrientationMatrix.lookAt( new Vector3(), this.lightDirection, _up );
+		_lightOrientationMatrix.lookAt( _origin, this.lightDirection, _up );
 		_lightOrientationMatrixInverse.copy( _lightOrientationMatrix ).invert();
 
 		for ( let i = 0; i < frustums.length; i ++ ) {

package/examples/jsm/csm/CSMShadowNode.js

@@ -574,8 +574,12 @@ class CSMShadowNode extends ShadowBaseNode {
 			const light = this.lights[ i ];
 			const parent = light.parent;
 
-			parent.remove( light.target );
-			parent.remove( light );
+			if ( parent !== null ) {
+
+				parent.remove( light.target );
+				parent.remove( light );
+
+			}
 
 		}
 

package/examples/jsm/effects/AnaglyphEffect.js

@@ -1,16 +1,38 @@
 import {
 	LinearFilter,
+	MathUtils,
 	Matrix3,
 	NearestFilter,
+	PerspectiveCamera,
 	RGBAFormat,
 	ShaderMaterial,
-	StereoCamera,
+	Vector3,
 	WebGLRenderTarget
 } from 'three';
 import { FullScreenQuad } from '../postprocessing/Pass.js';
+import { frameCorners } from '../utils/CameraUtils.js';
+
+const _cameraL = /*@__PURE__*/ new PerspectiveCamera();
+const _cameraR = /*@__PURE__*/ new PerspectiveCamera();
+
+// Reusable vectors for screen corner calculations
+const _eyeL = /*@__PURE__*/ new Vector3();
+const _eyeR = /*@__PURE__*/ new Vector3();
+const _screenCenter = /*@__PURE__*/ new Vector3();
+const _screenBottomLeft = /*@__PURE__*/ new Vector3();
+const _screenBottomRight = /*@__PURE__*/ new Vector3();
+const _screenTopLeft = /*@__PURE__*/ new Vector3();
+const _right = /*@__PURE__*/ new Vector3();
+const _up = /*@__PURE__*/ new Vector3();
+const _forward = /*@__PURE__*/ new Vector3();
 
 /**
- * A class that creates an anaglyph effect.
+ * A class that creates an anaglyph effect using physically-correct
+ * off-axis stereo projection.
+ *
+ * This implementation uses CameraUtils.frameCorners() to align stereo
+ * camera frustums to a virtual screen plane, providing accurate depth
+ * perception with zero parallax at the plane distance.
  *
  * Note that this class can only be used with {@link WebGLRenderer}.
  * When using {@link WebGPURenderer}, use {@link AnaglyphPassNode}.
@@ -42,13 +64,38 @@ class AnaglyphEffect {
 			- 0.00155529, - 0.0184503, 1.2264
 		] );
 
-		const _stereo = new StereoCamera();
+		/**
+		 * The interpupillary distance (eye separation) in world units.
+		 * Typical human IPD is 0.064 meters (64mm).
+		 *
+		 * @type {number}
+		 * @default 0.064
+		 */
+		this.eyeSep = 0.064;
+
+		/**
+		 * The distance in world units from the viewer to the virtual
+		 * screen plane where zero parallax (screen depth) occurs.
+		 * Objects at this distance appear at the screen surface.
+		 * Objects closer appear in front of the screen (negative parallax).
+		 * Objects further appear behind the screen (positive parallax).
+		 *
+		 * The screen dimensions are derived from the camera's FOV and aspect ratio
+		 * at this distance, ensuring the stereo view matches the camera's field of view.
+		 *
+		 * @type {number}
+		 * @default 0.5
+		 */
+		this.planeDistance = 0.5;
 
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
 
 		const _renderTargetL = new WebGLRenderTarget( width, height, _params );
 		const _renderTargetR = new WebGLRenderTarget( width, height, _params );
 
+		_cameraL.layers.enable( 1 );
+		_cameraR.layers.enable( 2 );
+
 		const _material = new ShaderMaterial( {
 
 			uniforms: {
@@ -141,16 +188,64 @@ class AnaglyphEffect {
 
 			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
-			_stereo.update( camera );
-
+			// Get the camera's local coordinate axes from its world matrix
+			camera.matrixWorld.extractBasis( _right, _up, _forward );
+			_right.normalize();
+			_up.normalize();
+			_forward.normalize();
+
+			// Calculate eye positions
+			const halfSep = this.eyeSep / 2;
+			_eyeL.copy( camera.position ).addScaledVector( _right, - halfSep );
+			_eyeR.copy( camera.position ).addScaledVector( _right, halfSep );
+
+			// Calculate screen center (at planeDistance in front of the camera center)
+			_screenCenter.copy( camera.position ).addScaledVector( _forward, - this.planeDistance );
+
+			// Calculate screen dimensions from camera FOV and aspect ratio
+			const halfHeight = this.planeDistance * Math.tan( MathUtils.DEG2RAD * camera.fov / 2 );
+			const halfWidth = halfHeight * camera.aspect;
+
+			// Calculate screen corners
+			_screenBottomLeft.copy( _screenCenter )
+				.addScaledVector( _right, - halfWidth )
+				.addScaledVector( _up, - halfHeight );
+
+			_screenBottomRight.copy( _screenCenter )
+				.addScaledVector( _right, halfWidth )
+				.addScaledVector( _up, - halfHeight );
+
+			_screenTopLeft.copy( _screenCenter )
+				.addScaledVector( _right, - halfWidth )
+				.addScaledVector( _up, halfHeight );
+
+			// Set up left eye camera
+			_cameraL.position.copy( _eyeL );
+			_cameraL.near = camera.near;
+			_cameraL.far = camera.far;
+			frameCorners( _cameraL, _screenBottomLeft, _screenBottomRight, _screenTopLeft, true );
+			_cameraL.matrixWorld.compose( _cameraL.position, _cameraL.quaternion, _cameraL.scale );
+			_cameraL.matrixWorldInverse.copy( _cameraL.matrixWorld ).invert();
+
+			// Set up right eye camera
+			_cameraR.position.copy( _eyeR );
+			_cameraR.near = camera.near;
+			_cameraR.far = camera.far;
+			frameCorners( _cameraR, _screenBottomLeft, _screenBottomRight, _screenTopLeft, true );
+			_cameraR.matrixWorld.compose( _cameraR.position, _cameraR.quaternion, _cameraR.scale );
+			_cameraR.matrixWorldInverse.copy( _cameraR.matrixWorld ).invert();
+
+			// Render left eye
 			renderer.setRenderTarget( _renderTargetL );
 			renderer.clear();
-			renderer.render( scene, _stereo.cameraL );
+			renderer.render( scene, _cameraL );
 
+			// Render right eye
 			renderer.setRenderTarget( _renderTargetR );
 			renderer.clear();
-			renderer.render( scene, _stereo.cameraR );
+			renderer.render( scene, _cameraR );
 
+			// Composite anaglyph
 			renderer.setRenderTarget( null );
 			_quad.render( renderer );
 

package/examples/jsm/environments/ColorEnvironment.js

@@ -0,0 +1,59 @@
+import {
+	BackSide,
+	Mesh,
+	MeshBasicMaterial,
+	SphereGeometry,
+	Scene
+} from 'three';
+
+/**
+ * This class represents a scene with a uniform color that can be used as
+ * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents
+ * uniform ambient lighting and can be used for Image Based Lighting by
+ * assigning it to {@link Scene#environment}.
+ *
+ * ```js
+ * const environment = new ColorEnvironment( 0x00ff00 );
+ * const pmremGenerator = new THREE.PMREMGenerator( renderer );
+ *
+ * const envMap = pmremGenerator.fromScene( environment ).texture;
+ * scene.environment = envMap;
+ * ```
+ *
+ * @augments Scene
+ * @three_import import { ColorEnvironment } from 'three/addons/environments/ColorEnvironment.js';
+ */
+class ColorEnvironment extends Scene {
+
+	/**
+	 * Constructs a new color environment.
+	 *
+	 * @param {number|Color} color - The color of the environment.
+	 */
+	constructor( color = 0xffffff ) {
+
+		super();
+
+		this.name = 'ColorEnvironment';
+
+		const geometry = new SphereGeometry( 1, 16, 16 );
+		const material = new MeshBasicMaterial( { color: color, side: BackSide } );
+
+		this.add( new Mesh( geometry, material ) );
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the environment is no longer required.
+	 */
+	dispose() {
+
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
+
+	}
+
+}
+
+export { ColorEnvironment };

package/examples/jsm/environments/RoomEnvironment.js

@@ -36,6 +36,9 @@ class RoomEnvironment extends Scene {
 
 		super();
 
+		this.name = 'RoomEnvironment';
+		this.position.y = - 3.5;
+
 		const geometry = new BoxGeometry();
 		geometry.deleteAttribute( 'uv' );
 

package/examples/jsm/exporters/EXRExporter.js

@@ -90,7 +90,7 @@ function supportedRTT( renderTarget ) {
 
 	}
 
-	if ( renderTarget.isWebGLCubeRenderTarget || renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGLArrayRenderTarget ) {
+	if ( renderTarget.isCubeRenderTarget || renderTarget.isWebGLCubeRenderTarget || renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGLArrayRenderTarget ) {
 
 		throw Error( 'EXRExporter.parse: Unsupported render target type, expected instance of WebGLRenderTarget.' );
 

package/examples/jsm/exporters/GLTFExporter.js

@@ -88,6 +88,7 @@ const KHR_mesh_quantization_ExtraAttrTypes = {
  * - KHR_texture_transform
  * - EXT_materials_bump
  * - EXT_mesh_gpu_instancing
+ * - EXT_texture_webp
  *
  * The following glTF 2.0 extension is supported by an external user plugin:
  *
@@ -1533,15 +1534,30 @@ class GLTFWriter {
 
 		}
 
-		let mimeType = map.userData.mimeType;
+		const mimeType = map.userData.mimeType;
 
-		if ( mimeType === 'image/webp' ) mimeType = 'image/png';
+		const imageIndex = this.processImage( map.image, map.format, map.flipY, mimeType );
 
 		const textureDef = {
-			sampler: this.processSampler( map ),
-			source: this.processImage( map.image, map.format, map.flipY, mimeType )
+			sampler: this.processSampler( map )
 		};
 
+		if ( mimeType === 'image/webp' ) {
+
+			textureDef.extensions = textureDef.extensions || {};
+			textureDef.extensions[ 'EXT_texture_webp' ] = {
+				source: imageIndex
+			};
+
+			this.extensionsUsed[ 'EXT_texture_webp' ] = true;
+			this.extensionsRequired[ 'EXT_texture_webp' ] = true;
+
+		} else {
+
+			textureDef.source = imageIndex;
+
+		}
+
 		if ( map.name ) textureDef.name = map.name;
 
 		await this._invokeAllAsync( async function ( ext ) {
@@ -1832,7 +1848,7 @@ class GLTFWriter {
 			const validVertexAttributes =
 					/^(POSITION|NORMAL|TANGENT|TEXCOORD_\d+|COLOR_\d+|JOINTS_\d+|WEIGHTS_\d+)$/;
 
-			if ( ! validVertexAttributes.test( attributeName ) ) attributeName = '_' + attributeName;
+			if ( ! validVertexAttributes.test( attributeName ) && ! attributeName.startsWith( '_' ) ) attributeName = '_' + attributeName;
 
 			if ( cache.attributes.has( this.getUID( attribute ) ) ) {
 
@@ -1852,12 +1868,12 @@ class GLTFWriter {
 				! ( array instanceof Uint8Array ) ) {
 
 				console.warn( 'GLTFExporter: Attribute "skinIndex" converted to type UNSIGNED_SHORT.' );
-				modifiedAttribute = new BufferAttribute( new Uint16Array( array ), attribute.itemSize, attribute.normalized );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Uint16Array );
 
 			} else if ( ( array instanceof Uint32Array || array instanceof Int32Array ) && ! attributeName.startsWith( '_' ) ) {
 
 				console.warn( `GLTFExporter: Attribute "${ attributeName }" converted to type FLOAT.` );
-				modifiedAttribute = GLTFExporter.Utils.toFloat32BufferAttribute( attribute );
+				modifiedAttribute = GLTFExporter.Utils.toTypedBufferAttribute( attribute, Float32Array );
 
 			}
 
@@ -2355,6 +2371,13 @@ class GLTFWriter {
 
 		if ( ! json.nodes ) json.nodes = [];
 
+		// Handle pivot by creating a container node
+		if ( object.pivot !== null ) {
+
+			return await this._processNodeWithPivotAsync( object );
+
+		}
+
 		const nodeDef = {};
 
 		if ( options.trs ) {
@@ -2451,6 +2474,126 @@ class GLTFWriter {
 
 	}
 
+	/**
+	 * Process Object3D node with pivot using container approach
+	 * @param {THREE.Object3D} object Object3D with pivot
+	 * @return {Promise<number>} Index of the container node
+	 */
+	async _processNodeWithPivotAsync( object ) {
+
+		const json = this.json;
+		const options = this.options;
+		const nodeMap = this.nodeMap;
+
+		const pivot = object.pivot;
+
+		// Container node: holds position + pivot offset, rotation, scale
+		// Animations will target this node
+		const containerDef = {};
+
+		const rotation = object.quaternion.toArray();
+		const position = [
+			object.position.x + pivot.x,
+			object.position.y + pivot.y,
+			object.position.z + pivot.z
+		];
+		const scale = object.scale.toArray();
+
+		if ( ! equalArray( rotation, [ 0, 0, 0, 1 ] ) ) {
+
+			containerDef.rotation = rotation;
+
+		}
+
+		if ( ! equalArray( position, [ 0, 0, 0 ] ) ) {
+
+			containerDef.translation = position;
+
+		}
+
+		if ( ! equalArray( scale, [ 1, 1, 1 ] ) ) {
+
+			containerDef.scale = scale;
+
+		}
+
+		// Store pivot in extras for round-trip reconstruction
+		containerDef.extras = { pivot: pivot.toArray() };
+
+		if ( object.name !== '' ) containerDef.name = String( object.name );
+
+		this.serializeUserData( object, containerDef );
+
+		const containerIndex = json.nodes.push( containerDef ) - 1;
+
+		// Map original object to container so animations target it
+		nodeMap.set( object, containerIndex );
+
+		// Child node: holds mesh with -pivot offset
+		const childDef = {};
+
+		const childPosition = [ - pivot.x, - pivot.y, - pivot.z ];
+
+		if ( ! equalArray( childPosition, [ 0, 0, 0 ] ) ) {
+
+			childDef.translation = childPosition;
+
+		}
+
+		if ( object.isMesh || object.isLine || object.isPoints ) {
+
+			const meshIndex = await this.processMeshAsync( object );
+
+			if ( meshIndex !== null ) childDef.mesh = meshIndex;
+
+		} else if ( object.isCamera ) {
+
+			childDef.camera = this.processCamera( object );
+
+		}
+
+		if ( object.isSkinnedMesh ) this.skins.push( object );
+
+		const childIndex = json.nodes.push( childDef ) - 1;
+
+		// Build children array for container
+		const containerChildren = [ childIndex ];
+
+		// Process object's children as children of the child node
+		if ( object.children.length > 0 ) {
+
+			const grandchildren = [];
+
+			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+				const child = object.children[ i ];
+
+				if ( child.visible || options.onlyVisible === false ) {
+
+					const childNodeIndex = await this.processNodeAsync( child );
+
+					if ( childNodeIndex !== null ) grandchildren.push( childNodeIndex );
+
+				}
+
+			}
+
+			if ( grandchildren.length > 0 ) childDef.children = grandchildren;
+
+		}
+
+		containerDef.children = containerChildren;
+
+		await this._invokeAllAsync( function ( ext ) {
+
+			ext.writeNode && ext.writeNode( object, containerDef );
+
+		} );
+
+		return containerIndex;
+
+	}
+
 	/**
 	 * Process Scene
 	 * @param {Scene} scene Scene to process
@@ -3538,9 +3681,9 @@ GLTFExporter.Utils = {
 
 	},
 
-	toFloat32BufferAttribute: function ( srcAttribute ) {
+	toTypedBufferAttribute: function ( srcAttribute, TypedArray ) {
 
-		const dstAttribute = new BufferAttribute( new Float32Array( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
+		const dstAttribute = new BufferAttribute( new TypedArray( srcAttribute.count * srcAttribute.itemSize ), srcAttribute.itemSize, false );
 
 		if ( ! srcAttribute.normalized && ! srcAttribute.isInterleavedBufferAttribute ) {
 

package/examples/jsm/exporters/USDZExporter.js

@@ -501,7 +501,6 @@ function buildHierarchy( object, parentNode, materials, usedNames, files, option
 function buildXform( object, usedNames ) {
 
 	const name = getName( object, usedNames );
-	const transform = buildMatrix( object.matrix );
 
 	if ( object.matrix.determinant() < 0 ) {
 
@@ -514,8 +513,28 @@ function buildXform( object, usedNames ) {
 
 	const node = new USDNode( name, 'Xform' );
 
-	node.addProperty( `matrix4d xformOp:transform = ${transform}` );
-	node.addProperty( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
+	if ( object.pivot !== null ) {
+
+		// Export with pivot using separate transform ops
+		const p = object.position;
+		const q = object.quaternion;
+		const s = object.scale;
+		const piv = object.pivot;
+
+		node.addProperty( `float3 xformOp:translate = (${p.x.toPrecision( PRECISION )}, ${p.y.toPrecision( PRECISION )}, ${p.z.toPrecision( PRECISION )})` );
+		node.addProperty( `float3 xformOp:translate:pivot = (${piv.x.toPrecision( PRECISION )}, ${piv.y.toPrecision( PRECISION )}, ${piv.z.toPrecision( PRECISION )})` );
+		node.addProperty( `quatf xformOp:orient = (${q.w.toPrecision( PRECISION )}, ${q.x.toPrecision( PRECISION )}, ${q.y.toPrecision( PRECISION )}, ${q.z.toPrecision( PRECISION )})` );
+		node.addProperty( `float3 xformOp:scale = (${s.x.toPrecision( PRECISION )}, ${s.y.toPrecision( PRECISION )}, ${s.z.toPrecision( PRECISION )})` );
+		node.addProperty( 'uniform token[] xformOpOrder = ["xformOp:translate", "xformOp:translate:pivot", "xformOp:orient", "xformOp:scale", "!invert!xformOp:translate:pivot"]' );
+
+	} else {
+
+		// Export as single transform matrix
+		const transform = buildMatrix( object.matrix );
+		node.addProperty( `matrix4d xformOp:transform = ${transform}` );
+		node.addProperty( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
+
+	}
 
 	return node;
 

package/examples/jsm/geometries/DecalGeometry.js

@@ -35,7 +35,7 @@ class DecalGeometry extends BufferGeometry {
 	 * @param {Mesh} [mesh] - The base mesh the decal should be projected on.
 	 * @param {Vector3} [position] - The position of the decal projector.
 	 * @param {Euler} [orientation] - The orientation of the decal projector.
-	 * @param {Vector3} [size] - Tje scale of the decal projector.
+	 * @param {Vector3} [size] - The scale of the decal projector.
 	 */
 	constructor( mesh = new Mesh(), position = new Vector3(), orientation = new Euler(), size = new Vector3( 1, 1, 1 ) ) {
 

package/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 );
+
+	}
+
 }
 
 /**