@anov/3d 0.0.1 → 0.0.2

package/examples/jsm/effects/PeppersGhostEffect.js

@@ -0,0 +1,153 @@
+import {
+	PerspectiveCamera,
+	Quaternion,
+	Vector3
+} from 'three';
+
+/**
+ * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
+ */
+
+class PeppersGhostEffect {
+
+	constructor( renderer ) {
+
+		const scope = this;
+
+		scope.cameraDistance = 15;
+		scope.reflectFromAbove = false;
+
+		// Internals
+		let _halfWidth, _width, _height;
+
+		const _cameraF = new PerspectiveCamera(); //front
+		const _cameraB = new PerspectiveCamera(); //back
+		const _cameraL = new PerspectiveCamera(); //left
+		const _cameraR = new PerspectiveCamera(); //right
+
+		const _position = new Vector3();
+		const _quaternion = new Quaternion();
+		const _scale = new Vector3();
+
+		// Initialization
+		renderer.autoClear = false;
+
+		this.setSize = function ( width, height ) {
+
+			_halfWidth = width / 2;
+			if ( width < height ) {
+
+				_width = width / 3;
+				_height = width / 3;
+
+			} else {
+
+				_width = height / 3;
+				_height = height / 3;
+
+			}
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			camera.matrixWorld.decompose( _position, _quaternion, _scale );
+
+			// front
+			_cameraF.position.copy( _position );
+			_cameraF.quaternion.copy( _quaternion );
+			_cameraF.translateZ( scope.cameraDistance );
+			_cameraF.lookAt( scene.position );
+
+			// back
+			_cameraB.position.copy( _position );
+			_cameraB.quaternion.copy( _quaternion );
+			_cameraB.translateZ( - ( scope.cameraDistance ) );
+			_cameraB.lookAt( scene.position );
+			_cameraB.rotation.z += 180 * ( Math.PI / 180 );
+
+			// left
+			_cameraL.position.copy( _position );
+			_cameraL.quaternion.copy( _quaternion );
+			_cameraL.translateX( - ( scope.cameraDistance ) );
+			_cameraL.lookAt( scene.position );
+			_cameraL.rotation.x += 90 * ( Math.PI / 180 );
+
+			// right
+			_cameraR.position.copy( _position );
+			_cameraR.quaternion.copy( _quaternion );
+			_cameraR.translateX( scope.cameraDistance );
+			_cameraR.lookAt( scene.position );
+			_cameraR.rotation.x += 90 * ( Math.PI / 180 );
+
+
+			renderer.clear();
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraB );
+
+			} else {
+
+				renderer.render( scene, _cameraF );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraF );
+
+			} else {
+
+				renderer.render( scene, _cameraB );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraR );
+
+			} else {
+
+				renderer.render( scene, _cameraL );
+
+			}
+
+			renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height );
+			renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraL );
+
+			} else {
+
+				renderer.render( scene, _cameraR );
+
+			}
+
+			renderer.setScissorTest( false );
+
+		};
+
+	}
+
+}
+
+export { PeppersGhostEffect };

package/examples/jsm/effects/StereoEffect.js

@@ -0,0 +1,55 @@
+import {
+	StereoCamera,
+	Vector2
+} from 'three';
+
+class StereoEffect {
+
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+		_stereo.aspect = 0.5;
+		const size = new Vector2();
+
+		this.setEyeSeparation = function ( eyeSep ) {
+
+			_stereo.eyeSep = eyeSep;
+
+		};
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.getSize( size );
+
+			if ( renderer.autoClear ) 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 );
+
+		};
+
+	}
+
+}
+
+export { StereoEffect };

package/examples/jsm/environments/DebugEnvironment.js

@@ -0,0 +1,52 @@
+import {
+	BackSide,
+	BoxGeometry,
+	Mesh,
+	MeshLambertMaterial,
+	MeshStandardMaterial,
+	PointLight,
+	Scene,
+} from 'three';
+
+class DebugEnvironment extends Scene {
+
+	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 );
+
+	}
+
+}
+
+export { DebugEnvironment };

