@needle-tools/three 0.145.4 → 0.146.2

package/examples/js/exporters/USDZExporter.js

@@ -2,13 +2,24 @@
 
 	class USDZExporter {
 
-		async parse( scene ) {
+		async parse( scene, options = {
+			ar: {
+				anchoring: {
+					type: 'plane'
+				},
+				planeAnchoring: {
+					alignment: 'vertical'
+				}
+			}
+		} ) {
 
 			const files = {};
-			const modelFileName = 'model.usda'; // model file should be first in USDZ archive so we init it here
+			const modelFileName = 'model.usda';
 
+			// model file should be first in USDZ archive so we init it here
 			files[ modelFileName ] = null;
 			let output = buildHeader();
+			output += buildSceneStart( options );
 			const materials = {};
 			const textures = {};
 			scene.traverseVisible( object => {
@@ -17,11 +28,9 @@
 
 					const geometry = object.geometry;
 					const material = object.material;
-
 					if ( material.isMeshStandardMaterial ) {
 
 						const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usd';
-
 						if ( ! ( geometryFileName in files ) ) {
 
 							const meshObject = buildMeshObject( geometry );
@@ -43,13 +52,17 @@
 
 					}
 
+				} else if ( object.isCamera ) {
+
+					output += buildCamera( object );
+
 				}
 
 			} );
+			output += buildSceneEnd();
 			output += buildMaterials( materials, textures );
 			files[ modelFileName ] = fflate.strToU8( output );
 			output = null;
-
 			for ( const id in textures ) {
 
 				const texture = textures[ id ];
@@ -59,19 +72,18 @@
 				const blob = await new Promise( resolve => canvas.toBlob( resolve, isRGBA ? 'image/png' : 'image/jpeg', 1 ) );
 				files[ `textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}` ] = new Uint8Array( await blob.arrayBuffer() );
 
-			} // 64 byte alignment
-			// https://github.com/101arrowz/fflate/issues/39#issuecomment-777263109
+			}
 
+			// 64 byte alignment
+			// https://github.com/101arrowz/fflate/issues/39#issuecomment-777263109
 
 			let offset = 0;
-
 			for ( const filename in files ) {
 
 				const file = files[ filename ];
 				const headerSize = 34 + filename.length;
 				offset += headerSize;
 				const offsetMod64 = offset & 63;
-
 				if ( offsetMod64 !== 4 ) {
 
 					const padLength = 64 - offsetMod64;
@@ -95,7 +107,6 @@
 		}
 
 	}
-
 	function imageToCanvas( image, color ) {
 
 		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 ) {
@@ -106,7 +117,6 @@
 			canvas.height = image.height * Math.min( 1, scale );
 			const context = canvas.getContext( '2d' );
 			context.drawImage( image, 0, 0, canvas.width, canvas.height );
-
 			if ( color !== undefined ) {
 
 				const hex = parseInt( color, 16 );
@@ -115,7 +125,6 @@
 				const b = ( hex & 255 ) / 255;
 				const imagedata = context.getImageData( 0, 0, canvas.width, canvas.height );
 				const data = imagedata.data;
-
 				for ( let i = 0; i < data.length; i += 4 ) {
 
 					data[ i + 0 ] = data[ i + 0 ] * r;
@@ -132,11 +141,11 @@
 
 		}
 
-	} //
+	}
 
+	//
 
 	const PRECISION = 7;
-
 	function buildHeader() {
 
 		return `#usda 1.0
@@ -148,6 +157,40 @@
     upAxis = "Y"
 )
 
+`;
+
+	}
+
+	function buildSceneStart( options ) {
+
+		return `def Xform "Root"
+{
+    def Scope "Scenes" (
+        kind = "sceneLibrary"
+    )
+    {
+        def Xform "Scene" (
+            customData = {
+                bool preliminary_collidesWithEnvironment = 0
+                string sceneName = "Scene"
+            }
+            sceneName = "Scene"
+        )
+        {
+        token preliminary:anchoring:type = "${options.ar.anchoring.type}"
+        token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
+
+`;
+
+	}
+
+	function buildSceneEnd() {
+
+		return `
+        }
+    }
+}
+
 `;
 
 	}
@@ -158,14 +201,14 @@
 		output += dataToInsert;
 		return fflate.strToU8( output );
 
-	} // Xform
+	}
 
