@needle-tools/three 0.169.20-experimental.0 → 0.183.2-canary.0

package/examples/jsm/exporters/USDZExporter.js

@@ -9,85 +9,252 @@ import {
 	zipSync,
 } from '../libs/fflate.module.js';
 
-import { decompress } from './../utils/TextureUtils.js';
+class USDNode {
 
-class USDZExporter {
+	constructor( name, type = '', metadata = [], properties = [] ) {
 
-	parse( scene, onDone, onError, options ) {
+		this.name = name;
+		this.type = type;
+		this.metadata = metadata;
+		this.properties = properties;
+		this.children = [];
 
-		this.parseAsync( scene, options ).then( onDone ).catch( onError );
+	}
+
+	addMetadata( key, value ) {
+
+		this.metadata.push( { key, value } );
 
 	}
 
-	async parseAsync( scene, options = {} ) {
+	addProperty( property, metadata = [] ) {
 
-		options = Object.assign( {
-			ar: {
-				anchoring: { type: 'plane' },
-				planeAnchoring: { alignment: 'horizontal' }
-			},
-			includeAnchoringProperties: true,
-			quickLookCompatible: false,
-			maxTextureSize: 1024,
-		}, options );
+		this.properties.push( { property, metadata } );
 
-		const files = {};
-		const modelFileName = 'model.usda';
+	}
 
-		// model file should be first in USDZ archive so we init it here
-		files[ modelFileName ] = null;
+	addChild( child ) {
 
-		let output = buildHeader();
+		this.children.push( child );
 
-		output += buildSceneStart( options );
+	}
 
-		const materials = {};
-		const textures = {};
+	toString( indent = 0 ) {
 
-		scene.traverseVisible( ( object ) => {
+		const pad = '\t'.repeat( indent );
 
-			if ( object.isMesh ) {
+		const formattedMetadata = this.metadata.map( ( item ) => {
 
-				const geometry = object.geometry;
-				const material = object.material;
+			const key = item.key;
+			const value = item.value;
 
-				if ( material.isMeshStandardMaterial ) {
+			if ( Array.isArray( value ) ) {
 
-					const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usda';
+				const lines = [];
+				lines.push( `${key} = {` );
+				value.forEach( ( line ) => {
 
-					if ( ! ( geometryFileName in files ) ) {
+					lines.push( `${pad}\t\t${line}` );
 
-						const meshObject = buildMeshObject( geometry );
-						files[ geometryFileName ] = buildUSDFileAsString( meshObject );
+				} );
+				lines.push( `${pad}\t}` );
+				return lines.join( '\n' );
 
-					}
+			} else {
 
-					if ( ! ( material.uuid in materials ) ) {
+				return `${key} = ${value}`;
 
-						materials[ material.uuid ] = material;
+			}
 
-					}
+		} );
 
-					output += buildXform( object, geometry, material );
+		const meta = formattedMetadata.length
+			? ` (\n${formattedMetadata
+				.map( ( l ) => `${pad}\t${l}` )
+				.join( '\n' )}\n${pad})`
+			: '';
 
-				} else {
+		const properties = this.properties.map( ( l ) => {
 
-					console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', object );
+			const property = l.property;
+			const metadata = l.metadata.length
+				? ` (\n${l.metadata.map( ( m ) => `${pad}\t\t${m}` ).join( '\n' )}\n${pad}\t)`
+				: '';
+			return `${pad}\t${property}${metadata}`;
 
-				}
+		} );
+		const children = this.children.map( ( c ) => c.toString( indent + 1 ) );
+
+		const bodyLines = [];
 
-			} else if ( object.isCamera ) {
+		if ( properties.length > 0 ) {
 
-				output += buildCamera( object );
+			bodyLines.push( ...properties );
+
+		}
+
+		if ( children.length > 0 ) {
+
+			if ( properties.length > 0 ) {
+
+				bodyLines.push( '' );
 
 			}
 
-		} );
+			for ( let i = 0; i < children.length; i ++ ) {
 
+				bodyLines.push( children[ i ] );
+				if ( i < children.length - 1 ) {
+
+					bodyLines.push( '' );
+
+				}
 
-		output += buildSceneEnd();
+			}
+
+		}
+
+		const bodyContent = bodyLines.join( '\n' );
+
+		const type = this.type ? this.type + ' ' : '';
+
+		return `${pad}def ${type}"${this.name}"${meta}\n${pad}{\n${bodyContent}\n${pad}}`;
+
+	}
+
+}
+
+/**
+ * An exporter for USDZ.
+ *
+ * ```js
+ * const exporter = new USDZExporter();
+ * const arraybuffer = await exporter.parseAsync( scene );
+ * ```
+ *
+ * @three_import import { USDZExporter } from 'three/addons/exporters/USDZExporter.js';
+ */
+class USDZExporter {
+
+	/**
+	 * Constructs a new USDZ exporter.
+	 */
+	constructor() {
+
+		/**
+		 * A reference to a texture utils module.
+		 *
+		 * @type {?(WebGLTextureUtils|WebGPUTextureUtils)}
+		 * @default null
+		 */
+		this.textureUtils = null;
+
+	}
+
+	/**
+	 * Sets the texture utils for this exporter. Only relevant when compressed textures have to be exported.
+	 *
+	 * Depending on whether you use {@link WebGLRenderer} or {@link WebGPURenderer}, you must inject the
+	 * corresponding texture utils {@link WebGLTextureUtils} or {@link WebGPUTextureUtils}.
+	 *
+	 * @param {WebGLTextureUtils|WebGPUTextureUtils} utils - The texture utils.
+	 */
+	setTextureUtils( utils ) {
+
+		this.textureUtils = utils;
+
+	}
+
+	/**
+	 * Parse the given 3D object and generates the USDZ output.
+	 *
+	 * @param {Object3D} scene - The 3D object to export.
+	 * @param {USDZExporter~OnDone} onDone - A callback function that is executed when the export has finished.
+	 * @param {USDZExporter~OnError} onError - A callback function that is executed when an error happens.
+	 * @param {USDZExporter~Options} options - The export options.
+	 */
+	parse( scene, onDone, onError, options ) {
+
+		this.parseAsync( scene, options ).then( onDone ).catch( onError );
+
+	}
+
+	/**
+	 * Async version of {@link USDZExporter#parse}.
+	 *
+	 * @async
+	 * @param {Object3D} scene - The 3D object to export.
+	 * @param {USDZExporter~Options} options - The export options.
+	 * @return {Promise<ArrayBuffer>} A Promise that resolved with the exported USDZ data.
+	 */
+	async parseAsync( scene, options = {} ) {
+
+		options = Object.assign(
+			{
+				ar: {
+					anchoring: { type: 'plane' },
+					planeAnchoring: { alignment: 'horizontal' },
+				},
+				includeAnchoringProperties: true,
+				onlyVisible: true,
+				quickLookCompatible: false,
+				maxTextureSize: 1024,
+			},
+			options
+		);
 
-		output += buildMaterials( materials, textures, options.quickLookCompatible );
+		const usedNames = new Set();
+
+		const files = {};
+		const modelFileName = 'model.usda';
+
+		// model file should be first in USDZ archive so we init it here
+		files[ modelFileName ] = null;
+
+		const root = new USDNode( 'Root', 'Xform' );
+		const scenesNode = new USDNode( 'Scenes', 'Scope' );
+		scenesNode.addMetadata( 'kind', '"sceneLibrary"' );
+		root.addChild( scenesNode );
+
+		const sceneName = 'Scene';
+		const sceneNode = new USDNode( sceneName, 'Xform' );
+		sceneNode.addMetadata( 'customData', [
+			'bool preliminary_collidesWithEnvironment = 0',
+			`string sceneName = "${sceneName}"`,
+		] );
+		sceneNode.addMetadata( 'sceneName', `"${sceneName}"` );
+		if ( options.includeAnchoringProperties ) {
+
+			sceneNode.addProperty(
+				`token preliminary:anchoring:type = "${options.ar.anchoring.type}"`
+			);
+			sceneNode.addProperty(
+				`token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"`
+			);
+
+		}
+
+		scenesNode.addChild( sceneNode );
+
+		let output;
+
+		const materials = {};
+		const textures = {};
+
+		buildHierarchy( scene, sceneNode, materials, usedNames, files, options );
+
+		const materialsNode = buildMaterials(
+			materials,
+			textures,
+			options.quickLookCompatible
+		);
+
+		output =
+			buildHeader() +
+			'\n' +
+			root.toString() +
+			'\n\n' +
+			materialsNode.toString();
 
 		files[ modelFileName ] = strToU8( output );
 		output = null;
@@ -98,14 +265,32 @@ class USDZExporter {
 
 			if ( texture.isCompressedTexture === true ) {
 
-				texture = decompress( texture );
+				if ( this.textureUtils === null ) {
+
+					throw new Error(
+						'THREE.USDZExporter: setTextureUtils() must be called to process compressed textures.'
+					);
+
+				} else {
+
+					texture = await this.textureUtils.decompress( texture );
+
+				}
 
 			}
 
-			const canvas = imageToCanvas( texture.image, texture.flipY, options.maxTextureSize );
-			const blob = await new Promise( resolve => canvas.toBlob( resolve, 'image/png', 1 ) );
+			const canvas = imageToCanvas(
+				texture.image,
+				texture.flipY,
+				options.maxTextureSize
+			);
+			const blob = await new Promise( ( resolve ) =>
+				canvas.toBlob( resolve, 'image/png', 1 )
+			);
 
-			files[ `textures/Texture_${ id }.png` ] = new Uint8Array( await blob.arrayBuffer() );
+			files[ `textures/Texture_${id}.png` ] = new Uint8Array(
+				await blob.arrayBuffer()
+			);
 
 		}
 
@@ -142,12 +327,53 @@ class USDZExporter {
 
 }
 
+function getName( object, namesSet ) {
+
+	let name = object.name;
+	name = name.replace( /[^A-Za-z0-9_]/g, '' );
+	if ( /^[0-9]/.test( name ) ) {
+
+		name = '_' + name;
+
+	}
+
+	if ( name === '' ) {
+
+		if ( object.isCamera ) {
+
+			name = 'Camera';
+
+		} else {
+
+			name = 'Object';
+
+		}
+
+	}
+
+	if ( namesSet.has( name ) ) {
+
+		name = name + '_' + object.id;
+
+	}
+
+	namesSet.add( name );
+
+	return name;
+
+}
+
 function imageToCanvas( image, flipY, maxTextureSize ) {
 
-	if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
-		( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
-		( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ||
-		( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
+	if (
+		( typeof HTMLImageElement !== 'undefined' &&
+			image instanceof HTMLImageElement ) ||
+		( typeof HTMLCanvasElement !== 'undefined' &&
+			image instanceof HTMLCanvasElement ) ||
+		( typeof OffscreenCanvas !== 'undefined' &&
+			image instanceof OffscreenCanvas ) ||
+		( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap )
+	) {
 
 		const scale = maxTextureSize / Math.max( image.width, image.height );
 
@@ -172,7 +398,9 @@ function imageToCanvas( image, flipY, maxTextureSize ) {
 
 	} else {
 
-		throw new Error( 'THREE.USDZExporter: No valid image data found. Unable to process texture.' );
+		throw new Error(
+			'THREE.USDZExporter: No valid image data found. Unable to process texture.'
+		);
 
 	}
 
@@ -193,79 +421,140 @@ function buildHeader() {
 	metersPerUnit = 1
 	upAxis = "Y"
 )
-
 `;
 
 }
 
-function buildSceneStart( options ) {
-
-	const alignment = options.includeAnchoringProperties === true ? `
-		token preliminary:anchoring:type = "${options.ar.anchoring.type}"
-		token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
-	` : '';
-	return `def Xform "Root"
-{
-	def Scope "Scenes" (
-		kind = "sceneLibrary"
-	)
-	{
-		def Xform "Scene" (
-			customData = {
-				bool preliminary_collidesWithEnvironment = 0
-				string sceneName = "Scene"
+// Xform
+
+function buildHierarchy( object, parentNode, materials, usedNames, files, options ) {
+
+	for ( let i = 0, l = object.children.length; i < l; i ++ ) {
+
+		const child = object.children[ i ];
+
+		if ( child.visible === false && options.onlyVisible === true ) continue;
+
+		let childNode;
+
+		if ( child.isMesh ) {
+
+			const geometry = child.geometry;
+			const material = child.material;
+
+			if ( material.isMeshStandardMaterial ) {
+
+				const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usda';
+
+				if ( ! ( geometryFileName in files ) ) {
+
+					const meshObject = buildMeshObject( geometry );
+					files[ geometryFileName ] = strToU8(
+						buildHeader() + '\n' + meshObject.toString()
+					);
+
+				}
+
+				if ( ! ( material.uuid in materials ) ) {
+
+					materials[ material.uuid ] = material;
+
+				}
+
+				childNode = buildMesh(
+					child,
+					geometry,
+					materials[ material.uuid ],
+					usedNames
+				);
+
+			} else {
+
+				console.warn(
+					'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)',
+					child
+				);
+
 			}
-			sceneName = "Scene"
-		)
-		{${alignment}
-`;
 
-}
+		} else if ( child.isCamera ) {
+
+			childNode = buildCamera( child, usedNames );
 
-function buildSceneEnd() {
+		} else {
+
+			childNode = buildXform( child, usedNames );
 
-	return `
 		}
+
+		if ( childNode ) {
+
+			parentNode.addChild( childNode );
+			buildHierarchy( child, childNode, materials, usedNames, files, options );
+
+		}
+
 	}
+
 }
 
-`;
+function buildXform( object, usedNames ) {
 
-}
+	const name = getName( object, usedNames );
 
-function buildUSDFileAsString( dataToInsert ) {
+	if ( object.matrix.determinant() < 0 ) {
 
-	let output = buildHeader();
-	output += dataToInsert;
-	return strToU8( output );
+		console.warn(
+			'THREE.USDZExporter: USDZ does not support negative scales',
+			object
+		);
 
-}
+	}
 
-// Xform
+	const node = new USDNode( name, 'Xform' );
+
+	if ( object.pivot !== null ) {
 
-function buildXform( object, geometry, material ) {
+		// Export with pivot using separate transform ops
+		const p = object.position;
+		const q = object.quaternion;
+		const s = object.scale;
+		const piv = object.pivot;
 
-	const name = 'Object_' + object.id;
-	const transform = buildMatrix( object.matrixWorld );
+		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"]' );
 
-	if ( object.matrixWorld.determinant() < 0 ) {
+	} else {
 
-		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', object );
+		// Export as single transform matrix
+		const transform = buildMatrix( object.matrix );
+		node.addProperty( `matrix4d xformOp:transform = ${transform}` );
+		node.addProperty( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
 
 	}
 
-	return `def Xform "${ name }" (
-	prepend references = @./geometries/Geometry_${ geometry.id }.usda@</Geometry>
-	prepend apiSchemas = ["MaterialBindingAPI"]
-)
-{
-	matrix4d xformOp:transform = ${ transform }
-	uniform token[] xformOpOrder = ["xformOp:transform"]
+	return node;
 
-	rel material:binding = </Materials/Material_${ material.id }>
 }
 
-`;
+function buildMesh( object, geometry, material, usedNames ) {
+
+	const node = buildXform( object, usedNames );
+
+	node.addMetadata(
+		'prepend references',
+		`@./geometries/Geometry_${geometry.id}.usda@</Geometry>`
+	);
+	node.addMetadata( 'prepend apiSchemas', '["MaterialBindingAPI"]' );
+
+	node.addProperty(
+		`rel material:binding = </Materials/Material_${material.id}>`
+	);
+
+	return node;
 
 }
 
@@ -273,13 +562,18 @@ function buildMatrix( matrix ) {
 
 	const array = matrix.elements;
 
-	return `( ${ buildMatrixRow( array, 0 ) }, ${ buildMatrixRow( array, 4 ) }, ${ buildMatrixRow( array, 8 ) }, ${ buildMatrixRow( array, 12 ) } )`;
+	return `( ${buildMatrixRow( array, 0 )}, ${buildMatrixRow(
+		array,
+		4
+	)}, ${buildMatrixRow( array, 8 )}, ${buildMatrixRow( array, 12 )} )`;
 
 }
 
 function buildMatrixRow( array, offset ) {
 
-	return `(${ array[ offset + 0 ] }, ${ array[ offset + 1 ] }, ${ array[ offset + 2 ] }, ${ array[ offset + 3 ] })`;
+	return `(${array[ offset + 0 ]}, ${array[ offset + 1 ]}, ${array[ offset + 2 ]}, ${
+		array[ offset + 3 ]
+	})`;
 
 }
 
@@ -287,43 +581,81 @@ function buildMatrixRow( array, offset ) {
 
 function buildMeshObject( geometry ) {
 
-	const mesh = buildMesh( geometry );
-	return `
-def "Geometry"
-{
-${mesh}
-}
-`;
+	const node = new USDNode( 'Geometry' );
+
+	const meshNode = buildMeshNode( geometry );
+	node.addChild( meshNode );
+
+	return node;
 
 }
 
-function buildMesh( geometry ) {
+function buildMeshNode( geometry ) {
 
 	const name = 'Geometry';
 	const attributes = geometry.attributes;
 	const count = attributes.position.count;
 
-	return `
-	def Mesh "${ name }"
-	{
-		int[] faceVertexCounts = [${ buildMeshVertexCount( geometry ) }]
-		int[] faceVertexIndices = [${ buildMeshVertexIndices( geometry ) }]
-		normal3f[] normals = [${ buildVector3Array( attributes.normal, count )}] (
-			interpolation = "vertex"
-		)
-		point3f[] points = [${ buildVector3Array( attributes.position, count )}]
-${ buildPrimvars( attributes ) }
-		uniform token subdivisionScheme = "none"
+	const node = new USDNode( name, 'Mesh' );
+
+	node.addProperty(
+		`int[] faceVertexCounts = [${buildMeshVertexCount( geometry )}]`
+	);
+	node.addProperty(
+		`int[] faceVertexIndices = [${buildMeshVertexIndices( geometry )}]`
+	);
+	node.addProperty(
+		`normal3f[] normals = [${buildVector3Array( attributes.normal, count )}]`,
+		[ 'interpolation = "vertex"' ]
+	);
+	node.addProperty(
+		`point3f[] points = [${buildVector3Array( attributes.position, count )}]`
+	);
+
+	for ( let i = 0; i < 4; i ++ ) {
+
+		const id = i > 0 ? i : '';
+		const attribute = attributes[ 'uv' + id ];
+		if ( attribute !== undefined ) {
+
+			node.addProperty(
+				`texCoord2f[] primvars:st${id} = [${buildVector2Array( attribute )}]`,
+				[ 'interpolation = "vertex"' ]
+			);
+
+		}
+
 	}
-`;
+
+	const colorAttribute = attributes.color;
+	if ( colorAttribute !== undefined ) {
+
+		node.addProperty(
+			`color3f[] primvars:displayColor = [${buildVector3Array(
+				colorAttribute,
+				count
+			)}]`,
+			[ 'interpolation = "vertex"' ]
+		);
+
+	}
+
+	node.addProperty( 'uniform token subdivisionScheme = "none"' );
+
+	return node;
 
 }
 
 function buildMeshVertexCount( geometry ) {
 
-	const count = geometry.index !== null ? geometry.index.count : geometry.attributes.position.count;
+	const count =
+		geometry.index !== null
+			? geometry.index.count
+			: geometry.attributes.position.count;
 
-	return Array( count / 3 ).fill( 3 ).join( ', ' );
+	return Array( count / 3 )
+		.fill( 3 )
+		.join( ', ' );
 
 }
 
@@ -373,7 +705,11 @@ function buildVector3Array( attribute, count ) {
 		const y = attribute.getY( i );
 		const z = attribute.getZ( i );
 
-		array.push( `(${ x.toPrecision( PRECISION ) }, ${ y.toPrecision( PRECISION ) }, ${ z.toPrecision( PRECISION ) })` );
+		array.push(
+			`(${x.toPrecision( PRECISION )}, ${y.toPrecision(
+				PRECISION
+			)}, ${z.toPrecision( PRECISION )})`
+		);
 
 	}
 
@@ -390,7 +726,9 @@ function buildVector2Array( attribute ) {
 		const x = attribute.getX( i );
 		const y = attribute.getY( i );
 
-		array.push( `(${ x.toPrecision( PRECISION ) }, ${ 1 - y.toPrecision( PRECISION ) })` );
+		array.push(
+			`(${x.toPrecision( PRECISION )}, ${1 - y.toPrecision( PRECISION )})`
+		);
 
 	}
 
@@ -398,65 +736,23 @@ function buildVector2Array( attribute ) {
 
 }
 
-function buildPrimvars( attributes ) {
-
-	let string = '';
-
-	for ( let i = 0; i < 4; i ++ ) {
-
-		const id = ( i > 0 ? i : '' );
-		const attribute = attributes[ 'uv' + id ];
-
-		if ( attribute !== undefined ) {
-
-			string += `
-		texCoord2f[] primvars:st${ id } = [${ buildVector2Array( attribute )}] (
-			interpolation = "vertex"
-		)`;
-
-		}
-
-	}
-
-	// vertex colors
-
-	const colorAttribute = attributes.color;
-
-	if ( colorAttribute !== undefined ) {
-
-		const count = colorAttribute.count;
-
-		string += `
-	color3f[] primvars:displayColor = [${buildVector3Array( colorAttribute, count )}] (
-		interpolation = "vertex"
-		)`;
-
-	}
-
-	return string;
-
-}
-
 // Materials
 
 function buildMaterials( materials, textures, quickLookCompatible = false ) {
 
-	const array = [];
+	const materialsNode = new USDNode( 'Materials' );
 
 	for ( const uuid in materials ) {
 
 		const material = materials[ uuid ];
 
-		array.push( buildMaterial( material, textures, quickLookCompatible ) );
+		materialsNode.addChild(
+			buildMaterial( material, textures, quickLookCompatible )
+		);
 
 	}
 
-	return `def "Materials"
-{
-${ array.join( '' ) }
-}
-
-`;
+	return materialsNode;
 
 }
 
@@ -464,11 +760,9 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
 
-	const pad = '			';
-	const inputs = [];
-	const samplers = [];
+	const materialNode = new USDNode( `Material_${material.id}`, 'Material' );
 
-	function buildTexture( texture, mapType, color ) {
+	function buildTextureNodes( texture, mapType, color ) {
 
 		const id = texture.source.id + '_' + texture.flipY;
 
@@ -479,7 +773,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 		const WRAPPINGS = {
 			1000: 'repeat', // RepeatWrapping
 			1001: 'clamp', // ClampToEdgeWrapping
-			1002: 'mirror' // MirroredRepeatWrapping
+			1002: 'mirror', // MirroredRepeatWrapping
 		};
 
 		const repeat = texture.repeat.clone();
@@ -514,135 +808,255 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		}
 
-		return `
-		def Shader "PrimvarReader_${ mapType }"
-		{
-			uniform token info:id = "UsdPrimvarReader_float2"
-			float2 inputs:fallback = (0.0, 0.0)
-			token inputs:varname = "${ uv }"
-			float2 outputs:result
+		const primvarReaderNode = new USDNode( `PrimvarReader_${mapType}`, 'Shader' );
+		primvarReaderNode.addProperty(
+			'uniform token info:id = "UsdPrimvarReader_float2"'
+		);
+		primvarReaderNode.addProperty( 'float2 inputs:fallback = (0.0, 0.0)' );
+		primvarReaderNode.addProperty( `string inputs:varname = "${uv}"` );
+		primvarReaderNode.addProperty( 'float2 outputs:result' );
+
+		const transform2dNode = new USDNode( `Transform2d_${mapType}`, 'Shader' );
+		transform2dNode.addProperty( 'uniform token info:id = "UsdTransform2d"' );
+		transform2dNode.addProperty(
+			`float2 inputs:in.connect = </Materials/Material_${material.id}/PrimvarReader_${mapType}.outputs:result>`
+		);
+		transform2dNode.addProperty(
+			`float inputs:rotation = ${( rotation * ( 180 / Math.PI ) ).toFixed(
+				PRECISION
+			)}`
+		);
+		transform2dNode.addProperty(
+			`float2 inputs:scale = ${buildVector2( repeat )}`
+		);
+		transform2dNode.addProperty(
+			`float2 inputs:translation = ${buildVector2( offset )}`
+		);
+		transform2dNode.addProperty( 'float2 outputs:result' );
+
+		const textureNode = new USDNode(
+			`Texture_${texture.id}_${mapType}`,
+			'Shader'
+		);
+		textureNode.addProperty( 'uniform token info:id = "UsdUVTexture"' );
+		textureNode.addProperty( `asset inputs:file = @textures/Texture_${id}.png@` );
+		textureNode.addProperty(
+			`float2 inputs:st.connect = </Materials/Material_${material.id}/Transform2d_${mapType}.outputs:result>`
+		);
+
+		if ( color !== undefined ) {
+
+			textureNode.addProperty( `float4 inputs:scale = ${buildColor4( color )}` );
+
 		}
 
-		def Shader "Transform2d_${ mapType }"
-		{
-			uniform token info:id = "UsdTransform2d"
-			token inputs:in.connect = </Materials/Material_${ material.id }/PrimvarReader_${ mapType }.outputs:result>
-			float inputs:rotation = ${ ( rotation * ( 180 / Math.PI ) ).toFixed( PRECISION ) }
-			float2 inputs:scale = ${ buildVector2( repeat ) }
-			float2 inputs:translation = ${ buildVector2( offset ) }
-			float2 outputs:result
+		if ( mapType === 'normal' ) {
+
+			textureNode.addProperty( 'float4 inputs:scale = (2, 2, 2, 1)' );
+			textureNode.addProperty( 'float4 inputs:bias = (-1, -1, -1, 0)' );
+
 		}
 
-		def Shader "Texture_${ texture.id }_${ mapType }"
-		{
-			uniform token info:id = "UsdUVTexture"
-			asset inputs:file = @textures/Texture_${ id }.png@
-			float2 inputs:st.connect = </Materials/Material_${ material.id }/Transform2d_${ mapType }.outputs:result>
-			${ color !== undefined ? 'float4 inputs:scale = ' + buildColor4( color ) : '' }
-			token inputs:sourceColorSpace = "${ texture.colorSpace === NoColorSpace ? 'raw' : 'sRGB' }"
-			token inputs:wrapS = "${ WRAPPINGS[ texture.wrapS ] }"
-			token inputs:wrapT = "${ WRAPPINGS[ texture.wrapT ] }"
-			float outputs:r
-			float outputs:g
-			float outputs:b
-			float3 outputs:rgb
-			${ material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : '' }
-		}`;
+		textureNode.addProperty(
+			`token inputs:sourceColorSpace = "${
+				texture.colorSpace === NoColorSpace ? 'raw' : 'sRGB'
+			}"`
+		);
+		textureNode.addProperty(
+			`token inputs:wrapS = "${WRAPPINGS[ texture.wrapS ]}"`
+		);
+		textureNode.addProperty(
+			`token inputs:wrapT = "${WRAPPINGS[ texture.wrapT ]}"`
+		);
+		textureNode.addProperty( 'float outputs:r' );
+		textureNode.addProperty( 'float outputs:g' );
+		textureNode.addProperty( 'float outputs:b' );
+		textureNode.addProperty( 'float3 outputs:rgb' );
+
+		if ( material.transparent || material.alphaTest > 0.0 ) {
+
+			textureNode.addProperty( 'float outputs:a' );
 
-	}
+		}
+
+		return [ primvarReaderNode, transform2dNode, textureNode ];
 
+	}
 
 	if ( material.side === DoubleSide ) {
 
-		console.warn( 'THREE.USDZExporter: USDZ does not support double sided materials', material );
+		console.warn(
+			'THREE.USDZExporter: USDZ does not support double sided materials',
+			material
+		);
 
 	}
 
+	const previewSurfaceNode = new USDNode( 'PreviewSurface', 'Shader' );
+	previewSurfaceNode.addProperty( 'uniform token info:id = "UsdPreviewSurface"' );
+
 	if ( material.map?.image ) {
 
-		inputs.push( `${ pad }color3f inputs:diffuseColor.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:rgb>` );
+		previewSurfaceNode.addProperty(
+			`color3f inputs:diffuseColor.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:rgb>`
+		);
 
 		if ( material.transparent ) {
 
-			inputs.push( `${ pad }float inputs:opacity.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:a>` );
+			previewSurfaceNode.addProperty(
+				`float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>`
+			);
 
 		} else if ( material.alphaTest > 0.0 ) {
 
-			inputs.push( `${ pad }float inputs:opacity.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:a>` );
-			inputs.push( `${ pad }float inputs:opacityThreshold = ${material.alphaTest}` );
+			previewSurfaceNode.addProperty(
+				`float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>`
+			);
+			previewSurfaceNode.addProperty(
+				`float inputs:opacityThreshold = ${material.alphaTest}`
+			);
 
 		}
 
-		samplers.push( buildTexture( material.map, 'diffuse', material.color ) );
+		const textureNodes = buildTextureNodes(
+			material.map,
+			'diffuse',
+			material.color
+		);
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	} else {
 
-		inputs.push( `${ pad }color3f inputs:diffuseColor = ${ buildColor( material.color ) }` );
+		previewSurfaceNode.addProperty(
+			`color3f inputs:diffuseColor = ${buildColor( material.color )}`
+		);
 
 	}
 
 	if ( material.emissiveMap?.image ) {
 
-		inputs.push( `${ pad }color3f inputs:emissiveColor.connect = </Materials/Material_${ material.id }/Texture_${ material.emissiveMap.id }_emissive.outputs:rgb>` );
-
-		samplers.push( buildTexture( material.emissiveMap, 'emissive', new Color( material.emissive.r * material.emissiveIntensity, material.emissive.g * material.emissiveIntensity, material.emissive.b * material.emissiveIntensity ) ) );
+		previewSurfaceNode.addProperty(
+			`color3f inputs:emissiveColor.connect = </Materials/Material_${material.id}/Texture_${material.emissiveMap.id}_emissive.outputs:rgb>`
+		);
+
+		const emissiveColor = new Color(
+			material.emissive.r * material.emissiveIntensity,
+			material.emissive.g * material.emissiveIntensity,
+			material.emissive.b * material.emissiveIntensity
+		);
+		const textureNodes = buildTextureNodes(
+			material.emissiveMap,
+			'emissive',
+			emissiveColor
+		);
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	} else if ( material.emissive.getHex() > 0 ) {
 
-		inputs.push( `${ pad }color3f inputs:emissiveColor = ${ buildColor( material.emissive ) }` );
+		previewSurfaceNode.addProperty(
+			`color3f inputs:emissiveColor = ${buildColor( material.emissive )}`
+		);
 
 	}
 
 	if ( material.normalMap?.image ) {
 
-		inputs.push( `${ pad }normal3f inputs:normal.connect = </Materials/Material_${ material.id }/Texture_${ material.normalMap.id }_normal.outputs:rgb>` );
+		previewSurfaceNode.addProperty(
+			`normal3f inputs:normal.connect = </Materials/Material_${material.id}/Texture_${material.normalMap.id}_normal.outputs:rgb>`
+		);
 
-		samplers.push( buildTexture( material.normalMap, 'normal' ) );
+		const textureNodes = buildTextureNodes( material.normalMap, 'normal' );
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	}
 
 	if ( material.aoMap?.image ) {
 
-		inputs.push( `${ pad }float inputs:occlusion.connect = </Materials/Material_${ material.id }/Texture_${ material.aoMap.id }_occlusion.outputs:r>` );
-
-		samplers.push( buildTexture( material.aoMap, 'occlusion', new Color( material.aoMapIntensity, material.aoMapIntensity, material.aoMapIntensity ) ) );
+		previewSurfaceNode.addProperty(
+			`float inputs:occlusion.connect = </Materials/Material_${material.id}/Texture_${material.aoMap.id}_occlusion.outputs:r>`
+		);
+
+		const aoColor = new Color(
+			material.aoMapIntensity,
+			material.aoMapIntensity,
+			material.aoMapIntensity
+		);
+		const textureNodes = buildTextureNodes(
+			material.aoMap,
+			'occlusion',
+			aoColor
+		);
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	}
 
 	if ( material.roughnessMap?.image && material.roughness === 1 ) {
 
-		inputs.push( `${ pad }float inputs:roughness.connect = </Materials/Material_${ material.id }/Texture_${ material.roughnessMap.id }_roughness.outputs:g>` );
-
-		samplers.push( buildTexture( material.roughnessMap, 'roughness', new Color( material.roughness, material.roughness, material.roughness ) ) );
+		previewSurfaceNode.addProperty(
+			`float inputs:roughness.connect = </Materials/Material_${material.id}/Texture_${material.roughnessMap.id}_roughness.outputs:g>`
+		);
+
+		const roughnessColor = new Color(
+			material.roughness,
+			material.roughness,
+			material.roughness
+		);
+		const textureNodes = buildTextureNodes(
+			material.roughnessMap,
+			'roughness',
+			roughnessColor
+		);
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	} else {
 
-		inputs.push( `${ pad }float inputs:roughness = ${ material.roughness }` );
+		previewSurfaceNode.addProperty(
+			`float inputs:roughness = ${material.roughness}`
+		);
 
 	}
 
 	if ( material.metalnessMap?.image && material.metalness === 1 ) {
 
-		inputs.push( `${ pad }float inputs:metallic.connect = </Materials/Material_${ material.id }/Texture_${ material.metalnessMap.id }_metallic.outputs:b>` );
-
-		samplers.push( buildTexture( material.metalnessMap, 'metallic', new Color( material.metalness, material.metalness, material.metalness ) ) );
+		previewSurfaceNode.addProperty(
+			`float inputs:metallic.connect = </Materials/Material_${material.id}/Texture_${material.metalnessMap.id}_metallic.outputs:b>`
+		);
+
+		const metalnessColor = new Color(
+			material.metalness,
+			material.metalness,
+			material.metalness
+		);
+		const textureNodes = buildTextureNodes(
+			material.metalnessMap,
+			'metallic',
+			metalnessColor
+		);
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	} else {
 
-		inputs.push( `${ pad }float inputs:metallic = ${ material.metalness }` );
+		previewSurfaceNode.addProperty(
+			`float inputs:metallic = ${material.metalness}`
+		);
 
 	}
 
 	if ( material.alphaMap?.image ) {
 
-		inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
-		inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );
+		previewSurfaceNode.addProperty(
+			`float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>`
+		);
+		previewSurfaceNode.addProperty( 'float inputs:opacityThreshold = 0.0001' );
 
-		samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
+		const textureNodes = buildTextureNodes( material.alphaMap, 'opacity' );
+		textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 	} else {
 
-		inputs.push( `${pad}float inputs:opacity = ${material.opacity}` );
+		previewSurfaceNode.addProperty(
+			`float inputs:opacity = ${material.opacity}`
+		);
 
 	}
 
@@ -650,115 +1064,191 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		if ( material.clearcoatMap !== null ) {
 
-			inputs.push( `${pad}float inputs:clearcoat.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatMap.id}_clearcoat.outputs:r>` );
-			samplers.push( buildTexture( material.clearcoatMap, 'clearcoat', new Color( material.clearcoat, material.clearcoat, material.clearcoat ) ) );
+			previewSurfaceNode.addProperty(
+				`float inputs:clearcoat.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatMap.id}_clearcoat.outputs:r>`
+			);
+
+			const clearcoatColor = new Color(
+				material.clearcoat,
+				material.clearcoat,
+				material.clearcoat
+			);
+			const textureNodes = buildTextureNodes(
+				material.clearcoatMap,
+				'clearcoat',
+				clearcoatColor
+			);
+			textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 		} else {
 
-			inputs.push( `${pad}float inputs:clearcoat = ${material.clearcoat}` );
+			previewSurfaceNode.addProperty(
+				`float inputs:clearcoat = ${material.clearcoat}`
+			);
 
 		}
 
 		if ( material.clearcoatRoughnessMap !== null ) {
 
-			inputs.push( `${pad}float inputs:clearcoatRoughness.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatRoughnessMap.id}_clearcoatRoughness.outputs:g>` );
-			samplers.push( buildTexture( material.clearcoatRoughnessMap, 'clearcoatRoughness', new Color( material.clearcoatRoughness, material.clearcoatRoughness, material.clearcoatRoughness ) ) );
+			previewSurfaceNode.addProperty(
+				`float inputs:clearcoatRoughness.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatRoughnessMap.id}_clearcoatRoughness.outputs:g>`
+			);
+
+			const clearcoatRoughnessColor = new Color(
+				material.clearcoatRoughness,
+				material.clearcoatRoughness,
+				material.clearcoatRoughness
+			);
+			const textureNodes = buildTextureNodes(
+				material.clearcoatRoughnessMap,
+				'clearcoatRoughness',
+				clearcoatRoughnessColor
+			);
+			textureNodes.forEach( ( node ) => materialNode.addChild( node ) );
 
 		} else {
 
-			inputs.push( `${pad}float inputs:clearcoatRoughness = ${material.clearcoatRoughness}` );
+			previewSurfaceNode.addProperty(
+				`float inputs:clearcoatRoughness = ${material.clearcoatRoughness}`
+			);
 
 		}
 
-		inputs.push( `${ pad }float inputs:ior = ${ material.ior }` );
+		previewSurfaceNode.addProperty( `float inputs:ior = ${material.ior}` );
 
 	}
 
-	return `
-	def Material "Material_${ material.id }"
-	{
-		def Shader "PreviewSurface"
-		{
-			uniform token info:id = "UsdPreviewSurface"
-${ inputs.join( '\n' ) }
-			int inputs:useSpecularWorkflow = 0
-			token outputs:surface
-		}
+	previewSurfaceNode.addProperty( 'int inputs:useSpecularWorkflow = 0' );
+	previewSurfaceNode.addProperty( 'token outputs:surface' );
 
-		token outputs:surface.connect = </Materials/Material_${ material.id }/PreviewSurface.outputs:surface>
+	materialNode.addChild( previewSurfaceNode );
 
-${ samplers.join( '\n' ) }
+	materialNode.addProperty(
+		`token outputs:surface.connect = </Materials/Material_${material.id}/PreviewSurface.outputs:surface>`
+	);
 
-	}
-`;
+	return materialNode;
 
 }
 
 function buildColor( color ) {
 
-	return `(${ color.r }, ${ color.g }, ${ color.b })`;
+	return `(${color.r}, ${color.g}, ${color.b})`;
 
 }
 
 function buildColor4( color ) {
 
-	return `(${ color.r }, ${ color.g }, ${ color.b }, 1.0)`;
+	return `(${color.r}, ${color.g}, ${color.b}, 1.0)`;
 
 }
 
 function buildVector2( vector ) {
 
-	return `(${ vector.x }, ${ vector.y })`;
+	return `(${vector.x}, ${vector.y})`;
 
 }
 
+function buildCamera( camera, usedNames ) {
 
-function buildCamera( camera ) {
+	const name = getName( camera, usedNames );
 
-	const name = camera.name ? camera.name : 'Camera_' + camera.id;
+	const transform = buildMatrix( camera.matrix );
 
-	const transform = buildMatrix( camera.matrixWorld );
+	if ( camera.matrix.determinant() < 0 ) {
 
-	if ( camera.matrixWorld.determinant() < 0 ) {
-
-		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', camera );
+		console.warn(
+			'THREE.USDZExporter: USDZ does not support negative scales',
+			camera
+		);
 
 	}
 
+	const node = new USDNode( name, 'Camera' );
+	node.addProperty( `matrix4d xformOp:transform = ${transform}` );
+	node.addProperty( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
+
+	const projection = camera.isOrthographicCamera
+		? 'orthographic'
+		: 'perspective';
+	node.addProperty( `token projection = "${projection}"` );
+
+	const clippingRange = `(${camera.near.toPrecision(
+		PRECISION
+	)}, ${camera.far.toPrecision( PRECISION )})`;
+	node.addProperty( `float2 clippingRange = ${clippingRange}` );
+
+	let horizontalAperture;
 	if ( camera.isOrthographicCamera ) {
 
-		return `def Camera "${name}"
-		{
-			matrix4d xformOp:transform = ${ transform }
-			uniform token[] xformOpOrder = ["xformOp:transform"]
+		horizontalAperture = (
+			( Math.abs( camera.left ) + Math.abs( camera.right ) ) *
+			10
+		).toPrecision( PRECISION );
 
-			float2 clippingRange = (${ camera.near.toPrecision( PRECISION ) }, ${ camera.far.toPrecision( PRECISION ) })
-			float horizontalAperture = ${ ( ( Math.abs( camera.left ) + Math.abs( camera.right ) ) * 10 ).toPrecision( PRECISION ) }
-			float verticalAperture = ${ ( ( Math.abs( camera.top ) + Math.abs( camera.bottom ) ) * 10 ).toPrecision( PRECISION ) }
-			token projection = "orthographic"
-		}
-	
-	`;
+	} else {
+
+		horizontalAperture = camera.getFilmWidth().toPrecision( PRECISION );
+
+	}
+
+	node.addProperty( `float horizontalAperture = ${horizontalAperture}` );
+
+	let verticalAperture;
+	if ( camera.isOrthographicCamera ) {
+
+		verticalAperture = (
+			( Math.abs( camera.top ) + Math.abs( camera.bottom ) ) *
+			10
+		).toPrecision( PRECISION );
 
 	} else {
 
-		return `def Camera "${name}"
-		{
-			matrix4d xformOp:transform = ${ transform }
-			uniform token[] xformOpOrder = ["xformOp:transform"]
-
-			float2 clippingRange = (${ camera.near.toPrecision( PRECISION ) }, ${ camera.far.toPrecision( PRECISION ) })
-			float focalLength = ${ camera.getFocalLength().toPrecision( PRECISION ) }
-			float focusDistance = ${ camera.focus.toPrecision( PRECISION ) }
-			float horizontalAperture = ${ camera.getFilmWidth().toPrecision( PRECISION ) }
-			token projection = "perspective"
-			float verticalAperture = ${ camera.getFilmHeight().toPrecision( PRECISION ) }
-		}
-	
-	`;
+		verticalAperture = camera.getFilmHeight().toPrecision( PRECISION );
 
 	}
 
+	node.addProperty( `float verticalAperture = ${verticalAperture}` );
+
+	if ( camera.isPerspectiveCamera ) {
+
+		const focalLength = camera.getFocalLength().toPrecision( PRECISION );
+		node.addProperty( `float focalLength = ${focalLength}` );
+
+		const focusDistance = camera.focus.toPrecision( PRECISION );
+		node.addProperty( `float focusDistance = ${focusDistance}` );
+
+	}
+
+	return node;
+
 }
 
+/**
+ * Export options of `USDZExporter`.
+ *
+ * @typedef {Object} USDZExporter~Options
+ * @property {number} [maxTextureSize=1024] - The maximum texture size that is going to be exported.
+ * @property {boolean} [includeAnchoringProperties=true] - Whether to include anchoring properties or not.
+ * @property {boolean} [onlyVisible=true] - Export only visible 3D objects.
+ * @property {Object} [ar] - If `includeAnchoringProperties` is set to `true`, the anchoring type and alignment
+ * can be configured via `ar.anchoring.type` and `ar.planeAnchoring.alignment`.
+ * @property {boolean} [quickLookCompatible=false] - Whether to make the exported USDZ compatible to QuickLook
+ * which means the asset is modified to accommodate the bugs FB10036297 and FB11442287 (Apple Feedback).
+ **/
+
+/**
+ * onDone callback of `USDZExporter`.
+ *
+ * @callback USDZExporter~OnDone
+ * @param {ArrayBuffer} result - The generated USDZ.
+ */
+
+/**
+ * onError callback of `USDZExporter`.
+ *
+ * @callback USDZExporter~OnError
+ * @param {Error} error - The error object.
+ */
+
 export { USDZExporter };