package/examples/jsm/environments/RoomEnvironment.js

@@ -0,0 +1,148 @@
+/**
+ * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts
+ */
+
+import {
+ 	BackSide,
+ 	BoxGeometry,
+ 	Mesh,
+	MeshBasicMaterial,
+ 	MeshStandardMaterial,
+ 	PointLight,
+ 	Scene,
+} from 'three';
+
+class RoomEnvironment extends Scene {
+
+	constructor( renderer = null ) {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+
+		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
+		const boxMaterial = new MeshStandardMaterial();
+
+		let intensity = 5;
+
+		if ( renderer !== null && renderer._useLegacyLights === false ) intensity = 900;
+
+		const mainLight = new PointLight( 0xffffff, intensity, 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 box1 = new Mesh( geometry, boxMaterial );
+		box1.position.set( - 10.906, 2.009, 1.846 );
+		box1.rotation.set( 0, - 0.195, 0 );
+		box1.scale.set( 2.328, 7.905, 4.651 );
+		this.add( box1 );
+
+		const box2 = new Mesh( geometry, boxMaterial );
+		box2.position.set( - 5.607, - 0.754, - 0.758 );
+		box2.rotation.set( 0, 0.994, 0 );
+		box2.scale.set( 1.970, 1.534, 3.955 );
+		this.add( box2 );
+
+		const box3 = new Mesh( geometry, boxMaterial );
+		box3.position.set( 6.167, 0.857, 7.803 );
+		box3.rotation.set( 0, 0.561, 0 );
+		box3.scale.set( 3.927, 6.285, 3.687 );
+		this.add( box3 );
+
+		const box4 = new Mesh( geometry, boxMaterial );
+		box4.position.set( - 2.017, 0.018, 6.124 );
+		box4.rotation.set( 0, 0.333, 0 );
+		box4.scale.set( 2.002, 4.566, 2.064 );
+		this.add( box4 );
+
+		const box5 = new Mesh( geometry, boxMaterial );
+		box5.position.set( 2.291, - 0.756, - 2.621 );
+		box5.rotation.set( 0, - 0.286, 0 );
+		box5.scale.set( 1.546, 1.552, 1.496 );
+		this.add( box5 );
+
+		const box6 = new Mesh( geometry, boxMaterial );
+		box6.position.set( - 2.193, - 0.369, - 5.547 );
+		box6.rotation.set( 0, 0.516, 0 );
+		box6.scale.set( 3.875, 3.487, 2.986 );
+		this.add( box6 );
+
+
+		// -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 );
+
+	}
+
+	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 ) {
+
+	const material = new MeshBasicMaterial();
+	material.color.setScalar( intensity );
+	return material;
+
+}
+
+export { RoomEnvironment };

package/examples/jsm/exporters/DRACOExporter.js

@@ -0,0 +1,267 @@
+import { Color } from 'three';
+
+/**
+ * Export draco compressed files from threejs geometry objects.
+ *
+ * Draco files are compressed and usually are smaller than conventional 3D file formats.
+ *
+ * The exporter receives a options object containing
+ *  - decodeSpeed, indicates how to tune the encoder regarding decode speed (0 gives better speed but worst quality)
+ *  - encodeSpeed, indicates how to tune the encoder parameters (0 gives better speed but worst quality)
+ *  - encoderMethod
+ *  - quantization, indicates the presision of each type of data stored in the draco file in the order (POSITION, NORMAL, COLOR, TEX_COORD, GENERIC)
+ *  - exportUvs
+ *  - exportNormals
+ *  - exportColor
+ */
+
+/* global DracoEncoderModule */
+
+class DRACOExporter {
+
+	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 ).convertLinearToSRGB();
+
+		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
+
+DRACOExporter.MESH_EDGEBREAKER_ENCODING = 1;
+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 { DRACOExporter };