+	// Xform
 
 	function buildXform( object, geometry, material ) {
 
 		const name = 'Object_' + object.id;
 		const transform = buildMatrix( object.matrixWorld );
-
 		if ( object.matrixWorld.determinant() < 0 ) {
 
 			console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', object );
@@ -197,8 +240,9 @@
 
 		return `(${array[ offset + 0 ]}, ${array[ offset + 1 ]}, ${array[ offset + 2 ]}, ${array[ offset + 3 ]})`;
 
-	} // Mesh
+	}
 
+	// Mesh
 
 	function buildMeshObject( geometry ) {
 
@@ -246,7 +290,6 @@ def "Geometry"
 
 		const index = geometry.index;
 		const array = [];
-
 		if ( index !== null ) {
 
 			for ( let i = 0; i < index.count; i ++ ) {
@@ -258,7 +301,6 @@ def "Geometry"
 		} else {
 
 			const length = geometry.attributes.position.count;
-
 			for ( let i = 0; i < length; i ++ ) {
 
 				array.push( i );
@@ -281,7 +323,6 @@ def "Geometry"
 		}
 
 		const array = [];
-
 		for ( let i = 0; i < attribute.count; i ++ ) {
 
 			const x = attribute.getX( i );
@@ -305,7 +346,6 @@ def "Geometry"
 		}
 
 		const array = [];
-
 		for ( let i = 0; i < attribute.count; i ++ ) {
 
 			const x = attribute.getX( i );
@@ -316,13 +356,13 @@ def "Geometry"
 
 		return array.join( ', ' );
 
-	} // Materials
+	}
 
+	// Materials
 
 	function buildMaterials( materials, textures ) {
 
 		const array = [];
-
 		for ( const uuid in materials ) {
 
 			const material = materials[ uuid ];
@@ -342,10 +382,10 @@ ${array.join( '' )}
 	function buildMaterial( material, textures ) {
 
 		// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
+
 		const pad = '            ';
 		const inputs = [];
 		const samplers = [];
-
 		function buildTexture( texture, mapType, color ) {
 
 			const id = texture.id + ( color ? '_' + color.getHexString() : '' );
@@ -390,7 +430,6 @@ ${array.join( '' )}
 		if ( material.map !== null ) {
 
 			inputs.push( `${pad}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>` );
@@ -518,6 +557,52 @@ ${samplers.join( '\n' )}
 
 	}
 
+	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()}
+		}
+	
+	`;
+
+		}
+
+	}
+
 	THREE.USDZExporter = USDZExporter;
 
 } )();

package/examples/js/geometries/BoxLineGeometry.js

@@ -18,7 +18,6 @@
 			let x = - widthHalf;
 			let y = - heightHalf;
 			let z = - depthHalf;
-
 			for ( let i = 0; i <= widthSegments; i ++ ) {
 
 				vertices.push( x, - heightHalf, - depthHalf, x, heightHalf, - depthHalf );

package/examples/js/geometries/ConvexGeometry.js

@@ -4,25 +4,29 @@
 
 		constructor( points = [] ) {
 
-			super(); // buffers
+			super();
+
+			// buffers
 
 			const vertices = [];
 			const normals = [];
-
 			if ( THREE.ConvexHull === undefined ) {
 
 				console.error( 'THREE.ConvexGeometry: ConvexGeometry relies on THREE.ConvexHull' );
 
 			}
 
-			const convexHull = new THREE.ConvexHull().setFromPoints( points ); // generate vertices and normals
+			const convexHull = new THREE.ConvexHull().setFromPoints( points );
 
-			const faces = convexHull.faces;
+			// generate vertices and normals
 
+			const faces = convexHull.faces;
 			for ( let i = 0; i < faces.length; i ++ ) {
 
 				const face = faces[ i ];
-				let edge = face.edge; // we move along a doubly-connected edge list to access all face points (see HalfEdge docs)
+				let edge = face.edge;
+
+				// we move along a doubly-connected edge list to access all face points (see HalfEdge docs)
 
 				do {
 
@@ -33,8 +37,9 @@
 
 				} while ( edge !== face.edge );
 
-			} // build geometry
+			}
 
+			// build geometry
 
 			this.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 			this.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );

package/examples/js/geometries/DecalGeometry.js

@@ -19,35 +19,48 @@
 
 		constructor( mesh, position, orientation, size ) {
 
-			super(); // buffers
+			super();
+
+			// buffers
 
 			const vertices = [];
 			const normals = [];
-			const uvs = []; // helpers
+			const uvs = [];
+
+			// helpers
 
-			const plane = new THREE.Vector3(); // this matrix represents the transformation of the decal projector
+			const plane = new THREE.Vector3();
+
+			// this matrix represents the transformation of the decal projector
 
 			const projectorMatrix = new THREE.Matrix4();
 			projectorMatrix.makeRotationFromEuler( orientation );
 			projectorMatrix.setPosition( position );
 			const projectorMatrixInverse = new THREE.Matrix4();
-			projectorMatrixInverse.copy( projectorMatrix ).invert(); // generate buffers
+			projectorMatrixInverse.copy( projectorMatrix ).invert();
+
+			// generate buffers
 
-			generate(); // build geometry
+			generate();
+
+			// build geometry
 
 			this.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 			this.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
 			this.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
-
 			function generate() {
 
 				let decalVertices = [];
 				const vertex = new THREE.Vector3();
-				const normal = new THREE.Vector3(); // handle different geometry types
+				const normal = new THREE.Vector3();
+
+				// handle different geometry types
 
 				const geometry = mesh.geometry;
 				const positionAttribute = geometry.attributes.position;
-				const normalAttribute = geometry.attributes.normal; // first, create an array of 'DecalVertex' objects
+				const normalAttribute = geometry.attributes.normal;
+
+				// first, create an array of 'DecalVertex' objects
 				// three consecutive 'DecalVertex' objects represent a single face
 				//
 				// this data structure will be later used to perform the clipping
@@ -55,8 +68,8 @@
 				if ( geometry.index !== null ) {
 
 					// indexed THREE.BufferGeometry
-					const index = geometry.index;
 
+					const index = geometry.index;
 					for ( let i = 0; i < index.count; i ++ ) {
 
 						vertex.fromBufferAttribute( positionAttribute, index.getX( i ) );
@@ -68,6 +81,7 @@
 				} else {
 
 					// non-indexed THREE.BufferGeometry
+
 					for ( let i = 0; i < positionAttribute.count; i ++ ) {
 
 						vertex.fromBufferAttribute( positionAttribute, i );
@@ -76,23 +90,32 @@
 
 					}
 
-				} // second, clip the geometry so that it doesn't extend out from the projector
+				}
 
+				// second, clip the geometry so that it doesn't extend out from the projector
 
 				decalVertices = clipGeometry( decalVertices, plane.set( 1, 0, 0 ) );
 				decalVertices = clipGeometry( decalVertices, plane.set( - 1, 0, 0 ) );
 				decalVertices = clipGeometry( decalVertices, plane.set( 0, 1, 0 ) );
 				decalVertices = clipGeometry( decalVertices, plane.set( 0, - 1, 0 ) );
 				decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, 1 ) );
-				decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, - 1 ) ); // third, generate final vertices, normals and uvs
+				decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, - 1 ) );
+
+				// third, generate final vertices, normals and uvs
 
 				for ( let i = 0; i < decalVertices.length; i ++ ) {
 
-					const decalVertex = decalVertices[ i ]; // create texture coordinates (we are still in projector space)
+					const decalVertex = decalVertices[ i ];
+
+					// create texture coordinates (we are still in projector space)
 
-					uvs.push( 0.5 + decalVertex.position.x / size.x, 0.5 + decalVertex.position.y / size.y ); // transform the vertex back to world space
+					uvs.push( 0.5 + decalVertex.position.x / size.x, 0.5 + decalVertex.position.y / size.y );
 
-					decalVertex.position.applyMatrix4( projectorMatrix ); // now create vertex and normal buffer data
+					// transform the vertex back to world space
+
+					decalVertex.position.applyMatrix4( projectorMatrix );
+
+					// now create vertex and normal buffer data
 
 					vertices.push( decalVertex.position.x, decalVertex.position.y, decalVertex.position.z );
 					normals.push( decalVertex.normal.x, decalVertex.normal.y, decalVertex.normal.z );
@@ -104,6 +127,7 @@
 			function pushDecalVertex( decalVertices, vertex, normal ) {
 
 				// transform the vertex to world space, then to projector space
+
 				vertex.applyMatrix4( mesh.matrixWorld );
 				vertex.applyMatrix4( projectorMatrixInverse );
 				normal.transformDirection( mesh.matrixWorld );
@@ -114,7 +138,9 @@
 			function clipGeometry( inVertices, plane ) {
 
 				const outVertices = [];
-				const s = 0.5 * Math.abs( size.dot( plane ) ); // a single iteration clips one face,
+				const s = 0.5 * Math.abs( size.dot( plane ) );
+
+				// a single iteration clips one face,
 				// which consists of three consecutive 'DecalVertex' objects
 
 				for ( let i = 0; i < inVertices.length; i += 3 ) {
@@ -129,16 +155,18 @@
 					const d3 = inVertices[ i + 2 ].position.dot( plane ) - s;
 					const v1Out = d1 > 0;
 					const v2Out = d2 > 0;
-					const v3Out = d3 > 0; // calculate, how many vertices of the face lie outside of the clipping plane
+					const v3Out = d3 > 0;
 
-					total = ( v1Out ? 1 : 0 ) + ( v2Out ? 1 : 0 ) + ( v3Out ? 1 : 0 );
+					// calculate, how many vertices of the face lie outside of the clipping plane
 
+					total = ( v1Out ? 1 : 0 ) + ( v2Out ? 1 : 0 ) + ( v3Out ? 1 : 0 );
 					switch ( total ) {
 
 						case 0:
 						{
 
 							// the entire face lies inside of the plane, no clipping needed
+
 							outVertices.push( inVertices[ i ] );
 							outVertices.push( inVertices[ i + 1 ] );
 							outVertices.push( inVertices[ i + 2 ] );
@@ -150,6 +178,7 @@
 						{
 
 							// one vertex lies outside of the plane, perform clipping
+
 							if ( v1Out ) {
 
 								nV1 = inVertices[ i + 1 ];
@@ -198,6 +227,7 @@
 						{
 
 							// two vertices lies outside of the plane, perform clipping
+
 							if ( ! v1Out ) {
 
 								nV1 = inVertices[ i ].clone();
@@ -239,6 +269,7 @@
 						{
 
 							// the entire face lies outside of the plane, so let's discard the corresponding vertices
+
 							break;
 
 						}
@@ -256,7 +287,9 @@
 				const d0 = v0.position.dot( p ) - s;
 				const d1 = v1.position.dot( p ) - s;
 				const s0 = d0 / ( d0 - d1 );
-				const v = new DecalVertex( new THREE.Vector3( v0.position.x + s0 * ( v1.position.x - v0.position.x ), v0.position.y + s0 * ( v1.position.y - v0.position.y ), v0.position.z + s0 * ( v1.position.z - v0.position.z ) ), new THREE.Vector3( v0.normal.x + s0 * ( v1.normal.x - v0.normal.x ), v0.normal.y + s0 * ( v1.normal.y - v0.normal.y ), v0.normal.z + s0 * ( v1.normal.z - v0.normal.z ) ) ); // need to clip more values (texture coordinates)? do it this way:
+				const v = new DecalVertex( new THREE.Vector3( v0.position.x + s0 * ( v1.position.x - v0.position.x ), v0.position.y + s0 * ( v1.position.y - v0.position.y ), v0.position.z + s0 * ( v1.position.z - v0.position.z ) ), new THREE.Vector3( v0.normal.x + s0 * ( v1.normal.x - v0.normal.x ), v0.normal.y + s0 * ( v1.normal.y - v0.normal.y ), v0.normal.z + s0 * ( v1.normal.z - v0.normal.z ) ) );
+
+				// need to clip more values (texture coordinates)? do it this way:
 				// intersectpoint.value = a.value + s * ( b.value - a.value );
 
 				return v;
@@ -265,8 +298,9 @@
 
 		}
 
-	} // helper
+	}
 
+	// helper
 
 	class DecalVertex {
 
@@ -276,7 +310,6 @@
 			this.normal = normal;
 
 		}
-
 		clone() {
 
 			return new this.constructor( this.position.clone(), this.normal.clone() );