vc-spaces365-threejs 0.180.0

package/examples/jsm/effects/StereoEffect.js

@@ -0,0 +1,91 @@
+import {
+	StereoCamera,
+	Vector2
+} from 'three';
+
+/**
+ * A class that creates an stereo effect.
+ *
+ * Note that this class can only be used with {@link WebGLRenderer}.
+ * When using {@link WebGPURenderer}, use {@link StereoPassNode}.
+ *
+ * @three_import import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
+ */
+class StereoEffect {
+
+	/**
+	 * Constructs a new stereo effect.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 */
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+		_stereo.aspect = 0.5;
+		const size = new Vector2();
+
+		/**
+		 * Sets the given eye separation.
+		 *
+		 * @param {number} eyeSep - The eye separation to set.
+		 */
+		this.setEyeSeparation = function ( eyeSep ) {
+
+			_stereo.eyeSep = eyeSep;
+
+		};
+
+		/**
+		 * Resizes the effect.
+		 *
+		 * @param {number} width - The width of the effect in logical pixels.
+		 * @param {number} height - The height of the effect in logical pixels.
+		 */
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+		/**
+		 * When using this effect, this method should be called instead of the
+		 * default {@link WebGLRenderer#render}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			const currentAutoClear = renderer.autoClear;
+			renderer.getSize( size );
+
+			renderer.autoClear = false;
+			renderer.clear();
+
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( 0, 0, size.width / 2, size.height );
+			renderer.setViewport( 0, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+			renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setScissorTest( false );
+
+			renderer.autoClear = currentAutoClear;
+
+		};
+
+	}
+
+}
+
+export { StereoEffect };

package/examples/jsm/environments/DebugEnvironment.js

@@ -0,0 +1,102 @@
+import {
+	BackSide,
+	BoxGeometry,
+	Mesh,
+	MeshLambertMaterial,
+	MeshStandardMaterial,
+	PointLight,
+	Scene,
+} from 'three';
+
+/**
+ * This class represents a scene with a very basic room setup that can be used as
+ * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents the room's
+ * lighting and can be used for Image Based Lighting by assigning it to {@link Scene#environment}
+ * or directly as an environment map to PBR materials.
+ *
+ * This class uses a simple room setup and should only be used for development purposes.
+ * A more appropriate setup for production is {@link RoomEnvironment}.
+ *
+ * ```js
+ * const environment = new DebugEnvironment();
+ * const pmremGenerator = new THREE.PMREMGenerator( renderer );
+ *
+ * const envMap = pmremGenerator.fromScene( environment ).texture;
+ * scene.environment = envMap;
+ * ```
+ *
+ * @augments Scene
+ * @three_import import { DebugEnvironment } from 'three/addons/environments/DebugEnvironment.js';
+ */
+class DebugEnvironment extends Scene {
+
+	/**
+	 * Constructs a new debug environment.
+	 */
+	constructor() {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+		const roomMaterial = new MeshStandardMaterial( { metalness: 0, side: BackSide } );
+		const room = new Mesh( geometry, roomMaterial );
+		room.scale.setScalar( 10 );
+		this.add( room );
+
+		const mainLight = new PointLight( 0xffffff, 50, 0, 2 );
+		this.add( mainLight );
+
+		const material1 = new MeshLambertMaterial( { color: 0xff0000, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light1 = new Mesh( geometry, material1 );
+		light1.position.set( - 5, 2, 0 );
+		light1.scale.set( 0.1, 1, 1 );
+		this.add( light1 );
+
+		const material2 = new MeshLambertMaterial( { color: 0x00ff00, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light2 = new Mesh( geometry, material2 );
+		light2.position.set( 0, 5, 0 );
+		light2.scale.set( 1, 0.1, 1 );
+		this.add( light2 );
+
+		const material3 = new MeshLambertMaterial( { color: 0x0000ff, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light3 = new Mesh( geometry, material3 );
+		light3.position.set( 2, 1, 5 );
+		light3.scale.set( 1.5, 2, 0.1 );
+		this.add( light3 );
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the environment is no longer required.
+	 */
+	dispose() {
+
+		const resources = new Set();
+
+		this.traverse( ( object ) => {
+
+			if ( object.isMesh ) {
+
+				resources.add( object.geometry );
+				resources.add( object.material );
+
+			}
+
+		} );
+
+		for ( const resource of resources ) {
+
+			resource.dispose();
+
+		}
+
+	}
+
+}
+
+export { DebugEnvironment };

package/examples/jsm/environments/RoomEnvironment.js

@@ -0,0 +1,182 @@
+import {
+ 	BackSide,
+ 	BoxGeometry,
+ 	InstancedMesh,
+ 	Mesh,
+	MeshLambertMaterial,
+ 	MeshStandardMaterial,
+ 	PointLight,
+ 	Scene,
+ 	Object3D,
+} from 'three';
+
+/**
+ * This class represents a scene with a basic room setup that can be used as
+ * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents the room's
+ * lighting and can be used for Image Based Lighting by assigning it to {@link Scene#environment}
+ * or directly as an environment map to PBR materials.
+ *
+ * The implementation is based on the [EnvironmentScene](https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts)
+ * component from the `model-viewer` project.
+ *
+ * ```js
+ * const environment = new RoomEnvironment();
+ * const pmremGenerator = new THREE.PMREMGenerator( renderer );
+ *
+ * const envMap = pmremGenerator.fromScene( environment ).texture;
+ * scene.environment = envMap;
+ * ```
+ *
+ * @augments Scene
+ * @three_import import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+ */
+class RoomEnvironment extends Scene {
+
+	constructor() {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+
+		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
+		const boxMaterial = new MeshStandardMaterial();
+
+		const mainLight = new PointLight( 0xffffff, 900, 28, 2 );
+		mainLight.position.set( 0.418, 16.199, 0.300 );
+		this.add( mainLight );
+
+		const room = new Mesh( geometry, roomMaterial );
+		room.position.set( - 0.757, 13.219, 0.717 );
+		room.scale.set( 31.713, 28.305, 28.591 );
+		this.add( room );
+
+		const boxes = new InstancedMesh( geometry, boxMaterial, 6 );
+		const transform = new Object3D();
+
+		// box1
+		transform.position.set( - 10.906, 2.009, 1.846 );
+		transform.rotation.set( 0, - 0.195, 0 );
+		transform.scale.set( 2.328, 7.905, 4.651 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 0, transform.matrix );
+
+		// box2
+		transform.position.set( - 5.607, - 0.754, - 0.758 );
+		transform.rotation.set( 0, 0.994, 0 );
+		transform.scale.set( 1.970, 1.534, 3.955 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 1, transform.matrix );
+
+		// box3
+		transform.position.set( 6.167, 0.857, 7.803 );
+		transform.rotation.set( 0, 0.561, 0 );
+		transform.scale.set( 3.927, 6.285, 3.687 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 2, transform.matrix );
+
+		// box4
+		transform.position.set( - 2.017, 0.018, 6.124 );
+		transform.rotation.set( 0, 0.333, 0 );
+		transform.scale.set( 2.002, 4.566, 2.064 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 3, transform.matrix );
+
+		// box5
+		transform.position.set( 2.291, - 0.756, - 2.621 );
+		transform.rotation.set( 0, - 0.286, 0 );
+		transform.scale.set( 1.546, 1.552, 1.496 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 4, transform.matrix );
+
+		// box6
+		transform.position.set( - 2.193, - 0.369, - 5.547 );
+		transform.rotation.set( 0, 0.516, 0 );
+		transform.scale.set( 3.875, 3.487, 2.986 );
+		transform.updateMatrix();
+		boxes.setMatrixAt( 5, transform.matrix );
+
+		this.add( boxes );
+
+
+		// -x right
+		const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light1.position.set( - 16.116, 14.37, 8.208 );
+		light1.scale.set( 0.1, 2.428, 2.739 );
+		this.add( light1 );
+
+		// -x left
+		const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light2.position.set( - 16.109, 18.021, - 8.207 );
+		light2.scale.set( 0.1, 2.425, 2.751 );
+		this.add( light2 );
+
+		// +x
+		const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
+		light3.position.set( 14.904, 12.198, - 1.832 );
+		light3.scale.set( 0.15, 4.265, 6.331 );
+		this.add( light3 );
+
+		// +z
+		const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
+		light4.position.set( - 0.462, 8.89, 14.520 );
+		light4.scale.set( 4.38, 5.441, 0.088 );
+		this.add( light4 );
+
+		// -z
+		const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
+		light5.position.set( 3.235, 11.486, - 12.541 );
+		light5.scale.set( 2.5, 2.0, 0.1 );
+		this.add( light5 );
+
+		// +y
+		const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
+		light6.position.set( 0.0, 20.0, 0.0 );
+		light6.scale.set( 1.0, 0.1, 1.0 );
+		this.add( light6 );
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the environment is no longer required.
+	 */
+	dispose() {
+
+		const resources = new Set();
+
+		this.traverse( ( object ) => {
+
+			if ( object.isMesh ) {
+
+				resources.add( object.geometry );
+				resources.add( object.material );
+
+			}
+
+		} );
+
+		for ( const resource of resources ) {
+
+			resource.dispose();
+
+		}
+
+	}
+
+}
+
+function createAreaLightMaterial( intensity ) {
+
+	// create an emissive-only material. see #31348
+	const material = new MeshLambertMaterial( {
+		color: 0x000000,
+		emissive: 0xffffff,
+		emissiveIntensity: intensity
+	} );
+
+	return material;
+
+}
+
+export { RoomEnvironment };

package/examples/jsm/exporters/DRACOExporter.js

@@ -0,0 +1,311 @@
+import { Color, ColorManagement, SRGBColorSpace } from 'three';
+
+/* global DracoEncoderModule */
+
+/**
+ * An exporter to compress geometry with the Draco library.
+ *
+ * [Draco]{@link https://google.github.io/draco/} is an open source library for compressing and
+ * decompressing 3D meshes and point clouds. Compressed geometry can be significantly smaller,
+ * at the cost of additional decoding time on the client device.
+ *
+ * Standalone Draco files have a `.drc` extension, and contain vertex positions,
+ * normals, colors, and other attributes. Draco files *do not* contain materials,
+ * textures, animation, or node hierarchies – to use these features, embed Draco geometry
+ * inside of a glTF file. A normal glTF file can be converted to a Draco-compressed glTF file
+ * using [glTF-Pipeline]{@link https://github.com/AnalyticalGraphicsInc/gltf-pipeline}.
+ *
+ * ```js
+ * const exporter = new DRACOExporter();
+ * const data = exporter.parse( mesh, options );
+ * ```
+ *
+ * @three_import import { DRACOExporter } from 'three/addons/exporters/DRACOExporter.js';
+ */
+class DRACOExporter {
+
+	/**
+	 * Parses the given mesh or point cloud and generates the Draco output.
+	 *
+	 * @param {(Mesh|Points)} object - The mesh or point cloud to export.
+	 * @param {DRACOExporter~Options} options - The export options.
+	 * @return {Int8Array} The exported Draco.
+	 */
+	parse( object, options = {} ) {
+
+		options = Object.assign( {
+			decodeSpeed: 5,
+			encodeSpeed: 5,
+			encoderMethod: DRACOExporter.MESH_EDGEBREAKER_ENCODING,
+			quantization: [ 16, 8, 8, 8, 8 ],
+			exportUvs: true,
+			exportNormals: true,
+			exportColor: false,
+		}, options );
+
+		if ( DracoEncoderModule === undefined ) {
+
+			throw new Error( 'THREE.DRACOExporter: required the draco_encoder to work.' );
+
+		}
+
+		const geometry = object.geometry;
+
+		const dracoEncoder = DracoEncoderModule();
+		const encoder = new dracoEncoder.Encoder();
+		let builder;
+		let dracoObject;
+
+		if ( object.isMesh === true ) {
+
+			builder = new dracoEncoder.MeshBuilder();
+			dracoObject = new dracoEncoder.Mesh();
+
+			const vertices = geometry.getAttribute( 'position' );
+			builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.POSITION, vertices.count, vertices.itemSize, vertices.array );
+
+			const faces = geometry.getIndex();
+
+			if ( faces !== null ) {
+
+				builder.AddFacesToMesh( dracoObject, faces.count / 3, faces.array );
+
+			} else {
+
+				const faces = new ( vertices.count > 65535 ? Uint32Array : Uint16Array )( vertices.count );
+
+				for ( let i = 0; i < faces.length; i ++ ) {
+
+					faces[ i ] = i;
+
+				}
+
+				builder.AddFacesToMesh( dracoObject, vertices.count, faces );
+
+			}
+
+			if ( options.exportNormals === true ) {
+
+				const normals = geometry.getAttribute( 'normal' );
+
+				if ( normals !== undefined ) {
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.NORMAL, normals.count, normals.itemSize, normals.array );
+
+				}
+
+			}
+
+			if ( options.exportUvs === true ) {
+
+				const uvs = geometry.getAttribute( 'uv' );
+
+				if ( uvs !== undefined ) {
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.TEX_COORD, uvs.count, uvs.itemSize, uvs.array );
+
+				}
+
+			}
+
+			if ( options.exportColor === true ) {
+
+				const colors = geometry.getAttribute( 'color' );
+
+				if ( colors !== undefined ) {
+
+					const array = createVertexColorSRGBArray( colors );
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, array );
+
+				}
+
+			}
+
+		} else if ( object.isPoints === true ) {
+
+			builder = new dracoEncoder.PointCloudBuilder();
+			dracoObject = new dracoEncoder.PointCloud();
+
+			const vertices = geometry.getAttribute( 'position' );
+			builder.AddFloatAttribute( dracoObject, dracoEncoder.POSITION, vertices.count, vertices.itemSize, vertices.array );
+
+			if ( options.exportColor === true ) {
+
+				const colors = geometry.getAttribute( 'color' );
+
+				if ( colors !== undefined ) {
+
+					const array = createVertexColorSRGBArray( colors );
+
+					builder.AddFloatAttribute( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, array );
+
+				}
+
+			}
+
+		} else {
+
+			throw new Error( 'DRACOExporter: Unsupported object type.' );
+
+		}
+
+		//Compress using draco encoder
+
+		const encodedData = new dracoEncoder.DracoInt8Array();
+
+		//Sets the desired encoding and decoding speed for the given options from 0 (slowest speed, but the best compression) to 10 (fastest, but the worst compression).
+
+		const encodeSpeed = ( options.encodeSpeed !== undefined ) ? options.encodeSpeed : 5;
+		const decodeSpeed = ( options.decodeSpeed !== undefined ) ? options.decodeSpeed : 5;
+
+		encoder.SetSpeedOptions( encodeSpeed, decodeSpeed );
+
+		// Sets the desired encoding method for a given geometry.
+
+		if ( options.encoderMethod !== undefined ) {
+
+			encoder.SetEncodingMethod( options.encoderMethod );
+
+		}
+
+		// Sets the quantization (number of bits used to represent) compression options for a named attribute.
+		// The attribute values will be quantized in a box defined by the maximum extent of the attribute values.
+		if ( options.quantization !== undefined ) {
+
+			for ( let i = 0; i < 5; i ++ ) {
+
+				if ( options.quantization[ i ] !== undefined ) {
+
+					encoder.SetAttributeQuantization( i, options.quantization[ i ] );
+
+				}
+
+			}
+
+		}
+
+		let length;
+
+		if ( object.isMesh === true ) {
+
+			length = encoder.EncodeMeshToDracoBuffer( dracoObject, encodedData );
+
+		} else {
+
+			length = encoder.EncodePointCloudToDracoBuffer( dracoObject, true, encodedData );
+
+		}
+
+		dracoEncoder.destroy( dracoObject );
+
+		if ( length === 0 ) {
+
+			throw new Error( 'THREE.DRACOExporter: Draco encoding failed.' );
+
+		}
+
+		//Copy encoded data to buffer.
+		const outputData = new Int8Array( new ArrayBuffer( length ) );
+
+		for ( let i = 0; i < length; i ++ ) {
+
+			outputData[ i ] = encodedData.GetValue( i );
+
+		}
+
+		dracoEncoder.destroy( encodedData );
+		dracoEncoder.destroy( encoder );
+		dracoEncoder.destroy( builder );
+
+		return outputData;
+
+	}
+
+}
+
+function createVertexColorSRGBArray( attribute ) {
+
+	// While .drc files do not specify colorspace, the only 'official' tooling
+	// is PLY and OBJ converters, which use sRGB. We'll assume sRGB is expected
+	// for .drc files, but note that Draco buffers embedded in glTF files will
+	// be Linear-sRGB instead.
+
+	const _color = new Color();
+
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const array = new Float32Array( count * itemSize );
+
+	for ( let i = 0, il = count; i < il; i ++ ) {
+
+		_color.fromBufferAttribute( attribute, i );
+
+		ColorManagement.workingToColorSpace( _color, SRGBColorSpace );
+
+		array[ i * itemSize ] = _color.r;
+		array[ i * itemSize + 1 ] = _color.g;
+		array[ i * itemSize + 2 ] = _color.b;
+
+		if ( itemSize === 4 ) {
+
+			array[ i * itemSize + 3 ] = attribute.getW( i );
+
+		}
+
+	}
+
+	return array;
+
+}
+
+// Encoder methods
+
+/**
+ * Edgebreaker encoding.
+ *
+ * @static
+ * @constant
+ * @type {number}
+ * @default 1
+ */
+DRACOExporter.MESH_EDGEBREAKER_ENCODING = 1;
+
+/**
+ * Sequential encoding.
+ *
+ * @static
+ * @constant
+ * @type {number}
+ * @default 0
+ */
+DRACOExporter.MESH_SEQUENTIAL_ENCODING = 0;
+
+// Geometry type
+
+DRACOExporter.POINT_CLOUD = 0;
+DRACOExporter.TRIANGULAR_MESH = 1;
+
+// Attribute type
+
+DRACOExporter.INVALID = - 1;
+DRACOExporter.POSITION = 0;
+DRACOExporter.NORMAL = 1;
+DRACOExporter.COLOR = 2;
+DRACOExporter.TEX_COORD = 3;
+DRACOExporter.GENERIC = 4;
+
+/**
+ * Export options of `DRACOExporter`.
+ *
+ * @typedef {Object} DRACOExporter~Options
+ * @property {number} [decodeSpeed=5] - Indicates how to tune the encoder regarding decode speed (0 gives better speed but worst quality).
+ * @property {number} [encodeSpeed=5] - Indicates how to tune the encoder parameters (0 gives better speed but worst quality).
+ * @property {number} [encoderMethod=1] - Either sequential (very little compression) or Edgebreaker. Edgebreaker traverses the triangles of the mesh in a deterministic, spiral-like way which provides most of the benefits of this data format.
+ * @property {Array<number>} [quantization=[ 16, 8, 8, 8, 8 ]] - Indicates the precision of each type of data stored in the draco file in the order (POSITION, NORMAL, COLOR, TEX_COORD, GENERIC).
+ * @property {boolean} [exportUvs=true] - Whether to export UVs or not.
+ * @property {boolean} [exportNormals=true] - Whether to export normals or not.
+ * @property {boolean} [exportColor=false] - Whether to export colors or not.
+ **/
+
+export { DRACOExporter };