USDZExporter: Add camera support. (#24854)

* feat: initial support for persp and ortho cameras

* chore: made minor tweaks to example to showcase camera export

* chore: fix spacing and name

* Update misc_exporter_usdz.html

Co-authored-by: Ben Skinner <[email protected]>
Co-authored-by: Michael Herzog <[email protected]>

examples/jsm/exporters/USDZExporter.js

@@ -51,6 +51,10 @@ class USDZExporter {
 
 				}
 
+			} else if ( object.isCamera ) {
+				
+				output += buildCamera( object );
+
 			}
 
 		} );
@@ -555,4 +559,49 @@ function buildVector2( vector ) {
 
 }
 
+
+function buildCamera( camera ) {
+
+	const name = camera.name ? camera.name : 'Camera_' + camera.id;
+
+	const transform = buildMatrix( camera.matrixWorld );
+
+	if ( camera.matrixWorld.determinant() < 0 ) {
+
+		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', camera );
+
+	}
+
+	if (camera.isOrthographicCamera) {
+		return `def Camera "${name}"
+		{
+			matrix4d xformOp:transform = ${ transform }
+			uniform token[] xformOpOrder = ["xformOp:transform"]
+	
+			float2 clippingRange = (${camera.near}, ${camera.far})
+			float horizontalAperture = ${(Math.abs(camera.left) + Math.abs(camera.right)) * 10}
+			float verticalAperture = ${(Math.abs(camera.top) + Math.abs(camera.bottom)) * 10}
+			token projection = "orthographic"
+		}
+	
+	`;
+	} else {
+		return `def Camera "${name}"
+		{
+			matrix4d xformOp:transform = ${ transform }
+			uniform token[] xformOpOrder = ["xformOp:transform"]
+	
+			float2 clippingRange = (${camera.near}, ${camera.far})
+			float focalLength = ${camera.getFocalLength()}
+			float focusDistance = ${camera.focus}
+			float horizontalAperture = ${camera.getFilmWidth()}
+			token projection = "perspective"
+			float verticalAperture = ${camera.getFilmHeight()}
+		}
+	
+	`;
+	}
+
+}
+
 export { USDZExporter };

examples/misc_exporter_usdz.html

@@ -80,6 +80,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+				scene.add( camera );
 
 				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 				loader.load( 'DamagedHelmet.gltf', async function ( gltf ) {
@@ -97,7 +98,7 @@
 					// USDZ
 
 					const exporter = new USDZExporter();
-					const arraybuffer = await exporter.parse( gltf.scene );
+					const arraybuffer = await exporter.parse( scene );
 					const blob = new Blob( [ arraybuffer ], { type: 'application/octet-stream' } );
 
 					const link = document.getElementById( 'link' );