项目资源代码

jsm/animation/AnimationClipCreator.js

@@ -0,0 +1,114 @@
+import {
+	AnimationClip,
+	BooleanKeyframeTrack,
+	ColorKeyframeTrack,
+	NumberKeyframeTrack,
+	Vector3,
+	VectorKeyframeTrack
+} from 'three';
+
+class AnimationClipCreator {
+
+	static CreateRotationAnimation( period, axis = 'x' ) {
+
+		const times = [ 0, period ], values = [ 0, 360 ];
+
+		const trackName = '.rotation[' + axis + ']';
+
+		const track = new NumberKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, period, [ track ] );
+
+	}
+
+	static CreateScaleAxisAnimation( period, axis = 'x' ) {
+
+		const times = [ 0, period ], values = [ 0, 1 ];
+
+		const trackName = '.scale[' + axis + ']';
+
+		const track = new NumberKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, period, [ track ] );
+
+	}
+
+	static CreateShakeAnimation( duration, shakeScale ) {
+
+		const times = [], values = [], tmp = new Vector3();
+
+		for ( let i = 0; i < duration * 10; i ++ ) {
+
+			times.push( i / 10 );
+
+			tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).
+				multiply( shakeScale ).
+				toArray( values, values.length );
+
+		}
+
+		const trackName = '.position';
+
+		const track = new VectorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreatePulsationAnimation( duration, pulseScale ) {
+
+		const times = [], values = [], tmp = new Vector3();
+
+		for ( let i = 0; i < duration * 10; i ++ ) {
+
+			times.push( i / 10 );
+
+			const scaleFactor = Math.random() * pulseScale;
+			tmp.set( scaleFactor, scaleFactor, scaleFactor ).
+				toArray( values, values.length );
+
+		}
+
+		const trackName = '.scale';
+
+		const track = new VectorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreateVisibilityAnimation( duration ) {
+
+		const times = [ 0, duration / 2, duration ], values = [ true, false, true ];
+
+		const trackName = '.visible';
+
+		const track = new BooleanKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreateMaterialColorAnimation( duration, colors ) {
+
+		const times = [], values = [],
+			timeStep = duration / colors.length;
+
+		for ( let i = 0; i <= colors.length; i ++ ) {
+
+			times.push( i * timeStep );
+			values.push( colors[ i % colors.length ] );
+
+		}
+
+		const trackName = '.material[0].color';
+
+		const track = new ColorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+}
+
+export { AnimationClipCreator };

jsm/animation/CCDIKSolver.js

@@ -0,0 +1,458 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Color,
+	Line,
+	LineBasicMaterial,
+	Matrix4,
+	Mesh,
+	MeshBasicMaterial,
+	Object3D,
+	Quaternion,
+	SphereGeometry,
+	Vector3
+} from 'three';
+
+const _q = new Quaternion();
+const _targetPos = new Vector3();
+const _targetVec = new Vector3();
+const _effectorPos = new Vector3();
+const _effectorVec = new Vector3();
+const _linkPos = new Vector3();
+const _invLinkQ = new Quaternion();
+const _linkScale = new Vector3();
+const _axis = new Vector3();
+const _vector = new Vector3();
+const _matrix = new Matrix4();
+
+
+/**
+ * CCD Algorithm
+ *  - https://sites.google.com/site/auraliusproject/ccd-algorithm
+ *
+ * // ik parameter example
+ * //
+ * // target, effector, index in links are bone index in skeleton.bones.
+ * // the bones relation should be
+ * // <-- parent                                  child -->
+ * // links[ n ], links[ n - 1 ], ..., links[ 0 ], effector
+ * iks = [ {
+ *	target: 1,
+ *	effector: 2,
+ *	links: [ { index: 5, limitation: new Vector3( 1, 0, 0 ) }, { index: 4, enabled: false }, { index : 3 } ],
+ *	iteration: 10,
+ *	minAngle: 0.0,
+ *	maxAngle: 1.0,
+ * } ];
+ */
+
+class CCDIKSolver {
+
+	/**
+	 * @param {THREE.SkinnedMesh} mesh
+	 * @param {Array<Object>} iks
+	 */
+	constructor( mesh, iks = [] ) {
+
+		this.mesh = mesh;
+		this.iks = iks;
+
+		this._valid();
+
+	}
+
+	/**
+	 * Update all IK bones.
+	 *
+	 * @return {CCDIKSolver}
+	 */
+	update() {
+
+		const iks = this.iks;
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			this.updateOne( iks[ i ] );
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Update one IK bone
+	 *
+	 * @param {Object} ik parameter
+	 * @return {CCDIKSolver}
+	 */
+	updateOne( ik ) {
+
+		const bones = this.mesh.skeleton.bones;
+
+		// for reference overhead reduction in loop
+		const math = Math;
+
+		const effector = bones[ ik.effector ];
+		const target = bones[ ik.target ];
+
+		// don't use getWorldPosition() here for the performance
+		// because it calls updateMatrixWorld( true ) inside.
+		_targetPos.setFromMatrixPosition( target.matrixWorld );
+
+		const links = ik.links;
+		const iteration = ik.iteration !== undefined ? ik.iteration : 1;
+
+		for ( let i = 0; i < iteration; i ++ ) {
+
+			let rotated = false;
+
+			for ( let j = 0, jl = links.length; j < jl; j ++ ) {
+
+				const link = bones[ links[ j ].index ];
+
+				// skip this link and following links.
+				// this skip is used for MMD performance optimization.
+				if ( links[ j ].enabled === false ) break;
+
+				const limitation = links[ j ].limitation;
+				const rotationMin = links[ j ].rotationMin;
+				const rotationMax = links[ j ].rotationMax;
+
+				// don't use getWorldPosition/Quaternion() here for the performance
+				// because they call updateMatrixWorld( true ) inside.
+				link.matrixWorld.decompose( _linkPos, _invLinkQ, _linkScale );
+				_invLinkQ.invert();
+				_effectorPos.setFromMatrixPosition( effector.matrixWorld );
+
+				// work in link world
+				_effectorVec.subVectors( _effectorPos, _linkPos );
+				_effectorVec.applyQuaternion( _invLinkQ );
+				_effectorVec.normalize();
+
+				_targetVec.subVectors( _targetPos, _linkPos );
+				_targetVec.applyQuaternion( _invLinkQ );
+				_targetVec.normalize();
+
+				let angle = _targetVec.dot( _effectorVec );
+
+				if ( angle > 1.0 ) {
+
+					angle = 1.0;
+
+				} else if ( angle < - 1.0 ) {
+
+					angle = - 1.0;
+
+				}
+
+				angle = math.acos( angle );
+
+				// skip if changing angle is too small to prevent vibration of bone
+				if ( angle < 1e-5 ) continue;
+
+				if ( ik.minAngle !== undefined && angle < ik.minAngle ) {
+
+					angle = ik.minAngle;
+
+				}
+
+				if ( ik.maxAngle !== undefined && angle > ik.maxAngle ) {
+
+					angle = ik.maxAngle;
+
+				}
+
+				_axis.crossVectors( _effectorVec, _targetVec );
+				_axis.normalize();
+
+				_q.setFromAxisAngle( _axis, angle );
+				link.quaternion.multiply( _q );
+
+				// TODO: re-consider the limitation specification
+				if ( limitation !== undefined ) {
+
+					let c = link.quaternion.w;
+
+					if ( c > 1.0 ) c = 1.0;
+
+					const c2 = math.sqrt( 1 - c * c );
+					link.quaternion.set( limitation.x * c2,
+					                     limitation.y * c2,
+					                     limitation.z * c2,
+					                     c );
+
+				}
+
+				if ( rotationMin !== undefined ) {
+
+					link.rotation.setFromVector3( _vector.setFromEuler( link.rotation ).max( rotationMin ) );
+
+				}
+
+				if ( rotationMax !== undefined ) {
+
+					link.rotation.setFromVector3( _vector.setFromEuler( link.rotation ).min( rotationMax ) );
+
+				}
+
+				link.updateMatrixWorld( true );
+
+				rotated = true;
+
+			}
+
+			if ( ! rotated ) break;
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Creates Helper
+	 *
+	 * @return {CCDIKHelper}
+	 */
+	createHelper() {
+
+		return new CCDIKHelper( this.mesh, this.mesh.geometry.userData.MMD.iks );
+
+	}
+
+	// private methods
+
+	_valid() {
+
+		const iks = this.iks;
+		const bones = this.mesh.skeleton.bones;
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			const ik = iks[ i ];
+			const effector = bones[ ik.effector ];
+			const links = ik.links;
+			let link0, link1;
+
+			link0 = effector;
+
+			for ( let j = 0, jl = links.length; j < jl; j ++ ) {
+
+				link1 = bones[ links[ j ].index ];
+
+				if ( link0.parent !== link1 ) {
+
+					console.warn( 'THREE.CCDIKSolver: bone ' + link0.name + ' is not the child of bone ' + link1.name );
+
+				}
+
+				link0 = link1;
+
+			}
+
+		}
+
+	}
+
+}
+
+function getPosition( bone, matrixWorldInv ) {
+
+	return _vector
+		.setFromMatrixPosition( bone.matrixWorld )
+		.applyMatrix4( matrixWorldInv );
+
+}
+
+function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv ) {
+
+	const v = getPosition( bone, matrixWorldInv );
+
+	array[ index * 3 + 0 ] = v.x;
+	array[ index * 3 + 1 ] = v.y;
+	array[ index * 3 + 2 ] = v.z;
+
+}
+
+/**
+ * Visualize IK bones
+ *
+ * @param {SkinnedMesh} mesh
+ * @param {Array<Object>} iks
+ */
+class CCDIKHelper extends Object3D {
+
+	constructor( mesh, iks = [] ) {
+
+		super();
+
+		this.root = mesh;
+		this.iks = iks;
+
+		this.matrix.copy( mesh.matrixWorld );
+		this.matrixAutoUpdate = false;
+
+		this.sphereGeometry = new SphereGeometry( 0.25, 16, 8 );
+
+		this.targetSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0xff8888 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.effectorSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0x88ff88 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.linkSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0x8888ff ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.lineMaterial = new LineBasicMaterial( {
+			color: new Color( 0xff0000 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this._init();
+
+	}
+
+	/**
+	 * Updates IK bones visualization.
+	 */
+	updateMatrixWorld( force ) {
+
+		const mesh = this.root;
+
+		if ( this.visible ) {
+
+			let offset = 0;
+
+			const iks = this.iks;
+			const bones = mesh.skeleton.bones;
+
+			_matrix.copy( mesh.matrixWorld ).invert();
+
+			for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+				const ik = iks[ i ];
+
+				const targetBone = bones[ ik.target ];
+				const effectorBone = bones[ ik.effector ];
+
+				const targetMesh = this.children[ offset ++ ];
+				const effectorMesh = this.children[ offset ++ ];
+
+				targetMesh.position.copy( getPosition( targetBone, _matrix ) );
+				effectorMesh.position.copy( getPosition( effectorBone, _matrix ) );
+
+				for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+					const link = ik.links[ j ];
+					const linkBone = bones[ link.index ];
+
+					const linkMesh = this.children[ offset ++ ];
+
+					linkMesh.position.copy( getPosition( linkBone, _matrix ) );
+
+				}
+
+				const line = this.children[ offset ++ ];
+				const array = line.geometry.attributes.position.array;
+
+				setPositionOfBoneToAttributeArray( array, 0, targetBone, _matrix );
+				setPositionOfBoneToAttributeArray( array, 1, effectorBone, _matrix );
+
+				for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+					const link = ik.links[ j ];
+					const linkBone = bones[ link.index ];
+					setPositionOfBoneToAttributeArray( array, j + 2, linkBone, _matrix );
+
+				}
+
+				line.geometry.attributes.position.needsUpdate = true;
+
+			}
+
+		}
+
+		this.matrix.copy( mesh.matrixWorld );
+
+		super.updateMatrixWorld( force );
+
+	}
+
+	// private method
+
+	_init() {
+
+		const scope = this;
+		const iks = this.iks;
+
+		function createLineGeometry( ik ) {
+
+			const geometry = new BufferGeometry();
+			const vertices = new Float32Array( ( 2 + ik.links.length ) * 3 );
+			geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
+
+			return geometry;
+
+		}
+
+		function createTargetMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.targetSphereMaterial );
+
+		}
+
+		function createEffectorMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.effectorSphereMaterial );
+
+		}
+
+		function createLinkMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.linkSphereMaterial );
+
+		}
+
+		function createLine( ik ) {
+
+			return new Line( createLineGeometry( ik ), scope.lineMaterial );
+
+		}
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			const ik = iks[ i ];
+
+			this.add( createTargetMesh() );
+			this.add( createEffectorMesh() );
+
+			for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+				this.add( createLinkMesh() );
+
+			}
+
+			this.add( createLine( ik ) );
+
+		}
+
+	}
+
+}
+
+export { CCDIKSolver, CCDIKHelper };

jsm/cameras/CinematicCamera.js

@@ -0,0 +1,209 @@
+import {
+	Mesh,
+	OrthographicCamera,
+	PerspectiveCamera,
+	PlaneGeometry,
+	Scene,
+	ShaderMaterial,
+	UniformsUtils,
+	WebGLRenderTarget
+} from 'three';
+
+import { BokehShader } from '../shaders/BokehShader2.js';
+import { BokehDepthShader } from '../shaders/BokehShader2.js';
+
+class CinematicCamera extends PerspectiveCamera {
+
+	constructor( fov, aspect, near, far ) {
+
+		super( fov, aspect, near, far );
+
+		this.type = 'CinematicCamera';
+
+		this.postprocessing = { enabled: true };
+		this.shaderSettings = {
+			rings: 3,
+			samples: 4
+		};
+
+		const depthShader = BokehDepthShader;
+
+		this.materialDepth = new ShaderMaterial( {
+			uniforms: depthShader.uniforms,
+			vertexShader: depthShader.vertexShader,
+			fragmentShader: depthShader.fragmentShader
+		} );
+
+		this.materialDepth.uniforms[ 'mNear' ].value = near;
+		this.materialDepth.uniforms[ 'mFar' ].value = far;
+
+		// In case of cinematicCamera, having a default lens set is important
+		this.setLens();
+
+		this.initPostProcessing();
+
+	}
+
+	// providing fnumber and coc(Circle of Confusion) as extra arguments
+	// In case of cinematicCamera, having a default lens set is important
+	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
+	setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {
+
+		this.filmGauge = filmGauge;
+
+		this.setFocalLength( focalLength );
+
+		this.fNumber = fNumber;
+		this.coc = coc;
+
+		// fNumber is focalLength by aperture
+		this.aperture = focalLength / this.fNumber;
+
+		// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
+		this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
+
+	}
+
+	linearize( depth ) {
+
+		const zfar = this.far;
+		const znear = this.near;
+		return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
+
+	}
+
+	smoothstep( near, far, depth ) {
+
+		const x = this.saturate( ( depth - near ) / ( far - near ) );
+		return x * x * ( 3 - 2 * x );
+
+	}
+
+	saturate( x ) {
+
+		return Math.max( 0, Math.min( 1, x ) );
+
+	}
+
+	// function for focusing at a distance from the camera
+	focusAt( focusDistance = 20 ) {
+
+		const focalLength = this.getFocalLength();
+
+		// distance from the camera (normal to frustrum) to focus on
+		this.focus = focusDistance;
+
+		// the nearest point from the camera which is in focus (unused)
+		this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
+
+		// the farthest point from the camera which is in focus (unused)
+		this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
+
+		// the gap or width of the space in which is everything is in focus (unused)
+		this.depthOfField = this.farPoint - this.nearPoint;
+
+		// Considering minimum distance of focus for a standard lens (unused)
+		if ( this.depthOfField < 0 ) this.depthOfField = 0;
+
+		this.sdistance = this.smoothstep( this.near, this.far, this.focus );
+
+		this.ldistance = this.linearize( 1 -	this.sdistance );
+
+		this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
+
+	}
+
+	initPostProcessing() {
+
+		if ( this.postprocessing.enabled ) {
+
+			this.postprocessing.scene = new Scene();
+
+			this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+
+			this.postprocessing.scene.add( this.postprocessing.camera );
+
+			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+
+			const bokeh_shader = BokehShader;
+
+			this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
+
+			this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
+			this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;
+
+			this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
+			this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;
+
+			this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
+
+			this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
+
+			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
+
+			//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
+
+			this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
+			this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;
+
+
+			this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
+
+			this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
+
+			this.postprocessing.materialBokeh = new ShaderMaterial( {
+				uniforms: this.postprocessing.bokeh_uniforms,
+				vertexShader: bokeh_shader.vertexShader,
+				fragmentShader: bokeh_shader.fragmentShader,
+				defines: {
+					RINGS: this.shaderSettings.rings,
+					SAMPLES: this.shaderSettings.samples,
+					DEPTH_PACKING: 1
+				}
+			} );
+
+			this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
+			this.postprocessing.quad.position.z = - 500;
+			this.postprocessing.scene.add( this.postprocessing.quad );
+
+		}
+
+	}
+
+	renderCinematic( scene, renderer ) {
+
+		if ( this.postprocessing.enabled ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			renderer.clear();
+
+			// Render scene into texture
+
+			scene.overrideMaterial = null;
+			renderer.setRenderTarget( this.postprocessing.rtTextureColor );
+			renderer.clear();
+			renderer.render( scene, this );
+
+			// Render depth into texture
+
+			scene.overrideMaterial = this.materialDepth;
+			renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
+			renderer.clear();
+			renderer.render( scene, this );
+
+			// Render bokeh composite
+
+			renderer.setRenderTarget( null );
+			renderer.render( this.postprocessing.scene, this.postprocessing.camera );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		}
+
+	}
+
+}
+
+export { CinematicCamera };

jsm/capabilities/WebGL.js

@@ -0,0 +1,91 @@
+class WebGL {
+
+	static isWebGLAvailable() {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
+	static isWebGL2Available() {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
+	static getWebGLErrorMessage() {
+
+		return this.getErrorMessage( 1 );
+
+	}
+
+	static getWebGL2ErrorMessage() {
+
+		return this.getErrorMessage( 2 );
+
+	}
+
+	static getErrorMessage( version ) {
+
+		const names = {
+			1: 'WebGL',
+			2: 'WebGL 2'
+		};
+
+		const contexts = {
+			1: window.WebGLRenderingContext,
+			2: window.WebGL2RenderingContext
+		};
+
+		let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
+
+		const element = document.createElement( 'div' );
+		element.id = 'webglmessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( contexts[ version ] ) {
+
+			message = message.replace( '$0', 'graphics card' );
+
+		} else {
+
+			message = message.replace( '$0', 'browser' );
+
+		}
+
+		message = message.replace( '$1', names[ version ] );
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+}
+
+export default WebGL;

jsm/capabilities/WebGPU.js

@@ -0,0 +1,33 @@
+class WebGPU {
+
+	static isAvailable() {
+
+		return ( navigator.gpu !== undefined );
+
+	}
+
+	static getErrorMessage() {
+
+		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a>';
+
+		const element = document.createElement( 'div' );
+		element.id = 'webgpumessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+}
+
+export default WebGPU;

jsm/controls/DragControls.js

@@ -0,0 +1,220 @@
+import {
+	EventDispatcher,
+	Matrix4,
+	Plane,
+	Raycaster,
+	Vector2,
+	Vector3
+} from 'three';
+
+const _plane = new Plane();
+const _raycaster = new Raycaster();
+
+const _pointer = new Vector2();
+const _offset = new Vector3();
+const _intersection = new Vector3();
+const _worldPosition = new Vector3();
+const _inverseMatrix = new Matrix4();
+
+class DragControls extends EventDispatcher {
+
+	constructor( _objects, _camera, _domElement ) {
+
+		super();
+
+		_domElement.style.touchAction = 'none'; // disable touch scroll
+
+		let _selected = null, _hovered = null;
+
+		const _intersections = [];
+
+		//
+
+		const scope = this;
+
+		function activate() {
+
+			_domElement.addEventListener( 'pointermove', onPointerMove );
+			_domElement.addEventListener( 'pointerdown', onPointerDown );
+			_domElement.addEventListener( 'pointerup', onPointerCancel );
+			_domElement.addEventListener( 'pointerleave', onPointerCancel );
+
+		}
+
+		function deactivate() {
+
+			_domElement.removeEventListener( 'pointermove', onPointerMove );
+			_domElement.removeEventListener( 'pointerdown', onPointerDown );
+			_domElement.removeEventListener( 'pointerup', onPointerCancel );
+			_domElement.removeEventListener( 'pointerleave', onPointerCancel );
+
+			_domElement.style.cursor = '';
+
+		}
+
+		function dispose() {
+
+			deactivate();
+
+		}
+
+		function getObjects() {
+
+			return _objects;
+
+		}
+
+		function getRaycaster() {
+
+			return _raycaster;
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_raycaster.setFromCamera( _pointer, _camera );
+
+			if ( _selected ) {
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+				}
+
+				scope.dispatchEvent( { type: 'drag', object: _selected } );
+
+				return;
+
+			}
+
+			// hover support
+
+			if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
+
+				_intersections.length = 0;
+
+				_raycaster.setFromCamera( _pointer, _camera );
+				_raycaster.intersectObjects( _objects, true, _intersections );
+
+				if ( _intersections.length > 0 ) {
+
+					const object = _intersections[ 0 ].object;
+
+					_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
+
+					if ( _hovered !== object && _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+					if ( _hovered !== object ) {
+
+						scope.dispatchEvent( { type: 'hoveron', object: object } );
+
+						_domElement.style.cursor = 'pointer';
+						_hovered = object;
+
+					}
+
+				} else {
+
+					if ( _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+				}
+
+			}
+
+		}
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_intersections.length = 0;
+
+			_raycaster.setFromCamera( _pointer, _camera );
+			_raycaster.intersectObjects( _objects, true, _intersections );
+
+			if ( _intersections.length > 0 ) {
+
+				_selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
+
+				_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
+					_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				}
+
+				_domElement.style.cursor = 'move';
+
+				scope.dispatchEvent( { type: 'dragstart', object: _selected } );
+
+			}
+
+
+		}
+
+		function onPointerCancel() {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _selected ) {
+
+				scope.dispatchEvent( { type: 'dragend', object: _selected } );
+
+				_selected = null;
+
+			}
+
+			_domElement.style.cursor = _hovered ? 'pointer' : 'auto';
+
+		}
+
+		function updatePointer( event ) {
+
+			const rect = _domElement.getBoundingClientRect();
+
+			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
+			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
+
+		}
+
+		activate();
+
+		// API
+
+		this.enabled = true;
+		this.transformGroup = false;
+
+		this.activate = activate;
+		this.deactivate = deactivate;
+		this.dispose = dispose;
+		this.getObjects = getObjects;
+		this.getRaycaster = getRaycaster;
+
+	}
+
+}
+
+export { DragControls };

jsm/controls/FirstPersonControls.js

@@ -0,0 +1,332 @@
+import {
+	MathUtils,
+	Spherical,
+	Vector3
+} from 'three';
+
+const _lookDirection = new Vector3();
+const _spherical = new Spherical();
+const _target = new Vector3();
+
+class FirstPersonControls {
+
+	constructor( object, domElement ) {
+
+		if ( domElement === undefined ) {
+
+			console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
+			domElement = document;
+
+		}
+
+		this.object = object;
+		this.domElement = domElement;
+
+		// API
+
+		this.enabled = true;
+
+		this.movementSpeed = 1.0;
+		this.lookSpeed = 0.005;
+
+		this.lookVertical = true;
+		this.autoForward = false;
+
+		this.activeLook = true;
+
+		this.heightSpeed = false;
+		this.heightCoef = 1.0;
+		this.heightMin = 0.0;
+		this.heightMax = 1.0;
+
+		this.constrainVertical = false;
+		this.verticalMin = 0;
+		this.verticalMax = Math.PI;
+
+		this.mouseDragOn = false;
+
+		// internals
+
+		this.autoSpeedFactor = 0.0;
+
+		this.mouseX = 0;
+		this.mouseY = 0;
+
+		this.moveForward = false;
+		this.moveBackward = false;
+		this.moveLeft = false;
+		this.moveRight = false;
+
+		this.viewHalfX = 0;
+		this.viewHalfY = 0;
+
+		// private variables
+
+		let lat = 0;
+		let lon = 0;
+
+		//
+
+		this.handleResize = function () {
+
+			if ( this.domElement === document ) {
+
+				this.viewHalfX = window.innerWidth / 2;
+				this.viewHalfY = window.innerHeight / 2;
+
+			} else {
+
+				this.viewHalfX = this.domElement.offsetWidth / 2;
+				this.viewHalfY = this.domElement.offsetHeight / 2;
+
+			}
+
+		};
+
+		this.onMouseDown = function ( event ) {
+
+			if ( this.domElement !== document ) {
+
+				this.domElement.focus();
+
+			}
+
+			if ( this.activeLook ) {
+
+				switch ( event.button ) {
+
+					case 0: this.moveForward = true; break;
+					case 2: this.moveBackward = true; break;
+
+				}
+
+			}
+
+			this.mouseDragOn = true;
+
+		};
+
+		this.onMouseUp = function ( event ) {
+
+			if ( this.activeLook ) {
+
+				switch ( event.button ) {
+
+					case 0: this.moveForward = false; break;
+					case 2: this.moveBackward = false; break;
+
+				}
+
+			}
+
+			this.mouseDragOn = false;
+
+		};
+
+		this.onMouseMove = function ( event ) {
+
+			if ( this.domElement === document ) {
+
+				this.mouseX = event.pageX - this.viewHalfX;
+				this.mouseY = event.pageY - this.viewHalfY;
+
+			} else {
+
+				this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
+				this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
+
+			}
+
+		};
+
+		this.onKeyDown = function ( event ) {
+
+			switch ( event.code ) {
+
+				case 'ArrowUp':
+				case 'KeyW': this.moveForward = true; break;
+
+				case 'ArrowLeft':
+				case 'KeyA': this.moveLeft = true; break;
+
+				case 'ArrowDown':
+				case 'KeyS': this.moveBackward = true; break;
+
+				case 'ArrowRight':
+				case 'KeyD': this.moveRight = true; break;
+
+				case 'KeyR': this.moveUp = true; break;
+				case 'KeyF': this.moveDown = true; break;
+
+			}
+
+		};
+
+		this.onKeyUp = function ( event ) {
+
+			switch ( event.code ) {
+
+				case 'ArrowUp':
+				case 'KeyW': this.moveForward = false; break;
+
+				case 'ArrowLeft':
+				case 'KeyA': this.moveLeft = false; break;
+
+				case 'ArrowDown':
+				case 'KeyS': this.moveBackward = false; break;
+
+				case 'ArrowRight':
+				case 'KeyD': this.moveRight = false; break;
+
+				case 'KeyR': this.moveUp = false; break;
+				case 'KeyF': this.moveDown = false; break;
+
+			}
+
+		};
+
+		this.lookAt = function ( x, y, z ) {
+
+			if ( x.isVector3 ) {
+
+				_target.copy( x );
+
+			} else {
+
+				_target.set( x, y, z );
+
+			}
+
+			this.object.lookAt( _target );
+
+			setOrientation( this );
+
+			return this;
+
+		};
+
+		this.update = function () {
+
+			const targetPosition = new Vector3();
+
+			return function update( delta ) {
+
+				if ( this.enabled === false ) return;
+
+				if ( this.heightSpeed ) {
+
+					const y = MathUtils.clamp( this.object.position.y, this.heightMin, this.heightMax );
+					const heightDelta = y - this.heightMin;
+
+					this.autoSpeedFactor = delta * ( heightDelta * this.heightCoef );
+
+				} else {
+
+					this.autoSpeedFactor = 0.0;
+
+				}
+
+				const actualMoveSpeed = delta * this.movementSpeed;
+
+				if ( this.moveForward || ( this.autoForward && ! this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
+				if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );
+
+				if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
+				if ( this.moveRight ) this.object.translateX( actualMoveSpeed );
+
+				if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
+				if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
+
+				let actualLookSpeed = delta * this.lookSpeed;
+
+				if ( ! this.activeLook ) {
+
+					actualLookSpeed = 0;
+
+				}
+
+				let verticalLookRatio = 1;
+
+				if ( this.constrainVertical ) {
+
+					verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
+
+				}
+
+				lon -= this.mouseX * actualLookSpeed;
+				if ( this.lookVertical ) lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
+
+				lat = Math.max( - 85, Math.min( 85, lat ) );
+
+				let phi = MathUtils.degToRad( 90 - lat );
+				const theta = MathUtils.degToRad( lon );
+
+				if ( this.constrainVertical ) {
+
+					phi = MathUtils.mapLinear( phi, 0, Math.PI, this.verticalMin, this.verticalMax );
+
+				}
+
+				const position = this.object.position;
+
+				targetPosition.setFromSphericalCoords( 1, phi, theta ).add( position );
+
+				this.object.lookAt( targetPosition );
+
+			};
+
+		}();
+
+		this.dispose = function () {
+
+			this.domElement.removeEventListener( 'contextmenu', contextmenu );
+			this.domElement.removeEventListener( 'mousedown', _onMouseDown );
+			this.domElement.removeEventListener( 'mousemove', _onMouseMove );
+			this.domElement.removeEventListener( 'mouseup', _onMouseUp );
+
+			window.removeEventListener( 'keydown', _onKeyDown );
+			window.removeEventListener( 'keyup', _onKeyUp );
+
+		};
+
+		const _onMouseMove = this.onMouseMove.bind( this );
+		const _onMouseDown = this.onMouseDown.bind( this );
+		const _onMouseUp = this.onMouseUp.bind( this );
+		const _onKeyDown = this.onKeyDown.bind( this );
+		const _onKeyUp = this.onKeyUp.bind( this );
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+		this.domElement.addEventListener( 'mousemove', _onMouseMove );
+		this.domElement.addEventListener( 'mousedown', _onMouseDown );
+		this.domElement.addEventListener( 'mouseup', _onMouseUp );
+
+		window.addEventListener( 'keydown', _onKeyDown );
+		window.addEventListener( 'keyup', _onKeyUp );
+
+		function setOrientation( controls ) {
+
+			const quaternion = controls.object.quaternion;
+
+			_lookDirection.set( 0, 0, - 1 ).applyQuaternion( quaternion );
+			_spherical.setFromVector3( _lookDirection );
+
+			lat = 90 - MathUtils.radToDeg( _spherical.phi );
+			lon = MathUtils.radToDeg( _spherical.theta );
+
+		}
+
+		this.handleResize();
+
+		setOrientation( this );
+
+	}
+
+}
+
+function contextmenu( event ) {
+
+	event.preventDefault();
+
+}
+
+export { FirstPersonControls };

jsm/controls/FlyControls.js

@@ -0,0 +1,292 @@
+import {
+	EventDispatcher,
+	Quaternion,
+	Vector3
+} from 'three';
+
+const _changeEvent = { type: 'change' };
+
+class FlyControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		if ( domElement === undefined ) {
+
+			console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
+			domElement = document;
+
+		}
+
+		this.object = object;
+		this.domElement = domElement;
+
+		// API
+
+		this.movementSpeed = 1.0;
+		this.rollSpeed = 0.005;
+
+		this.dragToLook = false;
+		this.autoForward = false;
+
+		// disable default target object behavior
+
+		// internals
+
+		const scope = this;
+
+		const EPS = 0.000001;
+
+		const lastQuaternion = new Quaternion();
+		const lastPosition = new Vector3();
+
+		this.tmpQuaternion = new Quaternion();
+
+		this.mouseStatus = 0;
+
+		this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
+		this.moveVector = new Vector3( 0, 0, 0 );
+		this.rotationVector = new Vector3( 0, 0, 0 );
+
+		this.keydown = function ( event ) {
+
+			if ( event.altKey ) {
+
+				return;
+
+			}
+
+			switch ( event.code ) {
+
+				case 'ShiftLeft':
+				case 'ShiftRight': this.movementSpeedMultiplier = .1; break;
+
+				case 'KeyW': this.moveState.forward = 1; break;
+				case 'KeyS': this.moveState.back = 1; break;
+
+				case 'KeyA': this.moveState.left = 1; break;
+				case 'KeyD': this.moveState.right = 1; break;
+
+				case 'KeyR': this.moveState.up = 1; break;
+				case 'KeyF': this.moveState.down = 1; break;
+
+				case 'ArrowUp': this.moveState.pitchUp = 1; break;
+				case 'ArrowDown': this.moveState.pitchDown = 1; break;
+
+				case 'ArrowLeft': this.moveState.yawLeft = 1; break;
+				case 'ArrowRight': this.moveState.yawRight = 1; break;
+
+				case 'KeyQ': this.moveState.rollLeft = 1; break;
+				case 'KeyE': this.moveState.rollRight = 1; break;
+
+			}
+
+			this.updateMovementVector();
+			this.updateRotationVector();
+
+		};
+
+		this.keyup = function ( event ) {
+
+			switch ( event.code ) {
+
+				case 'ShiftLeft':
+				case 'ShiftRight': this.movementSpeedMultiplier = 1; break;
+
+				case 'KeyW': this.moveState.forward = 0; break;
+				case 'KeyS': this.moveState.back = 0; break;
+
+				case 'KeyA': this.moveState.left = 0; break;
+				case 'KeyD': this.moveState.right = 0; break;
+
+				case 'KeyR': this.moveState.up = 0; break;
+				case 'KeyF': this.moveState.down = 0; break;
+
+				case 'ArrowUp': this.moveState.pitchUp = 0; break;
+				case 'ArrowDown': this.moveState.pitchDown = 0; break;
+
+				case 'ArrowLeft': this.moveState.yawLeft = 0; break;
+				case 'ArrowRight': this.moveState.yawRight = 0; break;
+
+				case 'KeyQ': this.moveState.rollLeft = 0; break;
+				case 'KeyE': this.moveState.rollRight = 0; break;
+
+			}
+
+			this.updateMovementVector();
+			this.updateRotationVector();
+
+		};
+
+		this.mousedown = function ( event ) {
+
+			if ( this.dragToLook ) {
+
+				this.mouseStatus ++;
+
+			} else {
+
+				switch ( event.button ) {
+
+					case 0: this.moveState.forward = 1; break;
+					case 2: this.moveState.back = 1; break;
+
+				}
+
+				this.updateMovementVector();
+
+			}
+
+		};
+
+		this.mousemove = function ( event ) {
+
+			if ( ! this.dragToLook || this.mouseStatus > 0 ) {
+
+				const container = this.getContainerDimensions();
+				const halfWidth = container.size[ 0 ] / 2;
+				const halfHeight = container.size[ 1 ] / 2;
+
+				this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
+				this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
+
+				this.updateRotationVector();
+
+			}
+
+		};
+
+		this.mouseup = function ( event ) {
+
+			if ( this.dragToLook ) {
+
+				this.mouseStatus --;
+
+				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+
+			} else {
+
+				switch ( event.button ) {
+
+					case 0: this.moveState.forward = 0; break;
+					case 2: this.moveState.back = 0; break;
+
+				}
+
+				this.updateMovementVector();
+
+			}
+
+			this.updateRotationVector();
+
+		};
+
+		this.update = function ( delta ) {
+
+			const moveMult = delta * scope.movementSpeed;
+			const rotMult = delta * scope.rollSpeed;
+
+			scope.object.translateX( scope.moveVector.x * moveMult );
+			scope.object.translateY( scope.moveVector.y * moveMult );
+			scope.object.translateZ( scope.moveVector.z * moveMult );
+
+			scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
+			scope.object.quaternion.multiply( scope.tmpQuaternion );
+
+			if (
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
+			) {
+
+				scope.dispatchEvent( _changeEvent );
+				lastQuaternion.copy( scope.object.quaternion );
+				lastPosition.copy( scope.object.position );
+
+			}
+
+		};
+
+		this.updateMovementVector = function () {
+
+			const forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0;
+
+			this.moveVector.x = ( - this.moveState.left + this.moveState.right );
+			this.moveVector.y = ( - this.moveState.down + this.moveState.up );
+			this.moveVector.z = ( - forward + this.moveState.back );
+
+			//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
+
+		};
+
+		this.updateRotationVector = function () {
+
+			this.rotationVector.x = ( - this.moveState.pitchDown + this.moveState.pitchUp );
+			this.rotationVector.y = ( - this.moveState.yawRight + this.moveState.yawLeft );
+			this.rotationVector.z = ( - this.moveState.rollRight + this.moveState.rollLeft );
+
+			//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
+
+		};
+
+		this.getContainerDimensions = function () {
+
+			if ( this.domElement != document ) {
+
+				return {
+					size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
+					offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
+				};
+
+			} else {
+
+				return {
+					size: [ window.innerWidth, window.innerHeight ],
+					offset: [ 0, 0 ]
+				};
+
+			}
+
+		};
+
+		this.dispose = function () {
+
+			this.domElement.removeEventListener( 'contextmenu', contextmenu );
+			this.domElement.removeEventListener( 'mousedown', _mousedown );
+			this.domElement.removeEventListener( 'mousemove', _mousemove );
+			this.domElement.removeEventListener( 'mouseup', _mouseup );
+
+			window.removeEventListener( 'keydown', _keydown );
+			window.removeEventListener( 'keyup', _keyup );
+
+		};
+
+		const _mousemove = this.mousemove.bind( this );
+		const _mousedown = this.mousedown.bind( this );
+		const _mouseup = this.mouseup.bind( this );
+		const _keydown = this.keydown.bind( this );
+		const _keyup = this.keyup.bind( this );
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+
+		this.domElement.addEventListener( 'mousemove', _mousemove );
+		this.domElement.addEventListener( 'mousedown', _mousedown );
+		this.domElement.addEventListener( 'mouseup', _mouseup );
+
+		window.addEventListener( 'keydown', _keydown );
+		window.addEventListener( 'keyup', _keyup );
+
+		this.updateMovementVector();
+		this.updateRotationVector();
+
+	}
+
+}
+
+function contextmenu( event ) {
+
+	event.preventDefault();
+
+}
+
+export { FlyControls };

jsm/controls/PointerLockControls.js

@@ -0,0 +1,164 @@
+import {
+	Euler,
+	EventDispatcher,
+	Vector3
+} from 'three';
+
+const _euler = new Euler( 0, 0, 0, 'YXZ' );
+const _vector = new Vector3();
+
+const _changeEvent = { type: 'change' };
+const _lockEvent = { type: 'lock' };
+const _unlockEvent = { type: 'unlock' };
+
+const _PI_2 = Math.PI / 2;
+
+class PointerLockControls extends EventDispatcher {
+
+	constructor( camera, domElement ) {
+
+		super();
+
+		if ( domElement === undefined ) {
+
+			console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
+			domElement = document.body;
+
+		}
+
+		this.domElement = domElement;
+		this.isLocked = false;
+
+		// Set to constrain the pitch of the camera
+		// Range is 0 to Math.PI radians
+		this.minPolarAngle = 0; // radians
+		this.maxPolarAngle = Math.PI; // radians
+
+		this.pointerSpeed = 1.0;
+
+		const scope = this;
+
+		function onMouseMove( event ) {
+
+			if ( scope.isLocked === false ) return;
+
+			const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+			const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+			_euler.setFromQuaternion( camera.quaternion );
+
+			_euler.y -= movementX * 0.002 * scope.pointerSpeed;
+			_euler.x -= movementY * 0.002 * scope.pointerSpeed;
+
+			_euler.x = Math.max( _PI_2 - scope.maxPolarAngle, Math.min( _PI_2 - scope.minPolarAngle, _euler.x ) );
+
+			camera.quaternion.setFromEuler( _euler );
+
+			scope.dispatchEvent( _changeEvent );
+
+		}
+
+		function onPointerlockChange() {
+
+			if ( scope.domElement.ownerDocument.pointerLockElement === scope.domElement ) {
+
+				scope.dispatchEvent( _lockEvent );
+
+				scope.isLocked = true;
+
+			} else {
+
+				scope.dispatchEvent( _unlockEvent );
+
+				scope.isLocked = false;
+
+			}
+
+		}
+
+		function onPointerlockError() {
+
+			console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+
+		}
+
+		this.connect = function () {
+
+			scope.domElement.ownerDocument.addEventListener( 'mousemove', onMouseMove );
+			scope.domElement.ownerDocument.addEventListener( 'pointerlockchange', onPointerlockChange );
+			scope.domElement.ownerDocument.addEventListener( 'pointerlockerror', onPointerlockError );
+
+		};
+
+		this.disconnect = function () {
+
+			scope.domElement.ownerDocument.removeEventListener( 'mousemove', onMouseMove );
+			scope.domElement.ownerDocument.removeEventListener( 'pointerlockchange', onPointerlockChange );
+			scope.domElement.ownerDocument.removeEventListener( 'pointerlockerror', onPointerlockError );
+
+		};
+
+		this.dispose = function () {
+
+			this.disconnect();
+
+		};
+
+		this.getObject = function () { // retaining this method for backward compatibility
+
+			return camera;
+
+		};
+
+		this.getDirection = function () {
+
+			const direction = new Vector3( 0, 0, - 1 );
+
+			return function ( v ) {
+
+				return v.copy( direction ).applyQuaternion( camera.quaternion );
+
+			};
+
+		}();
+
+		this.moveForward = function ( distance ) {
+
+			// move forward parallel to the xz-plane
+			// assumes camera.up is y-up
+
+			_vector.setFromMatrixColumn( camera.matrix, 0 );
+
+			_vector.crossVectors( camera.up, _vector );
+
+			camera.position.addScaledVector( _vector, distance );
+
+		};
+
+		this.moveRight = function ( distance ) {
+
+			_vector.setFromMatrixColumn( camera.matrix, 0 );
+
+			camera.position.addScaledVector( _vector, distance );
+
+		};
+
+		this.lock = function () {
+
+			this.domElement.requestPointerLock();
+
+		};
+
+		this.unlock = function () {
+
+			scope.domElement.ownerDocument.exitPointerLock();
+
+		};
+
+		this.connect();
+
+	}
+
+}
+
+export { PointerLockControls };

jsm/controls/TrackballControls.js

@@ -0,0 +1,805 @@
+import {
+	EventDispatcher,
+	MOUSE,
+	Quaternion,
+	Vector2,
+	Vector3
+} from 'three';
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+
+class TrackballControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
+		if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
+
+		const scope = this;
+		const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// API
+
+		this.enabled = true;
+
+		this.screen = { left: 0, top: 0, width: 0, height: 0 };
+
+		this.rotateSpeed = 1.0;
+		this.zoomSpeed = 1.2;
+		this.panSpeed = 0.3;
+
+		this.noRotate = false;
+		this.noZoom = false;
+		this.noPan = false;
+
+		this.staticMoving = false;
+		this.dynamicDampingFactor = 0.2;
+
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];
+
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// internals
+
+		this.target = new Vector3();
+
+		const EPS = 0.000001;
+
+		const lastPosition = new Vector3();
+		let lastZoom = 1;
+
+		let _state = STATE.NONE,
+			_keyState = STATE.NONE,
+
+			_touchZoomDistanceStart = 0,
+			_touchZoomDistanceEnd = 0,
+
+			_lastAngle = 0;
+
+		const _eye = new Vector3(),
+
+			_movePrev = new Vector2(),
+			_moveCurr = new Vector2(),
+
+			_lastAxis = new Vector3(),
+
+			_zoomStart = new Vector2(),
+			_zoomEnd = new Vector2(),
+
+			_panStart = new Vector2(),
+			_panEnd = new Vector2(),
+
+			_pointers = [],
+			_pointerPositions = {};
+
+		// for reset
+
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.up0 = this.object.up.clone();
+		this.zoom0 = this.object.zoom;
+
+		// methods
+
+		this.handleResize = function () {
+
+			const box = scope.domElement.getBoundingClientRect();
+			// adjustments come from similar code in the jquery offset() function
+			const d = scope.domElement.ownerDocument.documentElement;
+			scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
+			scope.screen.top = box.top + window.pageYOffset - d.clientTop;
+			scope.screen.width = box.width;
+			scope.screen.height = box.height;
+
+		};
+
+		const getMouseOnScreen = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnScreen( pageX, pageY ) {
+
+				vector.set(
+					( pageX - scope.screen.left ) / scope.screen.width,
+					( pageY - scope.screen.top ) / scope.screen.height
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		const getMouseOnCircle = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnCircle( pageX, pageY ) {
+
+				vector.set(
+					( ( pageX - scope.screen.width * 0.5 - scope.screen.left ) / ( scope.screen.width * 0.5 ) ),
+					( ( scope.screen.height + 2 * ( scope.screen.top - pageY ) ) / scope.screen.width ) // screen.width intentional
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		this.rotateCamera = ( function () {
+
+			const axis = new Vector3(),
+				quaternion = new Quaternion(),
+				eyeDirection = new Vector3(),
+				objectUpDirection = new Vector3(),
+				objectSidewaysDirection = new Vector3(),
+				moveDirection = new Vector3();
+
+			return function rotateCamera() {
+
+				moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
+				let angle = moveDirection.length();
+
+				if ( angle ) {
+
+					_eye.copy( scope.object.position ).sub( scope.target );
+
+					eyeDirection.copy( _eye ).normalize();
+					objectUpDirection.copy( scope.object.up ).normalize();
+					objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
+
+					objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
+					objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
+
+					moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
+
+					axis.crossVectors( moveDirection, _eye ).normalize();
+
+					angle *= scope.rotateSpeed;
+					quaternion.setFromAxisAngle( axis, angle );
+
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+					_lastAxis.copy( axis );
+					_lastAngle = angle;
+
+				} else if ( ! scope.staticMoving && _lastAngle ) {
+
+					_lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor );
+					_eye.copy( scope.object.position ).sub( scope.target );
+					quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+				}
+
+				_movePrev.copy( _moveCurr );
+
+			};
+
+		}() );
+
+
+		this.zoomCamera = function () {
+
+			let factor;
+
+			if ( _state === STATE.TOUCH_ZOOM_PAN ) {
+
+				factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
+				_touchZoomDistanceStart = _touchZoomDistanceEnd;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					_eye.multiplyScalar( factor );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					scope.object.zoom /= factor;
+					scope.object.updateProjectionMatrix();
+
+				} else {
+
+					console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+				}
+
+			} else {
+
+				factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed;
+
+				if ( factor !== 1.0 && factor > 0.0 ) {
+
+					if ( scope.object.isPerspectiveCamera ) {
+
+						_eye.multiplyScalar( factor );
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						scope.object.zoom /= factor;
+						scope.object.updateProjectionMatrix();
+
+					} else {
+
+						console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+					}
+
+				}
+
+				if ( scope.staticMoving ) {
+
+					_zoomStart.copy( _zoomEnd );
+
+				} else {
+
+					_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
+
+				}
+
+			}
+
+		};
+
+		this.panCamera = ( function () {
+
+			const mouseChange = new Vector2(),
+				objectUp = new Vector3(),
+				pan = new Vector3();
+
+			return function panCamera() {
+
+				mouseChange.copy( _panEnd ).sub( _panStart );
+
+				if ( mouseChange.lengthSq() ) {
+
+					if ( scope.object.isOrthographicCamera ) {
+
+						const scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
+						const scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;
+
+						mouseChange.x *= scale_x;
+						mouseChange.y *= scale_y;
+
+					}
+
+					mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );
+
+					pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
+					pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );
+
+					scope.object.position.add( pan );
+					scope.target.add( pan );
+
+					if ( scope.staticMoving ) {
+
+						_panStart.copy( _panEnd );
+
+					} else {
+
+						_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );
+
+					}
+
+				}
+
+			};
+
+		}() );
+
+		this.checkDistances = function () {
+
+			if ( ! scope.noZoom || ! scope.noPan ) {
+
+				if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+				if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+			}
+
+		};
+
+		this.update = function () {
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			if ( ! scope.noRotate ) {
+
+				scope.rotateCamera();
+
+			}
+
+			if ( ! scope.noZoom ) {
+
+				scope.zoomCamera();
+
+			}
+
+			if ( ! scope.noPan ) {
+
+				scope.panCamera();
+
+			}
+
+			scope.object.position.addVectors( scope.target, _eye );
+
+			if ( scope.object.isPerspectiveCamera ) {
+
+				scope.checkDistances();
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+
+				}
+
+			} else if ( scope.object.isOrthographicCamera ) {
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastZoom = scope.object.zoom;
+
+				}
+
+			} else {
+
+				console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+			}
+
+		};
+
+		this.reset = function () {
+
+			_state = STATE.NONE;
+			_keyState = STATE.NONE;
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.up.copy( scope.up0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			scope.object.lookAt( scope.target );
+
+			scope.dispatchEvent( _changeEvent );
+
+			lastPosition.copy( scope.object.position );
+			lastZoom = scope.object.zoom;
+
+		};
+
+		// listeners
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchEnd( event );
+
+			} else {
+
+				onMouseUp();
+
+			}
+
+			//
+
+			removePointer( event );
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			}
+
+
+		}
+
+		function onPointerCancel( event ) {
+
+			removePointer( event );
+
+		}
+
+		function keydown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			window.removeEventListener( 'keydown', keydown );
+
+			if ( _keyState !== STATE.NONE ) {
+
+				return;
+
+			} else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
+
+				_keyState = STATE.ROTATE;
+
+			} else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
+
+				_keyState = STATE.ZOOM;
+
+			} else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
+
+				_keyState = STATE.PAN;
+
+			}
+
+		}
+
+		function keyup() {
+
+			if ( scope.enabled === false ) return;
+
+			_keyState = STATE.NONE;
+
+			window.addEventListener( 'keydown', keydown );
+
+		}
+
+		function onMouseDown( event ) {
+
+			if ( _state === STATE.NONE ) {
+
+				switch ( event.button ) {
+
+					case scope.mouseButtons.LEFT:
+						_state = STATE.ROTATE;
+						break;
+
+					case scope.mouseButtons.MIDDLE:
+						_state = STATE.ZOOM;
+						break;
+
+					case scope.mouseButtons.RIGHT:
+						_state = STATE.PAN;
+						break;
+
+				}
+
+			}
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+				_movePrev.copy( _moveCurr );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_zoomEnd.copy( _zoomStart );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_panEnd.copy( _panStart );
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onMouseMove( event ) {
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_movePrev.copy( _moveCurr );
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			}
+
+		}
+
+		function onMouseUp() {
+
+			_state = STATE.NONE;
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( scope.noZoom === true ) return;
+
+			event.preventDefault();
+
+			switch ( event.deltaMode ) {
+
+				case 2:
+					// Zoom in pages
+					_zoomStart.y -= event.deltaY * 0.025;
+					break;
+
+				case 1:
+					// Zoom in lines
+					_zoomStart.y -= event.deltaY * 0.01;
+					break;
+
+				default:
+					// undefined, 0, assume pixels
+					_zoomStart.y -= event.deltaY * 0.00025;
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				default: // 2 or more
+					_state = STATE.TOUCH_ZOOM_PAN;
+					const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX;
+					const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY;
+					_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
+					const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;
+					_panStart.copy( getMouseOnScreen( x, y ) );
+					_panEnd.copy( _panStart );
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_movePrev.copy( _moveCurr );
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					break;
+
+				default: // 2 or more
+
+					const position = getSecondPointerPosition( event );
+
+					const dx = event.pageX - position.x;
+					const dy = event.pageY - position.y;
+					_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( event.pageX + position.x ) / 2;
+					const y = ( event.pageY + position.y ) / 2;
+					_panEnd.copy( getMouseOnScreen( x, y ) );
+					break;
+
+			}
+
+		}
+
+		function onTouchEnd( event ) {
+
+			switch ( _pointers.length ) {
+
+				case 0:
+					_state = STATE.NONE;
+					break;
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				case 2:
+					_state = STATE.TOUCH_ZOOM_PAN;
+					_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.x, event.pageY - _movePrev.y ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+			}
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function contextmenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			_pointers.push( event );
+
+		}
+
+		function removePointer( event ) {
+
+			delete _pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < _pointers.length; i ++ ) {
+
+				if ( _pointers[ i ].pointerId == event.pointerId ) {
+
+					_pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = _pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				_pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointer = ( event.pointerId === _pointers[ 0 ].pointerId ) ? _pointers[ 1 ] : _pointers[ 0 ];
+
+			return _pointerPositions[ pointer.pointerId ];
+
+		}
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', contextmenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			window.removeEventListener( 'keydown', keydown );
+			window.removeEventListener( 'keyup', keyup );
+
+		};
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+
+		this.domElement.addEventListener( 'pointerdown', onPointerDown );
+		this.domElement.addEventListener( 'pointercancel', onPointerCancel );
+		this.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+
+		window.addEventListener( 'keydown', keydown );
+		window.addEventListener( 'keyup', keyup );
+
+		this.handleResize();
+
+		// force an update at start
+		this.update();
+
+	}
+
+}
+
+export { TrackballControls };

jsm/csm/CSM.js

@@ -0,0 +1,377 @@
+import {
+	Vector2,
+	Vector3,
+	DirectionalLight,
+	MathUtils,
+	ShaderChunk,
+	Matrix4,
+	Box3
+} from 'three';
+import { CSMFrustum } from './CSMFrustum.js';
+import { CSMShader } from './CSMShader.js';
+
+const _cameraToLightMatrix = new Matrix4();
+const _lightSpaceFrustum = new CSMFrustum();
+const _center = new Vector3();
+const _bbox = new Box3();
+const _uniformArray = [];
+const _logArray = [];
+
+export class CSM {
+
+	constructor( data ) {
+
+		data = data || {};
+
+		this.camera = data.camera;
+		this.parent = data.parent;
+		this.cascades = data.cascades || 3;
+		this.maxFar = data.maxFar || 100000;
+		this.mode = data.mode || 'practical';
+		this.shadowMapSize = data.shadowMapSize || 2048;
+		this.shadowBias = data.shadowBias || 0.000001;
+		this.lightDirection = data.lightDirection || new Vector3( 1, - 1, 1 ).normalize();
+		this.lightIntensity = data.lightIntensity || 1;
+		this.lightNear = data.lightNear || 1;
+		this.lightFar = data.lightFar || 2000;
+		this.lightMargin = data.lightMargin || 200;
+		this.customSplitsCallback = data.customSplitsCallback;
+		this.fade = false;
+		this.mainFrustum = new CSMFrustum();
+		this.frustums = [];
+		this.breaks = [];
+
+		this.lights = [];
+		this.shaders = new Map();
+
+		this.createLights();
+		this.updateFrustums();
+		this.injectInclude();
+
+	}
+
+	createLights() {
+
+		for ( let i = 0; i < this.cascades; i ++ ) {
+
+			const light = new DirectionalLight( 0xffffff, this.lightIntensity );
+			light.castShadow = true;
+			light.shadow.mapSize.width = this.shadowMapSize;
+			light.shadow.mapSize.height = this.shadowMapSize;
+
+			light.shadow.camera.near = this.lightNear;
+			light.shadow.camera.far = this.lightFar;
+			light.shadow.bias = this.shadowBias;
+
+			this.parent.add( light );
+			this.parent.add( light.target );
+			this.lights.push( light );
+
+		}
+
+	}
+
+	initCascades() {
+
+		const camera = this.camera;
+		camera.updateProjectionMatrix();
+		this.mainFrustum.setFromProjectionMatrix( camera.projectionMatrix, this.maxFar );
+		this.mainFrustum.split( this.breaks, this.frustums );
+
+	}
+
+	updateShadowBounds() {
+
+		const frustums = this.frustums;
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const light = this.lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const frustum = this.frustums[ i ];
+
+			// Get the two points that represent that furthest points on the frustum assuming
+			// that's either the diagonal across the far plane or the diagonal across the whole
+			// frustum itself.
+			const nearVerts = frustum.vertices.near;
+			const farVerts = frustum.vertices.far;
+			const point1 = farVerts[ 0 ];
+			let point2;
+			if ( point1.distanceTo( farVerts[ 2 ] ) > point1.distanceTo( nearVerts[ 2 ] ) ) {
+
+				point2 = farVerts[ 2 ];
+
+			} else {
+
+				point2 = nearVerts[ 2 ];
+
+			}
+
+			let squaredBBWidth = point1.distanceTo( point2 );
+			if ( this.fade ) {
+
+				// expand the shadow extents by the fade margin if fade is enabled.
+				const camera = this.camera;
+				const far = Math.max( camera.far, this.maxFar );
+				const linearDepth = frustum.vertices.far[ 0 ].z / ( far - camera.near );
+				const margin = 0.25 * Math.pow( linearDepth, 2.0 ) * ( far - camera.near );
+
+				squaredBBWidth += margin;
+
+			}
+
+			shadowCam.left = - squaredBBWidth / 2;
+			shadowCam.right = squaredBBWidth / 2;
+			shadowCam.top = squaredBBWidth / 2;
+			shadowCam.bottom = - squaredBBWidth / 2;
+			shadowCam.updateProjectionMatrix();
+
+		}
+
+	}
+
+	getBreaks() {
+
+		const camera = this.camera;
+		const far = Math.min( camera.far, this.maxFar );
+		this.breaks.length = 0;
+
+		switch ( this.mode ) {
+
+			case 'uniform':
+				uniformSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+			case 'logarithmic':
+				logarithmicSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+			case 'practical':
+				practicalSplit( this.cascades, camera.near, far, 0.5, this.breaks );
+				break;
+			case 'custom':
+				if ( this.customSplitsCallback === undefined ) console.error( 'CSM: Custom split scheme callback not defined.' );
+				this.customSplitsCallback( this.cascades, camera.near, far, this.breaks );
+				break;
+
+		}
+
+		function uniformSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near + ( far - near ) * i / amount ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function logarithmicSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near * ( far / near ) ** ( i / amount ) ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function practicalSplit( amount, near, far, lambda, target ) {
+
+			_uniformArray.length = 0;
+			_logArray.length = 0;
+			logarithmicSplit( amount, near, far, _logArray );
+			uniformSplit( amount, near, far, _uniformArray );
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( MathUtils.lerp( _uniformArray[ i - 1 ], _logArray[ i - 1 ], lambda ) );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+	}
+
+	update() {
+
+		const camera = this.camera;
+		const frustums = this.frustums;
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const light = this.lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const texelWidth = ( shadowCam.right - shadowCam.left ) / this.shadowMapSize;
+			const texelHeight = ( shadowCam.top - shadowCam.bottom ) / this.shadowMapSize;
+			light.shadow.camera.updateMatrixWorld( true );
+			_cameraToLightMatrix.multiplyMatrices( light.shadow.camera.matrixWorldInverse, camera.matrixWorld );
+			frustums[ i ].toSpace( _cameraToLightMatrix, _lightSpaceFrustum );
+
+			const nearVerts = _lightSpaceFrustum.vertices.near;
+			const farVerts = _lightSpaceFrustum.vertices.far;
+			_bbox.makeEmpty();
+			for ( let j = 0; j < 4; j ++ ) {
+
+				_bbox.expandByPoint( nearVerts[ j ] );
+				_bbox.expandByPoint( farVerts[ j ] );
+
+			}
+
+			_bbox.getCenter( _center );
+			_center.z = _bbox.max.z + this.lightMargin;
+			_center.x = Math.floor( _center.x / texelWidth ) * texelWidth;
+			_center.y = Math.floor( _center.y / texelHeight ) * texelHeight;
+			_center.applyMatrix4( light.shadow.camera.matrixWorld );
+
+			light.position.copy( _center );
+			light.target.position.copy( _center );
+
+			light.target.position.x += this.lightDirection.x;
+			light.target.position.y += this.lightDirection.y;
+			light.target.position.z += this.lightDirection.z;
+
+		}
+
+	}
+
+	injectInclude() {
+
+		ShaderChunk.lights_fragment_begin = CSMShader.lights_fragment_begin;
+		ShaderChunk.lights_pars_begin = CSMShader.lights_pars_begin;
+
+	}
+
+	setupMaterial( material ) {
+
+		material.defines = material.defines || {};
+		material.defines.USE_CSM = 1;
+		material.defines.CSM_CASCADES = this.cascades;
+
+		if ( this.fade ) {
+
+			material.defines.CSM_FADE = '';
+
+		}
+
+		const breaksVec2 = [];
+		const scope = this;
+		const shaders = this.shaders;
+
+		material.onBeforeCompile = function ( shader ) {
+
+			const far = Math.min( scope.camera.far, scope.maxFar );
+			scope.getExtendedBreaks( breaksVec2 );
+
+			shader.uniforms.CSM_cascades = { value: breaksVec2 };
+			shader.uniforms.cameraNear = { value: scope.camera.near };
+			shader.uniforms.shadowFar = { value: far };
+
+			shaders.set( material, shader );
+
+		};
+
+		shaders.set( material, null );
+
+	}
+
+	updateUniforms() {
+
+		const far = Math.min( this.camera.far, this.maxFar );
+		const shaders = this.shaders;
+
+		shaders.forEach( function ( shader, material ) {
+
+			if ( shader !== null ) {
+
+				const uniforms = shader.uniforms;
+				this.getExtendedBreaks( uniforms.CSM_cascades.value );
+				uniforms.cameraNear.value = this.camera.near;
+				uniforms.shadowFar.value = far;
+
+			}
+
+			if ( ! this.fade && 'CSM_FADE' in material.defines ) {
+
+				delete material.defines.CSM_FADE;
+				material.needsUpdate = true;
+
+			} else if ( this.fade && ! ( 'CSM_FADE' in material.defines ) ) {
+
+				material.defines.CSM_FADE = '';
+				material.needsUpdate = true;
+
+			}
+
+		}, this );
+
+	}
+
+	getExtendedBreaks( target ) {
+
+		while ( target.length < this.breaks.length ) {
+
+			target.push( new Vector2() );
+
+		}
+
+		target.length = this.breaks.length;
+
+		for ( let i = 0; i < this.cascades; i ++ ) {
+
+			const amount = this.breaks[ i ];
+			const prev = this.breaks[ i - 1 ] || 0;
+			target[ i ].x = prev;
+			target[ i ].y = amount;
+
+		}
+
+	}
+
+	updateFrustums() {
+
+		this.getBreaks();
+		this.initCascades();
+		this.updateShadowBounds();
+		this.updateUniforms();
+
+	}
+
+	remove() {
+
+		for ( let i = 0; i < this.lights.length; i ++ ) {
+
+			this.parent.remove( this.lights[ i ] );
+
+		}
+
+	}
+
+	dispose() {
+
+		const shaders = this.shaders;
+		shaders.forEach( function ( shader, material ) {
+
+			delete material.onBeforeCompile;
+			delete material.defines.USE_CSM;
+			delete material.defines.CSM_CASCADES;
+			delete material.defines.CSM_FADE;
+
+			if ( shader !== null ) {
+
+				delete shader.uniforms.CSM_cascades;
+				delete shader.uniforms.cameraNear;
+				delete shader.uniforms.shadowFar;
+
+			}
+
+			material.needsUpdate = true;
+
+		} );
+		shaders.clear();
+
+	}
+
+}

jsm/csm/CSMFrustum.js

@@ -0,0 +1,152 @@
+import { Vector3, Matrix4 } from 'three';
+
+const inverseProjectionMatrix = new Matrix4();
+
+class CSMFrustum {
+
+	constructor( data ) {
+
+		data = data || {};
+
+		this.vertices = {
+			near: [
+				new Vector3(),
+				new Vector3(),
+				new Vector3(),
+				new Vector3()
+			],
+			far: [
+				new Vector3(),
+				new Vector3(),
+				new Vector3(),
+				new Vector3()
+			]
+		};
+
+		if ( data.projectionMatrix !== undefined ) {
+
+			this.setFromProjectionMatrix( data.projectionMatrix, data.maxFar || 10000 );
+
+		}
+
+	}
+
+	setFromProjectionMatrix( projectionMatrix, maxFar ) {
+
+		const isOrthographic = projectionMatrix.elements[ 2 * 4 + 3 ] === 0;
+
+		inverseProjectionMatrix.copy( projectionMatrix ).invert();
+
+		// 3 --- 0  vertices.near/far order
+		// |     |
+		// 2 --- 1
+		// clip space spans from [-1, 1]
+
+		this.vertices.near[ 0 ].set( 1, 1, - 1 );
+		this.vertices.near[ 1 ].set( 1, - 1, - 1 );
+		this.vertices.near[ 2 ].set( - 1, - 1, - 1 );
+		this.vertices.near[ 3 ].set( - 1, 1, - 1 );
+		this.vertices.near.forEach( function ( v ) {
+
+			v.applyMatrix4( inverseProjectionMatrix );
+
+		} );
+
+		this.vertices.far[ 0 ].set( 1, 1, 1 );
+		this.vertices.far[ 1 ].set( 1, - 1, 1 );
+		this.vertices.far[ 2 ].set( - 1, - 1, 1 );
+		this.vertices.far[ 3 ].set( - 1, 1, 1 );
+		this.vertices.far.forEach( function ( v ) {
+
+			v.applyMatrix4( inverseProjectionMatrix );
+
+			const absZ = Math.abs( v.z );
+			if ( isOrthographic ) {
+
+				v.z *= Math.min( maxFar / absZ, 1.0 );
+
+			} else {
+
+				v.multiplyScalar( Math.min( maxFar / absZ, 1.0 ) );
+
+			}
+
+		} );
+
+		return this.vertices;
+
+	}
+
+	split( breaks, target ) {
+
+		while ( breaks.length > target.length ) {
+
+			target.push( new CSMFrustum() );
+
+		}
+
+		target.length = breaks.length;
+
+		for ( let i = 0; i < breaks.length; i ++ ) {
+
+			const cascade = target[ i ];
+
+			if ( i === 0 ) {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.near[ j ].copy( this.vertices.near[ j ] );
+
+				}
+
+			} else {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.near[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i - 1 ] );
+
+				}
+
+			}
+
+			if ( i === breaks.length - 1 ) {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.far[ j ].copy( this.vertices.far[ j ] );
+
+				}
+
+			} else {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.far[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i ] );
+
+				}
+
+			}
+
+		}
+
+	}
+
+	toSpace( cameraMatrix, target ) {
+
+		for ( let i = 0; i < 4; i ++ ) {
+
+			target.vertices.near[ i ]
+				.copy( this.vertices.near[ i ] )
+				.applyMatrix4( cameraMatrix );
+
+			target.vertices.far[ i ]
+				.copy( this.vertices.far[ i ] )
+				.applyMatrix4( cameraMatrix );
+
+		}
+
+	}
+
+}
+
+export { CSMFrustum };

jsm/csm/CSMHelper.js

@@ -0,0 +1,163 @@
+import {
+	Group,
+	Mesh,
+	LineSegments,
+	BufferGeometry,
+	LineBasicMaterial,
+	Box3Helper,
+	Box3,
+	PlaneGeometry,
+	MeshBasicMaterial,
+	BufferAttribute,
+	DoubleSide
+} from 'three';
+
+class CSMHelper extends Group {
+
+	constructor( csm ) {
+
+		super();
+		this.csm = csm;
+		this.displayFrustum = true;
+		this.displayPlanes = true;
+		this.displayShadowBounds = true;
+
+		const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
+		const positions = new Float32Array( 24 );
+		const frustumGeometry = new BufferGeometry();
+		frustumGeometry.setIndex( new BufferAttribute( indices, 1 ) );
+		frustumGeometry.setAttribute( 'position', new BufferAttribute( positions, 3, false ) );
+		const frustumLines = new LineSegments( frustumGeometry, new LineBasicMaterial() );
+		this.add( frustumLines );
+
+		this.frustumLines = frustumLines;
+		this.cascadeLines = [];
+		this.cascadePlanes = [];
+		this.shadowLines = [];
+
+	}
+
+	updateVisibility() {
+
+		const displayFrustum = this.displayFrustum;
+		const displayPlanes = this.displayPlanes;
+		const displayShadowBounds = this.displayShadowBounds;
+
+		const frustumLines = this.frustumLines;
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+		for ( let i = 0, l = cascadeLines.length; i < l; i ++ ) {
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+
+			cascadeLine.visible = displayFrustum;
+			cascadePlane.visible = displayFrustum && displayPlanes;
+			shadowLineGroup.visible = displayShadowBounds;
+
+		}
+
+		frustumLines.visible = displayFrustum;
+
+	}
+
+	update() {
+
+		const csm = this.csm;
+		const camera = csm.camera;
+		const cascades = csm.cascades;
+		const mainFrustum = csm.mainFrustum;
+		const frustums = csm.frustums;
+		const lights = csm.lights;
+
+		const frustumLines = this.frustumLines;
+		const frustumLinePositions = frustumLines.geometry.getAttribute( 'position' );
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+
+		this.position.copy( camera.position );
+		this.quaternion.copy( camera.quaternion );
+		this.scale.copy( camera.scale );
+		this.updateMatrixWorld( true );
+
+		while ( cascadeLines.length > cascades ) {
+
+			this.remove( cascadeLines.pop() );
+			this.remove( cascadePlanes.pop() );
+			this.remove( shadowLines.pop() );
+
+		}
+
+		while ( cascadeLines.length < cascades ) {
+
+			const cascadeLine = new Box3Helper( new Box3(), 0xffffff );
+			const planeMat = new MeshBasicMaterial( { transparent: true, opacity: 0.1, depthWrite: false, side: DoubleSide } );
+			const cascadePlane = new Mesh( new PlaneGeometry(), planeMat );
+			const shadowLineGroup = new Group();
+			const shadowLine = new Box3Helper( new Box3(), 0xffff00 );
+			shadowLineGroup.add( shadowLine );
+
+			this.add( cascadeLine );
+			this.add( cascadePlane );
+			this.add( shadowLineGroup );
+
+			cascadeLines.push( cascadeLine );
+			cascadePlanes.push( cascadePlane );
+			shadowLines.push( shadowLineGroup );
+
+		}
+
+		for ( let i = 0; i < cascades; i ++ ) {
+
+			const frustum = frustums[ i ];
+			const light = lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const farVerts = frustum.vertices.far;
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+			const shadowLine = shadowLineGroup.children[ 0 ];
+
+			cascadeLine.box.min.copy( farVerts[ 2 ] );
+			cascadeLine.box.max.copy( farVerts[ 0 ] );
+			cascadeLine.box.max.z += 1e-4;
+
+			cascadePlane.position.addVectors( farVerts[ 0 ], farVerts[ 2 ] );
+			cascadePlane.position.multiplyScalar( 0.5 );
+			cascadePlane.scale.subVectors( farVerts[ 0 ], farVerts[ 2 ] );
+			cascadePlane.scale.z = 1e-4;
+
+			this.remove( shadowLineGroup );
+			shadowLineGroup.position.copy( shadowCam.position );
+			shadowLineGroup.quaternion.copy( shadowCam.quaternion );
+			shadowLineGroup.scale.copy( shadowCam.scale );
+			shadowLineGroup.updateMatrixWorld( true );
+			this.attach( shadowLineGroup );
+
+			shadowLine.box.min.set( shadowCam.bottom, shadowCam.left, - shadowCam.far );
+			shadowLine.box.max.set( shadowCam.top, shadowCam.right, - shadowCam.near );
+
+		}
+
+		const nearVerts = mainFrustum.vertices.near;
+		const farVerts = mainFrustum.vertices.far;
+		frustumLinePositions.setXYZ( 0, farVerts[ 0 ].x, farVerts[ 0 ].y, farVerts[ 0 ].z );
+		frustumLinePositions.setXYZ( 1, farVerts[ 3 ].x, farVerts[ 3 ].y, farVerts[ 3 ].z );
+		frustumLinePositions.setXYZ( 2, farVerts[ 2 ].x, farVerts[ 2 ].y, farVerts[ 2 ].z );
+		frustumLinePositions.setXYZ( 3, farVerts[ 1 ].x, farVerts[ 1 ].y, farVerts[ 1 ].z );
+
+		frustumLinePositions.setXYZ( 4, nearVerts[ 0 ].x, nearVerts[ 0 ].y, nearVerts[ 0 ].z );
+		frustumLinePositions.setXYZ( 5, nearVerts[ 3 ].x, nearVerts[ 3 ].y, nearVerts[ 3 ].z );
+		frustumLinePositions.setXYZ( 6, nearVerts[ 2 ].x, nearVerts[ 2 ].y, nearVerts[ 2 ].z );
+		frustumLinePositions.setXYZ( 7, nearVerts[ 1 ].x, nearVerts[ 1 ].y, nearVerts[ 1 ].z );
+		frustumLinePositions.needsUpdate = true;
+
+	}
+
+}
+
+export { CSMHelper };

jsm/csm/CSMShader.js

@@ -0,0 +1,251 @@
+import { ShaderChunk } from 'three';
+
+const CSMShader = {
+	lights_fragment_begin: /* glsl */`
+GeometricContext geometry;
+
+geometry.position = - vViewPosition;
+geometry.normal = normal;
+geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition );
+
+#ifdef CLEARCOAT
+
+	geometry.clearcoatNormal = clearcoatNormal;
+
+#endif
+
+IncidentLight directLight;
+
+#if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct )
+
+	PointLight pointLight;
+	#if defined( USE_SHADOWMAP ) && NUM_POINT_LIGHT_SHADOWS > 0
+	PointLightShadow pointLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {
+
+		pointLight = pointLights[ i ];
+
+		getPointLightInfo( pointLight, geometry, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_POINT_LIGHT_SHADOWS )
+		pointLightShadow = pointLightShadows[ i ];
+		directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getPointShadow( pointShadowMap[ i ], pointLightShadow.shadowMapSize, pointLightShadow.shadowBias, pointLightShadow.shadowRadius, vPointShadowCoord[ i ], pointLightShadow.shadowCameraNear, pointLightShadow.shadowCameraFar ) : 1.0;
+		#endif
+
+		RE_Direct( directLight, geometry, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_SPOT_LIGHTS > 0 ) && defined( RE_Direct )
+
+	SpotLight spotLight;
+	#if defined( USE_SHADOWMAP ) && NUM_SPOT_LIGHT_SHADOWS > 0
+	SpotLightShadow spotLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {
+
+		spotLight = spotLights[ i ];
+
+		getSpotLightInfo( spotLight, geometry, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS )
+		spotLightShadow = spotLightShadows[ i ];
+		directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( spotShadowMap[ i ], spotLightShadow.shadowMapSize, spotLightShadow.shadowBias, spotLightShadow.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0;
+		#endif
+
+		RE_Direct( directLight, geometry, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_DIR_LIGHTS > 0) && defined( RE_Direct ) && defined( USE_CSM ) && defined( CSM_CASCADES )
+
+	DirectionalLight directionalLight;
+	float linearDepth = (vViewPosition.z) / (shadowFar - cameraNear);
+	#if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0
+	DirectionalLightShadow directionalLightShadow;
+	#endif
+
+	#if defined( USE_SHADOWMAP ) && defined( CSM_FADE )
+	vec2 cascade;
+	float cascadeCenter;
+	float closestEdge;
+	float margin;
+	float csmx;
+	float csmy;
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		directionalLight = directionalLights[ i ];
+		getDirectionalLightInfo( directionalLight, geometry, directLight );
+
+	  	#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+			// NOTE: Depth gets larger away from the camera.
+			// cascade.x is closer, cascade.y is further
+			cascade = CSM_cascades[ i ];
+			cascadeCenter = ( cascade.x + cascade.y ) / 2.0;
+			closestEdge = linearDepth < cascadeCenter ? cascade.x : cascade.y;
+			margin = 0.25 * pow( closestEdge, 2.0 );
+			csmx = cascade.x - margin / 2.0;
+			csmy = cascade.y + margin / 2.0;
+			if( linearDepth >= csmx && ( linearDepth < csmy || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 ) ) {
+
+				float dist = min( linearDepth - csmx, csmy - linearDepth );
+				float ratio = clamp( dist / margin, 0.0, 1.0 );
+
+				vec3 prevColor = directLight.color;
+				directionalLightShadow = directionalLightShadows[ i ];
+				directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+
+				bool shouldFadeLastCascade = UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 && linearDepth > cascadeCenter;
+				directLight.color = mix( prevColor, directLight.color, shouldFadeLastCascade ? ratio : 1.0 );
+
+				ReflectedLight prevLight = reflectedLight;
+				RE_Direct( directLight, geometry, material, reflectedLight );
+
+				bool shouldBlend = UNROLLED_LOOP_INDEX != CSM_CASCADES - 1 || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 && linearDepth < cascadeCenter;
+				float blendRatio = shouldBlend ? ratio : 1.0;
+
+				reflectedLight.directDiffuse = mix( prevLight.directDiffuse, reflectedLight.directDiffuse, blendRatio );
+				reflectedLight.directSpecular = mix( prevLight.directSpecular, reflectedLight.directSpecular, blendRatio );
+				reflectedLight.indirectDiffuse = mix( prevLight.indirectDiffuse, reflectedLight.indirectDiffuse, blendRatio );
+				reflectedLight.indirectSpecular = mix( prevLight.indirectSpecular, reflectedLight.indirectSpecular, blendRatio );
+
+			}
+	  	#endif
+
+	}
+	#pragma unroll_loop_end
+	#else
+
+		#pragma unroll_loop_start
+		for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+			directionalLight = directionalLights[ i ];
+			getDirectionalLightInfo( directionalLight, geometry, directLight );
+
+			#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+
+			directionalLightShadow = directionalLightShadows[ i ];
+			if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y) directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+
+			if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && (linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1)) RE_Direct( directLight, geometry, material, reflectedLight );
+
+			#endif
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+	#if ( NUM_DIR_LIGHTS > NUM_DIR_LIGHT_SHADOWS)
+		// compute the lights not casting shadows (if any)
+
+		#pragma unroll_loop_start
+		for ( int i = NUM_DIR_LIGHT_SHADOWS; i < NUM_DIR_LIGHTS; i ++ ) {
+
+			directionalLight = directionalLights[ i ];
+
+			getDirectionalLightInfo( directionalLight, geometry, directLight );
+
+			RE_Direct( directLight, geometry, material, reflectedLight );
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+#endif
+
+
+#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct ) && !defined( USE_CSM ) && !defined( CSM_CASCADES )
+
+	DirectionalLight directionalLight;
+	#if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0
+	DirectionalLightShadow directionalLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		directionalLight = directionalLights[ i ];
+
+		getDirectionalLightInfo( directionalLight, geometry, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+		directionalLightShadow = directionalLightShadows[ i ];
+		directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+		#endif
+
+		RE_Direct( directLight, geometry, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_RECT_AREA_LIGHTS > 0 ) && defined( RE_Direct_RectArea )
+
+	RectAreaLight rectAreaLight;
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_RECT_AREA_LIGHTS; i ++ ) {
+
+		rectAreaLight = rectAreaLights[ i ];
+		RE_Direct_RectArea( rectAreaLight, geometry, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if defined( RE_IndirectDiffuse )
+
+	vec3 iblIrradiance = vec3( 0.0 );
+
+	vec3 irradiance = getAmbientLightIrradiance( ambientLightColor );
+
+	irradiance += getLightProbeIrradiance( lightProbe, geometry.normal );
+
+	#if ( NUM_HEMI_LIGHTS > 0 )
+
+		#pragma unroll_loop_start
+		for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {
+
+			irradiance += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal );
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+#endif
+
+#if defined( RE_IndirectSpecular )
+
+	vec3 radiance = vec3( 0.0 );
+	vec3 clearcoatRadiance = vec3( 0.0 );
+
+#endif
+`,
+	lights_pars_begin: /* glsl */`
+#if defined( USE_CSM ) && defined( CSM_CASCADES )
+uniform vec2 CSM_cascades[CSM_CASCADES];
+uniform float cameraNear;
+uniform float shadowFar;
+#endif
+	` + ShaderChunk.lights_pars_begin
+};
+
+export { CSMShader };

jsm/curves/CurveExtras.js

@@ -0,0 +1,422 @@
+import {
+	Curve,
+	Vector3
+} from 'three';
+
+/**
+ * A bunch of parametric curves
+ *
+ * Formulas collected from various sources
+ * http://mathworld.wolfram.com/HeartCurve.html
+ * http://en.wikipedia.org/wiki/Viviani%27s_curve
+ * http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
+ * https://prideout.net/blog/old/blog/index.html@p=44.html
+ */
+
+// GrannyKnot
+
+class GrannyKnot extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = 2 * Math.PI * t;
+
+		const x = - 0.22 * Math.cos( t ) - 1.28 * Math.sin( t ) - 0.44 * Math.cos( 3 * t ) - 0.78 * Math.sin( 3 * t );
+		const y = - 0.1 * Math.cos( 2 * t ) - 0.27 * Math.sin( 2 * t ) + 0.38 * Math.cos( 4 * t ) + 0.46 * Math.sin( 4 * t );
+		const z = 0.7 * Math.cos( 3 * t ) - 0.4 * Math.sin( 3 * t );
+
+		return point.set( x, y, z ).multiplyScalar( 20 );
+
+	}
+
+}
+
+// HeartCurve
+
+class HeartCurve extends Curve {
+
+	constructor( scale = 5 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= 2 * Math.PI;
+
+		const x = 16 * Math.pow( Math.sin( t ), 3 );
+		const y = 13 * Math.cos( t ) - 5 * Math.cos( 2 * t ) - 2 * Math.cos( 3 * t ) - Math.cos( 4 * t );
+		const z = 0;
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// Viviani's Curve
+
+class VivianiCurve extends Curve {
+
+	constructor( scale = 70 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = t * 4 * Math.PI; // normalized to 0..1
+		const a = this.scale / 2;
+
+		const x = a * ( 1 + Math.cos( t ) );
+		const y = a * Math.sin( t );
+		const z = 2 * a * Math.sin( t / 2 );
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+// KnotCurve
+
+class KnotCurve extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= 2 * Math.PI;
+
+		const R = 10;
+		const s = 50;
+
+		const x = s * Math.sin( t );
+		const y = Math.cos( t ) * ( R + s * Math.cos( t ) );
+		const z = Math.sin( t ) * ( R + s * Math.cos( t ) );
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+
+// HelixCurve
+
+class HelixCurve extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const a = 30; // radius
+		const b = 150; // height
+
+		const t2 = 2 * Math.PI * t * b / 30;
+
+		const x = Math.cos( t2 ) * a;
+		const y = Math.sin( t2 ) * a;
+		const z = b * t;
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+// TrefoilKnot
+
+class TrefoilKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t );
+		const y = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t );
+		const z = Math.sin( 3 * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// TorusKnot
+
+class TorusKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const p = 3;
+		const q = 4;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		const y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		const z = Math.sin( q * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// CinquefoilKnot
+
+class CinquefoilKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const p = 2;
+		const q = 5;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		const y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		const z = Math.sin( q * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+
+// TrefoilPolynomialKnot
+
+class TrefoilPolynomialKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = t * 4 - 2;
+
+		const x = Math.pow( t, 3 ) - 3 * t;
+		const y = Math.pow( t, 4 ) - 4 * t * t;
+		const z = 1 / 5 * Math.pow( t, 5 ) - 2 * t;
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+function scaleTo( x, y, t ) {
+
+	const r = y - x;
+	return t * r + x;
+
+}
+
+// FigureEightPolynomialKnot
+
+class FigureEightPolynomialKnot extends Curve {
+
+	constructor( scale = 1 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = scaleTo( - 4, 4, t );
+
+		const x = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 );
+		const y = Math.pow( t, 4 ) - 13 * t * t;
+		const z = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot4a
+
+class DecoratedTorusKnot4a extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= Math.PI * 2;
+
+		const x = Math.cos( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		const y = Math.sin( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		const z = 0.35 * Math.sin( 5 * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot4b
+
+class DecoratedTorusKnot4b extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		const y = Math.sin( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		const z = 0.2 * Math.sin( 9 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+
+// DecoratedTorusKnot5a
+
+class DecoratedTorusKnot5a extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		const y = Math.sin( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		const z = 0.2 * Math.sin( 20 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot5c
+
+class DecoratedTorusKnot5c extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		const y = Math.sin( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		const z = 0.35 * Math.sin( 15 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+export {
+	GrannyKnot,
+	HeartCurve,
+	VivianiCurve,
+	KnotCurve,
+	HelixCurve,
+	TrefoilKnot,
+	TorusKnot,
+	CinquefoilKnot,
+	TrefoilPolynomialKnot,
+	FigureEightPolynomialKnot,
+	DecoratedTorusKnot4a,
+	DecoratedTorusKnot4b,
+	DecoratedTorusKnot5a,
+	DecoratedTorusKnot5c
+};

jsm/curves/NURBSCurve.js

@@ -0,0 +1,80 @@
+import {
+	Curve,
+	Vector3,
+	Vector4
+} from 'three';
+import * as NURBSUtils from '../curves/NURBSUtils.js';
+
+/**
+ * NURBS curve object
+ *
+ * Derives from Curve, overriding getPoint and getTangent.
+ *
+ * Implementation is based on (x, y [, z=0 [, w=1]]) control points with w=weight.
+ *
+ **/
+
+class NURBSCurve extends Curve {
+
+	constructor(
+		degree,
+		knots /* array of reals */,
+		controlPoints /* array of Vector(2|3|4) */,
+		startKnot /* index in knots */,
+		endKnot /* index in knots */
+	) {
+
+		super();
+
+		this.degree = degree;
+		this.knots = knots;
+		this.controlPoints = [];
+		// Used by periodic NURBS to remove hidden spans
+		this.startKnot = startKnot || 0;
+		this.endKnot = endKnot || ( this.knots.length - 1 );
+
+		for ( let i = 0; i < controlPoints.length; ++ i ) {
+
+			// ensure Vector4 for control points
+			const point = controlPoints[ i ];
+			this.controlPoints[ i ] = new Vector4( point.x, point.y, point.z, point.w );
+
+		}
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const u = this.knots[ this.startKnot ] + t * ( this.knots[ this.endKnot ] - this.knots[ this.startKnot ] ); // linear mapping t->u
+
+		// following results in (wx, wy, wz, w) homogeneous point
+		const hpoint = NURBSUtils.calcBSplinePoint( this.degree, this.knots, this.controlPoints, u );
+
+		if ( hpoint.w !== 1.0 ) {
+
+			// project to 3D space: (wx, wy, wz, w) -> (x, y, z, 1)
+			hpoint.divideScalar( hpoint.w );
+
+		}
+
+		return point.set( hpoint.x, hpoint.y, hpoint.z );
+
+	}
+
+	getTangent( t, optionalTarget = new Vector3() ) {
+
+		const tangent = optionalTarget;
+
+		const u = this.knots[ 0 ] + t * ( this.knots[ this.knots.length - 1 ] - this.knots[ 0 ] );
+		const ders = NURBSUtils.calcNURBSDerivatives( this.degree, this.knots, this.controlPoints, u, 1 );
+		tangent.copy( ders[ 1 ] ).normalize();
+
+		return tangent;
+
+	}
+
+}
+
+export { NURBSCurve };

jsm/curves/NURBSSurface.js

@@ -0,0 +1,52 @@
+import {
+	Vector4
+} from 'three';
+import * as NURBSUtils from '../curves/NURBSUtils.js';
+
+/**
+ * NURBS surface object
+ *
+ * Implementation is based on (x, y [, z=0 [, w=1]]) control points with w=weight.
+ **/
+
+class NURBSSurface {
+
+	constructor( degree1, degree2, knots1, knots2 /* arrays of reals */, controlPoints /* array^2 of Vector(2|3|4) */ ) {
+
+		this.degree1 = degree1;
+		this.degree2 = degree2;
+		this.knots1 = knots1;
+		this.knots2 = knots2;
+		this.controlPoints = [];
+
+		const len1 = knots1.length - degree1 - 1;
+		const len2 = knots2.length - degree2 - 1;
+
+		// ensure Vector4 for control points
+		for ( let i = 0; i < len1; ++ i ) {
+
+			this.controlPoints[ i ] = [];
+
+			for ( let j = 0; j < len2; ++ j ) {
+
+				const point = controlPoints[ i ][ j ];
+				this.controlPoints[ i ][ j ] = new Vector4( point.x, point.y, point.z, point.w );
+
+			}
+
+		}
+
+	}
+
+	getPoint( t1, t2, target ) {
+
+		const u = this.knots1[ 0 ] + t1 * ( this.knots1[ this.knots1.length - 1 ] - this.knots1[ 0 ] ); // linear mapping t1->u
+		const v = this.knots2[ 0 ] + t2 * ( this.knots2[ this.knots2.length - 1 ] - this.knots2[ 0 ] ); // linear mapping t2->u
+
+		NURBSUtils.calcSurfacePoint( this.degree1, this.degree2, this.knots1, this.knots2, this.controlPoints, u, v, target );
+
+	}
+
+}
+
+export { NURBSSurface };

jsm/curves/NURBSUtils.js

@@ -0,0 +1,487 @@
+import {
+	Vector3,
+	Vector4
+} from 'three';
+
+/**
+ * NURBS utils
+ *
+ * See NURBSCurve and NURBSSurface.
+ **/
+
+
+/**************************************************************
+ *	NURBS Utils
+ **************************************************************/
+
+/*
+Finds knot vector span.
+
+p : degree
+u : parametric value
+U : knot vector
+
+returns the span
+*/
+function findSpan( p, u, U ) {
+
+	const n = U.length - p - 1;
+
+	if ( u >= U[ n ] ) {
+
+		return n - 1;
+
+	}
+
+	if ( u <= U[ p ] ) {
+
+		return p;
+
+	}
+
+	let low = p;
+	let high = n;
+	let mid = Math.floor( ( low + high ) / 2 );
+
+	while ( u < U[ mid ] || u >= U[ mid + 1 ] ) {
+
+		if ( u < U[ mid ] ) {
+
+			high = mid;
+
+		} else {
+
+			low = mid;
+
+		}
+
+		mid = Math.floor( ( low + high ) / 2 );
+
+	}
+
+	return mid;
+
+}
+
+
+/*
+Calculate basis functions. See The NURBS Book, page 70, algorithm A2.2
+
+span : span in which u lies
+u    : parametric point
+p    : degree
+U    : knot vector
+
+returns array[p+1] with basis functions values.
+*/
+function calcBasisFunctions( span, u, p, U ) {
+
+	const N = [];
+	const left = [];
+	const right = [];
+	N[ 0 ] = 1.0;
+
+	for ( let j = 1; j <= p; ++ j ) {
+
+		left[ j ] = u - U[ span + 1 - j ];
+		right[ j ] = U[ span + j ] - u;
+
+		let saved = 0.0;
+
+		for ( let r = 0; r < j; ++ r ) {
+
+			const rv = right[ r + 1 ];
+			const lv = left[ j - r ];
+			const temp = N[ r ] / ( rv + lv );
+			N[ r ] = saved + rv * temp;
+			saved = lv * temp;
+
+		}
+
+		N[ j ] = saved;
+
+	}
+
+	return N;
+
+}
+
+
+/*
+Calculate B-Spline curve points. See The NURBS Book, page 82, algorithm A3.1.
+
+p : degree of B-Spline
+U : knot vector
+P : control points (x, y, z, w)
+u : parametric point
+
+returns point for given u
+*/
+function calcBSplinePoint( p, U, P, u ) {
+
+	const span = findSpan( p, u, U );
+	const N = calcBasisFunctions( span, u, p, U );
+	const C = new Vector4( 0, 0, 0, 0 );
+
+	for ( let j = 0; j <= p; ++ j ) {
+
+		const point = P[ span - p + j ];
+		const Nj = N[ j ];
+		const wNj = point.w * Nj;
+		C.x += point.x * wNj;
+		C.y += point.y * wNj;
+		C.z += point.z * wNj;
+		C.w += point.w * Nj;
+
+	}
+
+	return C;
+
+}
+
+
+/*
+Calculate basis functions derivatives. See The NURBS Book, page 72, algorithm A2.3.
+
+span : span in which u lies
+u    : parametric point
+p    : degree
+n    : number of derivatives to calculate
+U    : knot vector
+
+returns array[n+1][p+1] with basis functions derivatives
+*/
+function calcBasisFunctionDerivatives( span, u, p, n, U ) {
+
+	const zeroArr = [];
+	for ( let i = 0; i <= p; ++ i )
+		zeroArr[ i ] = 0.0;
+
+	const ders = [];
+
+	for ( let i = 0; i <= n; ++ i )
+		ders[ i ] = zeroArr.slice( 0 );
+
+	const ndu = [];
+
+	for ( let i = 0; i <= p; ++ i )
+		ndu[ i ] = zeroArr.slice( 0 );
+
+	ndu[ 0 ][ 0 ] = 1.0;
+
+	const left = zeroArr.slice( 0 );
+	const right = zeroArr.slice( 0 );
+
+	for ( let j = 1; j <= p; ++ j ) {
+
+		left[ j ] = u - U[ span + 1 - j ];
+		right[ j ] = U[ span + j ] - u;
+
+		let saved = 0.0;
+
+		for ( let r = 0; r < j; ++ r ) {
+
+			const rv = right[ r + 1 ];
+			const lv = left[ j - r ];
+			ndu[ j ][ r ] = rv + lv;
+
+			const temp = ndu[ r ][ j - 1 ] / ndu[ j ][ r ];
+			ndu[ r ][ j ] = saved + rv * temp;
+			saved = lv * temp;
+
+		}
+
+		ndu[ j ][ j ] = saved;
+
+	}
+
+	for ( let j = 0; j <= p; ++ j ) {
+
+		ders[ 0 ][ j ] = ndu[ j ][ p ];
+
+	}
+
+	for ( let r = 0; r <= p; ++ r ) {
+
+		let s1 = 0;
+		let s2 = 1;
+
+		const a = [];
+		for ( let i = 0; i <= p; ++ i ) {
+
+			a[ i ] = zeroArr.slice( 0 );
+
+		}
+
+		a[ 0 ][ 0 ] = 1.0;
+
+		for ( let k = 1; k <= n; ++ k ) {
+
+			let d = 0.0;
+			const rk = r - k;
+			const pk = p - k;
+
+			if ( r >= k ) {
+
+				a[ s2 ][ 0 ] = a[ s1 ][ 0 ] / ndu[ pk + 1 ][ rk ];
+				d = a[ s2 ][ 0 ] * ndu[ rk ][ pk ];
+
+			}
+
+			const j1 = ( rk >= - 1 ) ? 1 : - rk;
+			const j2 = ( r - 1 <= pk ) ? k - 1 : p - r;
+
+			for ( let j = j1; j <= j2; ++ j ) {
+
+				a[ s2 ][ j ] = ( a[ s1 ][ j ] - a[ s1 ][ j - 1 ] ) / ndu[ pk + 1 ][ rk + j ];
+				d += a[ s2 ][ j ] * ndu[ rk + j ][ pk ];
+
+			}
+
+			if ( r <= pk ) {
+
+				a[ s2 ][ k ] = - a[ s1 ][ k - 1 ] / ndu[ pk + 1 ][ r ];
+				d += a[ s2 ][ k ] * ndu[ r ][ pk ];
+
+			}
+
+			ders[ k ][ r ] = d;
+
+			const j = s1;
+			s1 = s2;
+			s2 = j;
+
+		}
+
+	}
+
+	let r = p;
+
+	for ( let k = 1; k <= n; ++ k ) {
+
+		for ( let j = 0; j <= p; ++ j ) {
+
+			ders[ k ][ j ] *= r;
+
+		}
+
+		r *= p - k;
+
+	}
+
+	return ders;
+
+}
+
+
+/*
+	Calculate derivatives of a B-Spline. See The NURBS Book, page 93, algorithm A3.2.
+
+	p  : degree
+	U  : knot vector
+	P  : control points
+	u  : Parametric points
+	nd : number of derivatives
+
+	returns array[d+1] with derivatives
+	*/
+function calcBSplineDerivatives( p, U, P, u, nd ) {
+
+	const du = nd < p ? nd : p;
+	const CK = [];
+	const span = findSpan( p, u, U );
+	const nders = calcBasisFunctionDerivatives( span, u, p, du, U );
+	const Pw = [];
+
+	for ( let i = 0; i < P.length; ++ i ) {
+
+		const point = P[ i ].clone();
+		const w = point.w;
+
+		point.x *= w;
+		point.y *= w;
+		point.z *= w;
+
+		Pw[ i ] = point;
+
+	}
+
+	for ( let k = 0; k <= du; ++ k ) {
+
+		const point = Pw[ span - p ].clone().multiplyScalar( nders[ k ][ 0 ] );
+
+		for ( let j = 1; j <= p; ++ j ) {
+
+			point.add( Pw[ span - p + j ].clone().multiplyScalar( nders[ k ][ j ] ) );
+
+		}
+
+		CK[ k ] = point;
+
+	}
+
+	for ( let k = du + 1; k <= nd + 1; ++ k ) {
+
+		CK[ k ] = new Vector4( 0, 0, 0 );
+
+	}
+
+	return CK;
+
+}
+
+
+/*
+Calculate "K over I"
+
+returns k!/(i!(k-i)!)
+*/
+function calcKoverI( k, i ) {
+
+	let nom = 1;
+
+	for ( let j = 2; j <= k; ++ j ) {
+
+		nom *= j;
+
+	}
+
+	let denom = 1;
+
+	for ( let j = 2; j <= i; ++ j ) {
+
+		denom *= j;
+
+	}
+
+	for ( let j = 2; j <= k - i; ++ j ) {
+
+		denom *= j;
+
+	}
+
+	return nom / denom;
+
+}
+
+
+/*
+Calculate derivatives (0-nd) of rational curve. See The NURBS Book, page 127, algorithm A4.2.
+
+Pders : result of function calcBSplineDerivatives
+
+returns array with derivatives for rational curve.
+*/
+function calcRationalCurveDerivatives( Pders ) {
+
+	const nd = Pders.length;
+	const Aders = [];
+	const wders = [];
+
+	for ( let i = 0; i < nd; ++ i ) {
+
+		const point = Pders[ i ];
+		Aders[ i ] = new Vector3( point.x, point.y, point.z );
+		wders[ i ] = point.w;
+
+	}
+
+	const CK = [];
+
+	for ( let k = 0; k < nd; ++ k ) {
+
+		const v = Aders[ k ].clone();
+
+		for ( let i = 1; i <= k; ++ i ) {
+
+			v.sub( CK[ k - i ].clone().multiplyScalar( calcKoverI( k, i ) * wders[ i ] ) );
+
+		}
+
+		CK[ k ] = v.divideScalar( wders[ 0 ] );
+
+	}
+
+	return CK;
+
+}
+
+
+/*
+Calculate NURBS curve derivatives. See The NURBS Book, page 127, algorithm A4.2.
+
+p  : degree
+U  : knot vector
+P  : control points in homogeneous space
+u  : parametric points
+nd : number of derivatives
+
+returns array with derivatives.
+*/
+function calcNURBSDerivatives( p, U, P, u, nd ) {
+
+	const Pders = calcBSplineDerivatives( p, U, P, u, nd );
+	return calcRationalCurveDerivatives( Pders );
+
+}
+
+
+/*
+Calculate rational B-Spline surface point. See The NURBS Book, page 134, algorithm A4.3.
+
+p1, p2 : degrees of B-Spline surface
+U1, U2 : knot vectors
+P      : control points (x, y, z, w)
+u, v   : parametric values
+
+returns point for given (u, v)
+*/
+function calcSurfacePoint( p, q, U, V, P, u, v, target ) {
+
+	const uspan = findSpan( p, u, U );
+	const vspan = findSpan( q, v, V );
+	const Nu = calcBasisFunctions( uspan, u, p, U );
+	const Nv = calcBasisFunctions( vspan, v, q, V );
+	const temp = [];
+
+	for ( let l = 0; l <= q; ++ l ) {
+
+		temp[ l ] = new Vector4( 0, 0, 0, 0 );
+		for ( let k = 0; k <= p; ++ k ) {
+
+			const point = P[ uspan - p + k ][ vspan - q + l ].clone();
+			const w = point.w;
+			point.x *= w;
+			point.y *= w;
+			point.z *= w;
+			temp[ l ].add( point.multiplyScalar( Nu[ k ] ) );
+
+		}
+
+	}
+
+	const Sw = new Vector4( 0, 0, 0, 0 );
+	for ( let l = 0; l <= q; ++ l ) {
+
+		Sw.add( temp[ l ].multiplyScalar( Nv[ l ] ) );
+
+	}
+
+	Sw.divideScalar( Sw.w );
+	target.set( Sw.x, Sw.y, Sw.z );
+
+}
+
+
+
+export {
+	findSpan,
+	calcBasisFunctions,
+	calcBSplinePoint,
+	calcBasisFunctionDerivatives,
+	calcBSplineDerivatives,
+	calcKoverI,
+	calcRationalCurveDerivatives,
+	calcNURBSDerivatives,
+	calcSurfacePoint,
+};

jsm/effects/AnaglyphEffect.js

@@ -0,0 +1,168 @@
+import {
+	LinearFilter,
+	Matrix3,
+	Mesh,
+	NearestFilter,
+	OrthographicCamera,
+	PlaneGeometry,
+	RGBAFormat,
+	Scene,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+
+class AnaglyphEffect {
+
+	constructor( renderer, width = 512, height = 512 ) {
+
+		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
+
+		this.colorMatrixLeft = new Matrix3().fromArray( [
+			0.456100, - 0.0400822, - 0.0152161,
+			0.500484, - 0.0378246, - 0.0205971,
+			0.176381, - 0.0157589, - 0.00546856
+		] );
+
+		this.colorMatrixRight = new Matrix3().fromArray( [
+			- 0.0434706, 0.378476, - 0.0721527,
+			- 0.0879388, 0.73364, - 0.112961,
+			- 0.00155529, - 0.0184503, 1.2264
+		] );
+
+		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+		const _scene = new Scene();
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( width, height, _params );
+		const _renderTargetR = new WebGLRenderTarget( width, height, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture },
+
+				'colorMatrixLeft': { value: this.colorMatrixLeft },
+				'colorMatrixRight': { value: this.colorMatrixRight }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'uniform mat3 colorMatrixLeft;',
+				'uniform mat3 colorMatrixRight;',
+
+				// These functions implement sRGB linearization and gamma correction
+
+				'float lin( float c ) {',
+				'	return c <= 0.04045 ? c * 0.0773993808 :',
+				'			pow( c * 0.9478672986 + 0.0521327014, 2.4 );',
+				'}',
+
+				'vec4 lin( vec4 c ) {',
+				'	return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );',
+				'}',
+
+				'float dev( float c ) {',
+				'	return c <= 0.0031308 ? c * 12.92',
+				'			: pow( c, 0.41666 ) * 1.055 - 0.055;',
+				'}',
+
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	vec4 colorL = lin( texture2D( mapLeft, uv ) );',
+				'	vec4 colorR = lin( texture2D( mapRight, uv ) );',
+
+				'	vec3 color = clamp(',
+				'			colorMatrixLeft * colorL.rgb +',
+				'			colorMatrixRight * colorR.rgb, 0., 1. );',
+
+				'	gl_FragColor = vec4(',
+				'			dev( color.r ), dev( color.g ), dev( color.b ),',
+				'			max( colorL.a, colorR.a ) );',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
+		_scene.add( _mesh );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			scene.updateMatrixWorld();
+
+			if ( camera.parent === null ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			renderer.render( _scene, _camera );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+			_mesh.geometry.dispose();
+			_mesh.material.dispose();
+
+		};
+
+	}
+
+}
+
+export { AnaglyphEffect };

jsm/effects/AsciiEffect.js

@@ -0,0 +1,279 @@
+/**
+ * Ascii generation is based on https://github.com/hassadee/jsascii/blob/master/jsascii.js
+ *
+ * 16 April 2012 - @blurspline
+ */
+
+class AsciiEffect {
+
+	constructor( renderer, charSet = ' .:-=+*#%@', options = {} ) {
+
+		// ' .,:;=|iI+hHOE#`$';
+		// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+		// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
+
+		// Some ASCII settings
+
+		const bResolution = ! options[ 'resolution' ] ? 0.15 : options[ 'resolution' ]; // Higher for more details
+		const iScale = ! options[ 'scale' ] ? 1 : options[ 'scale' ];
+		const bColor = ! options[ 'color' ] ? false : options[ 'color' ]; // nice but slows down rendering!
+		const bAlpha = ! options[ 'alpha' ] ? false : options[ 'alpha' ]; // Transparency
+		const bBlock = ! options[ 'block' ] ? false : options[ 'block' ]; // blocked characters. like good O dos
+		const bInvert = ! options[ 'invert' ] ? false : options[ 'invert' ]; // black is white, white is black
+
+		const strResolution = 'low';
+
+		let width, height;
+
+		const domElement = document.createElement( 'div' );
+		domElement.style.cursor = 'default';
+
+		const oAscii = document.createElement( 'table' );
+		domElement.appendChild( oAscii );
+
+		let iWidth, iHeight;
+		let oImg;
+
+		this.setSize = function ( w, h ) {
+
+			width = w;
+			height = h;
+
+			renderer.setSize( w, h );
+
+			initAsciiSize();
+
+		};
+
+
+		this.render = function ( scene, camera ) {
+
+			renderer.render( scene, camera );
+			asciifyImage( oAscii );
+
+		};
+
+		this.domElement = domElement;
+
+
+		// Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
+
+		function initAsciiSize() {
+
+			iWidth = Math.round( width * fResolution );
+			iHeight = Math.round( height * fResolution );
+
+			oCanvas.width = iWidth;
+			oCanvas.height = iHeight;
+			// oCanvas.style.display = "none";
+			// oCanvas.style.width = iWidth;
+			// oCanvas.style.height = iHeight;
+
+			oImg = renderer.domElement;
+
+			if ( oImg.style.backgroundColor ) {
+
+				oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
+				oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
+
+			}
+
+			oAscii.cellSpacing = 0;
+			oAscii.cellPadding = 0;
+
+			const oStyle = oAscii.style;
+			oStyle.display = 'inline';
+			oStyle.width = Math.round( iWidth / fResolution * iScale ) + 'px';
+			oStyle.height = Math.round( iHeight / fResolution * iScale ) + 'px';
+			oStyle.whiteSpace = 'pre';
+			oStyle.margin = '0px';
+			oStyle.padding = '0px';
+			oStyle.letterSpacing = fLetterSpacing + 'px';
+			oStyle.fontFamily = strFont;
+			oStyle.fontSize = fFontSize + 'px';
+			oStyle.lineHeight = fLineHeight + 'px';
+			oStyle.textAlign = 'left';
+			oStyle.textDecoration = 'none';
+
+		}
+
+
+		const aDefaultCharList = ( ' .,:;i1tfLCG08@' ).split( '' );
+		const aDefaultColorCharList = ( ' CGO08@' ).split( '' );
+		const strFont = 'courier new, monospace';
+
+		const oCanvasImg = renderer.domElement;
+
+		const oCanvas = document.createElement( 'canvas' );
+		if ( ! oCanvas.getContext ) {
+
+			return;
+
+		}
+
+		const oCtx = oCanvas.getContext( '2d' );
+		if ( ! oCtx.getImageData ) {
+
+			return;
+
+		}
+
+		let aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
+
+		if ( charSet ) aCharList = charSet;
+
+		let fResolution = 0.5;
+
+		switch ( strResolution ) {
+
+			case 'low' : 	fResolution = 0.25; break;
+			case 'medium' : fResolution = 0.5; break;
+			case 'high' : 	fResolution = 1; break;
+
+		}
+
+		if ( bResolution ) fResolution = bResolution;
+
+		// Setup dom
+
+		const fFontSize = ( 2 / fResolution ) * iScale;
+		const fLineHeight = ( 2 / fResolution ) * iScale;
+
+		// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
+		let fLetterSpacing = 0;
+
+		if ( strResolution == 'low' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = - 1; break;
+				case 2 :
+				case 3 : fLetterSpacing = - 2.1; break;
+				case 4 : fLetterSpacing = - 3.1; break;
+				case 5 : fLetterSpacing = - 4.15; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'medium' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = 0; break;
+				case 2 : fLetterSpacing = - 1; break;
+				case 3 : fLetterSpacing = - 1.04; break;
+				case 4 :
+				case 5 : fLetterSpacing = - 2.1; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'high' ) {
+
+			switch ( iScale ) {
+
+				case 1 :
+				case 2 : fLetterSpacing = 0; break;
+				case 3 :
+				case 4 :
+				case 5 : fLetterSpacing = - 1; break;
+
+			}
+
+		}
+
+
+		// can't get a span or div to flow like an img element, but a table works?
+
+
+		// convert img element to ascii
+
+		function asciifyImage( oAscii ) {
+
+			oCtx.clearRect( 0, 0, iWidth, iHeight );
+			oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
+			const oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;
+
+			// Coloring loop starts now
+			let strChars = '';
+
+			// console.time('rendering');
+
+			for ( let y = 0; y < iHeight; y += 2 ) {
+
+				for ( let x = 0; x < iWidth; x ++ ) {
+
+					const iOffset = ( y * iWidth + x ) * 4;
+
+					const iRed = oImgData[ iOffset ];
+					const iGreen = oImgData[ iOffset + 1 ];
+					const iBlue = oImgData[ iOffset + 2 ];
+					const iAlpha = oImgData[ iOffset + 3 ];
+					let iCharIdx;
+
+					let fBrightness;
+
+					fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
+					// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
+
+					if ( iAlpha == 0 ) {
+
+						// should calculate alpha instead, but quick hack :)
+						//fBrightness *= (iAlpha / 255);
+						fBrightness = 1;
+
+					}
+
+					iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
+
+					if ( bInvert ) {
+
+						iCharIdx = aCharList.length - iCharIdx - 1;
+
+					}
+
+					// good for debugging
+					//fBrightness = Math.floor(fBrightness * 10);
+					//strThisChar = fBrightness;
+
+					let strThisChar = aCharList[ iCharIdx ];
+
+					if ( strThisChar === undefined || strThisChar == ' ' )
+						strThisChar = '&nbsp;';
+
+					if ( bColor ) {
+
+						strChars += '<span style=\''
+							+ 'color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');'
+							+ ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' )
+							+ ( bAlpha ? 'opacity:' + ( iAlpha / 255 ) + ';' : '' )
+							+ '\'>' + strThisChar + '</span>';
+
+					} else {
+
+						strChars += strThisChar;
+
+					}
+
+				}
+
+				strChars += '<br/>';
+
+			}
+
+			oAscii.innerHTML = '<tr><td>' + strChars + '</td></tr>';
+
+			// console.timeEnd('rendering');
+
+			// return oAscii;
+
+		}
+
+	}
+
+}
+
+export { AsciiEffect };

jsm/effects/OutlineEffect.js

@@ -0,0 +1,574 @@
+import {
+	BackSide,
+	Color,
+	ShaderMaterial,
+	UniformsLib,
+	UniformsUtils
+} from 'three';
+
+/**
+ * Reference: https://en.wikipedia.org/wiki/Cel_shading
+ *
+ * API
+ *
+ * 1. Traditional
+ *
+ * const effect = new OutlineEffect( renderer );
+ *
+ * function render() {
+ *
+ * 	effect.render( scene, camera );
+ *
+ * }
+ *
+ * 2. VR compatible
+ *
+ * const effect = new OutlineEffect( renderer );
+ * let renderingOutline = false;
+ *
+ * scene.onAfterRender = function () {
+ *
+ * 	if ( renderingOutline ) return;
+ *
+ * 	renderingOutline = true;
+ *
+ * 	effect.renderOutline( scene, camera );
+ *
+ * 	renderingOutline = false;
+ *
+ * };
+ *
+ * function render() {
+ *
+ * 	renderer.render( scene, camera );
+ *
+ * }
+ *
+ * // How to set default outline parameters
+ * new OutlineEffect( renderer, {
+ * 	defaultThickness: 0.01,
+ * 	defaultColor: [ 0, 0, 0 ],
+ * 	defaultAlpha: 0.8,
+ * 	defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
+ * } );
+ *
+ * // How to set outline parameters for each material
+ * material.userData.outlineParameters = {
+ * 	thickness: 0.01,
+ * 	color: [ 0, 0, 0 ]
+ * 	alpha: 0.8,
+ * 	visible: true,
+ * 	keepAlive: true
+ * };
+ */
+
+class OutlineEffect {
+
+	constructor( renderer, parameters = {} ) {
+
+		this.enabled = true;
+
+		const defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
+		const defaultColor = new Color().fromArray( parameters.defaultColor !== undefined ? parameters.defaultColor : [ 0, 0, 0 ] );
+		const defaultAlpha = parameters.defaultAlpha !== undefined ? parameters.defaultAlpha : 1.0;
+		const defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false;
+
+		// object.material.uuid -> outlineMaterial or
+		// object.material[ n ].uuid -> outlineMaterial
+		// save at the outline material creation and release
+		// if it's unused removeThresholdCount frames
+		// unless keepAlive is true.
+		const cache = {};
+
+		const removeThresholdCount = 60;
+
+		// outlineMaterial.uuid -> object.material or
+		// outlineMaterial.uuid -> object.material[ n ]
+		// save before render and release after render.
+		const originalMaterials = {};
+
+		// object.uuid -> originalOnBeforeRender
+		// save before render and release after render.
+		const originalOnBeforeRenders = {};
+
+		//this.cache = cache;  // for debug
+
+		const uniformsOutline = {
+			outlineThickness: { value: defaultThickness },
+			outlineColor: { value: defaultColor },
+			outlineAlpha: { value: defaultAlpha }
+		};
+
+		const vertexShader = [
+			'#include <common>',
+			'#include <uv_pars_vertex>',
+			'#include <displacementmap_pars_vertex>',
+			'#include <fog_pars_vertex>',
+			'#include <morphtarget_pars_vertex>',
+			'#include <skinning_pars_vertex>',
+			'#include <logdepthbuf_pars_vertex>',
+			'#include <clipping_planes_pars_vertex>',
+
+			'uniform float outlineThickness;',
+
+			'vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {',
+			'	float thickness = outlineThickness;',
+			'	const float ratio = 1.0;', // TODO: support outline thickness ratio for each vertex
+			'	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );',
+			// NOTE: subtract pos2 from pos because BackSide objectNormal is negative
+			'	vec4 norm = normalize( pos - pos2 );',
+			'	return pos + norm * thickness * pos.w * ratio;',
+			'}',
+
+			'void main() {',
+
+			'	#include <uv_vertex>',
+
+			'	#include <beginnormal_vertex>',
+			'	#include <morphnormal_vertex>',
+			'	#include <skinbase_vertex>',
+			'	#include <skinnormal_vertex>',
+
+			'	#include <begin_vertex>',
+			'	#include <morphtarget_vertex>',
+			'	#include <skinning_vertex>',
+			'	#include <displacementmap_vertex>',
+			'	#include <project_vertex>',
+
+			'	vec3 outlineNormal = - objectNormal;', // the outline material is always rendered with BackSide
+
+			'	gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );',
+
+			'	#include <logdepthbuf_vertex>',
+			'	#include <clipping_planes_vertex>',
+			'	#include <fog_vertex>',
+
+			'}',
+
+		].join( '\n' );
+
+		const fragmentShader = [
+
+			'#include <common>',
+			'#include <fog_pars_fragment>',
+			'#include <logdepthbuf_pars_fragment>',
+			'#include <clipping_planes_pars_fragment>',
+
+			'uniform vec3 outlineColor;',
+			'uniform float outlineAlpha;',
+
+			'void main() {',
+
+			'	#include <clipping_planes_fragment>',
+			'	#include <logdepthbuf_fragment>',
+
+			'	gl_FragColor = vec4( outlineColor, outlineAlpha );',
+
+			'	#include <tonemapping_fragment>',
+			'	#include <encodings_fragment>',
+			'	#include <fog_fragment>',
+			'	#include <premultiplied_alpha_fragment>',
+
+			'}'
+
+		].join( '\n' );
+
+		function createMaterial() {
+
+			return new ShaderMaterial( {
+				type: 'OutlineEffect',
+				uniforms: UniformsUtils.merge( [
+					UniformsLib[ 'fog' ],
+					UniformsLib[ 'displacementmap' ],
+					uniformsOutline
+				] ),
+				vertexShader: vertexShader,
+				fragmentShader: fragmentShader,
+				side: BackSide
+			} );
+
+		}
+
+		function getOutlineMaterialFromCache( originalMaterial ) {
+
+			let data = cache[ originalMaterial.uuid ];
+
+			if ( data === undefined ) {
+
+				data = {
+					material: createMaterial(),
+					used: true,
+					keepAlive: defaultKeepAlive,
+					count: 0
+				};
+
+				cache[ originalMaterial.uuid ] = data;
+
+			}
+
+			data.used = true;
+
+			return data.material;
+
+		}
+
+		function getOutlineMaterial( originalMaterial ) {
+
+			const outlineMaterial = getOutlineMaterialFromCache( originalMaterial );
+
+			originalMaterials[ outlineMaterial.uuid ] = originalMaterial;
+
+			updateOutlineMaterial( outlineMaterial, originalMaterial );
+
+			return outlineMaterial;
+
+		}
+
+		function isCompatible( object ) {
+
+			const geometry = object.geometry;
+			let hasNormals = false;
+
+			if ( object.geometry !== undefined ) {
+
+				if ( geometry.isBufferGeometry ) {
+
+					hasNormals = geometry.attributes.normal !== undefined;
+
+				} else {
+
+					hasNormals = true; // the renderer always produces a normal attribute for Geometry
+
+				}
+
+			}
+
+			return ( object.isMesh === true && object.material !== undefined && hasNormals === true );
+
+		}
+
+		function setOutlineMaterial( object ) {
+
+			if ( isCompatible( object ) === false ) return;
+
+			if ( Array.isArray( object.material ) ) {
+
+				for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+					object.material[ i ] = getOutlineMaterial( object.material[ i ] );
+
+				}
+
+			} else {
+
+				object.material = getOutlineMaterial( object.material );
+
+			}
+
+			originalOnBeforeRenders[ object.uuid ] = object.onBeforeRender;
+			object.onBeforeRender = onBeforeRender;
+
+		}
+
+		function restoreOriginalMaterial( object ) {
+
+			if ( isCompatible( object ) === false ) return;
+
+			if ( Array.isArray( object.material ) ) {
+
+				for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+					object.material[ i ] = originalMaterials[ object.material[ i ].uuid ];
+
+				}
+
+			} else {
+
+				object.material = originalMaterials[ object.material.uuid ];
+
+			}
+
+			object.onBeforeRender = originalOnBeforeRenders[ object.uuid ];
+
+		}
+
+		function onBeforeRender( renderer, scene, camera, geometry, material ) {
+
+			const originalMaterial = originalMaterials[ material.uuid ];
+
+			// just in case
+			if ( originalMaterial === undefined ) return;
+
+			updateUniforms( material, originalMaterial );
+
+		}
+
+		function updateUniforms( material, originalMaterial ) {
+
+			const outlineParameters = originalMaterial.userData.outlineParameters;
+
+			material.uniforms.outlineAlpha.value = originalMaterial.opacity;
+
+			if ( outlineParameters !== undefined ) {
+
+				if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness;
+				if ( outlineParameters.color !== undefined ) material.uniforms.outlineColor.value.fromArray( outlineParameters.color );
+				if ( outlineParameters.alpha !== undefined ) material.uniforms.outlineAlpha.value = outlineParameters.alpha;
+
+			}
+
+			if ( originalMaterial.displacementMap ) {
+
+				material.uniforms.displacementMap.value = originalMaterial.displacementMap;
+				material.uniforms.displacementScale.value = originalMaterial.displacementScale;
+				material.uniforms.displacementBias.value = originalMaterial.displacementBias;
+
+			}
+
+		}
+
+		function updateOutlineMaterial( material, originalMaterial ) {
+
+			if ( material.name === 'invisible' ) return;
+
+			const outlineParameters = originalMaterial.userData.outlineParameters;
+
+			material.fog = originalMaterial.fog;
+			material.toneMapped = originalMaterial.toneMapped;
+			material.premultipliedAlpha = originalMaterial.premultipliedAlpha;
+			material.displacementMap = originalMaterial.displacementMap;
+
+			if ( outlineParameters !== undefined ) {
+
+				if ( originalMaterial.visible === false ) {
+
+					material.visible = false;
+
+				} else {
+
+					material.visible = ( outlineParameters.visible !== undefined ) ? outlineParameters.visible : true;
+
+				}
+
+				material.transparent = ( outlineParameters.alpha !== undefined && outlineParameters.alpha < 1.0 ) ? true : originalMaterial.transparent;
+
+				if ( outlineParameters.keepAlive !== undefined ) cache[ originalMaterial.uuid ].keepAlive = outlineParameters.keepAlive;
+
+			} else {
+
+				material.transparent = originalMaterial.transparent;
+				material.visible = originalMaterial.visible;
+
+			}
+
+			if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false;
+
+			if ( originalMaterial.clippingPlanes ) {
+
+				material.clipping = true;
+
+				material.clippingPlanes = originalMaterial.clippingPlanes;
+				material.clipIntersection = originalMaterial.clipIntersection;
+				material.clipShadows = originalMaterial.clipShadows;
+
+			}
+
+			material.version = originalMaterial.version; // update outline material if necessary
+
+		}
+
+		function cleanupCache() {
+
+			let keys;
+
+			// clear originialMaterials
+			keys = Object.keys( originalMaterials );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				originalMaterials[ keys[ i ] ] = undefined;
+
+			}
+
+			// clear originalOnBeforeRenders
+			keys = Object.keys( originalOnBeforeRenders );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				originalOnBeforeRenders[ keys[ i ] ] = undefined;
+
+			}
+
+			// remove unused outlineMaterial from cache
+			keys = Object.keys( cache );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				const key = keys[ i ];
+
+				if ( cache[ key ].used === false ) {
+
+					cache[ key ].count ++;
+
+					if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) {
+
+						delete cache[ key ];
+
+					}
+
+				} else {
+
+					cache[ key ].used = false;
+					cache[ key ].count = 0;
+
+				}
+
+			}
+
+		}
+
+		this.render = function ( scene, camera ) {
+
+			let renderTarget;
+			let forceClear = false;
+
+			if ( arguments[ 2 ] !== undefined ) {
+
+				console.warn( 'THREE.OutlineEffect.render(): the renderTarget argument has been removed. Use .setRenderTarget() instead.' );
+				renderTarget = arguments[ 2 ];
+
+			}
+
+			if ( arguments[ 3 ] !== undefined ) {
+
+				console.warn( 'THREE.OutlineEffect.render(): the forceClear argument has been removed. Use .clear() instead.' );
+				forceClear = arguments[ 3 ];
+
+			}
+
+			if ( renderTarget !== undefined ) renderer.setRenderTarget( renderTarget );
+
+			if ( forceClear ) renderer.clear();
+
+			if ( this.enabled === false ) {
+
+				renderer.render( scene, camera );
+				return;
+
+			}
+
+			const currentAutoClear = renderer.autoClear;
+			renderer.autoClear = this.autoClear;
+
+			renderer.render( scene, camera );
+
+			renderer.autoClear = currentAutoClear;
+
+			this.renderOutline( scene, camera );
+
+		};
+
+		this.renderOutline = function ( scene, camera ) {
+
+			const currentAutoClear = renderer.autoClear;
+			const currentSceneAutoUpdate = scene.autoUpdate;
+			const currentSceneBackground = scene.background;
+			const currentShadowMapEnabled = renderer.shadowMap.enabled;
+
+			scene.autoUpdate = false;
+			scene.background = null;
+			renderer.autoClear = false;
+			renderer.shadowMap.enabled = false;
+
+			scene.traverse( setOutlineMaterial );
+
+			renderer.render( scene, camera );
+
+			scene.traverse( restoreOriginalMaterial );
+
+			cleanupCache();
+
+			scene.autoUpdate = currentSceneAutoUpdate;
+			scene.background = currentSceneBackground;
+			renderer.autoClear = currentAutoClear;
+			renderer.shadowMap.enabled = currentShadowMapEnabled;
+
+		};
+
+		/*
+		 * See #9918
+		 *
+		 * The following property copies and wrapper methods enable
+		 * OutlineEffect to be called from other *Effect, like
+		 *
+		 * effect = new StereoEffect( new OutlineEffect( renderer ) );
+		 *
+		 * function render () {
+		 *
+	 	 * 	effect.render( scene, camera );
+		 *
+		 * }
+		 */
+		this.autoClear = renderer.autoClear;
+		this.domElement = renderer.domElement;
+		this.shadowMap = renderer.shadowMap;
+
+		this.clear = function ( color, depth, stencil ) {
+
+			renderer.clear( color, depth, stencil );
+
+		};
+
+		this.getPixelRatio = function () {
+
+			return renderer.getPixelRatio();
+
+		};
+
+		this.setPixelRatio = function ( value ) {
+
+			renderer.setPixelRatio( value );
+
+		};
+
+		this.getSize = function ( target ) {
+
+			return renderer.getSize( target );
+
+		};
+
+		this.setSize = function ( width, height, updateStyle ) {
+
+			renderer.setSize( width, height, updateStyle );
+
+		};
+
+		this.setViewport = function ( x, y, width, height ) {
+
+			renderer.setViewport( x, y, width, height );
+
+		};
+
+		this.setScissor = function ( x, y, width, height ) {
+
+			renderer.setScissor( x, y, width, height );
+
+		};
+
+		this.setScissorTest = function ( boolean ) {
+
+			renderer.setScissorTest( boolean );
+
+		};
+
+		this.setRenderTarget = function ( renderTarget ) {
+
+			renderer.setRenderTarget( renderTarget );
+
+		};
+
+	}
+
+}
+
+export { OutlineEffect };

jsm/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,116 @@
+import {
+	LinearFilter,
+	Mesh,
+	NearestFilter,
+	OrthographicCamera,
+	PlaneGeometry,
+	RGBAFormat,
+	Scene,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+
+class ParallaxBarrierEffect {
+
+	constructor( renderer ) {
+
+		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+		const _scene = new Scene();
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
+		const _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {',
+
+				'		gl_FragColor = texture2D( mapLeft, uv );',
+
+				'	} else {',
+
+				'		gl_FragColor = texture2D( mapRight, uv );',
+
+				'	}',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
+		_scene.add( mesh );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			scene.updateMatrixWorld();
+
+			if ( camera.parent === null ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			renderer.render( _scene, _camera );
+
+		};
+
+	}
+
+}
+
+export { ParallaxBarrierEffect };

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 ) {
+
+			scene.updateMatrixWorld();
+
+			if ( camera.parent === null ) 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 };

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 ) {
+
+			scene.updateMatrixWorld();
+
+			if ( camera.parent === null ) 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 };

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 };

jsm/environments/RoomEnvironment.js

@@ -0,0 +1,121 @@
+/**
+ * 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() {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+
+		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
+		const boxMaterial = new MeshStandardMaterial();
+
+		const mainLight = new PointLight( 0xffffff, 5.0, 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 );
+
+	}
+
+}
+
+function createAreaLightMaterial( intensity ) {
+
+	const material = new MeshBasicMaterial();
+	material.color.setScalar( intensity );
+	return material;
+
+}
+
+export { RoomEnvironment };

jsm/exporters/ColladaExporter.js

@@ -0,0 +1,722 @@
+import {
+	Color,
+	DoubleSide,
+	Matrix4,
+	MeshBasicMaterial
+} from 'three';
+
+/**
+ * https://github.com/gkjohnson/collada-exporter-js
+ *
+ * Usage:
+ *  const exporter = new ColladaExporter();
+ *
+ *  const data = exporter.parse(mesh);
+ *
+ * Format Definition:
+ *  https://www.khronos.org/collada/
+ */
+
+class ColladaExporter {
+
+	parse( object, onDone, options = {} ) {
+
+		options = Object.assign( {
+			version: '1.4.1',
+			author: null,
+			textureDirectory: '',
+			upAxis: 'Y_UP',
+			unitName: null,
+			unitMeter: null,
+		}, options );
+
+		if ( options.upAxis.match( /^[XYZ]_UP$/ ) === null ) {
+
+			console.error( 'ColladaExporter: Invalid upAxis: valid values are X_UP, Y_UP or Z_UP.' );
+			return null;
+
+		}
+
+		if ( options.unitName !== null && options.unitMeter === null ) {
+
+			console.error( 'ColladaExporter: unitMeter needs to be specified if unitName is specified.' );
+			return null;
+
+		}
+
+		if ( options.unitMeter !== null && options.unitName === null ) {
+
+			console.error( 'ColladaExporter: unitName needs to be specified if unitMeter is specified.' );
+			return null;
+
+		}
+
+		if ( options.textureDirectory !== '' ) {
+
+			options.textureDirectory = `${ options.textureDirectory }/`
+				.replace( /\\/g, '/' )
+				.replace( /\/+/g, '/' );
+
+		}
+
+		const version = options.version;
+
+		if ( version !== '1.4.1' && version !== '1.5.0' ) {
+
+			console.warn( `ColladaExporter : Version ${ version } not supported for export. Only 1.4.1 and 1.5.0.` );
+			return null;
+
+		}
+
+		// Convert the urdf xml into a well-formatted, indented format
+		function format( urdf ) {
+
+			const IS_END_TAG = /^<\//;
+			const IS_SELF_CLOSING = /(\?>$)|(\/>$)/;
+			const HAS_TEXT = /<[^>]+>[^<]*<\/[^<]+>/;
+
+			const pad = ( ch, num ) => ( num > 0 ? ch + pad( ch, num - 1 ) : '' );
+
+			let tagnum = 0;
+
+			return urdf
+				.match( /(<[^>]+>[^<]+<\/[^<]+>)|(<[^>]+>)/g )
+				.map( tag => {
+
+					if ( ! HAS_TEXT.test( tag ) && ! IS_SELF_CLOSING.test( tag ) && IS_END_TAG.test( tag ) ) {
+
+						tagnum --;
+
+					}
+
+					const res = `${ pad( '  ', tagnum ) }${ tag }`;
+
+					if ( ! HAS_TEXT.test( tag ) && ! IS_SELF_CLOSING.test( tag ) && ! IS_END_TAG.test( tag ) ) {
+
+						tagnum ++;
+
+					}
+
+					return res;
+
+				} )
+				.join( '\n' );
+
+		}
+
+		// Convert an image into a png format for saving
+		function base64ToBuffer( str ) {
+
+			const b = atob( str );
+			const buf = new Uint8Array( b.length );
+
+			for ( let i = 0, l = buf.length; i < l; i ++ ) {
+
+				buf[ i ] = b.charCodeAt( i );
+
+			}
+
+			return buf;
+
+		}
+
+		let canvas, ctx;
+
+		function imageToData( image, ext ) {
+
+			canvas = canvas || document.createElement( 'canvas' );
+			ctx = ctx || canvas.getContext( '2d' );
+
+			canvas.width = image.width;
+			canvas.height = image.height;
+
+			ctx.drawImage( image, 0, 0 );
+
+			// Get the base64 encoded data
+			const base64data = canvas
+				.toDataURL( `image/${ ext }`, 1 )
+				.replace( /^data:image\/(png|jpg);base64,/, '' );
+
+			// Convert to a uint8 array
+			return base64ToBuffer( base64data );
+
+		}
+
+		// gets the attribute array. Generate a new array if the attribute is interleaved
+		const getFuncs = [ 'getX', 'getY', 'getZ', 'getW' ];
+		const tempColor = new Color();
+
+		function attrBufferToArray( attr, isColor = false ) {
+
+			if ( isColor ) {
+
+				// convert the colors to srgb before export
+				// colors are always written as floats
+				const arr = new Float32Array( attr.count * 3 );
+				for ( let i = 0, l = attr.count; i < l; i ++ ) {
+
+					tempColor
+						.fromBufferAttribute( attr, i )
+						.convertLinearToSRGB();
+
+					arr[ 3 * i + 0 ] = tempColor.r;
+					arr[ 3 * i + 1 ] = tempColor.g;
+					arr[ 3 * i + 2 ] = tempColor.b;
+
+				}
+
+				return arr;
+
+			} else if ( attr.isInterleavedBufferAttribute ) {
+
+				// use the typed array constructor to save on memory
+				const arr = new attr.array.constructor( attr.count * attr.itemSize );
+				const size = attr.itemSize;
+
+				for ( let i = 0, l = attr.count; i < l; i ++ ) {
+
+					for ( let j = 0; j < size; j ++ ) {
+
+						arr[ i * size + j ] = attr[ getFuncs[ j ] ]( i );
+
+					}
+
+				}
+
+				return arr;
+
+			} else {
+
+				return attr.array;
+
+			}
+
+		}
+
+		// Returns an array of the same type starting at the `st` index,
+		// and `ct` length
+		function subArray( arr, st, ct ) {
+
+			if ( Array.isArray( arr ) ) return arr.slice( st, st + ct );
+			else return new arr.constructor( arr.buffer, st * arr.BYTES_PER_ELEMENT, ct );
+
+		}
+
+		// Returns the string for a geometry's attribute
+		function getAttribute( attr, name, params, type, isColor = false ) {
+
+			const array = attrBufferToArray( attr, isColor );
+			const res =
+					`<source id="${ name }">` +
+
+					`<float_array id="${ name }-array" count="${ array.length }">` +
+					array.join( ' ' ) +
+					'</float_array>' +
+
+					'<technique_common>' +
+					`<accessor source="#${ name }-array" count="${ Math.floor( array.length / attr.itemSize ) }" stride="${ attr.itemSize }">` +
+
+					params.map( n => `<param name="${ n }" type="${ type }" />` ).join( '' ) +
+
+					'</accessor>' +
+					'</technique_common>' +
+					'</source>';
+
+			return res;
+
+		}
+
+		// Returns the string for a node's transform information
+		let transMat;
+		function getTransform( o ) {
+
+			// ensure the object's matrix is up to date
+			// before saving the transform
+			o.updateMatrix();
+
+			transMat = transMat || new Matrix4();
+			transMat.copy( o.matrix );
+			transMat.transpose();
+			return `<matrix>${ transMat.toArray().join( ' ' ) }</matrix>`;
+
+		}
+
+		// Process the given piece of geometry into the geometry library
+		// Returns the mesh id
+		function processGeometry( g ) {
+
+			let info = geometryInfo.get( g );
+
+			if ( ! info ) {
+
+				// convert the geometry to bufferGeometry if it isn't already
+				const bufferGeometry = g;
+
+				if ( bufferGeometry.isBufferGeometry !== true ) {
+
+					throw new Error( 'THREE.ColladaExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+				}
+
+				const meshid = `Mesh${ libraryGeometries.length + 1 }`;
+
+				const indexCount =
+					bufferGeometry.index ?
+						bufferGeometry.index.count * bufferGeometry.index.itemSize :
+						bufferGeometry.attributes.position.count;
+
+				const groups =
+					bufferGeometry.groups != null && bufferGeometry.groups.length !== 0 ?
+						bufferGeometry.groups :
+						[ { start: 0, count: indexCount, materialIndex: 0 } ];
+
+
+				const gname = g.name ? ` name="${ g.name }"` : '';
+				let gnode = `<geometry id="${ meshid }"${ gname }><mesh>`;
+
+				// define the geometry node and the vertices for the geometry
+				const posName = `${ meshid }-position`;
+				const vertName = `${ meshid }-vertices`;
+				gnode += getAttribute( bufferGeometry.attributes.position, posName, [ 'X', 'Y', 'Z' ], 'float' );
+				gnode += `<vertices id="${ vertName }"><input semantic="POSITION" source="#${ posName }" /></vertices>`;
+
+				// NOTE: We're not optimizing the attribute arrays here, so they're all the same length and
+				// can therefore share the same triangle indices. However, MeshLab seems to have trouble opening
+				// models with attributes that share an offset.
+				// MeshLab Bug#424: https://sourceforge.net/p/meshlab/bugs/424/
+
+				// serialize normals
+				let triangleInputs = `<input semantic="VERTEX" source="#${ vertName }" offset="0" />`;
+				if ( 'normal' in bufferGeometry.attributes ) {
+
+					const normName = `${ meshid }-normal`;
+					gnode += getAttribute( bufferGeometry.attributes.normal, normName, [ 'X', 'Y', 'Z' ], 'float' );
+					triangleInputs += `<input semantic="NORMAL" source="#${ normName }" offset="0" />`;
+
+				}
+
+				// serialize uvs
+				if ( 'uv' in bufferGeometry.attributes ) {
+
+					const uvName = `${ meshid }-texcoord`;
+					gnode += getAttribute( bufferGeometry.attributes.uv, uvName, [ 'S', 'T' ], 'float' );
+					triangleInputs += `<input semantic="TEXCOORD" source="#${ uvName }" offset="0" set="0" />`;
+
+				}
+
+				// serialize lightmap uvs
+				if ( 'uv2' in bufferGeometry.attributes ) {
+
+					const uvName = `${ meshid }-texcoord2`;
+					gnode += getAttribute( bufferGeometry.attributes.uv2, uvName, [ 'S', 'T' ], 'float' );
+					triangleInputs += `<input semantic="TEXCOORD" source="#${ uvName }" offset="0" set="1" />`;
+
+				}
+
+				// serialize colors
+				if ( 'color' in bufferGeometry.attributes ) {
+
+					// colors are always written as floats
+					const colName = `${ meshid }-color`;
+					gnode += getAttribute( bufferGeometry.attributes.color, colName, [ 'R', 'G', 'B' ], 'float', true );
+					triangleInputs += `<input semantic="COLOR" source="#${ colName }" offset="0" />`;
+
+				}
+
+				let indexArray = null;
+				if ( bufferGeometry.index ) {
+
+					indexArray = attrBufferToArray( bufferGeometry.index );
+
+				} else {
+
+					indexArray = new Array( indexCount );
+					for ( let i = 0, l = indexArray.length; i < l; i ++ ) indexArray[ i ] = i;
+
+				}
+
+				for ( let i = 0, l = groups.length; i < l; i ++ ) {
+
+					const group = groups[ i ];
+					const subarr = subArray( indexArray, group.start, group.count );
+					const polycount = subarr.length / 3;
+					gnode += `<triangles material="MESH_MATERIAL_${ group.materialIndex }" count="${ polycount }">`;
+					gnode += triangleInputs;
+
+					gnode += `<p>${ subarr.join( ' ' ) }</p>`;
+					gnode += '</triangles>';
+
+				}
+
+				gnode += '</mesh></geometry>';
+
+				libraryGeometries.push( gnode );
+
+				info = { meshid: meshid, bufferGeometry: bufferGeometry };
+				geometryInfo.set( g, info );
+
+			}
+
+			return info;
+
+		}
+
+		// Process the given texture into the image library
+		// Returns the image library
+		function processTexture( tex ) {
+
+			let texid = imageMap.get( tex );
+			if ( texid == null ) {
+
+				texid = `image-${ libraryImages.length + 1 }`;
+
+				const ext = 'png';
+				const name = tex.name || texid;
+				let imageNode = `<image id="${ texid }" name="${ name }">`;
+
+				if ( version === '1.5.0' ) {
+
+					imageNode += `<init_from><ref>${ options.textureDirectory }${ name }.${ ext }</ref></init_from>`;
+
+				} else {
+
+					// version image node 1.4.1
+					imageNode += `<init_from>${ options.textureDirectory }${ name }.${ ext }</init_from>`;
+
+				}
+
+				imageNode += '</image>';
+
+				libraryImages.push( imageNode );
+				imageMap.set( tex, texid );
+				textures.push( {
+					directory: options.textureDirectory,
+					name,
+					ext,
+					data: imageToData( tex.image, ext ),
+					original: tex
+				} );
+
+			}
+
+			return texid;
+
+		}
+
+		// Process the given material into the material and effect libraries
+		// Returns the material id
+		function processMaterial( m ) {
+
+			let matid = materialMap.get( m );
+
+			if ( matid == null ) {
+
+				matid = `Mat${ libraryEffects.length + 1 }`;
+
+				let type = 'phong';
+
+				if ( m.isMeshLambertMaterial === true ) {
+
+					type = 'lambert';
+
+				} else if ( m.isMeshBasicMaterial === true ) {
+
+					type = 'constant';
+
+					if ( m.map !== null ) {
+
+						// The Collada spec does not support diffuse texture maps with the
+						// constant shader type.
+						// mrdoob/three.js#15469
+						console.warn( 'ColladaExporter: Texture maps not supported with MeshBasicMaterial.' );
+
+					}
+
+				}
+
+				const emissive = m.emissive ? m.emissive : new Color( 0, 0, 0 );
+				const diffuse = m.color ? m.color : new Color( 0, 0, 0 );
+				const specular = m.specular ? m.specular : new Color( 1, 1, 1 );
+				const shininess = m.shininess || 0;
+				const reflectivity = m.reflectivity || 0;
+
+				emissive.convertLinearToSRGB();
+				specular.convertLinearToSRGB();
+				diffuse.convertLinearToSRGB();
+
+				// Do not export and alpha map for the reasons mentioned in issue (#13792)
+				// in three.js alpha maps are black and white, but collada expects the alpha
+				// channel to specify the transparency
+				let transparencyNode = '';
+				if ( m.transparent === true ) {
+
+					transparencyNode +=
+						'<transparent>' +
+						(
+							m.map ?
+								'<texture texture="diffuse-sampler"></texture>' :
+								'<float>1</float>'
+						) +
+						'</transparent>';
+
+					if ( m.opacity < 1 ) {
+
+						transparencyNode += `<transparency><float>${ m.opacity }</float></transparency>`;
+
+					}
+
+				}
+
+				const techniqueNode = `<technique sid="common"><${ type }>` +
+
+					'<emission>' +
+
+					(
+						m.emissiveMap ?
+							'<texture texture="emissive-sampler" texcoord="TEXCOORD" />' :
+							`<color sid="emission">${ emissive.r } ${ emissive.g } ${ emissive.b } 1</color>`
+					) +
+
+					'</emission>' +
+
+					(
+						type !== 'constant' ?
+							'<diffuse>' +
+
+						(
+							m.map ?
+								'<texture texture="diffuse-sampler" texcoord="TEXCOORD" />' :
+								`<color sid="diffuse">${ diffuse.r } ${ diffuse.g } ${ diffuse.b } 1</color>`
+						) +
+						'</diffuse>'
+							: ''
+					) +
+
+					(
+						type !== 'constant' ?
+							'<bump>' +
+
+						(
+							m.normalMap ? '<texture texture="bump-sampler" texcoord="TEXCOORD" />' : ''
+						) +
+						'</bump>'
+							: ''
+					) +
+
+					(
+						type === 'phong' ?
+							`<specular><color sid="specular">${ specular.r } ${ specular.g } ${ specular.b } 1</color></specular>` +
+
+						'<shininess>' +
+
+						(
+							m.specularMap ?
+								'<texture texture="specular-sampler" texcoord="TEXCOORD" />' :
+								`<float sid="shininess">${ shininess }</float>`
+						) +
+
+						'</shininess>'
+							: ''
+					) +
+
+					`<reflective><color>${ diffuse.r } ${ diffuse.g } ${ diffuse.b } 1</color></reflective>` +
+
+					`<reflectivity><float>${ reflectivity }</float></reflectivity>` +
+
+					transparencyNode +
+
+					`</${ type }></technique>`;
+
+				const effectnode =
+					`<effect id="${ matid }-effect">` +
+					'<profile_COMMON>' +
+
+					(
+						m.map ?
+							'<newparam sid="diffuse-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.map ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="diffuse-sampler"><sampler2D><source>diffuse-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
+					(
+						m.specularMap ?
+							'<newparam sid="specular-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.specularMap ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="specular-sampler"><sampler2D><source>specular-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
+					(
+						m.emissiveMap ?
+							'<newparam sid="emissive-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.emissiveMap ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="emissive-sampler"><sampler2D><source>emissive-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
+					(
+						m.normalMap ?
+							'<newparam sid="bump-surface"><surface type="2D">' +
+							`<init_from>${ processTexture( m.normalMap ) }</init_from>` +
+							'</surface></newparam>' +
+							'<newparam sid="bump-sampler"><sampler2D><source>bump-surface</source></sampler2D></newparam>' :
+							''
+					) +
+
+					techniqueNode +
+
+					(
+						m.side === DoubleSide ?
+							'<extra><technique profile="THREEJS"><double_sided sid="double_sided" type="int">1</double_sided></technique></extra>' :
+							''
+					) +
+
+					'</profile_COMMON>' +
+
+					'</effect>';
+
+				const materialName = m.name ? ` name="${ m.name }"` : '';
+				const materialNode = `<material id="${ matid }"${ materialName }><instance_effect url="#${ matid }-effect" /></material>`;
+
+				libraryMaterials.push( materialNode );
+				libraryEffects.push( effectnode );
+				materialMap.set( m, matid );
+
+			}
+
+			return matid;
+
+		}
+
+		// Recursively process the object into a scene
+		function processObject( o ) {
+
+			let node = `<node name="${ o.name }">`;
+
+			node += getTransform( o );
+
+			if ( o.isMesh === true && o.geometry !== null ) {
+
+				// function returns the id associated with the mesh and a "BufferGeometry" version
+				// of the geometry in case it's not a geometry.
+				const geomInfo = processGeometry( o.geometry );
+				const meshid = geomInfo.meshid;
+				const geometry = geomInfo.bufferGeometry;
+
+				// ids of the materials to bind to the geometry
+				let matids = null;
+				let matidsArray;
+
+				// get a list of materials to bind to the sub groups of the geometry.
+				// If the amount of subgroups is greater than the materials, than reuse
+				// the materials.
+				const mat = o.material || new MeshBasicMaterial();
+				const materials = Array.isArray( mat ) ? mat : [ mat ];
+
+				if ( geometry.groups.length > materials.length ) {
+
+					matidsArray = new Array( geometry.groups.length );
+
+				} else {
+
+					matidsArray = new Array( materials.length );
+
+				}
+
+				matids = matidsArray.fill().map( ( v, i ) => processMaterial( materials[ i % materials.length ] ) );
+
+				node +=
+					`<instance_geometry url="#${ meshid }">` +
+
+					(
+						matids.length > 0 ?
+							'<bind_material><technique_common>' +
+							matids.map( ( id, i ) =>
+
+								`<instance_material symbol="MESH_MATERIAL_${ i }" target="#${ id }" >` +
+
+								'<bind_vertex_input semantic="TEXCOORD" input_semantic="TEXCOORD" input_set="0" />' +
+
+								'</instance_material>'
+							).join( '' ) +
+							'</technique_common></bind_material>' :
+							''
+					) +
+
+					'</instance_geometry>';
+
+			}
+
+			o.children.forEach( c => node += processObject( c ) );
+
+			node += '</node>';
+
+			return node;
+
+		}
+
+		const geometryInfo = new WeakMap();
+		const materialMap = new WeakMap();
+		const imageMap = new WeakMap();
+		const textures = [];
+
+		const libraryImages = [];
+		const libraryGeometries = [];
+		const libraryEffects = [];
+		const libraryMaterials = [];
+		const libraryVisualScenes = processObject( object );
+
+		const specLink = version === '1.4.1' ? 'http://www.collada.org/2005/11/COLLADASchema' : 'https://www.khronos.org/collada/';
+		let dae =
+			'<?xml version="1.0" encoding="UTF-8" standalone="no" ?>' +
+			`<COLLADA xmlns="${ specLink }" version="${ version }">` +
+			'<asset>' +
+			(
+				'<contributor>' +
+				'<authoring_tool>three.js Collada Exporter</authoring_tool>' +
+				( options.author !== null ? `<author>${ options.author }</author>` : '' ) +
+				'</contributor>' +
+				`<created>${ ( new Date() ).toISOString() }</created>` +
+				`<modified>${ ( new Date() ).toISOString() }</modified>` +
+				( options.unitName !== null ? `<unit name="${ options.unitName }" meter="${ options.unitMeter }" />` : '' ) +
+				`<up_axis>${ options.upAxis }</up_axis>`
+			) +
+			'</asset>';
+
+		dae += `<library_images>${ libraryImages.join( '' ) }</library_images>`;
+
+		dae += `<library_effects>${ libraryEffects.join( '' ) }</library_effects>`;
+
+		dae += `<library_materials>${ libraryMaterials.join( '' ) }</library_materials>`;
+
+		dae += `<library_geometries>${ libraryGeometries.join( '' ) }</library_geometries>`;
+
+		dae += `<library_visual_scenes><visual_scene id="Scene" name="scene">${ libraryVisualScenes }</visual_scene></library_visual_scenes>`;
+
+		dae += '<scene><instance_visual_scene url="#Scene"/></scene>';
+
+		dae += '</COLLADA>';
+
+		const res = {
+			data: format( dae ),
+			textures
+		};
+
+		if ( typeof onDone === 'function' ) {
+
+			requestAnimationFrame( () => onDone( res ) );
+
+		}
+
+		return res;
+
+	}
+
+}
+
+
+export { ColladaExporter };

jsm/exporters/DRACOExporter.js

@@ -0,0 +1,238 @@
+/**
+ * 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
+ */
+
+/* global DracoEncoderModule */
+
+class DRACOExporter {
+
+	parse( object, options = {
+		decodeSpeed: 5,
+		encodeSpeed: 5,
+		encoderMethod: DRACOExporter.MESH_EDGEBREAKER_ENCODING,
+		quantization: [ 16, 8, 8, 8, 8 ],
+		exportUvs: true,
+		exportNormals: true,
+		exportColor: false,
+	} ) {
+
+		if ( object.isBufferGeometry === true ) {
+
+			throw new Error( 'DRACOExporter: The first parameter of parse() is now an instance of Mesh or Points.' );
+
+		}
+
+		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 ( geometry.isBufferGeometry !== true ) {
+
+			throw new Error( 'THREE.DRACOExporter.parse(geometry, options): geometry is not a THREE.BufferGeometry instance.' );
+
+		}
+
+		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 ) {
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, colors.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 ) {
+
+					builder.AddFloatAttribute( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, colors.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;
+
+	}
+
+}
+
+// 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 };

jsm/exporters/EXRExporter.js

@@ -0,0 +1,507 @@
+/**
+ * @author sciecode / https://github.com/sciecode
+ *
+ * EXR format references:
+ * 	https://www.openexr.com/documentation/openexrfilelayout.pdf
+ */
+
+import {
+	FloatType,
+	HalfFloatType,
+	RGBAFormat,
+	DataUtils,
+} from 'three';
+import * as fflate from '../libs/fflate.module.js';
+
+const textEncoder = new TextEncoder();
+
+const NO_COMPRESSION = 0;
+const ZIPS_COMPRESSION = 2;
+const ZIP_COMPRESSION = 3;
+
+class EXRExporter {
+
+	parse( renderer, renderTarget, options ) {
+
+		if ( ! supported( renderer, renderTarget ) ) return undefined;
+
+		const info = buildInfo( renderTarget, options ),
+			dataBuffer = getPixelData( renderer, renderTarget, info ),
+			rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
+			chunks = compressData( rawContentBuffer, info );
+
+		return fillData( chunks, info );
+
+	}
+
+}
+
+function supported( renderer, renderTarget ) {
+
+	if ( ! renderer || ! renderer.isWebGLRenderer ) {
+
+		console.error( 'EXRExporter.parse: Unsupported first parameter, expected instance of WebGLRenderer.' );
+
+		return false;
+
+	}
+
+	if ( ! renderTarget || ! renderTarget.isWebGLRenderTarget ) {
+
+		console.error( 'EXRExporter.parse: Unsupported second parameter, expected instance of WebGLRenderTarget.' );
+
+		return false;
+
+	}
+
+	if ( renderTarget.texture.type !== FloatType && renderTarget.texture.type !== HalfFloatType ) {
+
+		console.error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture type.' );
+
+		return false;
+
+	}
+
+	if ( renderTarget.texture.format !== RGBAFormat ) {
+
+		console.error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture format, expected RGBAFormat.' );
+
+		return false;
+
+	}
+
+
+	return true;
+
+}
+
+function buildInfo( renderTarget, options = {} ) {
+
+	const compressionSizes = {
+		0: 1,
+		2: 1,
+		3: 16
+	};
+
+	const WIDTH = renderTarget.width,
+		HEIGHT = renderTarget.height,
+		TYPE = renderTarget.texture.type,
+		FORMAT = renderTarget.texture.format,
+		ENCODING = renderTarget.texture.encoding,
+		COMPRESSION = ( options.compression !== undefined ) ? options.compression : ZIP_COMPRESSION,
+		EXPORTER_TYPE = ( options.type !== undefined ) ? options.type : HalfFloatType,
+		OUT_TYPE = ( EXPORTER_TYPE === FloatType ) ? 2 : 1,
+		COMPRESSION_SIZE = compressionSizes[ COMPRESSION ],
+		NUM_CHANNELS = 4;
+
+	return {
+		width: WIDTH,
+		height: HEIGHT,
+		type: TYPE,
+		format: FORMAT,
+		encoding: ENCODING,
+		compression: COMPRESSION,
+		blockLines: COMPRESSION_SIZE,
+		dataType: OUT_TYPE,
+		dataSize: 2 * OUT_TYPE,
+		numBlocks: Math.ceil( HEIGHT / COMPRESSION_SIZE ),
+		numInputChannels: 4,
+		numOutputChannels: NUM_CHANNELS,
+	};
+
+}
+
+function getPixelData( renderer, rtt, info ) {
+
+	let dataBuffer;
+
+	if ( info.type === FloatType ) {
+
+		dataBuffer = new Float32Array( info.width * info.height * info.numInputChannels );
+
+	} else {
+
+		dataBuffer = new Uint16Array( info.width * info.height * info.numInputChannels );
+
+	}
+
+	renderer.readRenderTargetPixels( rtt, 0, 0, info.width, info.height, dataBuffer );
+
+	return dataBuffer;
+
+}
+
+function reorganizeDataBuffer( inBuffer, info ) {
+
+	const w = info.width,
+		h = info.height,
+		dec = { r: 0, g: 0, b: 0, a: 0 },
+		offset = { value: 0 },
+		cOffset = ( info.numOutputChannels == 4 ) ? 1 : 0,
+		getValue = ( info.type == FloatType ) ? getFloat32 : getFloat16,
+		setValue = ( info.dataType == 1 ) ? setFloat16 : setFloat32,
+		outBuffer = new Uint8Array( info.width * info.height * info.numOutputChannels * info.dataSize ),
+		dv = new DataView( outBuffer.buffer );
+
+	for ( let y = 0; y < h; ++ y ) {
+
+		for ( let x = 0; x < w; ++ x ) {
+
+			const i = y * w * 4 + x * 4;
+
+			const r = getValue( inBuffer, i );
+			const g = getValue( inBuffer, i + 1 );
+			const b = getValue( inBuffer, i + 2 );
+			const a = getValue( inBuffer, i + 3 );
+
+			const line = ( h - y - 1 ) * w * ( 3 + cOffset ) * info.dataSize;
+
+			decodeLinear( dec, r, g, b, a );
+
+			offset.value = line + x * info.dataSize;
+			setValue( dv, dec.a, offset );
+
+			offset.value = line + ( cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.b, offset );
+
+			offset.value = line + ( 1 + cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.g, offset );
+
+			offset.value = line + ( 2 + cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.r, offset );
+
+		}
+
+	}
+
+	return outBuffer;
+
+}
+
+function compressData( inBuffer, info ) {
+
+	let compress,
+		tmpBuffer,
+		sum = 0;
+
+	const chunks = { data: new Array(), totalSize: 0 },
+		size = info.width * info.numOutputChannels * info.blockLines * info.dataSize;
+
+	switch ( info.compression ) {
+
+		case 0:
+			compress = compressNONE;
+			break;
+
+		case 2:
+		case 3:
+			compress = compressZIP;
+			break;
+
+	}
+
+	if ( info.compression !== 0 ) {
+
+		tmpBuffer = new Uint8Array( size );
+
+	}
+
+	for ( let i = 0; i < info.numBlocks; ++ i ) {
+
+		const arr = inBuffer.subarray( size * i, size * ( i + 1 ) );
+
+		const block = compress( arr, tmpBuffer );
+
+		sum += block.length;
+
+		chunks.data.push( { dataChunk: block, size: block.length } );
+
+	}
+
+	chunks.totalSize = sum;
+
+	return chunks;
+
+}
+
+function compressNONE( data ) {
+
+	return data;
+
+}
+
+function compressZIP( data, tmpBuffer ) {
+
+	//
+	// Reorder the pixel data.
+	//
+
+	let t1 = 0,
+		t2 = Math.floor( ( data.length + 1 ) / 2 ),
+		s = 0;
+
+	const stop = data.length - 1;
+
+	while ( true ) {
+
+		if ( s > stop ) break;
+		tmpBuffer[ t1 ++ ] = data[ s ++ ];
+
+		if ( s > stop ) break;
+		tmpBuffer[ t2 ++ ] = data[ s ++ ];
+
+	}
+
+	//
+	// Predictor.
+	//
+
+	let p = tmpBuffer[ 0 ];
+
+	for ( let t = 1; t < tmpBuffer.length; t ++ ) {
+
+		const d = tmpBuffer[ t ] - p + ( 128 + 256 );
+		p = tmpBuffer[ t ];
+		tmpBuffer[ t ] = d;
+
+	}
+
+	if ( typeof fflate === 'undefined' ) {
+
+		console.error( 'THREE.EXRLoader: External \`fflate.module.js\` required' );
+
+	}
+
+	const deflate = fflate.zlibSync( tmpBuffer ); // eslint-disable-line no-undef
+
+	return deflate;
+
+}
+
+function fillHeader( outBuffer, chunks, info ) {
+
+	const offset = { value: 0 };
+	const dv = new DataView( outBuffer.buffer );
+
+	setUint32( dv, 20000630, offset ); // magic
+	setUint32( dv, 2, offset ); // mask
+
+	// = HEADER =
+
+	setString( dv, 'compression', offset );
+	setString( dv, 'compression', offset );
+	setUint32( dv, 1, offset );
+	setUint8( dv, info.compression, offset );
+
+	setString( dv, 'screenWindowCenter', offset );
+	setString( dv, 'v2f', offset );
+	setUint32( dv, 8, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+
+	setString( dv, 'screenWindowWidth', offset );
+	setString( dv, 'float', offset );
+	setUint32( dv, 4, offset );
+	setFloat32( dv, 1.0, offset );
+
+	setString( dv, 'pixelAspectRatio', offset );
+	setString( dv, 'float', offset );
+	setUint32( dv, 4, offset );
+	setFloat32( dv, 1.0, offset );
+
+	setString( dv, 'lineOrder', offset );
+	setString( dv, 'lineOrder', offset );
+	setUint32( dv, 1, offset );
+	setUint8( dv, 0, offset );
+
+	setString( dv, 'dataWindow', offset );
+	setString( dv, 'box2i', offset );
+	setUint32( dv, 16, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, info.width - 1, offset );
+	setUint32( dv, info.height - 1, offset );
+
+	setString( dv, 'displayWindow', offset );
+	setString( dv, 'box2i', offset );
+	setUint32( dv, 16, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, info.width - 1, offset );
+	setUint32( dv, info.height - 1, offset );
+
+	setString( dv, 'channels', offset );
+	setString( dv, 'chlist', offset );
+	setUint32( dv, info.numOutputChannels * 18 + 1, offset );
+
+	setString( dv, 'A', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'B', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'G', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'R', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setUint8( dv, 0, offset );
+
+	// null-byte
+	setUint8( dv, 0, offset );
+
+	// = OFFSET TABLE =
+
+	let sum = offset.value + info.numBlocks * 8;
+
+	for ( let i = 0; i < chunks.data.length; ++ i ) {
+
+		setUint64( dv, sum, offset );
+
+		sum += chunks.data[ i ].size + 8;
+
+	}
+
+}
+
+function fillData( chunks, info ) {
+
+	const TableSize = info.numBlocks * 8,
+		HeaderSize = 259 + ( 18 * info.numOutputChannels ), // 259 + 18 * chlist
+		offset = { value: HeaderSize + TableSize },
+		outBuffer = new Uint8Array( HeaderSize + TableSize + chunks.totalSize + info.numBlocks * 8 ),
+		dv = new DataView( outBuffer.buffer );
+
+	fillHeader( outBuffer, chunks, info );
+
+	for ( let i = 0; i < chunks.data.length; ++ i ) {
+
+		const data = chunks.data[ i ].dataChunk;
+		const size = chunks.data[ i ].size;
+
+		setUint32( dv, i * info.blockLines, offset );
+		setUint32( dv, size, offset );
+
+		outBuffer.set( data, offset.value );
+		offset.value += size;
+
+	}
+
+	return outBuffer;
+
+}
+
+function decodeLinear( dec, r, g, b, a ) {
+
+	dec.r = r;
+	dec.g = g;
+	dec.b = b;
+	dec.a = a;
+
+}
+
+// function decodeSRGB( dec, r, g, b, a ) {
+
+// 	dec.r = r > 0.04045 ? Math.pow( r * 0.9478672986 + 0.0521327014, 2.4 ) : r * 0.0773993808;
+// 	dec.g = g > 0.04045 ? Math.pow( g * 0.9478672986 + 0.0521327014, 2.4 ) : g * 0.0773993808;
+// 	dec.b = b > 0.04045 ? Math.pow( b * 0.9478672986 + 0.0521327014, 2.4 ) : b * 0.0773993808;
+// 	dec.a = a;
+
+// }
+
+
+function setUint8( dv, value, offset ) {
+
+	dv.setUint8( offset.value, value );
+
+	offset.value += 1;
+
+}
+
+function setUint32( dv, value, offset ) {
+
+	dv.setUint32( offset.value, value, true );
+
+	offset.value += 4;
+
+}
+
+function setFloat16( dv, value, offset ) {
+
+	dv.setUint16( offset.value, DataUtils.toHalfFloat( value ), true );
+
+	offset.value += 2;
+
+}
+
+function setFloat32( dv, value, offset ) {
+
+	dv.setFloat32( offset.value, value, true );
+
+	offset.value += 4;
+
+}
+
+function setUint64( dv, value, offset ) {
+
+	dv.setBigUint64( offset.value, BigInt( value ), true );
+
+	offset.value += 8;
+
+}
+
+function setString( dv, string, offset ) {
+
+	const tmp = textEncoder.encode( string + '\0' );
+
+	for ( let i = 0; i < tmp.length; ++ i ) {
+
+		setUint8( dv, tmp[ i ], offset );
+
+	}
+
+}
+
+function decodeFloat16( binary ) {
+
+	const exponent = ( binary & 0x7C00 ) >> 10,
+		fraction = binary & 0x03FF;
+
+	return ( binary >> 15 ? - 1 : 1 ) * (
+		exponent ?
+			(
+				exponent === 0x1F ?
+					fraction ? NaN : Infinity :
+					Math.pow( 2, exponent - 15 ) * ( 1 + fraction / 0x400 )
+			) :
+			6.103515625e-5 * ( fraction / 0x400 )
+	);
+
+}
+
+function getFloat16( arr, i ) {
+
+	return decodeFloat16( arr[ i ] );
+
+}
+
+function getFloat32( arr, i ) {
+
+	return arr[ i ];
+
+}
+
+export { EXRExporter, NO_COMPRESSION, ZIP_COMPRESSION, ZIPS_COMPRESSION };

jsm/exporters/MMDExporter.js

@@ -0,0 +1,217 @@
+import {
+	Matrix4,
+	Quaternion,
+	Vector3
+} from 'three';
+import { MMDParser } from '../libs/mmdparser.module.js';
+
+/**
+ * Dependencies
+ *  - mmd-parser https://github.com/takahirox/mmd-parser
+ */
+
+class MMDExporter {
+
+	/* TODO: implement
+	// mesh -> pmd
+	this.parsePmd = function ( object ) {
+
+	};
+	*/
+
+	/* TODO: implement
+	// mesh -> pmx
+	this.parsePmx = function ( object ) {
+
+	};
+	*/
+
+	/* TODO: implement
+	// animation + skeleton -> vmd
+	this.parseVmd = function ( object ) {
+
+	};
+	*/
+
+	/*
+	 * skeleton -> vpd
+	 * Returns Shift_JIS encoded Uint8Array. Otherwise return strings.
+	 */
+	parseVpd( skin, outputShiftJis, useOriginalBones ) {
+
+		if ( skin.isSkinnedMesh !== true ) {
+
+			console.warn( 'THREE.MMDExporter: parseVpd() requires SkinnedMesh instance.' );
+			return null;
+
+		}
+
+		function toStringsFromNumber( num ) {
+
+			if ( Math.abs( num ) < 1e-6 ) num = 0;
+
+			let a = num.toString();
+
+			if ( a.indexOf( '.' ) === - 1 ) {
+
+				a += '.';
+
+			}
+
+			a += '000000';
+
+			const index = a.indexOf( '.' );
+
+			const d = a.slice( 0, index );
+			const p = a.slice( index + 1, index + 7 );
+
+			return d + '.' + p;
+
+		}
+
+		function toStringsFromArray( array ) {
+
+			const a = [];
+
+			for ( let i = 0, il = array.length; i < il; i ++ ) {
+
+				a.push( toStringsFromNumber( array[ i ] ) );
+
+			}
+
+			return a.join( ',' );
+
+		}
+
+		skin.updateMatrixWorld( true );
+
+		const bones = skin.skeleton.bones;
+		const bones2 = getBindBones( skin );
+
+		const position = new Vector3();
+		const quaternion = new Quaternion();
+		const quaternion2 = new Quaternion();
+		const matrix = new Matrix4();
+
+		const array = [];
+		array.push( 'Vocaloid Pose Data file' );
+		array.push( '' );
+		array.push( ( skin.name !== '' ? skin.name.replace( /\s/g, '_' ) : 'skin' ) + '.osm;' );
+		array.push( bones.length + ';' );
+		array.push( '' );
+
+		for ( let i = 0, il = bones.length; i < il; i ++ ) {
+
+			const bone = bones[ i ];
+			const bone2 = bones2[ i ];
+
+			/*
+			 * use the bone matrix saved before solving IK.
+			 * see CCDIKSolver for the detail.
+			 */
+			if ( useOriginalBones === true &&
+				bone.userData.ik !== undefined &&
+				bone.userData.ik.originalMatrix !== undefined ) {
+
+				matrix.fromArray( bone.userData.ik.originalMatrix );
+
+			} else {
+
+				matrix.copy( bone.matrix );
+
+			}
+
+			position.setFromMatrixPosition( matrix );
+			quaternion.setFromRotationMatrix( matrix );
+
+			const pArray = position.sub( bone2.position ).toArray();
+			const qArray = quaternion2.copy( bone2.quaternion ).conjugate().multiply( quaternion ).toArray();
+
+			// right to left
+			pArray[ 2 ] = - pArray[ 2 ];
+			qArray[ 0 ] = - qArray[ 0 ];
+			qArray[ 1 ] = - qArray[ 1 ];
+
+			array.push( 'Bone' + i + '{' + bone.name );
+			array.push( '  ' + toStringsFromArray( pArray ) + ';' );
+			array.push( '  ' + toStringsFromArray( qArray ) + ';' );
+			array.push( '}' );
+			array.push( '' );
+
+		}
+
+		array.push( '' );
+
+		const lines = array.join( '\n' );
+
+		return ( outputShiftJis === true ) ? unicodeToShiftjis( lines ) : lines;
+
+	}
+
+}
+
+// Unicode to Shift_JIS table
+let u2sTable;
+
+function unicodeToShiftjis( str ) {
+
+	if ( u2sTable === undefined ) {
+
+		const encoder = new MMDParser.CharsetEncoder(); // eslint-disable-line no-undef
+		const table = encoder.s2uTable;
+		u2sTable = {};
+
+		const keys = Object.keys( table );
+
+		for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+			let key = keys[ i ];
+
+			const value = table[ key ];
+			key = parseInt( key );
+
+			u2sTable[ value ] = key;
+
+		}
+
+	}
+
+	const array = [];
+
+	for ( let i = 0, il = str.length; i < il; i ++ ) {
+
+		const code = str.charCodeAt( i );
+
+		const value = u2sTable[ code ];
+
+		if ( value === undefined ) {
+
+			throw new Error( 'cannot convert charcode 0x' + code.toString( 16 ) );
+
+		} else if ( value > 0xff ) {
+
+			array.push( ( value >> 8 ) & 0xff );
+			array.push( value & 0xff );
+
+		} else {
+
+			array.push( value & 0xff );
+
+		}
+
+	}
+
+	return new Uint8Array( array );
+
+}
+
+function getBindBones( skin ) {
+
+	// any more efficient ways?
+	const poseSkin = skin.clone();
+	poseSkin.pose();
+	return poseSkin.skeleton.bones;
+
+}
+
+export { MMDExporter };

jsm/exporters/OBJExporter.js

@@ -0,0 +1,302 @@
+import {
+	Color,
+	Matrix3,
+	Vector2,
+	Vector3
+} from 'three';
+
+class OBJExporter {
+
+	parse( object ) {
+
+		let output = '';
+
+		let indexVertex = 0;
+		let indexVertexUvs = 0;
+		let indexNormals = 0;
+
+		const vertex = new Vector3();
+		const color = new Color();
+		const normal = new Vector3();
+		const uv = new Vector2();
+
+		const face = [];
+
+		function parseMesh( mesh ) {
+
+			let nbVertex = 0;
+			let nbNormals = 0;
+			let nbVertexUvs = 0;
+
+			const geometry = mesh.geometry;
+
+			const normalMatrixWorld = new Matrix3();
+
+			if ( geometry.isBufferGeometry !== true ) {
+
+				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+			}
+
+			// shortcuts
+			const vertices = geometry.getAttribute( 'position' );
+			const normals = geometry.getAttribute( 'normal' );
+			const uvs = geometry.getAttribute( 'uv' );
+			const indices = geometry.getIndex();
+
+			// name of the mesh object
+			output += 'o ' + mesh.name + '\n';
+
+			// name of the mesh material
+			if ( mesh.material && mesh.material.name ) {
+
+				output += 'usemtl ' + mesh.material.name + '\n';
+
+			}
+
+			// vertices
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					// transform the vertex to world space
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+					// transform the vertex to export format
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+				}
+
+			}
+
+			// uvs
+
+			if ( uvs !== undefined ) {
+
+				for ( let i = 0, l = uvs.count; i < l; i ++, nbVertexUvs ++ ) {
+
+					uv.fromBufferAttribute( uvs, i );
+
+					// transform the uv to export format
+					output += 'vt ' + uv.x + ' ' + uv.y + '\n';
+
+				}
+
+			}
+
+			// normals
+
+			if ( normals !== undefined ) {
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				for ( let i = 0, l = normals.count; i < l; i ++, nbNormals ++ ) {
+
+					normal.fromBufferAttribute( normals, i );
+
+					// transform the normal to world space
+					normal.applyMatrix3( normalMatrixWorld ).normalize();
+
+					// transform the normal to export format
+					output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
+
+				}
+
+			}
+
+			// faces
+
+			if ( indices !== null ) {
+
+				for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+					for ( let m = 0; m < 3; m ++ ) {
+
+						const j = indices.getX( i + m ) + 1;
+
+						face[ m ] = ( indexVertex + j ) + ( normals || uvs ? '/' + ( uvs ? ( indexVertexUvs + j ) : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
+
+					}
+
+					// transform the face to export format
+					output += 'f ' + face.join( ' ' ) + '\n';
+
+				}
+
+			} else {
+
+				for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+					for ( let m = 0; m < 3; m ++ ) {
+
+						const j = i + m + 1;
+
+						face[ m ] = ( indexVertex + j ) + ( normals || uvs ? '/' + ( uvs ? ( indexVertexUvs + j ) : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
+
+					}
+
+					// transform the face to export format
+					output += 'f ' + face.join( ' ' ) + '\n';
+
+				}
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+			indexVertexUvs += nbVertexUvs;
+			indexNormals += nbNormals;
+
+		}
+
+		function parseLine( line ) {
+
+			let nbVertex = 0;
+
+			const geometry = line.geometry;
+			const type = line.type;
+
+			if ( geometry.isBufferGeometry !== true ) {
+
+				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+			}
+
+			// shortcuts
+			const vertices = geometry.getAttribute( 'position' );
+
+			// name of the line object
+			output += 'o ' + line.name + '\n';
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					// transform the vertex to world space
+					vertex.applyMatrix4( line.matrixWorld );
+
+					// transform the vertex to export format
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+				}
+
+			}
+
+			if ( type === 'Line' ) {
+
+				output += 'l ';
+
+				for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
+
+					output += ( indexVertex + j ) + ' ';
+
+				}
+
+				output += '\n';
+
+			}
+
+			if ( type === 'LineSegments' ) {
+
+				for ( let j = 1, k = j + 1, l = vertices.count; j < l; j += 2, k = j + 1 ) {
+
+					output += 'l ' + ( indexVertex + j ) + ' ' + ( indexVertex + k ) + '\n';
+
+				}
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+
+		}
+
+		function parsePoints( points ) {
+
+			let nbVertex = 0;
+
+			const geometry = points.geometry;
+
+			if ( geometry.isBufferGeometry !== true ) {
+
+				throw new Error( 'THREE.OBJExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+			}
+
+			const vertices = geometry.getAttribute( 'position' );
+			const colors = geometry.getAttribute( 'color' );
+
+			output += 'o ' + points.name + '\n';
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+					vertex.applyMatrix4( points.matrixWorld );
+
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z;
+
+					if ( colors !== undefined ) {
+
+						color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+
+						output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
+
+					}
+
+					output += '\n';
+
+				}
+
+				output += 'p ';
+
+				for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
+
+					output += ( indexVertex + j ) + ' ';
+
+				}
+
+				output += '\n';
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+
+		}
+
+		object.traverse( function ( child ) {
+
+			if ( child.isMesh === true ) {
+
+				parseMesh( child );
+
+			}
+
+			if ( child.isLine === true ) {
+
+				parseLine( child );
+
+			}
+
+			if ( child.isPoints === true ) {
+
+				parsePoints( child );
+
+			}
+
+		} );
+
+		return output;
+
+	}
+
+}
+
+export { OBJExporter };

jsm/exporters/PLYExporter.js

@@ -0,0 +1,529 @@
+import {
+	Matrix3,
+	Vector3,
+	Color
+} from 'three';
+
+/**
+ * https://github.com/gkjohnson/ply-exporter-js
+ *
+ * Usage:
+ *  const exporter = new PLYExporter();
+ *
+ *  // second argument is a list of options
+ *  exporter.parse(mesh, data => console.log(data), { binary: true, excludeAttributes: [ 'color' ], littleEndian: true });
+ *
+ * Format Definition:
+ * http://paulbourke.net/dataformats/ply/
+ */
+
+class PLYExporter {
+
+	parse( object, onDone, options ) {
+
+		if ( onDone && typeof onDone === 'object' ) {
+
+			console.warn( 'THREE.PLYExporter: The options parameter is now the third argument to the "parse" function. See the documentation for the new API.' );
+			options = onDone;
+			onDone = undefined;
+
+		}
+
+		// Iterate over the valid meshes in the object
+		function traverseMeshes( cb ) {
+
+			object.traverse( function ( child ) {
+
+				if ( child.isMesh === true ) {
+
+					const mesh = child;
+					const geometry = mesh.geometry;
+
+					if ( geometry.isBufferGeometry !== true ) {
+
+						throw new Error( 'THREE.PLYExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+					}
+
+					if ( geometry.hasAttribute( 'position' ) === true ) {
+
+						cb( mesh, geometry );
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		// Default options
+		const defaultOptions = {
+			binary: false,
+			excludeAttributes: [], // normal, uv, color, index
+			littleEndian: false
+		};
+
+		options = Object.assign( defaultOptions, options );
+
+		const excludeAttributes = options.excludeAttributes;
+		let includeNormals = false;
+		let includeColors = false;
+		let includeUVs = false;
+
+		// count the vertices, check which properties are used,
+		// and cache the BufferGeometry
+		let vertexCount = 0;
+		let faceCount = 0;
+		object.traverse( function ( child ) {
+
+			if ( child.isMesh === true ) {
+
+				const mesh = child;
+				const geometry = mesh.geometry;
+
+				if ( geometry.isBufferGeometry !== true ) {
+
+					throw new Error( 'THREE.PLYExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+				}
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				if ( vertices === undefined ) {
+
+					return;
+
+				}
+
+				vertexCount += vertices.count;
+				faceCount += indices ? indices.count / 3 : vertices.count / 3;
+
+				if ( normals !== undefined ) includeNormals = true;
+
+				if ( uvs !== undefined ) includeUVs = true;
+
+				if ( colors !== undefined ) includeColors = true;
+
+			}
+
+		} );
+
+		const tempColor = new Color();
+		const includeIndices = excludeAttributes.indexOf( 'index' ) === - 1;
+		includeNormals = includeNormals && excludeAttributes.indexOf( 'normal' ) === - 1;
+		includeColors = includeColors && excludeAttributes.indexOf( 'color' ) === - 1;
+		includeUVs = includeUVs && excludeAttributes.indexOf( 'uv' ) === - 1;
+
+
+		if ( includeIndices && faceCount !== Math.floor( faceCount ) ) {
+
+			// point cloud meshes will not have an index array and may not have a
+			// number of vertices that is divisble by 3 (and therefore representable
+			// as triangles)
+			console.error(
+
+				'PLYExporter: Failed to generate a valid PLY file with triangle indices because the ' +
+				'number of indices is not divisible by 3.'
+
+			);
+
+			return null;
+
+		}
+
+		const indexByteCount = 4;
+
+		let header =
+			'ply\n' +
+			`format ${ options.binary ? ( options.littleEndian ? 'binary_little_endian' : 'binary_big_endian' ) : 'ascii' } 1.0\n` +
+			`element vertex ${vertexCount}\n` +
+
+			// position
+			'property float x\n' +
+			'property float y\n' +
+			'property float z\n';
+
+		if ( includeNormals === true ) {
+
+			// normal
+			header +=
+				'property float nx\n' +
+				'property float ny\n' +
+				'property float nz\n';
+
+		}
+
+		if ( includeUVs === true ) {
+
+			// uvs
+			header +=
+				'property float s\n' +
+				'property float t\n';
+
+		}
+
+		if ( includeColors === true ) {
+
+			// colors
+			header +=
+				'property uchar red\n' +
+				'property uchar green\n' +
+				'property uchar blue\n';
+
+		}
+
+		if ( includeIndices === true ) {
+
+			// faces
+			header +=
+				`element face ${faceCount}\n` +
+				'property list uchar int vertex_index\n';
+
+		}
+
+		header += 'end_header\n';
+
+
+		// Generate attribute data
+		const vertex = new Vector3();
+		const normalMatrixWorld = new Matrix3();
+		let result = null;
+
+		if ( options.binary === true ) {
+
+			// Binary File Generation
+			const headerBin = new TextEncoder().encode( header );
+
+			// 3 position values at 4 bytes
+			// 3 normal values at 4 bytes
+			// 3 color channels with 1 byte
+			// 2 uv values at 4 bytes
+			const vertexListLength = vertexCount * ( 4 * 3 + ( includeNormals ? 4 * 3 : 0 ) + ( includeColors ? 3 : 0 ) + ( includeUVs ? 4 * 2 : 0 ) );
+
+			// 1 byte shape desciptor
+			// 3 vertex indices at ${indexByteCount} bytes
+			const faceListLength = includeIndices ? faceCount * ( indexByteCount * 3 + 1 ) : 0;
+			const output = new DataView( new ArrayBuffer( headerBin.length + vertexListLength + faceListLength ) );
+			new Uint8Array( output.buffer ).set( headerBin, 0 );
+
+
+			let vOffset = headerBin.length;
+			let fOffset = headerBin.length + vertexListLength;
+			let writtenVertices = 0;
+			traverseMeshes( function ( mesh, geometry ) {
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				for ( let i = 0, l = vertices.count; i < l; i ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+
+					// Position information
+					output.setFloat32( vOffset, vertex.x, options.littleEndian );
+					vOffset += 4;
+
+					output.setFloat32( vOffset, vertex.y, options.littleEndian );
+					vOffset += 4;
+
+					output.setFloat32( vOffset, vertex.z, options.littleEndian );
+					vOffset += 4;
+
+					// Normal information
+					if ( includeNormals === true ) {
+
+						if ( normals != null ) {
+
+							vertex.fromBufferAttribute( normals, i );
+
+							vertex.applyMatrix3( normalMatrixWorld ).normalize();
+
+							output.setFloat32( vOffset, vertex.x, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, vertex.y, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, vertex.z, options.littleEndian );
+							vOffset += 4;
+
+						} else {
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+						}
+
+					}
+
+					// UV information
+					if ( includeUVs === true ) {
+
+						if ( uvs != null ) {
+
+							output.setFloat32( vOffset, uvs.getX( i ), options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, uvs.getY( i ), options.littleEndian );
+							vOffset += 4;
+
+						} else {
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+						}
+
+					}
+
+					// Color information
+					if ( includeColors === true ) {
+
+						if ( colors != null ) {
+
+							tempColor
+								.fromBufferAttribute( colors, i )
+								.convertLinearToSRGB();
+
+							output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
+							vOffset += 1;
+
+							output.setUint8( vOffset, Math.floor( tempColor.g * 255 ) );
+							vOffset += 1;
+
+							output.setUint8( vOffset, Math.floor( tempColor.b * 255 ) );
+							vOffset += 1;
+
+						} else {
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+						}
+
+					}
+
+				}
+
+				if ( includeIndices === true ) {
+
+					// Create the face list
+
+					if ( indices !== null ) {
+
+						for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+							output.setUint8( fOffset, 3 );
+							fOffset += 1;
+
+							output.setUint32( fOffset, indices.getX( i + 0 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, indices.getX( i + 1 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, indices.getX( i + 2 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+						}
+
+					} else {
+
+						for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+							output.setUint8( fOffset, 3 );
+							fOffset += 1;
+
+							output.setUint32( fOffset, writtenVertices + i, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, writtenVertices + i + 1, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, writtenVertices + i + 2, options.littleEndian );
+							fOffset += indexByteCount;
+
+						}
+
+					}
+
+				}
+
+
+				// Save the amount of verts we've already written so we can offset
+				// the face index on the next mesh
+				writtenVertices += vertices.count;
+
+			} );
+
+			result = output.buffer;
+
+		} else {
+
+			// Ascii File Generation
+			// count the number of vertices
+			let writtenVertices = 0;
+			let vertexList = '';
+			let faceList = '';
+
+			traverseMeshes( function ( mesh, geometry ) {
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				// form each line
+				for ( let i = 0, l = vertices.count; i < l; i ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+
+					// Position information
+					let line =
+						vertex.x + ' ' +
+						vertex.y + ' ' +
+						vertex.z;
+
+					// Normal information
+					if ( includeNormals === true ) {
+
+						if ( normals != null ) {
+
+							vertex.fromBufferAttribute( normals, i );
+
+							vertex.applyMatrix3( normalMatrixWorld ).normalize();
+
+							line += ' ' +
+								vertex.x + ' ' +
+								vertex.y + ' ' +
+								vertex.z;
+
+						} else {
+
+							line += ' 0 0 0';
+
+						}
+
+					}
+
+					// UV information
+					if ( includeUVs === true ) {
+
+						if ( uvs != null ) {
+
+							line += ' ' +
+								uvs.getX( i ) + ' ' +
+								uvs.getY( i );
+
+						} else {
+
+							line += ' 0 0';
+
+						}
+
+					}
+
+					// Color information
+					if ( includeColors === true ) {
+
+						if ( colors != null ) {
+
+							tempColor
+								.fromBufferAttribute( colors, i )
+								.convertLinearToSRGB();
+
+							line += ' ' +
+								Math.floor( tempColor.r * 255 ) + ' ' +
+								Math.floor( tempColor.g * 255 ) + ' ' +
+								Math.floor( tempColor.b * 255 );
+
+						} else {
+
+							line += ' 255 255 255';
+
+						}
+
+					}
+
+					vertexList += line + '\n';
+
+				}
+
+				// Create the face list
+				if ( includeIndices === true ) {
+
+					if ( indices !== null ) {
+
+						for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+							faceList += `3 ${ indices.getX( i + 0 ) + writtenVertices }`;
+							faceList += ` ${ indices.getX( i + 1 ) + writtenVertices }`;
+							faceList += ` ${ indices.getX( i + 2 ) + writtenVertices }\n`;
+
+						}
+
+					} else {
+
+						for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+							faceList += `3 ${ writtenVertices + i } ${ writtenVertices + i + 1 } ${ writtenVertices + i + 2 }\n`;
+
+						}
+
+					}
+
+					faceCount += indices ? indices.count / 3 : vertices.count / 3;
+
+				}
+
+				writtenVertices += vertices.count;
+
+			} );
+
+			result = `${ header }${vertexList}${ includeIndices ? `${faceList}\n` : '\n' }`;
+
+		}
+
+		if ( typeof onDone === 'function' ) requestAnimationFrame( () => onDone( result ) );
+
+		return result;
+
+	}
+
+}
+
+export { PLYExporter };

jsm/exporters/STLExporter.js

@@ -0,0 +1,203 @@
+import {
+	Vector3
+} from 'three';
+
+/**
+ * Usage:
+ *  const exporter = new STLExporter();
+ *
+ *  // second argument is a list of options
+ *  const data = exporter.parse( mesh, { binary: true } );
+ *
+ */
+
+class STLExporter {
+
+	parse( scene, options = {} ) {
+
+		const binary = options.binary !== undefined ? options.binary : false;
+
+		//
+
+		const objects = [];
+		let triangles = 0;
+
+		scene.traverse( function ( object ) {
+
+			if ( object.isMesh ) {
+
+				const geometry = object.geometry;
+
+				if ( geometry.isBufferGeometry !== true ) {
+
+					throw new Error( 'THREE.STLExporter: Geometry is not of type THREE.BufferGeometry.' );
+
+				}
+
+				const index = geometry.index;
+				const positionAttribute = geometry.getAttribute( 'position' );
+
+				triangles += ( index !== null ) ? ( index.count / 3 ) : ( positionAttribute.count / 3 );
+
+				objects.push( {
+					object3d: object,
+					geometry: geometry
+				} );
+
+			}
+
+		} );
+
+		let output;
+		let offset = 80; // skip header
+
+		if ( binary === true ) {
+
+			const bufferLength = triangles * 2 + triangles * 3 * 4 * 4 + 80 + 4;
+			const arrayBuffer = new ArrayBuffer( bufferLength );
+			output = new DataView( arrayBuffer );
+			output.setUint32( offset, triangles, true ); offset += 4;
+
+		} else {
+
+			output = '';
+			output += 'solid exported\n';
+
+		}
+
+		const vA = new Vector3();
+		const vB = new Vector3();
+		const vC = new Vector3();
+		const cb = new Vector3();
+		const ab = new Vector3();
+		const normal = new Vector3();
+
+		for ( let i = 0, il = objects.length; i < il; i ++ ) {
+
+			const object = objects[ i ].object3d;
+			const geometry = objects[ i ].geometry;
+
+			const index = geometry.index;
+			const positionAttribute = geometry.getAttribute( 'position' );
+
+			if ( index !== null ) {
+
+				// indexed geometry
+
+				for ( let j = 0; j < index.count; j += 3 ) {
+
+					const a = index.getX( j + 0 );
+					const b = index.getX( j + 1 );
+					const c = index.getX( j + 2 );
+
+					writeFace( a, b, c, positionAttribute, object );
+
+				}
+
+			} else {
+
+				// non-indexed geometry
+
+				for ( let j = 0; j < positionAttribute.count; j += 3 ) {
+
+					const a = j + 0;
+					const b = j + 1;
+					const c = j + 2;
+
+					writeFace( a, b, c, positionAttribute, object );
+
+				}
+
+			}
+
+		}
+
+		if ( binary === false ) {
+
+			output += 'endsolid exported\n';
+
+		}
+
+		return output;
+
+		function writeFace( a, b, c, positionAttribute, object ) {
+
+			vA.fromBufferAttribute( positionAttribute, a );
+			vB.fromBufferAttribute( positionAttribute, b );
+			vC.fromBufferAttribute( positionAttribute, c );
+
+			if ( object.isSkinnedMesh === true ) {
+
+				object.boneTransform( a, vA );
+				object.boneTransform( b, vB );
+				object.boneTransform( c, vC );
+
+			}
+
+			vA.applyMatrix4( object.matrixWorld );
+			vB.applyMatrix4( object.matrixWorld );
+			vC.applyMatrix4( object.matrixWorld );
+
+			writeNormal( vA, vB, vC );
+
+			writeVertex( vA );
+			writeVertex( vB );
+			writeVertex( vC );
+
+			if ( binary === true ) {
+
+				output.setUint16( offset, 0, true ); offset += 2;
+
+			} else {
+
+				output += '\t\tendloop\n';
+				output += '\tendfacet\n';
+
+			}
+
+		}
+
+		function writeNormal( vA, vB, vC ) {
+
+			cb.subVectors( vC, vB );
+			ab.subVectors( vA, vB );
+			cb.cross( ab ).normalize();
+
+			normal.copy( cb ).normalize();
+
+			if ( binary === true ) {
+
+				output.setFloat32( offset, normal.x, true ); offset += 4;
+				output.setFloat32( offset, normal.y, true ); offset += 4;
+				output.setFloat32( offset, normal.z, true ); offset += 4;
+
+			} else {
+
+				output += '\tfacet normal ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
+				output += '\t\touter loop\n';
+
+			}
+
+		}
+
+		function writeVertex( vertex ) {
+
+			if ( binary === true ) {
+
+				output.setFloat32( offset, vertex.x, true ); offset += 4;
+				output.setFloat32( offset, vertex.y, true ); offset += 4;
+				output.setFloat32( offset, vertex.z, true ); offset += 4;
+
+			} else {
+
+				output += '\t\t\tvertex ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+			}
+
+		}
+
+	}
+
+}
+
+export { STLExporter };

jsm/exporters/USDZExporter.js

@@ -0,0 +1,547 @@
+import * as fflate from '../libs/fflate.module.js';
+
+class USDZExporter {
+
+	async parse( scene ) {
+
+		const files = {};
+		const modelFileName = 'model.usda';
+
+		// model file should be first in USDZ archive so we init it here
+		files[ modelFileName ] = null;
+
+		let output = buildHeader();
+
+		const materials = {};
+		const textures = {};
+
+		scene.traverseVisible( ( object ) => {
+
+			if ( object.isMesh ) {
+
+				if ( object.material.isMeshStandardMaterial ) {
+
+					const geometry = object.geometry;
+					const material = object.material;
+
+					const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usd';
+
+					if ( ! ( geometryFileName in files ) ) {
+
+						const meshObject = buildMeshObject( geometry );
+						files[ geometryFileName ] = buildUSDFileAsString( meshObject );
+
+					}
+
+					if ( ! ( material.uuid in materials ) ) {
+
+						materials[ material.uuid ] = material;
+
+					}
+
+					output += buildXform( object, geometry, material );
+
+				} else {
+
+					console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', object );
+
+				}
+
+			}
+
+		} );
+
+		output += buildMaterials( materials, textures );
+
+		files[ modelFileName ] = fflate.strToU8( output );
+		output = null;
+
+		for ( const id in textures ) {
+
+			const texture = textures[ id ];
+			const color = id.split( '_' )[ 1 ];
+			const isRGBA = texture.format === 1023;
+
+			const canvas = imageToCanvas( texture.image, color );
+			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
+
+		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;
+				const padding = new Uint8Array( padLength );
+
+				files[ filename ] = [ file, { extra: { 12345: padding } } ];
+
+			}
+
+			offset = file.length;
+
+		}
+
+		return fflate.zipSync( files, { level: 0 } );
+
+	}
+
+}
+
+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 ) ) {
+
+		const scale = 1024 / Math.max( image.width, image.height );
+
+		const canvas = document.createElement( 'canvas' );
+		canvas.width = image.width * Math.min( 1, scale );
+		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 );
+
+			const r = ( hex >> 16 & 255 ) / 255;
+			const g = ( hex >> 8 & 255 ) / 255;
+			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;
+				data[ i + 1 ] = data[ i + 1 ] * g;
+				data[ i + 2 ] = data[ i + 2 ] * b;
+
+			}
+
+			context.putImageData( imagedata, 0, 0 );
+
+		}
+
+		return canvas;
+
+	}
+
+}
+
+//
+
+const PRECISION = 7;
+
+function buildHeader() {
+
+	return `#usda 1.0
+(
+    customLayerData = {
+        string creator = "Three.js USDZExporter"
+    }
+    metersPerUnit = 1
+    upAxis = "Y"
+)
+
+`;
+
+}
+
+function buildUSDFileAsString( dataToInsert ) {
+
+	let output = buildHeader();
+	output += dataToInsert;
+	return fflate.strToU8( output );
+
+}
+
+// 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 );
+
+	}
+
+	return `def Xform "${ name }" (
+    prepend references = @./geometries/Geometry_${ geometry.id }.usd@</Geometry>
+)
+{
+    matrix4d xformOp:transform = ${ transform }
+    uniform token[] xformOpOrder = ["xformOp:transform"]
+
+    rel material:binding = </Materials/Material_${ material.id }>
+}
+
+`;
+
+}
+
+function buildMatrix( matrix ) {
+
+	const array = matrix.elements;
+
+	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 ] })`;
+
+}
+
+// Mesh
+
+function buildMeshObject( geometry ) {
+
+	const mesh = buildMesh( geometry );
+	return `
+def "Geometry"
+{
+  ${mesh}
+}
+`;
+
+}
+
+function buildMesh( 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 )}]
+        float2[] primvars:st = [${ buildVector2Array( attributes.uv, count )}] (
+            interpolation = "vertex"
+        )
+        uniform token subdivisionScheme = "none"
+    }
+`;
+
+}
+
+function buildMeshVertexCount( geometry ) {
+
+	const count = geometry.index !== null ? geometry.index.count : geometry.attributes.position.count;
+
+	return Array( count / 3 ).fill( 3 ).join( ', ' );
+
+}
+
+function buildMeshVertexIndices( geometry ) {
+
+	const index = geometry.index;
+	const array = [];
+
+	if ( index !== null ) {
+
+		for ( let i = 0; i < index.count; i ++ ) {
+
+			array.push( index.getX( i ) );
+
+		}
+
+	} else {
+
+		const length = geometry.attributes.position.count;
+
+		for ( let i = 0; i < length; i ++ ) {
+
+			array.push( i );
+
+		}
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+function buildVector3Array( attribute, count ) {
+
+	if ( attribute === undefined ) {
+
+		console.warn( 'USDZExporter: Normals missing.' );
+		return Array( count ).fill( '(0, 0, 0)' ).join( ', ' );
+
+	}
+
+	const array = [];
+
+	for ( let i = 0; i < attribute.count; i ++ ) {
+
+		const x = attribute.getX( i );
+		const y = attribute.getY( i );
+		const z = attribute.getZ( i );
+
+		array.push( `(${ x.toPrecision( PRECISION ) }, ${ y.toPrecision( PRECISION ) }, ${ z.toPrecision( PRECISION ) })` );
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+function buildVector2Array( attribute, count ) {
+
+	if ( attribute === undefined ) {
+
+		console.warn( 'USDZExporter: UVs missing.' );
+		return Array( count ).fill( '(0, 0)' ).join( ', ' );
+
+	}
+
+	const array = [];
+
+	for ( let i = 0; i < attribute.count; i ++ ) {
+
+		const x = attribute.getX( i );
+		const y = attribute.getY( i );
+
+		array.push( `(${ x.toPrecision( PRECISION ) }, ${ 1 - y.toPrecision( PRECISION ) })` );
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+// Materials
+
+function buildMaterials( materials, textures ) {
+
+	const array = [];
+
+	for ( const uuid in materials ) {
+
+		const material = materials[ uuid ];
+
+		array.push( buildMaterial( material, textures ) );
+
+	}
+
+	return `def "Materials"
+{
+${ 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() : '' );
+		const isRGBA = texture.format === 1023;
+
+		textures[ id ] = texture;
+
+		return `
+        def Shader "Transform2d_${ mapType }" (
+            sdrMetadata = {
+                string role = "math"
+            }
+        )
+        {
+            uniform token info:id = "UsdTransform2d"
+            float2 inputs:in.connect = </Materials/Material_${ material.id }/uvReader_st.outputs:result>
+            float2 inputs:scale = ${ buildVector2( texture.repeat ) }
+            float2 inputs:translation = ${ buildVector2( texture.offset ) }
+            float2 outputs:result
+        }
+
+        def Shader "Texture_${ texture.id }_${ mapType }"
+        {
+            uniform token info:id = "UsdUVTexture"
+            asset inputs:file = @textures/Texture_${ id }.${ isRGBA ? 'png' : 'jpg' }@
+            float2 inputs:st.connect = </Materials/Material_${ material.id }/Transform2d_${ mapType }.outputs:result>
+            token inputs:wrapS = "repeat"
+            token inputs:wrapT = "repeat"
+            float outputs:r
+            float outputs:g
+            float outputs:b
+            float3 outputs:rgb
+            ${ material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : '' }
+        }`;
+
+	}
+
+	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>` );
+
+		} 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}` );
+
+		}
+
+		samplers.push( buildTexture( material.map, 'diffuse', material.color ) );
+
+	} else {
+
+		inputs.push( `${ pad }color3f inputs:diffuseColor = ${ buildColor( material.color ) }` );
+
+	}
+
+	if ( material.emissiveMap !== null ) {
+
+		inputs.push( `${ pad }color3f inputs:emissiveColor.connect = </Materials/Material_${ material.id }/Texture_${ material.emissiveMap.id }_emissive.outputs:rgb>` );
+
+		samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
+
+	} else if ( material.emissive.getHex() > 0 ) {
+
+		inputs.push( `${ pad }color3f inputs:emissiveColor = ${ buildColor( material.emissive ) }` );
+
+	}
+
+	if ( material.normalMap !== null ) {
+
+		inputs.push( `${ pad }normal3f inputs:normal.connect = </Materials/Material_${ material.id }/Texture_${ material.normalMap.id }_normal.outputs:rgb>` );
+
+		samplers.push( buildTexture( material.normalMap, 'normal' ) );
+
+	}
+
+	if ( material.aoMap !== null ) {
+
+		inputs.push( `${ pad }float inputs:occlusion.connect = </Materials/Material_${ material.id }/Texture_${ material.aoMap.id }_occlusion.outputs:r>` );
+
+		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
+
+	}
+
+	if ( material.roughnessMap !== null && 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' ) );
+
+	} else {
+
+		inputs.push( `${ pad }float inputs:roughness = ${ material.roughness }` );
+
+	}
+
+	if ( material.metalnessMap !== null && 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' ) );
+
+	} else {
+
+		inputs.push( `${ pad }float inputs:metallic = ${ material.metalness }` );
+
+	}
+
+	if ( material.alphaMap !== null ) {
+
+		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` );
+
+		samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
+
+	} else {
+
+		inputs.push( `${pad}float inputs:opacity = ${material.opacity}` );
+
+	}
+
+	if ( material.isMeshPhysicalMaterial ) {
+
+		inputs.push( `${ pad }float inputs:clearcoat = ${ material.clearcoat }` );
+		inputs.push( `${ pad }float inputs:clearcoatRoughness = ${ material.clearcoatRoughness }` );
+		inputs.push( `${ pad }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
+        }
+
+        token outputs:surface.connect = </Materials/Material_${ material.id }/PreviewSurface.outputs:surface>
+        token inputs:frame:stPrimvarName = "st"
+
+        def Shader "uvReader_st"
+        {
+            uniform token info:id = "UsdPrimvarReader_float2"
+            token inputs:varname.connect = </Materials/Material_${ material.id }.inputs:frame:stPrimvarName>
+            float2 inputs:fallback = (0.0, 0.0)
+            float2 outputs:result
+        }
+
+${ samplers.join( '\n' ) }
+
+    }
+`;
+
+}
+
+function buildColor( color ) {
+
+	return `(${ color.r }, ${ color.g }, ${ color.b })`;
+
+}
+
+function buildVector2( vector ) {
+
+	return `(${ vector.x }, ${ vector.y })`;
+
+}
+
+export { USDZExporter };

jsm/geometries/BoxLineGeometry.js

@@ -0,0 +1,69 @@
+import {
+	BufferGeometry,
+	Float32BufferAttribute
+} from 'three';
+
+class BoxLineGeometry extends BufferGeometry {
+
+	constructor( width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1 ) {
+
+		super();
+
+		widthSegments = Math.floor( widthSegments );
+		heightSegments = Math.floor( heightSegments );
+		depthSegments = Math.floor( depthSegments );
+
+		const widthHalf = width / 2;
+		const heightHalf = height / 2;
+		const depthHalf = depth / 2;
+
+		const segmentWidth = width / widthSegments;
+		const segmentHeight = height / heightSegments;
+		const segmentDepth = depth / depthSegments;
+
+		const vertices = [];
+
+		let x = - widthHalf;
+		let y = - heightHalf;
+		let z = - depthHalf;
+
+		for ( let i = 0; i <= widthSegments; i ++ ) {
+
+			vertices.push( x, - heightHalf, - depthHalf, x, heightHalf, - depthHalf );
+			vertices.push( x, heightHalf, - depthHalf, x, heightHalf, depthHalf );
+			vertices.push( x, heightHalf, depthHalf, x, - heightHalf, depthHalf );
+			vertices.push( x, - heightHalf, depthHalf, x, - heightHalf, - depthHalf );
+
+			x += segmentWidth;
+
+		}
+
+		for ( let i = 0; i <= heightSegments; i ++ ) {
+
+			vertices.push( - widthHalf, y, - depthHalf, widthHalf, y, - depthHalf );
+			vertices.push( widthHalf, y, - depthHalf, widthHalf, y, depthHalf );
+			vertices.push( widthHalf, y, depthHalf, - widthHalf, y, depthHalf );
+			vertices.push( - widthHalf, y, depthHalf, - widthHalf, y, - depthHalf );
+
+			y += segmentHeight;
+
+		}
+
+		for ( let i = 0; i <= depthSegments; i ++ ) {
+
+			vertices.push( - widthHalf, - heightHalf, z, - widthHalf, heightHalf, z );
+			vertices.push( - widthHalf, heightHalf, z, widthHalf, heightHalf, z );
+			vertices.push( widthHalf, heightHalf, z, widthHalf, - heightHalf, z );
+			vertices.push( widthHalf, - heightHalf, z, - widthHalf, - heightHalf, z );
+
+			z += segmentDepth;
+
+		}
+
+		this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+
+	}
+
+}
+
+export { BoxLineGeometry };

jsm/geometries/ConvexGeometry.js

@@ -0,0 +1,59 @@
+import {
+	BufferGeometry,
+	Float32BufferAttribute
+} from 'three';
+import { ConvexHull } from '../math/ConvexHull.js';
+
+class ConvexGeometry extends BufferGeometry {
+
+	constructor( points = [] ) {
+
+		super();
+
+		// buffers
+
+		const vertices = [];
+		const normals = [];
+
+		if ( ConvexHull === undefined ) {
+
+			console.error( 'THREE.ConvexBufferGeometry: ConvexBufferGeometry relies on ConvexHull' );
+
+		}
+
+		const convexHull = new ConvexHull().setFromPoints( points );
+
+		// 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)
+
+			do {
+
+				const point = edge.head().point;
+
+				vertices.push( point.x, point.y, point.z );
+				normals.push( face.normal.x, face.normal.y, face.normal.z );
+
+				edge = edge.next;
+
+			} while ( edge !== face.edge );
+
+		}
+
+		// build geometry
+
+		this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		this.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+
+	}
+
+}
+
+export { ConvexGeometry };

jsm/geometries/DecalGeometry.js

@@ -0,0 +1,363 @@
+import {
+	BufferGeometry,
+	Float32BufferAttribute,
+	Matrix4,
+	Vector3
+} from 'three';
+
+/**
+ * You can use this geometry to create a decal mesh, that serves different kinds of purposes.
+ * e.g. adding unique details to models, performing dynamic visual environmental changes or covering seams.
+ *
+ * Constructor parameter:
+ *
+ * mesh — Any mesh object
+ * position — Position of the decal projector
+ * orientation — Orientation of the decal projector
+ * size — Size of the decal projector
+ *
+ * reference: http://blog.wolfire.com/2009/06/how-to-project-decals/
+ *
+ */
+
+class DecalGeometry extends BufferGeometry {
+
+	constructor( mesh, position, orientation, size ) {
+
+		super();
+
+		// buffers
+
+		const vertices = [];
+		const normals = [];
+		const uvs = [];
+
+		// helpers
+
+		const plane = new Vector3();
+
+		// this matrix represents the transformation of the decal projector
+
+		const projectorMatrix = new Matrix4();
+		projectorMatrix.makeRotationFromEuler( orientation );
+		projectorMatrix.setPosition( position );
+
+		const projectorMatrixInverse = new Matrix4();
+		projectorMatrixInverse.copy( projectorMatrix ).invert();
+
+		// generate buffers
+
+		generate();
+
+		// build geometry
+
+		this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		this.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+		this.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
+
+		function generate() {
+
+			let decalVertices = [];
+
+			const vertex = new Vector3();
+			const normal = new Vector3();
+
+			// handle different geometry types
+
+			if ( mesh.geometry.isGeometry === true ) {
+
+				console.error( 'THREE.DecalGeometry no longer supports THREE.Geometry. Use BufferGeometry instead.' );
+				return;
+
+			}
+
+			const geometry = mesh.geometry;
+
+			const positionAttribute = geometry.attributes.position;
+			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
+
+			if ( geometry.index !== null ) {
+
+				// indexed BufferGeometry
+
+				const index = geometry.index;
+
+				for ( let i = 0; i < index.count; i ++ ) {
+
+					vertex.fromBufferAttribute( positionAttribute, index.getX( i ) );
+					normal.fromBufferAttribute( normalAttribute, index.getX( i ) );
+
+					pushDecalVertex( decalVertices, vertex, normal );
+
+				}
+
+			} else {
+
+				// non-indexed BufferGeometry
+
+				for ( let i = 0; i < positionAttribute.count; i ++ ) {
+
+					vertex.fromBufferAttribute( positionAttribute, i );
+					normal.fromBufferAttribute( normalAttribute, i );
+
+					pushDecalVertex( decalVertices, vertex, normal );
+
+				}
+
+			}
+
+			// 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
+
+			for ( let i = 0; i < decalVertices.length; i ++ ) {
+
+				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
+
+				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 );
+
+			}
+
+		}
+
+		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 );
+
+			decalVertices.push( new DecalVertex( vertex.clone(), normal.clone() ) );
+
+		}
+
+		function clipGeometry( inVertices, plane ) {
+
+			const outVertices = [];
+
+			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 ) {
+
+				let total = 0;
+				let nV1;
+				let nV2;
+				let nV3;
+				let nV4;
+
+				const d1 = inVertices[ i + 0 ].position.dot( plane ) - s;
+				const d2 = inVertices[ i + 1 ].position.dot( plane ) - s;
+				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
+
+				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 ] );
+						break;
+
+					}
+
+					case 1: {
+
+						// one vertex lies outside of the plane, perform clipping
+
+						if ( v1Out ) {
+
+							nV1 = inVertices[ i + 1 ];
+							nV2 = inVertices[ i + 2 ];
+							nV3 = clip( inVertices[ i ], nV1, plane, s );
+							nV4 = clip( inVertices[ i ], nV2, plane, s );
+
+						}
+
+						if ( v2Out ) {
+
+							nV1 = inVertices[ i ];
+							nV2 = inVertices[ i + 2 ];
+							nV3 = clip( inVertices[ i + 1 ], nV1, plane, s );
+							nV4 = clip( inVertices[ i + 1 ], nV2, plane, s );
+
+							outVertices.push( nV3 );
+							outVertices.push( nV2.clone() );
+							outVertices.push( nV1.clone() );
+
+							outVertices.push( nV2.clone() );
+							outVertices.push( nV3.clone() );
+							outVertices.push( nV4 );
+							break;
+
+						}
+
+						if ( v3Out ) {
+
+							nV1 = inVertices[ i ];
+							nV2 = inVertices[ i + 1 ];
+							nV3 = clip( inVertices[ i + 2 ], nV1, plane, s );
+							nV4 = clip( inVertices[ i + 2 ], nV2, plane, s );
+
+						}
+
+						outVertices.push( nV1.clone() );
+						outVertices.push( nV2.clone() );
+						outVertices.push( nV3 );
+
+						outVertices.push( nV4 );
+						outVertices.push( nV3.clone() );
+						outVertices.push( nV2.clone() );
+
+						break;
+
+					}
+
+					case 2: {
+
+						// two vertices lies outside of the plane, perform clipping
+
+						if ( ! v1Out ) {
+
+							nV1 = inVertices[ i ].clone();
+							nV2 = clip( nV1, inVertices[ i + 1 ], plane, s );
+							nV3 = clip( nV1, inVertices[ i + 2 ], plane, s );
+							outVertices.push( nV1 );
+							outVertices.push( nV2 );
+							outVertices.push( nV3 );
+
+						}
+
+						if ( ! v2Out ) {
+
+							nV1 = inVertices[ i + 1 ].clone();
+							nV2 = clip( nV1, inVertices[ i + 2 ], plane, s );
+							nV3 = clip( nV1, inVertices[ i ], plane, s );
+							outVertices.push( nV1 );
+							outVertices.push( nV2 );
+							outVertices.push( nV3 );
+
+						}
+
+						if ( ! v3Out ) {
+
+							nV1 = inVertices[ i + 2 ].clone();
+							nV2 = clip( nV1, inVertices[ i ], plane, s );
+							nV3 = clip( nV1, inVertices[ i + 1 ], plane, s );
+							outVertices.push( nV1 );
+							outVertices.push( nV2 );
+							outVertices.push( nV3 );
+
+						}
+
+						break;
+
+					}
+
+					case 3: {
+
+						// the entire face lies outside of the plane, so let's discard the corresponding vertices
+
+						break;
+
+					}
+
+				}
+
+			}
+
+			return outVertices;
+
+		}
+
+		function clip( v0, v1, p, s ) {
+
+			const d0 = v0.position.dot( p ) - s;
+			const d1 = v1.position.dot( p ) - s;
+
+			const s0 = d0 / ( d0 - d1 );
+
+			const v = new DecalVertex(
+				new 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 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;
+
+		}
+
+	}
+
+}
+
+// helper
+
+class DecalVertex {
+
+	constructor( position, normal ) {
+
+		this.position = position;
+		this.normal = normal;
+
+	}
+
+	clone() {
+
+		return new this.constructor( this.position.clone(), this.normal.clone() );
+
+	}
+
+}
+
+export { DecalGeometry, DecalVertex };

jsm/geometries/ParametricGeometries.js

@@ -0,0 +1,254 @@
+import {
+	Curve,
+	Vector3
+} from 'three';
+
+import { ParametricGeometry } from './ParametricGeometry.js';
+
+/**
+ * Experimenting of primitive geometry creation using Surface Parametric equations
+ */
+
+const ParametricGeometries = {
+
+	klein: function ( v, u, target ) {
+
+		u *= Math.PI;
+		v *= 2 * Math.PI;
+
+		u = u * 2;
+		let x, z;
+		if ( u < Math.PI ) {
+
+			x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( u ) * Math.cos( v );
+			z = - 8 * Math.sin( u ) - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( u ) * Math.cos( v );
+
+		} else {
+
+			x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( v + Math.PI );
+			z = - 8 * Math.sin( u );
+
+		}
+
+		const y = - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( v );
+
+		target.set( x, y, z );
+
+	},
+
+	plane: function ( width, height ) {
+
+		return function ( u, v, target ) {
+
+			const x = u * width;
+			const y = 0;
+			const z = v * height;
+
+			target.set( x, y, z );
+
+		};
+
+	},
+
+	mobius: function ( u, t, target ) {
+
+		// flat mobius strip
+		// http://www.wolframalpha.com/input/?i=M%C3%B6bius+strip+parametric+equations&lk=1&a=ClashPrefs_*Surface.MoebiusStrip.SurfaceProperty.ParametricEquations-
+		u = u - 0.5;
+		const v = 2 * Math.PI * t;
+
+		const a = 2;
+
+		const x = Math.cos( v ) * ( a + u * Math.cos( v / 2 ) );
+		const y = Math.sin( v ) * ( a + u * Math.cos( v / 2 ) );
+		const z = u * Math.sin( v / 2 );
+
+		target.set( x, y, z );
+
+	},
+
+	mobius3d: function ( u, t, target ) {
+
+		// volumetric mobius strip
+
+		u *= Math.PI;
+		t *= 2 * Math.PI;
+
+		u = u * 2;
+		const phi = u / 2;
+		const major = 2.25, a = 0.125, b = 0.65;
+
+		let x = a * Math.cos( t ) * Math.cos( phi ) - b * Math.sin( t ) * Math.sin( phi );
+		const z = a * Math.cos( t ) * Math.sin( phi ) + b * Math.sin( t ) * Math.cos( phi );
+		const y = ( major + x ) * Math.sin( u );
+		x = ( major + x ) * Math.cos( u );
+
+		target.set( x, y, z );
+
+	}
+
+};
+
+
+/*********************************************
+ *
+ * Parametric Replacement for TubeGeometry
+ *
+ *********************************************/
+
+ParametricGeometries.TubeGeometry = class TubeGeometry extends ParametricGeometry {
+
+	constructor( path, segments = 64, radius = 1, segmentsRadius = 8, closed = false ) {
+
+		const numpoints = segments + 1;
+
+		const frames = path.computeFrenetFrames( segments, closed ),
+			tangents = frames.tangents,
+			normals = frames.normals,
+			binormals = frames.binormals;
+
+		const position = new Vector3();
+
+		function ParametricTube( u, v, target ) {
+
+			v *= 2 * Math.PI;
+
+			const i = Math.floor( u * ( numpoints - 1 ) );
+
+			path.getPointAt( u, position );
+
+			const normal = normals[ i ];
+			const binormal = binormals[ i ];
+
+			const cx = - radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside.
+			const cy = radius * Math.sin( v );
+
+			position.x += cx * normal.x + cy * binormal.x;
+			position.y += cx * normal.y + cy * binormal.y;
+			position.z += cx * normal.z + cy * binormal.z;
+
+			target.copy( position );
+
+		}
+
+		super( ParametricTube, segments, segmentsRadius );
+
+		// proxy internals
+
+		this.tangents = tangents;
+		this.normals = normals;
+		this.binormals = binormals;
+
+		this.path = path;
+		this.segments = segments;
+		this.radius = radius;
+		this.segmentsRadius = segmentsRadius;
+		this.closed = closed;
+
+	}
+
+};
+
+
+/*********************************************
+  *
+  * Parametric Replacement for TorusKnotGeometry
+  *
+  *********************************************/
+ParametricGeometries.TorusKnotGeometry = class TorusKnotGeometry extends ParametricGeometries.TubeGeometry {
+
+	constructor( radius = 200, tube = 40, segmentsT = 64, segmentsR = 8, p = 2, q = 3 ) {
+
+		class TorusKnotCurve extends Curve {
+
+			getPoint( t, optionalTarget = new Vector3() ) {
+
+				const point = optionalTarget;
+
+				t *= Math.PI * 2;
+
+				const r = 0.5;
+
+				const x = ( 1 + r * Math.cos( q * t ) ) * Math.cos( p * t );
+				const y = ( 1 + r * Math.cos( q * t ) ) * Math.sin( p * t );
+				const z = r * Math.sin( q * t );
+
+				return point.set( x, y, z ).multiplyScalar( radius );
+
+			}
+
+		}
+
+		const segments = segmentsT;
+		const radiusSegments = segmentsR;
+		const extrudePath = new TorusKnotCurve();
+
+		super( extrudePath, segments, tube, radiusSegments, true, false );
+
+		this.radius = radius;
+		this.tube = tube;
+		this.segmentsT = segmentsT;
+		this.segmentsR = segmentsR;
+		this.p = p;
+		this.q = q;
+
+	}
+
+};
+
+/*********************************************
+  *
+  * Parametric Replacement for SphereGeometry
+  *
+  *********************************************/
+ParametricGeometries.SphereGeometry = class SphereGeometry extends ParametricGeometry {
+
+	constructor( size, u, v ) {
+
+		function sphere( u, v, target ) {
+
+			u *= Math.PI;
+			v *= 2 * Math.PI;
+
+			const x = size * Math.sin( u ) * Math.cos( v );
+			const y = size * Math.sin( u ) * Math.sin( v );
+			const z = size * Math.cos( u );
+
+			target.set( x, y, z );
+
+		}
+
+		super( sphere, u, v );
+
+	}
+
+};
+
+
+/*********************************************
+  *
+  * Parametric Replacement for PlaneGeometry
+  *
+  *********************************************/
+
+ParametricGeometries.PlaneGeometry = class PlaneGeometry extends ParametricGeometry {
+
+	constructor( width, depth, segmentsWidth, segmentsDepth ) {
+
+		function plane( u, v, target ) {
+
+			const x = u * width;
+			const y = 0;
+			const z = v * depth;
+
+			target.set( x, y, z );
+
+		}
+
+		super( plane, segmentsWidth, segmentsDepth );
+
+	}
+
+};
+
+export { ParametricGeometries };

jsm/geometries/ParametricGeometry.js

@@ -0,0 +1,135 @@
+/**
+ * Parametric Surfaces Geometry
+ * based on the brilliant article by @prideout https://prideout.net/blog/old/blog/index.html@p=44.html
+ */
+
+import {
+	BufferGeometry,
+	Float32BufferAttribute,
+	Vector3
+} from 'three';
+
+class ParametricGeometry extends BufferGeometry {
+
+	constructor( func = ( u, v, target ) => target.set( u, v, Math.cos( u ) * Math.sin( v ) ), slices = 8, stacks = 8 ) {
+
+		super();
+
+		this.type = 'ParametricGeometry';
+
+		this.parameters = {
+			func: func,
+			slices: slices,
+			stacks: stacks
+		};
+
+		// buffers
+
+		const indices = [];
+		const vertices = [];
+		const normals = [];
+		const uvs = [];
+
+		const EPS = 0.00001;
+
+		const normal = new Vector3();
+
+		const p0 = new Vector3(), p1 = new Vector3();
+		const pu = new Vector3(), pv = new Vector3();
+
+		if ( func.length < 3 ) {
+
+			console.error( 'THREE.ParametricGeometry: Function must now modify a Vector3 as third parameter.' );
+
+		}
+
+		// generate vertices, normals and uvs
+
+		const sliceCount = slices + 1;
+
+		for ( let i = 0; i <= stacks; i ++ ) {
+
+			const v = i / stacks;
+
+			for ( let j = 0; j <= slices; j ++ ) {
+
+				const u = j / slices;
+
+				// vertex
+
+				func( u, v, p0 );
+				vertices.push( p0.x, p0.y, p0.z );
+
+				// normal
+
+				// approximate tangent vectors via finite differences
+
+				if ( u - EPS >= 0 ) {
+
+					func( u - EPS, v, p1 );
+					pu.subVectors( p0, p1 );
+
+				} else {
+
+					func( u + EPS, v, p1 );
+					pu.subVectors( p1, p0 );
+
+				}
+
+				if ( v - EPS >= 0 ) {
+
+					func( u, v - EPS, p1 );
+					pv.subVectors( p0, p1 );
+
+				} else {
+
+					func( u, v + EPS, p1 );
+					pv.subVectors( p1, p0 );
+
+				}
+
+				// cross product of tangent vectors returns surface normal
+
+				normal.crossVectors( pu, pv ).normalize();
+				normals.push( normal.x, normal.y, normal.z );
+
+				// uv
+
+				uvs.push( u, v );
+
+			}
+
+		}
+
+		// generate indices
+
+		for ( let i = 0; i < stacks; i ++ ) {
+
+			for ( let j = 0; j < slices; j ++ ) {
+
+				const a = i * sliceCount + j;
+				const b = i * sliceCount + j + 1;
+				const c = ( i + 1 ) * sliceCount + j + 1;
+				const d = ( i + 1 ) * sliceCount + j;
+
+				// faces one and two
+
+				indices.push( a, b, d );
+				indices.push( b, c, d );
+
+			}
+
+		}
+
+		// build geometry
+
+		this.setIndex( indices );
+		this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		this.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+		this.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
+
+	}
+
+}
+
+export { ParametricGeometry };

jsm/geometries/RoundedBoxGeometry.js

@@ -0,0 +1,155 @@
+import {
+	BoxGeometry,
+	Vector3
+} from 'three';
+
+const _tempNormal = new Vector3();
+
+function getUv( faceDirVector, normal, uvAxis, projectionAxis, radius, sideLength ) {
+
+	const totArcLength = 2 * Math.PI * radius / 4;
+
+	// length of the planes between the arcs on each axis
+	const centerLength = Math.max( sideLength - 2 * radius, 0 );
+	const halfArc = Math.PI / 4;
+
+	// Get the vector projected onto the Y plane
+	_tempNormal.copy( normal );
+	_tempNormal[ projectionAxis ] = 0;
+	_tempNormal.normalize();
+
+	// total amount of UV space alloted to a single arc
+	const arcUvRatio = 0.5 * totArcLength / ( totArcLength + centerLength );
+
+	// the distance along one arc the point is at
+	const arcAngleRatio = 1.0 - ( _tempNormal.angleTo( faceDirVector ) / halfArc );
+
+	if ( Math.sign( _tempNormal[ uvAxis ] ) === 1 ) {
+
+		return arcAngleRatio * arcUvRatio;
+
+	} else {
+
+		// total amount of UV space alloted to the plane between the arcs
+		const lenUv = centerLength / ( totArcLength + centerLength );
+		return lenUv + arcUvRatio + arcUvRatio * ( 1.0 - arcAngleRatio );
+
+	}
+
+}
+
+class RoundedBoxGeometry extends BoxGeometry {
+
+	constructor( width = 1, height = 1, depth = 1, segments = 2, radius = 0.1 ) {
+
+		// ensure segments is odd so we have a plane connecting the rounded corners
+		segments = segments * 2 + 1;
+
+		// ensure radius isn't bigger than shortest side
+		radius = Math.min( width / 2, height / 2, depth / 2, radius );
+
+		super( 1, 1, 1, segments, segments, segments );
+
+		// if we just have one segment we're the same as a regular box
+		if ( segments === 1 ) return;
+
+		const geometry2 = this.toNonIndexed();
+
+		this.index = null;
+		this.attributes.position = geometry2.attributes.position;
+		this.attributes.normal = geometry2.attributes.normal;
+		this.attributes.uv = geometry2.attributes.uv;
+
+		//
+
+		const position = new Vector3();
+		const normal = new Vector3();
+
+		const box = new Vector3( width, height, depth ).divideScalar( 2 ).subScalar( radius );
+
+		const positions = this.attributes.position.array;
+		const normals = this.attributes.normal.array;
+		const uvs = this.attributes.uv.array;
+
+		const faceTris = positions.length / 6;
+		const faceDirVector = new Vector3();
+		const halfSegmentSize = 0.5 / segments;
+
+		for ( let i = 0, j = 0; i < positions.length; i += 3, j += 2 ) {
+
+			position.fromArray( positions, i );
+			normal.copy( position );
+			normal.x -= Math.sign( normal.x ) * halfSegmentSize;
+			normal.y -= Math.sign( normal.y ) * halfSegmentSize;
+			normal.z -= Math.sign( normal.z ) * halfSegmentSize;
+			normal.normalize();
+
+			positions[ i + 0 ] = box.x * Math.sign( position.x ) + normal.x * radius;
+			positions[ i + 1 ] = box.y * Math.sign( position.y ) + normal.y * radius;
+			positions[ i + 2 ] = box.z * Math.sign( position.z ) + normal.z * radius;
+
+			normals[ i + 0 ] = normal.x;
+			normals[ i + 1 ] = normal.y;
+			normals[ i + 2 ] = normal.z;
+
+			const side = Math.floor( i / faceTris );
+
+			switch ( side ) {
+
+				case 0: // right
+
+					// generate UVs along Z then Y
+					faceDirVector.set( 1, 0, 0 );
+					uvs[ j + 0 ] = getUv( faceDirVector, normal, 'z', 'y', radius, depth );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'z', radius, height );
+					break;
+
+				case 1: // left
+
+					// generate UVs along Z then Y
+					faceDirVector.set( - 1, 0, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'z', 'y', radius, depth );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'z', radius, height );
+					break;
+
+				case 2: // top
+
+					// generate UVs along X then Z
+					faceDirVector.set( 0, 1, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'z', radius, width );
+					uvs[ j + 1 ] = getUv( faceDirVector, normal, 'z', 'x', radius, depth );
+					break;
+
+				case 3: // bottom
+
+					// generate UVs along X then Z
+					faceDirVector.set( 0, - 1, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'z', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'z', 'x', radius, depth );
+					break;
+
+				case 4: // front
+
+					// generate UVs along X then Y
+					faceDirVector.set( 0, 0, 1 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'y', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'x', radius, height );
+					break;
+
+				case 5: // back
+
+					// generate UVs along X then Y
+					faceDirVector.set( 0, 0, - 1 );
+					uvs[ j + 0 ] = getUv( faceDirVector, normal, 'x', 'y', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'x', radius, height );
+					break;
+
+			}
+
+		}
+
+	}
+
+}
+
+export { RoundedBoxGeometry };

jsm/geometries/TeapotGeometry.js

@@ -0,0 +1,704 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Matrix4,
+	Vector3,
+	Vector4
+} from 'three';
+
+/**
+ * Tessellates the famous Utah teapot database by Martin Newell into triangles.
+ *
+ * Parameters: size = 50, segments = 10, bottom = true, lid = true, body = true,
+ *   fitLid = false, blinn = true
+ *
+ * size is a relative scale: I've scaled the teapot to fit vertically between -1 and 1.
+ * Think of it as a "radius".
+ * segments - number of line segments to subdivide each patch edge;
+ *   1 is possible but gives degenerates, so two is the real minimum.
+ * bottom - boolean, if true (default) then the bottom patches are added. Some consider
+ *   adding the bottom heresy, so set this to "false" to adhere to the One True Way.
+ * lid - to remove the lid and look inside, set to true.
+ * body - to remove the body and leave the lid, set this and "bottom" to false.
+ * fitLid - the lid is a tad small in the original. This stretches it a bit so you can't
+ *   see the teapot's insides through the gap.
+ * blinn - Jim Blinn scaled the original data vertically by dividing by about 1.3 to look
+ *   nicer. If you want to see the original teapot, similar to the real-world model, set
+ *   this to false. True by default.
+ *   See http://en.wikipedia.org/wiki/File:Original_Utah_Teapot.jpg for the original
+ *   real-world teapot (from http://en.wikipedia.org/wiki/Utah_teapot).
+ *
+ * Note that the bottom (the last four patches) is not flat - blame Frank Crow, not me.
+ *
+ * The teapot should normally be rendered as a double sided object, since for some
+ * patches both sides can be seen, e.g., the gap around the lid and inside the spout.
+ *
+ * Segments 'n' determines the number of triangles output.
+ *   Total triangles = 32*2*n*n - 8*n    [degenerates at the top and bottom cusps are deleted]
+ *
+ *   size_factor   # triangles
+ *       1          56
+ *       2         240
+ *       3         552
+ *       4         992
+ *
+ *      10        6320
+ *      20       25440
+ *      30       57360
+ *
+ * Code converted from my ancient SPD software, http://tog.acm.org/resources/SPD/
+ * Created for the Udacity course "Interactive Rendering", http://bit.ly/ericity
+ * YouTube video on teapot history: https://www.youtube.com/watch?v=DxMfblPzFNc
+ *
+ * See https://en.wikipedia.org/wiki/Utah_teapot for the history of the teapot
+ *
+ */
+
+class TeapotGeometry extends BufferGeometry {
+
+	constructor( size = 50, segments = 10, bottom = true, lid = true, body = true, fitLid = true, blinn = true ) {
+
+		// 32 * 4 * 4 Bezier spline patches
+		const teapotPatches = [
+			/*rim*/
+			0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
+			3, 16, 17, 18, 7, 19, 20, 21, 11, 22, 23, 24, 15, 25, 26, 27,
+			18, 28, 29, 30, 21, 31, 32, 33, 24, 34, 35, 36, 27, 37, 38, 39,
+			30, 40, 41, 0, 33, 42, 43, 4, 36, 44, 45, 8, 39, 46, 47, 12,
+			/*body*/
+			12, 13, 14, 15, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
+			15, 25, 26, 27, 51, 60, 61, 62, 55, 63, 64, 65, 59, 66, 67, 68,
+			27, 37, 38, 39, 62, 69, 70, 71, 65, 72, 73, 74, 68, 75, 76, 77,
+			39, 46, 47, 12, 71, 78, 79, 48, 74, 80, 81, 52, 77, 82, 83, 56,
+			56, 57, 58, 59, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95,
+			59, 66, 67, 68, 87, 96, 97, 98, 91, 99, 100, 101, 95, 102, 103, 104,
+			68, 75, 76, 77, 98, 105, 106, 107, 101, 108, 109, 110, 104, 111, 112, 113,
+			77, 82, 83, 56, 107, 114, 115, 84, 110, 116, 117, 88, 113, 118, 119, 92,
+			/*handle*/
+			120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135,
+			123, 136, 137, 120, 127, 138, 139, 124, 131, 140, 141, 128, 135, 142, 143, 132,
+			132, 133, 134, 135, 144, 145, 146, 147, 148, 149, 150, 151, 68, 152, 153, 154,
+			135, 142, 143, 132, 147, 155, 156, 144, 151, 157, 158, 148, 154, 159, 160, 68,
+			/*spout*/
+			161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176,
+			164, 177, 178, 161, 168, 179, 180, 165, 172, 181, 182, 169, 176, 183, 184, 173,
+			173, 174, 175, 176, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+			176, 183, 184, 173, 188, 197, 198, 185, 192, 199, 200, 189, 196, 201, 202, 193,
+			/*lid*/
+			203, 203, 203, 203, 204, 205, 206, 207, 208, 208, 208, 208, 209, 210, 211, 212,
+			203, 203, 203, 203, 207, 213, 214, 215, 208, 208, 208, 208, 212, 216, 217, 218,
+			203, 203, 203, 203, 215, 219, 220, 221, 208, 208, 208, 208, 218, 222, 223, 224,
+			203, 203, 203, 203, 221, 225, 226, 204, 208, 208, 208, 208, 224, 227, 228, 209,
+			209, 210, 211, 212, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240,
+			212, 216, 217, 218, 232, 241, 242, 243, 236, 244, 245, 246, 240, 247, 248, 249,
+			218, 222, 223, 224, 243, 250, 251, 252, 246, 253, 254, 255, 249, 256, 257, 258,
+			224, 227, 228, 209, 252, 259, 260, 229, 255, 261, 262, 233, 258, 263, 264, 237,
+			/*bottom*/
+			265, 265, 265, 265, 266, 267, 268, 269, 270, 271, 272, 273, 92, 119, 118, 113,
+			265, 265, 265, 265, 269, 274, 275, 276, 273, 277, 278, 279, 113, 112, 111, 104,
+			265, 265, 265, 265, 276, 280, 281, 282, 279, 283, 284, 285, 104, 103, 102, 95,
+			265, 265, 265, 265, 282, 286, 287, 266, 285, 288, 289, 270, 95, 94, 93, 92
+		];
+
+		const teapotVertices = [
+			1.4, 0, 2.4,
+			1.4, - 0.784, 2.4,
+			0.784, - 1.4, 2.4,
+			0, - 1.4, 2.4,
+			1.3375, 0, 2.53125,
+			1.3375, - 0.749, 2.53125,
+			0.749, - 1.3375, 2.53125,
+			0, - 1.3375, 2.53125,
+			1.4375, 0, 2.53125,
+			1.4375, - 0.805, 2.53125,
+			0.805, - 1.4375, 2.53125,
+			0, - 1.4375, 2.53125,
+			1.5, 0, 2.4,
+			1.5, - 0.84, 2.4,
+			0.84, - 1.5, 2.4,
+			0, - 1.5, 2.4,
+			- 0.784, - 1.4, 2.4,
+			- 1.4, - 0.784, 2.4,
+			- 1.4, 0, 2.4,
+			- 0.749, - 1.3375, 2.53125,
+			- 1.3375, - 0.749, 2.53125,
+			- 1.3375, 0, 2.53125,
+			- 0.805, - 1.4375, 2.53125,
+			- 1.4375, - 0.805, 2.53125,
+			- 1.4375, 0, 2.53125,
+			- 0.84, - 1.5, 2.4,
+			- 1.5, - 0.84, 2.4,
+			- 1.5, 0, 2.4,
+			- 1.4, 0.784, 2.4,
+			- 0.784, 1.4, 2.4,
+			0, 1.4, 2.4,
+			- 1.3375, 0.749, 2.53125,
+			- 0.749, 1.3375, 2.53125,
+			0, 1.3375, 2.53125,
+			- 1.4375, 0.805, 2.53125,
+			- 0.805, 1.4375, 2.53125,
+			0, 1.4375, 2.53125,
+			- 1.5, 0.84, 2.4,
+			- 0.84, 1.5, 2.4,
+			0, 1.5, 2.4,
+			0.784, 1.4, 2.4,
+			1.4, 0.784, 2.4,
+			0.749, 1.3375, 2.53125,
+			1.3375, 0.749, 2.53125,
+			0.805, 1.4375, 2.53125,
+			1.4375, 0.805, 2.53125,
+			0.84, 1.5, 2.4,
+			1.5, 0.84, 2.4,
+			1.75, 0, 1.875,
+			1.75, - 0.98, 1.875,
+			0.98, - 1.75, 1.875,
+			0, - 1.75, 1.875,
+			2, 0, 1.35,
+			2, - 1.12, 1.35,
+			1.12, - 2, 1.35,
+			0, - 2, 1.35,
+			2, 0, 0.9,
+			2, - 1.12, 0.9,
+			1.12, - 2, 0.9,
+			0, - 2, 0.9,
+			- 0.98, - 1.75, 1.875,
+			- 1.75, - 0.98, 1.875,
+			- 1.75, 0, 1.875,
+			- 1.12, - 2, 1.35,
+			- 2, - 1.12, 1.35,
+			- 2, 0, 1.35,
+			- 1.12, - 2, 0.9,
+			- 2, - 1.12, 0.9,
+			- 2, 0, 0.9,
+			- 1.75, 0.98, 1.875,
+			- 0.98, 1.75, 1.875,
+			0, 1.75, 1.875,
+			- 2, 1.12, 1.35,
+			- 1.12, 2, 1.35,
+			0, 2, 1.35,
+			- 2, 1.12, 0.9,
+			- 1.12, 2, 0.9,
+			0, 2, 0.9,
+			0.98, 1.75, 1.875,
+			1.75, 0.98, 1.875,
+			1.12, 2, 1.35,
+			2, 1.12, 1.35,
+			1.12, 2, 0.9,
+			2, 1.12, 0.9,
+			2, 0, 0.45,
+			2, - 1.12, 0.45,
+			1.12, - 2, 0.45,
+			0, - 2, 0.45,
+			1.5, 0, 0.225,
+			1.5, - 0.84, 0.225,
+			0.84, - 1.5, 0.225,
+			0, - 1.5, 0.225,
+			1.5, 0, 0.15,
+			1.5, - 0.84, 0.15,
+			0.84, - 1.5, 0.15,
+			0, - 1.5, 0.15,
+			- 1.12, - 2, 0.45,
+			- 2, - 1.12, 0.45,
+			- 2, 0, 0.45,
+			- 0.84, - 1.5, 0.225,
+			- 1.5, - 0.84, 0.225,
+			- 1.5, 0, 0.225,
+			- 0.84, - 1.5, 0.15,
+			- 1.5, - 0.84, 0.15,
+			- 1.5, 0, 0.15,
+			- 2, 1.12, 0.45,
+			- 1.12, 2, 0.45,
+			0, 2, 0.45,
+			- 1.5, 0.84, 0.225,
+			- 0.84, 1.5, 0.225,
+			0, 1.5, 0.225,
+			- 1.5, 0.84, 0.15,
+			- 0.84, 1.5, 0.15,
+			0, 1.5, 0.15,
+			1.12, 2, 0.45,
+			2, 1.12, 0.45,
+			0.84, 1.5, 0.225,
+			1.5, 0.84, 0.225,
+			0.84, 1.5, 0.15,
+			1.5, 0.84, 0.15,
+			- 1.6, 0, 2.025,
+			- 1.6, - 0.3, 2.025,
+			- 1.5, - 0.3, 2.25,
+			- 1.5, 0, 2.25,
+			- 2.3, 0, 2.025,
+			- 2.3, - 0.3, 2.025,
+			- 2.5, - 0.3, 2.25,
+			- 2.5, 0, 2.25,
+			- 2.7, 0, 2.025,
+			- 2.7, - 0.3, 2.025,
+			- 3, - 0.3, 2.25,
+			- 3, 0, 2.25,
+			- 2.7, 0, 1.8,
+			- 2.7, - 0.3, 1.8,
+			- 3, - 0.3, 1.8,
+			- 3, 0, 1.8,
+			- 1.5, 0.3, 2.25,
+			- 1.6, 0.3, 2.025,
+			- 2.5, 0.3, 2.25,
+			- 2.3, 0.3, 2.025,
+			- 3, 0.3, 2.25,
+			- 2.7, 0.3, 2.025,
+			- 3, 0.3, 1.8,
+			- 2.7, 0.3, 1.8,
+			- 2.7, 0, 1.575,
+			- 2.7, - 0.3, 1.575,
+			- 3, - 0.3, 1.35,
+			- 3, 0, 1.35,
+			- 2.5, 0, 1.125,
+			- 2.5, - 0.3, 1.125,
+			- 2.65, - 0.3, 0.9375,
+			- 2.65, 0, 0.9375,
+			- 2, - 0.3, 0.9,
+			- 1.9, - 0.3, 0.6,
+			- 1.9, 0, 0.6,
+			- 3, 0.3, 1.35,
+			- 2.7, 0.3, 1.575,
+			- 2.65, 0.3, 0.9375,
+			- 2.5, 0.3, 1.125,
+			- 1.9, 0.3, 0.6,
+			- 2, 0.3, 0.9,
+			1.7, 0, 1.425,
+			1.7, - 0.66, 1.425,
+			1.7, - 0.66, 0.6,
+			1.7, 0, 0.6,
+			2.6, 0, 1.425,
+			2.6, - 0.66, 1.425,
+			3.1, - 0.66, 0.825,
+			3.1, 0, 0.825,
+			2.3, 0, 2.1,
+			2.3, - 0.25, 2.1,
+			2.4, - 0.25, 2.025,
+			2.4, 0, 2.025,
+			2.7, 0, 2.4,
+			2.7, - 0.25, 2.4,
+			3.3, - 0.25, 2.4,
+			3.3, 0, 2.4,
+			1.7, 0.66, 0.6,
+			1.7, 0.66, 1.425,
+			3.1, 0.66, 0.825,
+			2.6, 0.66, 1.425,
+			2.4, 0.25, 2.025,
+			2.3, 0.25, 2.1,
+			3.3, 0.25, 2.4,
+			2.7, 0.25, 2.4,
+			2.8, 0, 2.475,
+			2.8, - 0.25, 2.475,
+			3.525, - 0.25, 2.49375,
+			3.525, 0, 2.49375,
+			2.9, 0, 2.475,
+			2.9, - 0.15, 2.475,
+			3.45, - 0.15, 2.5125,
+			3.45, 0, 2.5125,
+			2.8, 0, 2.4,
+			2.8, - 0.15, 2.4,
+			3.2, - 0.15, 2.4,
+			3.2, 0, 2.4,
+			3.525, 0.25, 2.49375,
+			2.8, 0.25, 2.475,
+			3.45, 0.15, 2.5125,
+			2.9, 0.15, 2.475,
+			3.2, 0.15, 2.4,
+			2.8, 0.15, 2.4,
+			0, 0, 3.15,
+			0.8, 0, 3.15,
+			0.8, - 0.45, 3.15,
+			0.45, - 0.8, 3.15,
+			0, - 0.8, 3.15,
+			0, 0, 2.85,
+			0.2, 0, 2.7,
+			0.2, - 0.112, 2.7,
+			0.112, - 0.2, 2.7,
+			0, - 0.2, 2.7,
+			- 0.45, - 0.8, 3.15,
+			- 0.8, - 0.45, 3.15,
+			- 0.8, 0, 3.15,
+			- 0.112, - 0.2, 2.7,
+			- 0.2, - 0.112, 2.7,
+			- 0.2, 0, 2.7,
+			- 0.8, 0.45, 3.15,
+			- 0.45, 0.8, 3.15,
+			0, 0.8, 3.15,
+			- 0.2, 0.112, 2.7,
+			- 0.112, 0.2, 2.7,
+			0, 0.2, 2.7,
+			0.45, 0.8, 3.15,
+			0.8, 0.45, 3.15,
+			0.112, 0.2, 2.7,
+			0.2, 0.112, 2.7,
+			0.4, 0, 2.55,
+			0.4, - 0.224, 2.55,
+			0.224, - 0.4, 2.55,
+			0, - 0.4, 2.55,
+			1.3, 0, 2.55,
+			1.3, - 0.728, 2.55,
+			0.728, - 1.3, 2.55,
+			0, - 1.3, 2.55,
+			1.3, 0, 2.4,
+			1.3, - 0.728, 2.4,
+			0.728, - 1.3, 2.4,
+			0, - 1.3, 2.4,
+			- 0.224, - 0.4, 2.55,
+			- 0.4, - 0.224, 2.55,
+			- 0.4, 0, 2.55,
+			- 0.728, - 1.3, 2.55,
+			- 1.3, - 0.728, 2.55,
+			- 1.3, 0, 2.55,
+			- 0.728, - 1.3, 2.4,
+			- 1.3, - 0.728, 2.4,
+			- 1.3, 0, 2.4,
+			- 0.4, 0.224, 2.55,
+			- 0.224, 0.4, 2.55,
+			0, 0.4, 2.55,
+			- 1.3, 0.728, 2.55,
+			- 0.728, 1.3, 2.55,
+			0, 1.3, 2.55,
+			- 1.3, 0.728, 2.4,
+			- 0.728, 1.3, 2.4,
+			0, 1.3, 2.4,
+			0.224, 0.4, 2.55,
+			0.4, 0.224, 2.55,
+			0.728, 1.3, 2.55,
+			1.3, 0.728, 2.55,
+			0.728, 1.3, 2.4,
+			1.3, 0.728, 2.4,
+			0, 0, 0,
+			1.425, 0, 0,
+			1.425, 0.798, 0,
+			0.798, 1.425, 0,
+			0, 1.425, 0,
+			1.5, 0, 0.075,
+			1.5, 0.84, 0.075,
+			0.84, 1.5, 0.075,
+			0, 1.5, 0.075,
+			- 0.798, 1.425, 0,
+			- 1.425, 0.798, 0,
+			- 1.425, 0, 0,
+			- 0.84, 1.5, 0.075,
+			- 1.5, 0.84, 0.075,
+			- 1.5, 0, 0.075,
+			- 1.425, - 0.798, 0,
+			- 0.798, - 1.425, 0,
+			0, - 1.425, 0,
+			- 1.5, - 0.84, 0.075,
+			- 0.84, - 1.5, 0.075,
+			0, - 1.5, 0.075,
+			0.798, - 1.425, 0,
+			1.425, - 0.798, 0,
+			0.84, - 1.5, 0.075,
+			1.5, - 0.84, 0.075
+		];
+
+		super();
+
+		// number of segments per patch
+		segments = Math.max( 2, Math.floor( segments ) );
+
+		// Jim Blinn scaled the teapot down in size by about 1.3 for
+		// some rendering tests. He liked the new proportions that he kept
+		// the data in this form. The model was distributed with these new
+		// proportions and became the norm. Trivia: comparing images of the
+		// real teapot and the computer model, the ratio for the bowl of the
+		// real teapot is more like 1.25, but since 1.3 is the traditional
+		// value given, we use it here.
+		const blinnScale = 1.3;
+
+		// scale the size to be the real scaling factor
+		const maxHeight = 3.15 * ( blinn ? 1 : blinnScale );
+
+		const maxHeight2 = maxHeight / 2;
+		const trueSize = size / maxHeight2;
+
+		// Number of elements depends on what is needed. Subtract degenerate
+		// triangles at tip of bottom and lid out in advance.
+		let numTriangles = bottom ? ( 8 * segments - 4 ) * segments : 0;
+		numTriangles += lid ? ( 16 * segments - 4 ) * segments : 0;
+		numTriangles += body ? 40 * segments * segments : 0;
+
+		const indices = new Uint32Array( numTriangles * 3 );
+
+		let numVertices = bottom ? 4 : 0;
+		numVertices += lid ? 8 : 0;
+		numVertices += body ? 20 : 0;
+		numVertices *= ( segments + 1 ) * ( segments + 1 );
+
+		const vertices = new Float32Array( numVertices * 3 );
+		const normals = new Float32Array( numVertices * 3 );
+		const uvs = new Float32Array( numVertices * 2 );
+
+		// Bezier form
+		const ms = new Matrix4();
+		ms.set(
+			- 1.0, 3.0, - 3.0, 1.0,
+			3.0, - 6.0, 3.0, 0.0,
+			- 3.0, 3.0, 0.0, 0.0,
+			1.0, 0.0, 0.0, 0.0 );
+
+		const g = [];
+
+		const sp = [];
+		const tp = [];
+		const dsp = [];
+		const dtp = [];
+
+		// M * G * M matrix, sort of see
+		// http://www.cs.helsinki.fi/group/goa/mallinnus/curves/surfaces.html
+		const mgm = [];
+
+		const vert = [];
+		const sdir = [];
+		const tdir = [];
+
+		const norm = new Vector3();
+
+		let tcoord;
+
+		let sval;
+		let tval;
+		let p;
+		let dsval = 0;
+		let dtval = 0;
+
+		const normOut = new Vector3();
+
+		const gmx = new Matrix4();
+		const tmtx = new Matrix4();
+
+		const vsp = new Vector4();
+		const vtp = new Vector4();
+		const vdsp = new Vector4();
+		const vdtp = new Vector4();
+
+		const vsdir = new Vector3();
+		const vtdir = new Vector3();
+
+		const mst = ms.clone();
+		mst.transpose();
+
+		// internal function: test if triangle has any matching vertices;
+		// if so, don't save triangle, since it won't display anything.
+		const notDegenerate = ( vtx1, vtx2, vtx3 ) => // if any vertex matches, return false
+			! ( ( ( vertices[ vtx1 * 3 ] === vertices[ vtx2 * 3 ] ) &&
+					( vertices[ vtx1 * 3 + 1 ] === vertices[ vtx2 * 3 + 1 ] ) &&
+					( vertices[ vtx1 * 3 + 2 ] === vertices[ vtx2 * 3 + 2 ] ) ) ||
+					( ( vertices[ vtx1 * 3 ] === vertices[ vtx3 * 3 ] ) &&
+					( vertices[ vtx1 * 3 + 1 ] === vertices[ vtx3 * 3 + 1 ] ) &&
+					( vertices[ vtx1 * 3 + 2 ] === vertices[ vtx3 * 3 + 2 ] ) ) || ( vertices[ vtx2 * 3 ] === vertices[ vtx3 * 3 ] ) &&
+					( vertices[ vtx2 * 3 + 1 ] === vertices[ vtx3 * 3 + 1 ] ) &&
+					( vertices[ vtx2 * 3 + 2 ] === vertices[ vtx3 * 3 + 2 ] ) );
+
+
+		for ( let i = 0; i < 3; i ++ ) {
+
+			mgm[ i ] = new Matrix4();
+
+		}
+
+		const minPatches = body ? 0 : 20;
+		const maxPatches = bottom ? 32 : 28;
+
+		const vertPerRow = segments + 1;
+
+		let surfCount = 0;
+
+		let vertCount = 0;
+		let normCount = 0;
+		let uvCount = 0;
+
+		let indexCount = 0;
+
+		for ( let surf = minPatches; surf < maxPatches; surf ++ ) {
+
+			// lid is in the middle of the data, patches 20-27,
+			// so ignore it for this part of the loop if the lid is not desired
+			if ( lid || ( surf < 20 || surf >= 28 ) ) {
+
+				// get M * G * M matrix for x,y,z
+				for ( let i = 0; i < 3; i ++ ) {
+
+					// get control patches
+					for ( let r = 0; r < 4; r ++ ) {
+
+						for ( let c = 0; c < 4; c ++ ) {
+
+							// transposed
+							g[ c * 4 + r ] = teapotVertices[ teapotPatches[ surf * 16 + r * 4 + c ] * 3 + i ];
+
+							// is the lid to be made larger, and is this a point on the lid
+							// that is X or Y?
+							if ( fitLid && ( surf >= 20 && surf < 28 ) && ( i !== 2 ) ) {
+
+								// increase XY size by 7.7%, found empirically. I don't
+								// increase Z so that the teapot will continue to fit in the
+								// space -1 to 1 for Y (Y is up for the final model).
+								g[ c * 4 + r ] *= 1.077;
+
+							}
+
+							// Blinn "fixed" the teapot by dividing Z by blinnScale, and that's the
+							// data we now use. The original teapot is taller. Fix it:
+							if ( ! blinn && ( i === 2 ) ) {
+
+								g[ c * 4 + r ] *= blinnScale;
+
+							}
+
+						}
+
+					}
+
+					gmx.set( g[ 0 ], g[ 1 ], g[ 2 ], g[ 3 ], g[ 4 ], g[ 5 ], g[ 6 ], g[ 7 ], g[ 8 ], g[ 9 ], g[ 10 ], g[ 11 ], g[ 12 ], g[ 13 ], g[ 14 ], g[ 15 ] );
+
+					tmtx.multiplyMatrices( gmx, ms );
+					mgm[ i ].multiplyMatrices( mst, tmtx );
+
+				}
+
+				// step along, get points, and output
+				for ( let sstep = 0; sstep <= segments; sstep ++ ) {
+
+					const s = sstep / segments;
+
+					for ( let tstep = 0; tstep <= segments; tstep ++ ) {
+
+						const t = tstep / segments;
+
+						// point from basis
+						// get power vectors and their derivatives
+						for ( p = 4, sval = tval = 1.0; p --; ) {
+
+							sp[ p ] = sval;
+							tp[ p ] = tval;
+							sval *= s;
+							tval *= t;
+
+							if ( p === 3 ) {
+
+								dsp[ p ] = dtp[ p ] = 0.0;
+								dsval = dtval = 1.0;
+
+							} else {
+
+								dsp[ p ] = dsval * ( 3 - p );
+								dtp[ p ] = dtval * ( 3 - p );
+								dsval *= s;
+								dtval *= t;
+
+							}
+
+						}
+
+						vsp.fromArray( sp );
+						vtp.fromArray( tp );
+						vdsp.fromArray( dsp );
+						vdtp.fromArray( dtp );
+
+						// do for x,y,z
+						for ( let i = 0; i < 3; i ++ ) {
+
+							// multiply power vectors times matrix to get value
+							tcoord = vsp.clone();
+							tcoord.applyMatrix4( mgm[ i ] );
+							vert[ i ] = tcoord.dot( vtp );
+
+							// get s and t tangent vectors
+							tcoord = vdsp.clone();
+							tcoord.applyMatrix4( mgm[ i ] );
+							sdir[ i ] = tcoord.dot( vtp );
+
+							tcoord = vsp.clone();
+							tcoord.applyMatrix4( mgm[ i ] );
+							tdir[ i ] = tcoord.dot( vdtp );
+
+						}
+
+						// find normal
+						vsdir.fromArray( sdir );
+						vtdir.fromArray( tdir );
+						norm.crossVectors( vtdir, vsdir );
+						norm.normalize();
+
+						// if X and Z length is 0, at the cusp, so point the normal up or down, depending on patch number
+						if ( vert[ 0 ] === 0 && vert[ 1 ] === 0 ) {
+
+							// if above the middle of the teapot, normal points up, else down
+							normOut.set( 0, vert[ 2 ] > maxHeight2 ? 1 : - 1, 0 );
+
+						} else {
+
+							// standard output: rotate on X axis
+							normOut.set( norm.x, norm.z, - norm.y );
+
+						}
+
+						// store it all
+						vertices[ vertCount ++ ] = trueSize * vert[ 0 ];
+						vertices[ vertCount ++ ] = trueSize * ( vert[ 2 ] - maxHeight2 );
+						vertices[ vertCount ++ ] = - trueSize * vert[ 1 ];
+
+						normals[ normCount ++ ] = normOut.x;
+						normals[ normCount ++ ] = normOut.y;
+						normals[ normCount ++ ] = normOut.z;
+
+						uvs[ uvCount ++ ] = 1 - t;
+						uvs[ uvCount ++ ] = 1 - s;
+
+					}
+
+				}
+
+				// save the faces
+				for ( let sstep = 0; sstep < segments; sstep ++ ) {
+
+					for ( let tstep = 0; tstep < segments; tstep ++ ) {
+
+						const v1 = surfCount * vertPerRow * vertPerRow + sstep * vertPerRow + tstep;
+						const v2 = v1 + 1;
+						const v3 = v2 + vertPerRow;
+						const v4 = v1 + vertPerRow;
+
+						// Normals and UVs cannot be shared. Without clone(), you can see the consequences
+						// of sharing if you call geometry.applyMatrix4( matrix ).
+						if ( notDegenerate( v1, v2, v3 ) ) {
+
+							indices[ indexCount ++ ] = v1;
+							indices[ indexCount ++ ] = v2;
+							indices[ indexCount ++ ] = v3;
+
+						}
+
+						if ( notDegenerate( v1, v3, v4 ) ) {
+
+							indices[ indexCount ++ ] = v1;
+							indices[ indexCount ++ ] = v3;
+							indices[ indexCount ++ ] = v4;
+
+						}
+
+					}
+
+				}
+
+				// increment only if a surface was used
+				surfCount ++;
+
+			}
+
+		}
+
+		this.setIndex( new BufferAttribute( indices, 1 ) );
+		this.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
+		this.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
+		this.setAttribute( 'uv', new BufferAttribute( uvs, 2 ) );
+
+		this.computeBoundingSphere();
+
+	}
+
+}
+
+export { TeapotGeometry };

jsm/geometries/TextGeometry.js

@@ -0,0 +1,57 @@
+/**
+ * Text = 3D Text
+ *
+ * parameters = {
+ *  font: <THREE.Font>, // font
+ *
+ *  size: <float>, // size of the text
+ *  height: <float>, // thickness to extrude text
+ *  curveSegments: <int>, // number of points on the curves
+ *
+ *  bevelEnabled: <bool>, // turn on bevel
+ *  bevelThickness: <float>, // how deep into text bevel goes
+ *  bevelSize: <float>, // how far from text outline (including bevelOffset) is bevel
+ *  bevelOffset: <float> // how far from text outline does bevel start
+ * }
+ */
+
+import {
+	ExtrudeGeometry
+} from 'three';
+
+class TextGeometry extends ExtrudeGeometry {
+
+	constructor( text, parameters = {} ) {
+
+		const font = parameters.font;
+
+		if ( font === undefined ) {
+
+			super(); // generate default extrude geometry
+
+		} else {
+
+			const shapes = font.generateShapes( text, parameters.size );
+
+			// translate parameters to ExtrudeGeometry API
+
+			parameters.depth = parameters.height !== undefined ? parameters.height : 50;
+
+			// defaults
+
+			if ( parameters.bevelThickness === undefined ) parameters.bevelThickness = 10;
+			if ( parameters.bevelSize === undefined ) parameters.bevelSize = 8;
+			if ( parameters.bevelEnabled === undefined ) parameters.bevelEnabled = false;
+
+			super( shapes, parameters );
+
+		}
+
+		this.type = 'TextGeometry';
+
+	}
+
+}
+
+
+export { TextGeometry };

jsm/helpers/LightProbeHelper.js

@@ -0,0 +1,130 @@
+import {
+	Mesh,
+	ShaderMaterial,
+	SphereGeometry
+} from 'three';
+
+class LightProbeHelper extends Mesh {
+
+	constructor( lightProbe, size ) {
+
+		const material = new ShaderMaterial( {
+
+			type: 'LightProbeHelperMaterial',
+
+			uniforms: {
+
+				sh: { value: lightProbe.sh.coefficients }, // by reference
+
+				intensity: { value: lightProbe.intensity }
+
+			},
+
+			vertexShader: [
+
+				'varying vec3 vNormal;',
+
+				'void main() {',
+
+				'	vNormal = normalize( normalMatrix * normal );',
+
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}',
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'#define RECIPROCAL_PI 0.318309886',
+
+				'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
+
+				'	// matrix is assumed to be orthogonal',
+
+				'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
+
+				'}',
+
+				'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
+				'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
+
+				'	// normal is assumed to have unit length',
+
+				'	float x = normal.x, y = normal.y, z = normal.z;',
+
+				'	// band 0',
+				'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
+
+				'	// band 1',
+				'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
+				'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
+				'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
+
+				'	// band 2',
+				'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
+				'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
+				'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
+				'	result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
+				'	result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
+
+				'	return result;',
+
+				'}',
+
+				'uniform vec3 sh[ 9 ]; // sh coefficients',
+
+				'uniform float intensity; // light probe intensity',
+
+				'varying vec3 vNormal;',
+
+				'void main() {',
+
+				'	vec3 normal = normalize( vNormal );',
+
+				'	vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
+
+				'	vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
+
+				'	vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
+
+				'	gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const geometry = new SphereGeometry( 1, 32, 16 );
+
+		super( geometry, material );
+
+		this.lightProbe = lightProbe;
+		this.size = size;
+		this.type = 'LightProbeHelper';
+
+		this.onBeforeRender();
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+	onBeforeRender() {
+
+		this.position.copy( this.lightProbe.position );
+
+		this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
+
+		this.material.uniforms.intensity.value = this.lightProbe.intensity;
+
+	}
+
+}
+
+export { LightProbeHelper };

jsm/helpers/OctreeHelper.js

@@ -0,0 +1,58 @@
+import {
+	LineSegments,
+	BufferGeometry,
+	Float32BufferAttribute,
+	LineBasicMaterial
+} from 'three';
+
+class OctreeHelper extends LineSegments {
+
+	constructor( octree, color = 0xffff00 ) {
+
+		const vertices = [];
+
+		function traverse( tree ) {
+
+			for ( let i = 0; i < tree.length; i ++ ) {
+
+				const min = tree[ i ].box.min;
+				const max = tree[ i ].box.max;
+
+				vertices.push( max.x, max.y, max.z ); vertices.push( min.x, max.y, max.z ); // 0, 1
+				vertices.push( min.x, max.y, max.z ); vertices.push( min.x, min.y, max.z ); // 1, 2
+				vertices.push( min.x, min.y, max.z ); vertices.push( max.x, min.y, max.z ); // 2, 3
+				vertices.push( max.x, min.y, max.z ); vertices.push( max.x, max.y, max.z ); // 3, 0
+
+				vertices.push( max.x, max.y, min.z ); vertices.push( min.x, max.y, min.z ); // 4, 5
+				vertices.push( min.x, max.y, min.z ); vertices.push( min.x, min.y, min.z ); // 5, 6
+				vertices.push( min.x, min.y, min.z ); vertices.push( max.x, min.y, min.z ); // 6, 7
+				vertices.push( max.x, min.y, min.z ); vertices.push( max.x, max.y, min.z ); // 7, 4
+
+				vertices.push( max.x, max.y, max.z ); vertices.push( max.x, max.y, min.z ); // 0, 4
+				vertices.push( min.x, max.y, max.z ); vertices.push( min.x, max.y, min.z ); // 1, 5
+				vertices.push( min.x, min.y, max.z ); vertices.push( min.x, min.y, min.z ); // 2, 6
+				vertices.push( max.x, min.y, max.z ); vertices.push( max.x, min.y, min.z ); // 3, 7
+
+				traverse( tree[ i ].subTrees );
+
+			}
+
+		}
+
+		traverse( octree.subTrees );
+
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+
+		super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+
+		this.octree = octree;
+		this.color = color;
+
+		this.type = 'OctreeHelper';
+
+	}
+
+}
+
+export { OctreeHelper };

jsm/helpers/PositionalAudioHelper.js

@@ -0,0 +1,109 @@
+import {
+	BufferGeometry,
+	BufferAttribute,
+	LineBasicMaterial,
+	Line,
+	MathUtils
+} from 'three';
+
+class PositionalAudioHelper extends Line {
+
+	constructor( audio, range = 1, divisionsInnerAngle = 16, divisionsOuterAngle = 2 ) {
+
+		const geometry = new BufferGeometry();
+		const divisions = divisionsInnerAngle + divisionsOuterAngle * 2;
+		const positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
+		geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
+
+		const materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
+		const materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );
+
+		super( geometry, [ materialOuterAngle, materialInnerAngle ] );
+
+		this.audio = audio;
+		this.range = range;
+		this.divisionsInnerAngle = divisionsInnerAngle;
+		this.divisionsOuterAngle = divisionsOuterAngle;
+		this.type = 'PositionalAudioHelper';
+
+		this.update();
+
+	}
+
+	update() {
+
+		const audio = this.audio;
+		const range = this.range;
+		const divisionsInnerAngle = this.divisionsInnerAngle;
+		const divisionsOuterAngle = this.divisionsOuterAngle;
+
+		const coneInnerAngle = MathUtils.degToRad( audio.panner.coneInnerAngle );
+		const coneOuterAngle = MathUtils.degToRad( audio.panner.coneOuterAngle );
+
+		const halfConeInnerAngle = coneInnerAngle / 2;
+		const halfConeOuterAngle = coneOuterAngle / 2;
+
+		let start = 0;
+		let count = 0;
+		let i;
+		let stride;
+
+		const geometry = this.geometry;
+		const positionAttribute = geometry.attributes.position;
+
+		geometry.clearGroups();
+
+		//
+
+		function generateSegment( from, to, divisions, materialIndex ) {
+
+			const step = ( to - from ) / divisions;
+
+			positionAttribute.setXYZ( start, 0, 0, 0 );
+			count ++;
+
+			for ( i = from; i < to; i += step ) {
+
+				stride = start + count;
+
+				positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
+				positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
+				positionAttribute.setXYZ( stride + 2, 0, 0, 0 );
+
+				count += 3;
+
+			}
+
+			geometry.addGroup( start, count, materialIndex );
+
+			start += count;
+			count = 0;
+
+		}
+
+		//
+
+		generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
+		generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
+		generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );
+
+		//
+
+		positionAttribute.needsUpdate = true;
+
+		if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material[ 0 ].dispose();
+		this.material[ 1 ].dispose();
+
+	}
+
+}
+
+
+export { PositionalAudioHelper };

jsm/helpers/RectAreaLightHelper.js

@@ -0,0 +1,85 @@
+import {
+	BackSide,
+	BufferGeometry,
+	Float32BufferAttribute,
+	Line,
+	LineBasicMaterial,
+	Mesh,
+	MeshBasicMaterial
+} from 'three';
+
+/**
+ *  This helper must be added as a child of the light
+ */
+
+class RectAreaLightHelper extends Line {
+
+	constructor( light, color ) {
+
+		const positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, - 1, 0, 1, 1, 0 ];
+
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		geometry.computeBoundingSphere();
+
+		const material = new LineBasicMaterial( { fog: false } );
+
+		super( geometry, material );
+
+		this.light = light;
+		this.color = color; // optional hardwired color for the helper
+		this.type = 'RectAreaLightHelper';
+
+		//
+
+		const positions2 = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
+
+		const geometry2 = new BufferGeometry();
+		geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
+		geometry2.computeBoundingSphere();
+
+		this.add( new Mesh( geometry2, new MeshBasicMaterial( { side: BackSide, fog: false } ) ) );
+
+	}
+
+	updateMatrixWorld() {
+
+		this.scale.set( 0.5 * this.light.width, 0.5 * this.light.height, 1 );
+
+		if ( this.color !== undefined ) {
+
+			this.material.color.set( this.color );
+			this.children[ 0 ].material.color.set( this.color );
+
+		} else {
+
+			this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+
+			// prevent hue shift
+			const c = this.material.color;
+			const max = Math.max( c.r, c.g, c.b );
+			if ( max > 1 ) c.multiplyScalar( 1 / max );
+
+			this.children[ 0 ].material.color.copy( this.material.color );
+
+		}
+
+		// ignore world scale on light
+		this.matrixWorld.extractRotation( this.light.matrixWorld ).scale( this.scale ).copyPosition( this.light.matrixWorld );
+
+		this.children[ 0 ].matrixWorld.copy( this.matrixWorld );
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
+
+	}
+
+}
+
+export { RectAreaLightHelper };

jsm/helpers/VertexNormalsHelper.js

@@ -0,0 +1,95 @@
+import {
+	BufferGeometry,
+	Float32BufferAttribute,
+	LineSegments,
+	LineBasicMaterial,
+	Matrix3,
+	Vector3
+} from 'three';
+
+const _v1 = new Vector3();
+const _v2 = new Vector3();
+const _normalMatrix = new Matrix3();
+
+class VertexNormalsHelper extends LineSegments {
+
+	constructor( object, size = 1, color = 0xff0000 ) {
+
+		const geometry = new BufferGeometry();
+
+		const nNormals = object.geometry.attributes.normal.count;
+		const positions = new Float32BufferAttribute( nNormals * 2 * 3, 3 );
+
+		geometry.setAttribute( 'position', positions );
+
+		super( geometry, new LineBasicMaterial( { color, toneMapped: false } ) );
+
+		this.object = object;
+		this.size = size;
+		this.type = 'VertexNormalsHelper';
+
+		//
+
+		this.matrixAutoUpdate = false;
+
+		this.update();
+
+	}
+
+	update() {
+
+		this.object.updateMatrixWorld( true );
+
+		_normalMatrix.getNormalMatrix( this.object.matrixWorld );
+
+		const matrixWorld = this.object.matrixWorld;
+
+		const position = this.geometry.attributes.position;
+
+		//
+
+		const objGeometry = this.object.geometry;
+
+		if ( objGeometry && objGeometry.isGeometry ) {
+
+			console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use BufferGeometry instead.' );
+			return;
+
+		} else if ( objGeometry && objGeometry.isBufferGeometry ) {
+
+			const objPos = objGeometry.attributes.position;
+
+			const objNorm = objGeometry.attributes.normal;
+
+			let idx = 0;
+
+			// for simplicity, ignore index and drawcalls, and render every normal
+
+			for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
+
+				_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
+
+				_v2.fromBufferAttribute( objNorm, j );
+
+				_v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
+
+				position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
+
+				idx = idx + 1;
+
+				position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
+
+				idx = idx + 1;
+
+			}
+
+		}
+
+		position.needsUpdate = true;
+
+	}
+
+}
+
+
+export { VertexNormalsHelper };

jsm/helpers/VertexTangentsHelper.js

@@ -0,0 +1,81 @@
+import {
+	BufferGeometry,
+	Float32BufferAttribute,
+	LineSegments,
+	LineBasicMaterial,
+	Vector3
+} from 'three';
+
+const _v1 = new Vector3();
+const _v2 = new Vector3();
+
+class VertexTangentsHelper extends LineSegments {
+
+	constructor( object, size = 1, color = 0x00ffff ) {
+
+		const geometry = new BufferGeometry();
+
+		const nTangents = object.geometry.attributes.tangent.count;
+		const positions = new Float32BufferAttribute( nTangents * 2 * 3, 3 );
+
+		geometry.setAttribute( 'position', positions );
+
+		super( geometry, new LineBasicMaterial( { color, toneMapped: false } ) );
+
+		this.object = object;
+		this.size = size;
+		this.type = 'VertexTangentsHelper';
+
+		//
+
+		this.matrixAutoUpdate = false;
+
+		this.update();
+
+	}
+
+	update() {
+
+		this.object.updateMatrixWorld( true );
+
+		const matrixWorld = this.object.matrixWorld;
+
+		const position = this.geometry.attributes.position;
+
+		//
+
+		const objGeometry = this.object.geometry;
+
+		const objPos = objGeometry.attributes.position;
+
+		const objTan = objGeometry.attributes.tangent;
+
+		let idx = 0;
+
+		// for simplicity, ignore index and drawcalls, and render every tangent
+
+		for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
+
+			_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
+
+			_v2.fromBufferAttribute( objTan, j );
+
+			_v2.transformDirection( matrixWorld ).multiplyScalar( this.size ).add( _v1 );
+
+			position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
+
+			idx = idx + 1;
+
+			position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
+
+			idx = idx + 1;
+
+		}
+
+		position.needsUpdate = true;
+
+	}
+
+}
+
+export { VertexTangentsHelper };

jsm/helpers/ViewHelper.js

@@ -0,0 +1,295 @@
+import * as THREE from 'three';
+
+const vpTemp = new THREE.Vector4();
+
+class ViewHelper extends THREE.Object3D {
+
+	constructor( editorCamera, dom ) {
+
+		super();
+
+		this.animating = false;
+		this.controls = null;
+
+		const color1 = new THREE.Color( '#ff3653' );
+		const color2 = new THREE.Color( '#8adb00' );
+		const color3 = new THREE.Color( '#2c8fff' );
+
+		const interactiveObjects = [];
+		const raycaster = new THREE.Raycaster();
+		const mouse = new THREE.Vector2();
+		const dummy = new THREE.Object3D();
+
+		const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+		camera.position.set( 0, 0, 2 );
+
+		const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+
+		const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
+		const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
+		const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
+
+		yAxis.rotation.z = Math.PI / 2;
+		zAxis.rotation.y = - Math.PI / 2;
+
+		this.add( xAxis );
+		this.add( zAxis );
+		this.add( yAxis );
+
+		const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
+		posXAxisHelper.userData.type = 'posX';
+		const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
+		posYAxisHelper.userData.type = 'posY';
+		const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
+		posZAxisHelper.userData.type = 'posZ';
+		const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
+		negXAxisHelper.userData.type = 'negX';
+		const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
+		negYAxisHelper.userData.type = 'negY';
+		const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
+		negZAxisHelper.userData.type = 'negZ';
+
+		posXAxisHelper.position.x = 1;
+		posYAxisHelper.position.y = 1;
+		posZAxisHelper.position.z = 1;
+		negXAxisHelper.position.x = - 1;
+		negXAxisHelper.scale.setScalar( 0.8 );
+		negYAxisHelper.position.y = - 1;
+		negYAxisHelper.scale.setScalar( 0.8 );
+		negZAxisHelper.position.z = - 1;
+		negZAxisHelper.scale.setScalar( 0.8 );
+
+		this.add( posXAxisHelper );
+		this.add( posYAxisHelper );
+		this.add( posZAxisHelper );
+		this.add( negXAxisHelper );
+		this.add( negYAxisHelper );
+		this.add( negZAxisHelper );
+
+		interactiveObjects.push( posXAxisHelper );
+		interactiveObjects.push( posYAxisHelper );
+		interactiveObjects.push( posZAxisHelper );
+		interactiveObjects.push( negXAxisHelper );
+		interactiveObjects.push( negYAxisHelper );
+		interactiveObjects.push( negZAxisHelper );
+
+		const point = new THREE.Vector3();
+		const dim = 128;
+		const turnRate = 2 * Math.PI; // turn rate in angles per second
+
+		this.render = function ( renderer ) {
+
+			this.quaternion.copy( editorCamera.quaternion ).invert();
+			this.updateMatrixWorld();
+
+			point.set( 0, 0, 1 );
+			point.applyQuaternion( editorCamera.quaternion );
+
+			if ( point.x >= 0 ) {
+
+				posXAxisHelper.material.opacity = 1;
+				negXAxisHelper.material.opacity = 0.5;
+
+			} else {
+
+				posXAxisHelper.material.opacity = 0.5;
+				negXAxisHelper.material.opacity = 1;
+
+			}
+
+			if ( point.y >= 0 ) {
+
+				posYAxisHelper.material.opacity = 1;
+				negYAxisHelper.material.opacity = 0.5;
+
+			} else {
+
+				posYAxisHelper.material.opacity = 0.5;
+				negYAxisHelper.material.opacity = 1;
+
+			}
+
+			if ( point.z >= 0 ) {
+
+				posZAxisHelper.material.opacity = 1;
+				negZAxisHelper.material.opacity = 0.5;
+
+			} else {
+
+				posZAxisHelper.material.opacity = 0.5;
+				negZAxisHelper.material.opacity = 1;
+
+			}
+
+			//
+
+			const x = dom.offsetWidth - dim;
+
+			renderer.clearDepth();
+
+			renderer.getViewport( vpTemp );
+			renderer.setViewport( x, 0, dim, dim );
+
+			renderer.render( this, camera );
+
+			renderer.setViewport( vpTemp.x, vpTemp.y, vpTemp.z, vpTemp.w );
+
+		};
+
+		const targetPosition = new THREE.Vector3();
+		const targetQuaternion = new THREE.Quaternion();
+
+		const q1 = new THREE.Quaternion();
+		const q2 = new THREE.Quaternion();
+		let radius = 0;
+
+		this.handleClick = function ( event ) {
+
+			if ( this.animating === true ) return false;
+
+			const rect = dom.getBoundingClientRect();
+			const offsetX = rect.left + ( dom.offsetWidth - dim );
+			const offsetY = rect.top + ( dom.offsetHeight - dim );
+			mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
+			mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
+
+			raycaster.setFromCamera( mouse, camera );
+
+			const intersects = raycaster.intersectObjects( interactiveObjects );
+
+			if ( intersects.length > 0 ) {
+
+				const intersection = intersects[ 0 ];
+				const object = intersection.object;
+
+				prepareAnimationData( object, this.controls.center );
+
+				this.animating = true;
+
+				return true;
+
+			} else {
+
+				return false;
+
+			}
+
+		};
+
+		this.update = function ( delta ) {
+
+			const step = delta * turnRate;
+			const focusPoint = this.controls.center;
+
+			// animate position by doing a slerp and then scaling the position on the unit sphere
+
+			q1.rotateTowards( q2, step );
+			editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
+
+			// animate orientation
+
+			editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+
+			if ( q1.angleTo( q2 ) === 0 ) {
+
+				this.animating = false;
+
+			}
+
+		};
+
+		function prepareAnimationData( object, focusPoint ) {
+
+			switch ( object.userData.type ) {
+
+				case 'posX':
+					targetPosition.set( 1, 0, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
+					break;
+
+				case 'posY':
+					targetPosition.set( 0, 1, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
+					break;
+
+				case 'posZ':
+					targetPosition.set( 0, 0, 1 );
+					targetQuaternion.setFromEuler( new THREE.Euler() );
+					break;
+
+				case 'negX':
+					targetPosition.set( - 1, 0, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
+					break;
+
+				case 'negY':
+					targetPosition.set( 0, - 1, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
+					break;
+
+				case 'negZ':
+					targetPosition.set( 0, 0, - 1 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
+					break;
+
+				default:
+					console.error( 'ViewHelper: Invalid axis.' );
+
+			}
+
+			//
+
+			radius = editorCamera.position.distanceTo( focusPoint );
+			targetPosition.multiplyScalar( radius ).add( focusPoint );
+
+			dummy.position.copy( focusPoint );
+
+			dummy.lookAt( editorCamera.position );
+			q1.copy( dummy.quaternion );
+
+			dummy.lookAt( targetPosition );
+			q2.copy( dummy.quaternion );
+
+		}
+
+		function getAxisMaterial( color ) {
+
+			return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
+
+		}
+
+		function getSpriteMaterial( color, text = null ) {
+
+			const canvas = document.createElement( 'canvas' );
+			canvas.width = 64;
+			canvas.height = 64;
+
+			const context = canvas.getContext( '2d' );
+			context.beginPath();
+			context.arc( 32, 32, 16, 0, 2 * Math.PI );
+			context.closePath();
+			context.fillStyle = color.getStyle();
+			context.fill();
+
+			if ( text !== null ) {
+
+				context.font = '24px Arial';
+				context.textAlign = 'center';
+				context.fillStyle = '#000000';
+				context.fillText( text, 32, 41 );
+
+			}
+
+			const texture = new THREE.CanvasTexture( canvas );
+
+			return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
+
+		}
+
+	}
+
+}
+
+ViewHelper.prototype.isViewHelper = true;
+
+export { ViewHelper };

jsm/interactive/HTMLMesh.js

@@ -0,0 +1,386 @@
+import {
+	CanvasTexture,
+	LinearFilter,
+	Mesh,
+	MeshBasicMaterial,
+	PlaneGeometry,
+	sRGBEncoding
+} from 'three';
+
+class HTMLMesh extends Mesh {
+
+	constructor( dom ) {
+
+		const texture = new HTMLTexture( dom );
+
+		const geometry = new PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
+		const material = new MeshBasicMaterial( { map: texture, toneMapped: false } );
+
+		super( geometry, material );
+
+		function onEvent( event ) {
+
+			material.map.dispatchDOMEvent( event );
+
+		}
+
+		this.addEventListener( 'mousedown', onEvent );
+		this.addEventListener( 'mousemove', onEvent );
+		this.addEventListener( 'mouseup', onEvent );
+		this.addEventListener( 'click', onEvent );
+
+		this.dispose = function () {
+
+			geometry.dispose();
+			material.dispose();
+
+			material.map.dispose();
+
+			this.removeEventListener( 'mousedown', onEvent );
+			this.removeEventListener( 'mousemove', onEvent );
+			this.removeEventListener( 'mouseup', onEvent );
+			this.removeEventListener( 'click', onEvent );
+
+		};
+
+	}
+
+}
+
+class HTMLTexture extends CanvasTexture {
+
+	constructor( dom ) {
+
+		super( html2canvas( dom ) );
+
+		this.dom = dom;
+
+		this.anisotropy = 16;
+		this.encoding = sRGBEncoding;
+		this.minFilter = LinearFilter;
+		this.magFilter = LinearFilter;
+
+		// Create an observer on the DOM, and run html2canvas update in the next loop
+		const observer = new MutationObserver( () => {
+
+			if ( ! this.scheduleUpdate ) {
+
+				// ideally should use xr.requestAnimationFrame, here setTimeout to avoid passing the renderer
+				this.scheduleUpdate = setTimeout( () => this.update(), 16 );
+
+			}
+
+		} );
+
+		const config = { attributes: true, childList: true, subtree: true, characterData: true };
+		observer.observe( dom, config );
+
+		this.observer = observer;
+
+	}
+
+	dispatchDOMEvent( event ) {
+
+		if ( event.data ) {
+
+			htmlevent( this.dom, event.type, event.data.x, event.data.y );
+
+		}
+
+	}
+
+	update() {
+
+		this.image = html2canvas( this.dom );
+		this.needsUpdate = true;
+
+		this.scheduleUpdate = null;
+
+	}
+
+	dispose() {
+
+		if ( this.observer ) {
+
+			this.observer.disconnect();
+
+		}
+
+		this.scheduleUpdate = clearTimeout( this.scheduleUpdate );
+
+		super.dispose();
+
+	}
+
+}
+
+
+//
+
+const canvases = new WeakMap();
+
+function html2canvas( element ) {
+
+	const range = document.createRange();
+
+	function Clipper( context ) {
+
+		const clips = [];
+		let isClipping = false;
+
+		function doClip() {
+
+			if ( isClipping ) {
+
+				isClipping = false;
+				context.restore();
+
+			}
+
+			if ( clips.length === 0 ) return;
+
+			let minX = - Infinity, minY = - Infinity;
+			let maxX = Infinity, maxY = Infinity;
+
+			for ( let i = 0; i < clips.length; i ++ ) {
+
+				const clip = clips[ i ];
+
+				minX = Math.max( minX, clip.x );
+				minY = Math.max( minY, clip.y );
+				maxX = Math.min( maxX, clip.x + clip.width );
+				maxY = Math.min( maxY, clip.y + clip.height );
+
+			}
+
+			context.save();
+			context.beginPath();
+			context.rect( minX, minY, maxX - minX, maxY - minY );
+			context.clip();
+
+			isClipping = true;
+
+		}
+
+		return {
+
+			add: function ( clip ) {
+
+				clips.push( clip );
+				doClip();
+
+			},
+
+			remove: function () {
+
+				clips.pop();
+				doClip();
+
+			}
+
+		};
+
+	}
+
+	function drawText( style, x, y, string ) {
+
+		if ( string !== '' ) {
+
+			if ( style.textTransform === 'uppercase' ) {
+
+				string = string.toUpperCase();
+
+			}
+
+			context.font = style.fontSize + ' ' + style.fontFamily;
+			context.textBaseline = 'top';
+			context.fillStyle = style.color;
+			context.fillText( string, x, y );
+
+		}
+
+	}
+
+	function drawBorder( style, which, x, y, width, height ) {
+
+		const borderWidth = style[ which + 'Width' ];
+		const borderStyle = style[ which + 'Style' ];
+		const borderColor = style[ which + 'Color' ];
+
+		if ( borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' ) {
+
+			context.strokeStyle = borderColor;
+			context.beginPath();
+			context.moveTo( x, y );
+			context.lineTo( x + width, y + height );
+			context.stroke();
+
+		}
+
+	}
+
+	function drawElement( element, style ) {
+
+		let x = 0, y = 0, width = 0, height = 0;
+
+		if ( element.nodeType === Node.TEXT_NODE ) {
+
+			// text
+
+			range.selectNode( element );
+
+			const rect = range.getBoundingClientRect();
+
+			x = rect.left - offset.left - 0.5;
+			y = rect.top - offset.top - 0.5;
+			width = rect.width;
+			height = rect.height;
+
+			drawText( style, x, y, element.nodeValue.trim() );
+
+		} else if ( element.nodeType === Node.COMMENT_NODE ) {
+
+			return;
+
+		} else if ( element instanceof HTMLCanvasElement ) {
+
+			// Canvas element
+			if ( element.style.display === 'none' ) return;
+
+			context.save();
+			const dpr = window.devicePixelRatio;
+			context.scale(1/dpr, 1/dpr);
+			context.drawImage(element, 0, 0 );
+			context.restore();
+
+		} else {
+
+			if ( element.style.display === 'none' ) return;
+
+			const rect = element.getBoundingClientRect();
+
+			x = rect.left - offset.left - 0.5;
+			y = rect.top - offset.top - 0.5;
+			width = rect.width;
+			height = rect.height;
+
+			style = window.getComputedStyle( element );
+
+			const backgroundColor = style.backgroundColor;
+
+			if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
+
+				context.fillStyle = backgroundColor;
+				context.fillRect( x, y, width, height );
+
+			}
+
+			drawBorder( style, 'borderTop', x, y, width, 0 );
+			drawBorder( style, 'borderLeft', x, y, 0, height );
+			drawBorder( style, 'borderBottom', x, y + height, width, 0 );
+			drawBorder( style, 'borderRight', x + width, y, 0, height );
+
+			if ( element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
+
+				clipper.add( { x: x, y: y, width: width, height: height } );
+
+				drawText( style, x + parseInt( style.paddingLeft ), y + parseInt( style.paddingTop ), element.value );
+
+				clipper.remove();
+
+			}
+
+		}
+
+		/*
+		// debug
+		context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
+		context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
+		*/
+
+		const isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
+
+		if ( isClipping ) clipper.add( { x: x, y: y, width: width, height: height } );
+
+		for ( let i = 0; i < element.childNodes.length; i ++ ) {
+
+			drawElement( element.childNodes[ i ], style );
+
+		}
+
+		if ( isClipping ) clipper.remove();
+
+	}
+
+	const offset = element.getBoundingClientRect();
+
+	let canvas;
+
+	if ( canvases.has( element ) ) {
+
+		canvas = canvases.get( element );
+
+	} else {
+
+		canvas = document.createElement( 'canvas' );
+		canvas.width = offset.width;
+		canvas.height = offset.height;
+
+	}
+
+	const context = canvas.getContext( '2d'/*, { alpha: false }*/ );
+
+	const clipper = new Clipper( context );
+
+	// console.time( 'drawElement' );
+
+	drawElement( element );
+
+	// console.timeEnd( 'drawElement' );
+
+	return canvas;
+
+}
+
+function htmlevent( element, event, x, y ) {
+
+	const mouseEventInit = {
+		clientX: ( x * element.offsetWidth ) + element.offsetLeft,
+		clientY: ( y * element.offsetHeight ) + element.offsetTop,
+		view: element.ownerDocument.defaultView
+	};
+
+	window.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
+
+	const rect = element.getBoundingClientRect();
+
+	x = x * rect.width + rect.left;
+	y = y * rect.height + rect.top;
+
+	function traverse( element ) {
+
+		if ( element.nodeType !== Node.TEXT_NODE && element.nodeType !== Node.COMMENT_NODE ) {
+
+			const rect = element.getBoundingClientRect();
+
+			if ( x > rect.left && x < rect.right && y > rect.top && y < rect.bottom ) {
+
+				element.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
+
+			}
+
+			for ( let i = 0; i < element.childNodes.length; i ++ ) {
+
+				traverse( element.childNodes[ i ] );
+
+			}
+
+		}
+
+	}
+
+	traverse( element );
+
+}
+
+export { HTMLMesh };

jsm/interactive/InteractiveGroup.js

@@ -0,0 +1,114 @@
+import {
+	Group,
+	Matrix4,
+	Raycaster,
+	Vector2
+} from 'three';
+
+const _pointer = new Vector2();
+const _event = { type: '', data: _pointer };
+
+class InteractiveGroup extends Group {
+
+	constructor( renderer, camera ) {
+
+		super();
+
+		const scope = this;
+
+		const raycaster = new Raycaster();
+		const tempMatrix = new Matrix4();
+
+		// Pointer Events
+
+		const element = renderer.domElement;
+
+		function onPointerEvent( event ) {
+
+			event.stopPropagation();
+
+			_pointer.x = ( event.clientX / element.clientWidth ) * 2 - 1;
+			_pointer.y = - ( event.clientY / element.clientHeight ) * 2 + 1;
+
+			raycaster.setFromCamera( _pointer, camera );
+
+			const intersects = raycaster.intersectObjects( scope.children, false );
+
+			if ( intersects.length > 0 ) {
+
+				const intersection = intersects[ 0 ];
+
+				const object = intersection.object;
+				const uv = intersection.uv;
+
+				_event.type = event.type;
+				_event.data.set( uv.x, 1 - uv.y );
+
+				object.dispatchEvent( _event );
+
+			}
+
+		}
+
+		element.addEventListener( 'pointerdown', onPointerEvent );
+		element.addEventListener( 'pointerup', onPointerEvent );
+		element.addEventListener( 'pointermove', onPointerEvent );
+		element.addEventListener( 'mousedown', onPointerEvent );
+		element.addEventListener( 'mouseup', onPointerEvent );
+		element.addEventListener( 'mousemove', onPointerEvent );
+		element.addEventListener( 'click', onPointerEvent );
+
+		// WebXR Controller Events
+		// TODO: Dispatch pointerevents too
+
+		const events = {
+			'move': 'mousemove',
+			'select': 'click',
+			'selectstart': 'mousedown',
+			'selectend': 'mouseup'
+		};
+
+		function onXRControllerEvent( event ) {
+
+			const controller = event.target;
+
+			tempMatrix.identity().extractRotation( controller.matrixWorld );
+
+			raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
+			raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
+
+			const intersections = raycaster.intersectObjects( scope.children, false );
+
+			if ( intersections.length > 0 ) {
+
+				const intersection = intersections[ 0 ];
+
+				const object = intersection.object;
+				const uv = intersection.uv;
+
+				_event.type = events[ event.type ];
+				_event.data.set( uv.x, 1 - uv.y );
+
+				object.dispatchEvent( _event );
+
+			}
+
+		}
+
+		const controller1 = renderer.xr.getController( 0 );
+		controller1.addEventListener( 'move', onXRControllerEvent );
+		controller1.addEventListener( 'select', onXRControllerEvent );
+		controller1.addEventListener( 'selectstart', onXRControllerEvent );
+		controller1.addEventListener( 'selectend', onXRControllerEvent );
+
+		const controller2 = renderer.xr.getController( 1 );
+		controller2.addEventListener( 'move', onXRControllerEvent );
+		controller2.addEventListener( 'select', onXRControllerEvent );
+		controller2.addEventListener( 'selectstart', onXRControllerEvent );
+		controller2.addEventListener( 'selectend', onXRControllerEvent );
+
+	}
+
+}
+
+export { InteractiveGroup };

jsm/interactive/SelectionBox.js

@@ -0,0 +1,227 @@
+import {
+	Frustum,
+	Vector3,
+	Matrix4,
+	Quaternion,
+} from 'three';
+
+/**
+ * This is a class to check whether objects are in a selection area in 3D space
+ */
+
+const _frustum = new Frustum();
+const _center = new Vector3();
+
+const _tmpPoint = new Vector3();
+
+const _vecNear = new Vector3();
+const _vecTopLeft = new Vector3();
+const _vecTopRight = new Vector3();
+const _vecDownRight = new Vector3();
+const _vecDownLeft = new Vector3();
+
+const _vecFarTopLeft = new Vector3();
+const _vecFarTopRight = new Vector3();
+const _vecFarDownRight = new Vector3();
+const _vecFarDownLeft = new Vector3();
+
+const _vectemp1 = new Vector3();
+const _vectemp2 = new Vector3();
+const _vectemp3 = new Vector3();
+
+const _matrix = new Matrix4();
+const _quaternion = new Quaternion();
+const _scale = new Vector3();
+
+class SelectionBox {
+
+	constructor( camera, scene, deep = Number.MAX_VALUE ) {
+
+		this.camera = camera;
+		this.scene = scene;
+		this.startPoint = new Vector3();
+		this.endPoint = new Vector3();
+		this.collection = [];
+		this.instances = {};
+		this.deep = deep;
+
+	}
+
+	select( startPoint, endPoint ) {
+
+		this.startPoint = startPoint || this.startPoint;
+		this.endPoint = endPoint || this.endPoint;
+		this.collection = [];
+
+		this.updateFrustum( this.startPoint, this.endPoint );
+		this.searchChildInFrustum( _frustum, this.scene );
+
+		return this.collection;
+
+	}
+
+	updateFrustum( startPoint, endPoint ) {
+
+		startPoint = startPoint || this.startPoint;
+		endPoint = endPoint || this.endPoint;
+
+		// Avoid invalid frustum
+
+		if ( startPoint.x === endPoint.x ) {
+
+			endPoint.x += Number.EPSILON;
+
+		}
+
+		if ( startPoint.y === endPoint.y ) {
+
+			endPoint.y += Number.EPSILON;
+
+		}
+
+		this.camera.updateProjectionMatrix();
+		this.camera.updateMatrixWorld();
+
+		if ( this.camera.isPerspectiveCamera ) {
+
+			_tmpPoint.copy( startPoint );
+			_tmpPoint.x = Math.min( startPoint.x, endPoint.x );
+			_tmpPoint.y = Math.max( startPoint.y, endPoint.y );
+			endPoint.x = Math.max( startPoint.x, endPoint.x );
+			endPoint.y = Math.min( startPoint.y, endPoint.y );
+
+			_vecNear.setFromMatrixPosition( this.camera.matrixWorld );
+			_vecTopLeft.copy( _tmpPoint );
+			_vecTopRight.set( endPoint.x, _tmpPoint.y, 0 );
+			_vecDownRight.copy( endPoint );
+			_vecDownLeft.set( _tmpPoint.x, endPoint.y, 0 );
+
+			_vecTopLeft.unproject( this.camera );
+			_vecTopRight.unproject( this.camera );
+			_vecDownRight.unproject( this.camera );
+			_vecDownLeft.unproject( this.camera );
+
+			_vectemp1.copy( _vecTopLeft ).sub( _vecNear );
+			_vectemp2.copy( _vecTopRight ).sub( _vecNear );
+			_vectemp3.copy( _vecDownRight ).sub( _vecNear );
+			_vectemp1.normalize();
+			_vectemp2.normalize();
+			_vectemp3.normalize();
+
+			_vectemp1.multiplyScalar( this.deep );
+			_vectemp2.multiplyScalar( this.deep );
+			_vectemp3.multiplyScalar( this.deep );
+			_vectemp1.add( _vecNear );
+			_vectemp2.add( _vecNear );
+			_vectemp3.add( _vecNear );
+
+			const planes = _frustum.planes;
+
+			planes[ 0 ].setFromCoplanarPoints( _vecNear, _vecTopLeft, _vecTopRight );
+			planes[ 1 ].setFromCoplanarPoints( _vecNear, _vecTopRight, _vecDownRight );
+			planes[ 2 ].setFromCoplanarPoints( _vecDownRight, _vecDownLeft, _vecNear );
+			planes[ 3 ].setFromCoplanarPoints( _vecDownLeft, _vecTopLeft, _vecNear );
+			planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+			planes[ 5 ].setFromCoplanarPoints( _vectemp3, _vectemp2, _vectemp1 );
+			planes[ 5 ].normal.multiplyScalar( - 1 );
+
+		} else if ( this.camera.isOrthographicCamera ) {
+
+			const left = Math.min( startPoint.x, endPoint.x );
+			const top = Math.max( startPoint.y, endPoint.y );
+			const right = Math.max( startPoint.x, endPoint.x );
+			const down = Math.min( startPoint.y, endPoint.y );
+
+			_vecTopLeft.set( left, top, - 1 );
+			_vecTopRight.set( right, top, - 1 );
+			_vecDownRight.set( right, down, - 1 );
+			_vecDownLeft.set( left, down, - 1 );
+
+			_vecFarTopLeft.set( left, top, 1 );
+			_vecFarTopRight.set( right, top, 1 );
+			_vecFarDownRight.set( right, down, 1 );
+			_vecFarDownLeft.set( left, down, 1 );
+
+			_vecTopLeft.unproject( this.camera );
+			_vecTopRight.unproject( this.camera );
+			_vecDownRight.unproject( this.camera );
+			_vecDownLeft.unproject( this.camera );
+
+			_vecFarTopLeft.unproject( this.camera );
+			_vecFarTopRight.unproject( this.camera );
+			_vecFarDownRight.unproject( this.camera );
+			_vecFarDownLeft.unproject( this.camera );
+
+			const planes = _frustum.planes;
+
+			planes[ 0 ].setFromCoplanarPoints( _vecTopLeft, _vecFarTopLeft, _vecFarTopRight );
+			planes[ 1 ].setFromCoplanarPoints( _vecTopRight, _vecFarTopRight, _vecFarDownRight );
+			planes[ 2 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarDownLeft, _vecDownLeft );
+			planes[ 3 ].setFromCoplanarPoints( _vecFarDownLeft, _vecFarTopLeft, _vecTopLeft );
+			planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+			planes[ 5 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarTopRight, _vecFarTopLeft );
+			planes[ 5 ].normal.multiplyScalar( - 1 );
+
+		} else {
+
+			console.error( 'THREE.SelectionBox: Unsupported camera type.' );
+
+		}
+
+	}
+
+	searchChildInFrustum( frustum, object ) {
+
+		if ( object.isMesh || object.isLine || object.isPoints ) {
+
+			if ( object.isInstancedMesh ) {
+
+				this.instances[ object.uuid ] = [];
+
+				for ( let instanceId = 0; instanceId < object.count; instanceId ++ ) {
+
+					object.getMatrixAt( instanceId, _matrix );
+					_matrix.decompose( _center, _quaternion, _scale );
+					_center.applyMatrix4( object.matrixWorld );
+
+					if ( frustum.containsPoint( _center ) ) {
+
+						this.instances[ object.uuid ].push( instanceId );
+
+					}
+
+				}
+
+			} else {
+
+				if ( object.geometry.boundingSphere === null ) object.geometry.computeBoundingSphere();
+
+				_center.copy( object.geometry.boundingSphere.center );
+
+				_center.applyMatrix4( object.matrixWorld );
+
+				if ( frustum.containsPoint( _center ) ) {
+
+					this.collection.push( object );
+
+				}
+
+			}
+
+		}
+
+		if ( object.children.length > 0 ) {
+
+			for ( let x = 0; x < object.children.length; x ++ ) {
+
+				this.searchChildInFrustum( frustum, object.children[ x ] );
+
+			}
+
+		}
+
+	}
+
+}
+
+export { SelectionBox };

jsm/interactive/SelectionHelper.js

@@ -0,0 +1,95 @@
+import {
+	Vector2
+} from 'three';
+
+class SelectionHelper {
+
+	constructor( selectionBox, renderer, cssClassName ) {
+
+		this.element = document.createElement( 'div' );
+		this.element.classList.add( cssClassName );
+		this.element.style.pointerEvents = 'none';
+
+		this.renderer = renderer;
+
+		this.startPoint = new Vector2();
+		this.pointTopLeft = new Vector2();
+		this.pointBottomRight = new Vector2();
+
+		this.isDown = false;
+
+		this.onPointerDown = function ( event ) {
+
+			this.isDown = true;
+			this.onSelectStart( event );
+
+		}.bind( this );
+
+		this.onPointerMove = function ( event ) {
+
+			if ( this.isDown ) {
+
+				this.onSelectMove( event );
+
+			}
+
+		}.bind( this );
+
+		this.onPointerUp = function ( ) {
+
+			this.isDown = false;
+			this.onSelectOver();
+
+		}.bind( this );
+
+		this.renderer.domElement.addEventListener( 'pointerdown', this.onPointerDown );
+		this.renderer.domElement.addEventListener( 'pointermove', this.onPointerMove );
+		this.renderer.domElement.addEventListener( 'pointerup', this.onPointerUp );
+
+	}
+
+	dispose() {
+
+		this.renderer.domElement.removeEventListener( 'pointerdown', this.onPointerDown );
+		this.renderer.domElement.removeEventListener( 'pointermove', this.onPointerMove );
+		this.renderer.domElement.removeEventListener( 'pointerup', this.onPointerUp );
+
+	}
+
+	onSelectStart( event ) {
+
+		this.renderer.domElement.parentElement.appendChild( this.element );
+
+		this.element.style.left = event.clientX + 'px';
+		this.element.style.top = event.clientY + 'px';
+		this.element.style.width = '0px';
+		this.element.style.height = '0px';
+
+		this.startPoint.x = event.clientX;
+		this.startPoint.y = event.clientY;
+
+	}
+
+	onSelectMove( event ) {
+
+		this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX );
+		this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY );
+		this.pointTopLeft.x = Math.min( this.startPoint.x, event.clientX );
+		this.pointTopLeft.y = Math.min( this.startPoint.y, event.clientY );
+
+		this.element.style.left = this.pointTopLeft.x + 'px';
+		this.element.style.top = this.pointTopLeft.y + 'px';
+		this.element.style.width = ( this.pointBottomRight.x - this.pointTopLeft.x ) + 'px';
+		this.element.style.height = ( this.pointBottomRight.y - this.pointTopLeft.y ) + 'px';
+
+	}
+
+	onSelectOver() {
+
+		this.element.parentElement.removeChild( this.element );
+
+	}
+
+}
+
+export { SelectionHelper };

jsm/libs/OimoPhysics/index.js

@@ -0,0 +1,43 @@
+import {oimo} from './OimoPhysics.js';
+
+// dynamics
+export const World = oimo.dynamics.World;
+export const RigidBodyType = oimo.dynamics.rigidbody.RigidBodyType;
+export const RigidBodyConfig = oimo.dynamics.rigidbody.RigidBodyConfig;
+export const ShapeConfig = oimo.dynamics.rigidbody.ShapeConfig;
+export const RigidBody = oimo.dynamics.rigidbody.RigidBody;
+export const Shape = oimo.dynamics.rigidbody.Shape;
+export const SphericalJoint = oimo.dynamics.constraint.joint.SphericalJoint;
+export const RevoluteJointConfig = oimo.dynamics.constraint.joint.RevoluteJointConfig;
+export const UniversalJointConfig = oimo.dynamics.constraint.joint.UniversalJointConfig;
+export const CylindricalJoint = oimo.dynamics.constraint.joint.CylindricalJoint;
+export const PrismaticJoint = oimo.dynamics.constraint.joint.PrismaticJoint;
+export const PrismaticJointConfig = oimo.dynamics.constraint.joint.PrismaticJointConfig;
+export const RevoluteJoint = oimo.dynamics.constraint.joint.RevoluteJoint;
+export const RagdollJoint = oimo.dynamics.constraint.joint.RagdollJoint;
+export const CylindricalJointConfig = oimo.dynamics.constraint.joint.CylindricalJointConfig;
+export const SphericalJointConfig = oimo.dynamics.constraint.joint.SphericalJointConfig;
+export const RagdollJointConfig = oimo.dynamics.constraint.joint.RagdollJointConfig;
+export const SpringDamper = oimo.dynamics.constraint.joint.SpringDamper;
+export const TranslationalLimitMotor = oimo.dynamics.constraint.joint.TranslationalLimitMotor;
+export const RotationalLimitMotor = oimo.dynamics.constraint.joint.RotationalLimitMotor;
+export const UniversalJoint = oimo.dynamics.constraint.joint.UniversalJoint;
+
+// common
+export const Vec3 = oimo.common.Vec3;
+export const Quat = oimo.common.Quat;
+export const Mat3 = oimo.common.Mat3;
+export const MathUtil = oimo.common.MathUtil;
+export const Transform = oimo.common.Transform;
+
+// collision
+export const OCapsuleGeometry = oimo.collision.geometry.CapsuleGeometry;
+export const OConvexHullGeometry = oimo.collision.geometry.ConvexHullGeometry;
+export const OBoxGeometry = oimo.collision.geometry.BoxGeometry;
+export const OSphereGeometry = oimo.collision.geometry.SphereGeometry;
+export const OCylinderGeometry = oimo.collision.geometry.CylinderGeometry;
+export const OConeGeometry = oimo.collision.geometry.ConeGeometry;
+export const OGeometry = oimo.collision.geometry.Geometry;
+
+// callback
+export const RayCastClosest = oimo.dynamics.callback.RayCastClosest;

jsm/libs/motion-controllers.module.js

@@ -0,0 +1,397 @@
+/**
+ * @webxr-input-profiles/motion-controllers 1.0.0 https://github.com/immersive-web/webxr-input-profiles
+ */
+
+const Constants = {
+  Handedness: Object.freeze({
+    NONE: 'none',
+    LEFT: 'left',
+    RIGHT: 'right'
+  }),
+
+  ComponentState: Object.freeze({
+    DEFAULT: 'default',
+    TOUCHED: 'touched',
+    PRESSED: 'pressed'
+  }),
+
+  ComponentProperty: Object.freeze({
+    BUTTON: 'button',
+    X_AXIS: 'xAxis',
+    Y_AXIS: 'yAxis',
+    STATE: 'state'
+  }),
+
+  ComponentType: Object.freeze({
+    TRIGGER: 'trigger',
+    SQUEEZE: 'squeeze',
+    TOUCHPAD: 'touchpad',
+    THUMBSTICK: 'thumbstick',
+    BUTTON: 'button'
+  }),
+
+  ButtonTouchThreshold: 0.05,
+
+  AxisTouchThreshold: 0.1,
+
+  VisualResponseProperty: Object.freeze({
+    TRANSFORM: 'transform',
+    VISIBILITY: 'visibility'
+  })
+};
+
+/**
+ * @description Static helper function to fetch a JSON file and turn it into a JS object
+ * @param {string} path - Path to JSON file to be fetched
+ */
+async function fetchJsonFile(path) {
+  const response = await fetch(path);
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  } else {
+    return response.json();
+  }
+}
+
+async function fetchProfilesList(basePath) {
+  if (!basePath) {
+    throw new Error('No basePath supplied');
+  }
+
+  const profileListFileName = 'profilesList.json';
+  const profilesList = await fetchJsonFile(`${basePath}/${profileListFileName}`);
+  return profilesList;
+}
+
+async function fetchProfile(xrInputSource, basePath, defaultProfile = null, getAssetPath = true) {
+  if (!xrInputSource) {
+    throw new Error('No xrInputSource supplied');
+  }
+
+  if (!basePath) {
+    throw new Error('No basePath supplied');
+  }
+
+  // Get the list of profiles
+  const supportedProfilesList = await fetchProfilesList(basePath);
+
+  // Find the relative path to the first requested profile that is recognized
+  let match;
+  xrInputSource.profiles.some((profileId) => {
+    const supportedProfile = supportedProfilesList[profileId];
+    if (supportedProfile) {
+      match = {
+        profileId,
+        profilePath: `${basePath}/${supportedProfile.path}`,
+        deprecated: !!supportedProfile.deprecated
+      };
+    }
+    return !!match;
+  });
+
+  if (!match) {
+    if (!defaultProfile) {
+      throw new Error('No matching profile name found');
+    }
+
+    const supportedProfile = supportedProfilesList[defaultProfile];
+    if (!supportedProfile) {
+      throw new Error(`No matching profile name found and default profile "${defaultProfile}" missing.`);
+    }
+
+    match = {
+      profileId: defaultProfile,
+      profilePath: `${basePath}/${supportedProfile.path}`,
+      deprecated: !!supportedProfile.deprecated
+    };
+  }
+
+  const profile = await fetchJsonFile(match.profilePath);
+
+  let assetPath;
+  if (getAssetPath) {
+    let layout;
+    if (xrInputSource.handedness === 'any') {
+      layout = profile.layouts[Object.keys(profile.layouts)[0]];
+    } else {
+      layout = profile.layouts[xrInputSource.handedness];
+    }
+    if (!layout) {
+      throw new Error(
+        `No matching handedness, ${xrInputSource.handedness}, in profile ${match.profileId}`
+      );
+    }
+
+    if (layout.assetPath) {
+      assetPath = match.profilePath.replace('profile.json', layout.assetPath);
+    }
+  }
+
+  return { profile, assetPath };
+}
+
+/** @constant {Object} */
+const defaultComponentValues = {
+  xAxis: 0,
+  yAxis: 0,
+  button: 0,
+  state: Constants.ComponentState.DEFAULT
+};
+
+/**
+ * @description Converts an X, Y coordinate from the range -1 to 1 (as reported by the Gamepad
+ * API) to the range 0 to 1 (for interpolation). Also caps the X, Y values to be bounded within
+ * a circle. This ensures that thumbsticks are not animated outside the bounds of their physical
+ * range of motion and touchpads do not report touch locations off their physical bounds.
+ * @param {number} x The original x coordinate in the range -1 to 1
+ * @param {number} y The original y coordinate in the range -1 to 1
+ */
+function normalizeAxes(x = 0, y = 0) {
+  let xAxis = x;
+  let yAxis = y;
+
+  // Determine if the point is outside the bounds of the circle
+  // and, if so, place it on the edge of the circle
+  const hypotenuse = Math.sqrt((x * x) + (y * y));
+  if (hypotenuse > 1) {
+    const theta = Math.atan2(y, x);
+    xAxis = Math.cos(theta);
+    yAxis = Math.sin(theta);
+  }
+
+  // Scale and move the circle so values are in the interpolation range.  The circle's origin moves
+  // from (0, 0) to (0.5, 0.5). The circle's radius scales from 1 to be 0.5.
+  const result = {
+    normalizedXAxis: (xAxis * 0.5) + 0.5,
+    normalizedYAxis: (yAxis * 0.5) + 0.5
+  };
+  return result;
+}
+
+/**
+ * Contains the description of how the 3D model should visually respond to a specific user input.
+ * This is accomplished by initializing the object with the name of a node in the 3D model and
+ * property that need to be modified in response to user input, the name of the nodes representing
+ * the allowable range of motion, and the name of the input which triggers the change. In response
+ * to the named input changing, this object computes the appropriate weighting to use for
+ * interpolating between the range of motion nodes.
+ */
+class VisualResponse {
+  constructor(visualResponseDescription) {
+    this.componentProperty = visualResponseDescription.componentProperty;
+    this.states = visualResponseDescription.states;
+    this.valueNodeName = visualResponseDescription.valueNodeName;
+    this.valueNodeProperty = visualResponseDescription.valueNodeProperty;
+
+    if (this.valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM) {
+      this.minNodeName = visualResponseDescription.minNodeName;
+      this.maxNodeName = visualResponseDescription.maxNodeName;
+    }
+
+    // Initializes the response's current value based on default data
+    this.value = 0;
+    this.updateFromComponent(defaultComponentValues);
+  }
+
+  /**
+   * Computes the visual response's interpolation weight based on component state
+   * @param {Object} componentValues - The component from which to update
+   * @param {number} xAxis - The reported X axis value of the component
+   * @param {number} yAxis - The reported Y axis value of the component
+   * @param {number} button - The reported value of the component's button
+   * @param {string} state - The component's active state
+   */
+  updateFromComponent({
+    xAxis, yAxis, button, state
+  }) {
+    const { normalizedXAxis, normalizedYAxis } = normalizeAxes(xAxis, yAxis);
+    switch (this.componentProperty) {
+      case Constants.ComponentProperty.X_AXIS:
+        this.value = (this.states.includes(state)) ? normalizedXAxis : 0.5;
+        break;
+      case Constants.ComponentProperty.Y_AXIS:
+        this.value = (this.states.includes(state)) ? normalizedYAxis : 0.5;
+        break;
+      case Constants.ComponentProperty.BUTTON:
+        this.value = (this.states.includes(state)) ? button : 0;
+        break;
+      case Constants.ComponentProperty.STATE:
+        if (this.valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY) {
+          this.value = (this.states.includes(state));
+        } else {
+          this.value = this.states.includes(state) ? 1.0 : 0.0;
+        }
+        break;
+      default:
+        throw new Error(`Unexpected visualResponse componentProperty ${this.componentProperty}`);
+    }
+  }
+}
+
+class Component {
+  /**
+   * @param {Object} componentId - Id of the component
+   * @param {Object} componentDescription - Description of the component to be created
+   */
+  constructor(componentId, componentDescription) {
+    if (!componentId
+     || !componentDescription
+     || !componentDescription.visualResponses
+     || !componentDescription.gamepadIndices
+     || Object.keys(componentDescription.gamepadIndices).length === 0) {
+      throw new Error('Invalid arguments supplied');
+    }
+
+    this.id = componentId;
+    this.type = componentDescription.type;
+    this.rootNodeName = componentDescription.rootNodeName;
+    this.touchPointNodeName = componentDescription.touchPointNodeName;
+
+    // Build all the visual responses for this component
+    this.visualResponses = {};
+    Object.keys(componentDescription.visualResponses).forEach((responseName) => {
+      const visualResponse = new VisualResponse(componentDescription.visualResponses[responseName]);
+      this.visualResponses[responseName] = visualResponse;
+    });
+
+    // Set default values
+    this.gamepadIndices = Object.assign({}, componentDescription.gamepadIndices);
+
+    this.values = {
+      state: Constants.ComponentState.DEFAULT,
+      button: (this.gamepadIndices.button !== undefined) ? 0 : undefined,
+      xAxis: (this.gamepadIndices.xAxis !== undefined) ? 0 : undefined,
+      yAxis: (this.gamepadIndices.yAxis !== undefined) ? 0 : undefined
+    };
+  }
+
+  get data() {
+    const data = { id: this.id, ...this.values };
+    return data;
+  }
+
+  /**
+   * @description Poll for updated data based on current gamepad state
+   * @param {Object} gamepad - The gamepad object from which the component data should be polled
+   */
+  updateFromGamepad(gamepad) {
+    // Set the state to default before processing other data sources
+    this.values.state = Constants.ComponentState.DEFAULT;
+
+    // Get and normalize button
+    if (this.gamepadIndices.button !== undefined
+        && gamepad.buttons.length > this.gamepadIndices.button) {
+      const gamepadButton = gamepad.buttons[this.gamepadIndices.button];
+      this.values.button = gamepadButton.value;
+      this.values.button = (this.values.button < 0) ? 0 : this.values.button;
+      this.values.button = (this.values.button > 1) ? 1 : this.values.button;
+
+      // Set the state based on the button
+      if (gamepadButton.pressed || this.values.button === 1) {
+        this.values.state = Constants.ComponentState.PRESSED;
+      } else if (gamepadButton.touched || this.values.button > Constants.ButtonTouchThreshold) {
+        this.values.state = Constants.ComponentState.TOUCHED;
+      }
+    }
+
+    // Get and normalize x axis value
+    if (this.gamepadIndices.xAxis !== undefined
+        && gamepad.axes.length > this.gamepadIndices.xAxis) {
+      this.values.xAxis = gamepad.axes[this.gamepadIndices.xAxis];
+      this.values.xAxis = (this.values.xAxis < -1) ? -1 : this.values.xAxis;
+      this.values.xAxis = (this.values.xAxis > 1) ? 1 : this.values.xAxis;
+
+      // If the state is still default, check if the xAxis makes it touched
+      if (this.values.state === Constants.ComponentState.DEFAULT
+        && Math.abs(this.values.xAxis) > Constants.AxisTouchThreshold) {
+        this.values.state = Constants.ComponentState.TOUCHED;
+      }
+    }
+
+    // Get and normalize Y axis value
+    if (this.gamepadIndices.yAxis !== undefined
+        && gamepad.axes.length > this.gamepadIndices.yAxis) {
+      this.values.yAxis = gamepad.axes[this.gamepadIndices.yAxis];
+      this.values.yAxis = (this.values.yAxis < -1) ? -1 : this.values.yAxis;
+      this.values.yAxis = (this.values.yAxis > 1) ? 1 : this.values.yAxis;
+
+      // If the state is still default, check if the yAxis makes it touched
+      if (this.values.state === Constants.ComponentState.DEFAULT
+        && Math.abs(this.values.yAxis) > Constants.AxisTouchThreshold) {
+        this.values.state = Constants.ComponentState.TOUCHED;
+      }
+    }
+
+    // Update the visual response weights based on the current component data
+    Object.values(this.visualResponses).forEach((visualResponse) => {
+      visualResponse.updateFromComponent(this.values);
+    });
+  }
+}
+
+/**
+  * @description Builds a motion controller with components and visual responses based on the
+  * supplied profile description. Data is polled from the xrInputSource's gamepad.
+  * @author Nell Waliczek / https://github.com/NellWaliczek
+*/
+class MotionController {
+  /**
+   * @param {Object} xrInputSource - The XRInputSource to build the MotionController around
+   * @param {Object} profile - The best matched profile description for the supplied xrInputSource
+   * @param {Object} assetUrl
+   */
+  constructor(xrInputSource, profile, assetUrl) {
+    if (!xrInputSource) {
+      throw new Error('No xrInputSource supplied');
+    }
+
+    if (!profile) {
+      throw new Error('No profile supplied');
+    }
+
+    this.xrInputSource = xrInputSource;
+    this.assetUrl = assetUrl;
+    this.id = profile.profileId;
+
+    // Build child components as described in the profile description
+    this.layoutDescription = profile.layouts[xrInputSource.handedness];
+    this.components = {};
+    Object.keys(this.layoutDescription.components).forEach((componentId) => {
+      const componentDescription = this.layoutDescription.components[componentId];
+      this.components[componentId] = new Component(componentId, componentDescription);
+    });
+
+    // Initialize components based on current gamepad state
+    this.updateFromGamepad();
+  }
+
+  get gripSpace() {
+    return this.xrInputSource.gripSpace;
+  }
+
+  get targetRaySpace() {
+    return this.xrInputSource.targetRaySpace;
+  }
+
+  /**
+   * @description Returns a subset of component data for simplified debugging
+   */
+  get data() {
+    const data = [];
+    Object.values(this.components).forEach((component) => {
+      data.push(component.data);
+    });
+    return data;
+  }
+
+  /**
+   * @description Poll for updated data based on current gamepad state
+   */
+  updateFromGamepad() {
+    Object.values(this.components).forEach((component) => {
+      component.updateFromGamepad(this.xrInputSource.gamepad);
+    });
+  }
+}
+
+export { Constants, MotionController, fetchProfile, fetchProfilesList };

jsm/libs/potpack.module.js

@@ -0,0 +1,125 @@
+/**
+ * potpack - by [@mourner](https://github.com/mourner)
+ * 
+ * A tiny JavaScript function for packing 2D rectangles into a near-square container, 
+ * which is useful for generating CSS sprites and WebGL textures. Similar to 
+ * [shelf-pack](https://github.com/mapbox/shelf-pack), but static (you can't add items 
+ * once a layout is generated), and aims for maximal space utilization.
+ *
+ * A variation of algorithms used in [rectpack2D](https://github.com/TeamHypersomnia/rectpack2D)
+ * and [bin-pack](https://github.com/bryanburgers/bin-pack), which are in turn based 
+ * on [this article by Blackpawn](http://blackpawn.com/texts/lightmaps/default.html).
+ * 
+ * @license
+ * ISC License
+ * 
+ * Copyright (c) 2018, Mapbox
+ * 
+ * Permission to use, copy, modify, and/or distribute this software for any purpose
+ * with or without fee is hereby granted, provided that the above copyright notice
+ * and this permission notice appear in all copies.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+ * FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+ * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+ * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+ * THIS SOFTWARE.
+ */
+
+function potpack(boxes) {
+
+	// calculate total box area and maximum box width
+	let area = 0;
+	let maxWidth = 0;
+	
+	for (const box of boxes) {
+		area += box.w * box.h;
+		maxWidth = Math.max(maxWidth, box.w);
+	}
+	
+	// sort the boxes for insertion by height, descending
+	boxes.sort((a, b) => b.h - a.h);
+	
+	// aim for a squarish resulting container,
+	// slightly adjusted for sub-100% space utilization
+	const startWidth = Math.max(Math.ceil(Math.sqrt(area / 0.95)), maxWidth);
+	
+	// start with a single empty space, unbounded at the bottom
+	const spaces = [{x: 0, y: 0, w: startWidth, h: Infinity}];
+	
+	let width = 0;
+	let height = 0;
+	
+	for (const box of boxes) {
+		// look through spaces backwards so that we check smaller spaces first
+		for (let i = spaces.length - 1; i >= 0; i--) {
+			const space = spaces[i];
+			
+			// look for empty spaces that can accommodate the current box
+			if (box.w > space.w || box.h > space.h) continue;
+			
+			// found the space; add the box to its top-left corner
+			// |-------|-------|
+			// |  box  |       |
+			// |_______|       |
+			// |         space |
+			// |_______________|
+			box.x = space.x;
+			box.y = space.y;
+			
+			height = Math.max(height, box.y + box.h);
+			width = Math.max(width, box.x + box.w);
+			
+			if (box.w === space.w && box.h === space.h) {
+				// space matches the box exactly; remove it
+				const last = spaces.pop();
+				if (i < spaces.length) spaces[i] = last;
+			
+			} else if (box.h === space.h) {
+				// space matches the box height; update it accordingly
+				// |-------|---------------|
+				// |  box  | updated space |
+				// |_______|_______________|
+				space.x += box.w;
+				space.w -= box.w;
+			
+			} else if (box.w === space.w) {
+				// space matches the box width; update it accordingly
+				// |---------------|
+				// |      box      |
+				// |_______________|
+				// | updated space |
+				// |_______________|
+				space.y += box.h;
+				space.h -= box.h;
+			
+			} else {
+				// otherwise the box splits the space into two spaces
+				// |-------|-----------|
+				// |  box  | new space |
+				// |_______|___________|
+				// | updated space     |
+				// |___________________|
+				spaces.push({
+					x: space.x + box.w,
+					y: space.y,
+					w: space.w - box.w,
+					h: box.h
+				});
+				space.y += box.h;
+				space.h -= box.h;
+			}
+			break;
+		}
+	}
+	
+	return {
+		w: width, // container width
+		h: height, // container height
+		fill: (area / (width * height)) || 0 // space utilization
+	};
+}
+
+export { potpack };

jsm/libs/stats.module.js

@@ -0,0 +1,167 @@
+var Stats = function () {
+
+	var mode = 0;
+
+	var container = document.createElement( 'div' );
+	container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+	container.addEventListener( 'click', function ( event ) {
+
+		event.preventDefault();
+		showPanel( ++ mode % container.children.length );
+
+	}, false );
+
+	//
+
+	function addPanel( panel ) {
+
+		container.appendChild( panel.dom );
+		return panel;
+
+	}
+
+	function showPanel( id ) {
+
+		for ( var i = 0; i < container.children.length; i ++ ) {
+
+			container.children[ i ].style.display = i === id ? 'block' : 'none';
+
+		}
+
+		mode = id;
+
+	}
+
+	//
+
+	var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
+
+	var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
+	var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
+
+	if ( self.performance && self.performance.memory ) {
+
+		var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
+
+	}
+
+	showPanel( 0 );
+
+	return {
+
+		REVISION: 16,
+
+		dom: container,
+
+		addPanel: addPanel,
+		showPanel: showPanel,
+
+		begin: function () {
+
+			beginTime = ( performance || Date ).now();
+
+		},
+
+		end: function () {
+
+			frames ++;
+
+			var time = ( performance || Date ).now();
+
+			msPanel.update( time - beginTime, 200 );
+
+			if ( time >= prevTime + 1000 ) {
+
+				fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
+
+				prevTime = time;
+				frames = 0;
+
+				if ( memPanel ) {
+
+					var memory = performance.memory;
+					memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
+
+				}
+
+			}
+
+			return time;
+
+		},
+
+		update: function () {
+
+			beginTime = this.end();
+
+		},
+
+		// Backwards Compatibility
+
+		domElement: container,
+		setMode: showPanel
+
+	};
+
+};
+
+Stats.Panel = function ( name, fg, bg ) {
+
+	var min = Infinity, max = 0, round = Math.round;
+	var PR = round( window.devicePixelRatio || 1 );
+
+	var WIDTH = 80 * PR, HEIGHT = 48 * PR,
+		TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
+		GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
+		GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = WIDTH;
+	canvas.height = HEIGHT;
+	canvas.style.cssText = 'width:80px;height:48px';
+
+	var context = canvas.getContext( '2d' );
+	context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
+	context.textBaseline = 'top';
+
+	context.fillStyle = bg;
+	context.fillRect( 0, 0, WIDTH, HEIGHT );
+
+	context.fillStyle = fg;
+	context.fillText( name, TEXT_X, TEXT_Y );
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	context.fillStyle = bg;
+	context.globalAlpha = 0.9;
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	return {
+
+		dom: canvas,
+
+		update: function ( value, maxValue ) {
+
+			min = Math.min( min, value );
+			max = Math.max( max, value );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 1;
+			context.fillRect( 0, 0, WIDTH, GRAPH_Y );
+			context.fillStyle = fg;
+			context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
+
+			context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
+
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 0.9;
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
+
+		}
+
+	};
+
+};
+
+export default Stats;

jsm/lights/LightProbeGenerator.js

@@ -0,0 +1,250 @@
+import {
+	Color,
+	LightProbe,
+	LinearEncoding,
+	SphericalHarmonics3,
+	Vector3,
+	sRGBEncoding
+} from 'three';
+
+class LightProbeGenerator {
+
+	// https://www.ppsloan.org/publications/StupidSH36.pdf
+	static fromCubeTexture( cubeTexture ) {
+
+		let totalWeight = 0;
+
+		const coord = new Vector3();
+
+		const dir = new Vector3();
+
+		const color = new Color();
+
+		const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+
+		const sh = new SphericalHarmonics3();
+		const shCoefficients = sh.coefficients;
+
+		for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+
+			const image = cubeTexture.image[ faceIndex ];
+
+			const width = image.width;
+			const height = image.height;
+
+			const canvas = document.createElement( 'canvas' );
+
+			canvas.width = width;
+			canvas.height = height;
+
+			const context = canvas.getContext( '2d' );
+
+			context.drawImage( image, 0, 0, width, height );
+
+			const imageData = context.getImageData( 0, 0, width, height );
+
+			const data = imageData.data;
+
+			const imageWidth = imageData.width; // assumed to be square
+
+			const pixelSize = 2 / imageWidth;
+
+			for ( let i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
+
+				// pixel color
+				color.setRGB( data[ i ] / 255, data[ i + 1 ] / 255, data[ i + 2 ] / 255 );
+
+				// convert to linear color space
+				convertColorToLinear( color, cubeTexture.encoding );
+
+				// pixel coordinate on unit cube
+
+				const pixelIndex = i / 4;
+
+				const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+
+				const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+
+				switch ( faceIndex ) {
+
+					case 0: coord.set( - 1, row, - col ); break;
+
+					case 1: coord.set( 1, row, col ); break;
+
+					case 2: coord.set( - col, 1, - row ); break;
+
+					case 3: coord.set( - col, - 1, row ); break;
+
+					case 4: coord.set( - col, row, 1 ); break;
+
+					case 5: coord.set( col, row, - 1 ); break;
+
+				}
+
+				// weight assigned to this pixel
+
+				const lengthSq = coord.lengthSq();
+
+				const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+
+				totalWeight += weight;
+
+				// direction vector to this pixel
+				dir.copy( coord ).normalize();
+
+				// evaluate SH basis functions in direction dir
+				SphericalHarmonics3.getBasisAt( dir, shBasis );
+
+				// accummuulate
+				for ( let j = 0; j < 9; j ++ ) {
+
+					shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
+					shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
+					shCoefficients[ j ].z += shBasis[ j ] * color.b * weight;
+
+				}
+
+			}
+
+		}
+
+		// normalize
+		const norm = ( 4 * Math.PI ) / totalWeight;
+
+		for ( let j = 0; j < 9; j ++ ) {
+
+			shCoefficients[ j ].x *= norm;
+			shCoefficients[ j ].y *= norm;
+			shCoefficients[ j ].z *= norm;
+
+		}
+
+		return new LightProbe( sh );
+
+	}
+
+	static fromCubeRenderTarget( renderer, cubeRenderTarget ) {
+
+		// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
+		let totalWeight = 0;
+
+		const coord = new Vector3();
+
+		const dir = new Vector3();
+
+		const color = new Color();
+
+		const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+
+		const sh = new SphericalHarmonics3();
+		const shCoefficients = sh.coefficients;
+
+		for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+
+			const imageWidth = cubeRenderTarget.width; // assumed to be square
+			const data = new Uint8Array( imageWidth * imageWidth * 4 );
+			renderer.readRenderTargetPixels( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex );
+
+			const pixelSize = 2 / imageWidth;
+
+			for ( let i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
+
+				// pixel color
+				color.setRGB( data[ i ] / 255, data[ i + 1 ] / 255, data[ i + 2 ] / 255 );
+
+				// convert to linear color space
+				convertColorToLinear( color, cubeRenderTarget.texture.encoding );
+
+				// pixel coordinate on unit cube
+
+				const pixelIndex = i / 4;
+
+				const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+
+				const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+
+				switch ( faceIndex ) {
+
+					case 0: coord.set( 1, row, - col ); break;
+
+					case 1: coord.set( - 1, row, col ); break;
+
+					case 2: coord.set( col, 1, - row ); break;
+
+					case 3: coord.set( col, - 1, row ); break;
+
+					case 4: coord.set( col, row, 1 ); break;
+
+					case 5: coord.set( - col, row, - 1 ); break;
+
+				}
+
+				// weight assigned to this pixel
+
+				const lengthSq = coord.lengthSq();
+
+				const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+
+				totalWeight += weight;
+
+				// direction vector to this pixel
+				dir.copy( coord ).normalize();
+
+				// evaluate SH basis functions in direction dir
+				SphericalHarmonics3.getBasisAt( dir, shBasis );
+
+				// accummuulate
+				for ( let j = 0; j < 9; j ++ ) {
+
+					shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
+					shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
+					shCoefficients[ j ].z += shBasis[ j ] * color.b * weight;
+
+				}
+
+			}
+
+		}
+
+		// normalize
+		const norm = ( 4 * Math.PI ) / totalWeight;
+
+		for ( let j = 0; j < 9; j ++ ) {
+
+			shCoefficients[ j ].x *= norm;
+			shCoefficients[ j ].y *= norm;
+			shCoefficients[ j ].z *= norm;
+
+		}
+
+		return new LightProbe( sh );
+
+	}
+
+}
+
+function convertColorToLinear( color, encoding ) {
+
+	switch ( encoding ) {
+
+		case sRGBEncoding:
+
+			color.convertSRGBToLinear();
+			break;
+
+		case LinearEncoding:
+
+			break;
+
+		default:
+
+			console.warn( 'WARNING: LightProbeGenerator convertColorToLinear() encountered an unsupported encoding.' );
+			break;
+
+	}
+
+	return color;
+
+}
+
+export { LightProbeGenerator };

jsm/lines/Line2.js

@@ -0,0 +1,19 @@
+import { LineSegments2 } from '../lines/LineSegments2.js';
+import { LineGeometry } from '../lines/LineGeometry.js';
+import { LineMaterial } from '../lines/LineMaterial.js';
+
+class Line2 extends LineSegments2 {
+
+	constructor( geometry = new LineGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+		super( geometry, material );
+
+		this.type = 'Line2';
+
+	}
+
+}
+
+Line2.prototype.isLine2 = true;
+
+export { Line2 };

jsm/lines/LineGeometry.js

@@ -0,0 +1,87 @@
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
+
+class LineGeometry extends LineSegmentsGeometry {
+
+	constructor() {
+
+		super();
+		this.type = 'LineGeometry';
+
+	}
+
+	setPositions( array ) {
+
+		// converts [ x1, y1, z1,  x2, y2, z2, ... ] to pairs format
+
+		const length = array.length - 3;
+		const points = new Float32Array( 2 * length );
+
+		for ( let i = 0; i < length; i += 3 ) {
+
+			points[ 2 * i ] = array[ i ];
+			points[ 2 * i + 1 ] = array[ i + 1 ];
+			points[ 2 * i + 2 ] = array[ i + 2 ];
+
+			points[ 2 * i + 3 ] = array[ i + 3 ];
+			points[ 2 * i + 4 ] = array[ i + 4 ];
+			points[ 2 * i + 5 ] = array[ i + 5 ];
+
+		}
+
+		super.setPositions( points );
+
+		return this;
+
+	}
+
+	setColors( array ) {
+
+		// converts [ r1, g1, b1,  r2, g2, b2, ... ] to pairs format
+
+		const length = array.length - 3;
+		const colors = new Float32Array( 2 * length );
+
+		for ( let i = 0; i < length; i += 3 ) {
+
+			colors[ 2 * i ] = array[ i ];
+			colors[ 2 * i + 1 ] = array[ i + 1 ];
+			colors[ 2 * i + 2 ] = array[ i + 2 ];
+
+			colors[ 2 * i + 3 ] = array[ i + 3 ];
+			colors[ 2 * i + 4 ] = array[ i + 4 ];
+			colors[ 2 * i + 5 ] = array[ i + 5 ];
+
+		}
+
+		super.setColors( colors );
+
+		return this;
+
+	}
+
+	fromLine( line ) {
+
+		const geometry = line.geometry;
+
+		if ( geometry.isGeometry ) {
+
+			console.error( 'THREE.LineGeometry no longer supports Geometry. Use THREE.BufferGeometry instead.' );
+			return;
+
+		} else if ( geometry.isBufferGeometry ) {
+
+			this.setPositions( geometry.attributes.position.array ); // assumes non-indexed
+
+		}
+
+		// set colors, maybe
+
+		return this;
+
+	}
+
+}
+
+LineGeometry.prototype.isLineGeometry = true;
+
+export { LineGeometry };

jsm/lines/LineMaterial.js

@@ -0,0 +1,702 @@
+/**
+ * parameters = {
+ *  color: <hex>,
+ *  linewidth: <float>,
+ *  dashed: <boolean>,
+ *  dashScale: <float>,
+ *  dashSize: <float>,
+ *  dashOffset: <float>,
+ *  gapSize: <float>,
+ *  resolution: <Vector2>, // to be set by renderer
+ * }
+ */
+
+import {
+	ShaderLib,
+	ShaderMaterial,
+	UniformsLib,
+	UniformsUtils,
+	Vector2
+} from 'three';
+
+
+UniformsLib.line = {
+
+	worldUnits: { value: 1 },
+	linewidth: { value: 1 },
+	resolution: { value: new Vector2( 1, 1 ) },
+	dashOffset: { value: 0 },
+	dashScale: { value: 1 },
+	dashSize: { value: 1 },
+	gapSize: { value: 1 } // todo FIX - maybe change to totalSize
+
+};
+
+ShaderLib[ 'line' ] = {
+
+	uniforms: UniformsUtils.merge( [
+		UniformsLib.common,
+		UniformsLib.fog,
+		UniformsLib.line
+	] ),
+
+	vertexShader:
+	/* glsl */`
+		#include <common>
+		#include <color_pars_vertex>
+		#include <fog_pars_vertex>
+		#include <logdepthbuf_pars_vertex>
+		#include <clipping_planes_pars_vertex>
+
+		uniform float linewidth;
+		uniform vec2 resolution;
+
+		attribute vec3 instanceStart;
+		attribute vec3 instanceEnd;
+
+		attribute vec3 instanceColorStart;
+		attribute vec3 instanceColorEnd;
+
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
+
+		#ifdef USE_DASH
+
+			uniform float dashScale;
+			attribute float instanceDistanceStart;
+			attribute float instanceDistanceEnd;
+			varying float vLineDistance;
+
+		#endif
+
+		void trimSegment( const in vec4 start, inout vec4 end ) {
+
+			// trim end segment so it terminates between the camera plane and the near plane
+
+			// conservative estimate of the near plane
+			float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
+			float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
+			float nearEstimate = - 0.5 * b / a;
+
+			float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
+
+			end.xyz = mix( start.xyz, end.xyz, alpha );
+
+		}
+
+		void main() {
+
+			#ifdef USE_COLOR
+
+				vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
+
+			#endif
+
+			#ifdef USE_DASH
+
+				vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
+				vUv = uv;
+
+			#endif
+
+			float aspect = resolution.x / resolution.y;
+
+			// camera space
+			vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
+			vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
+
+			#ifdef WORLD_UNITS
+
+				worldStart = start.xyz;
+				worldEnd = end.xyz;
+
+			#else
+
+				vUv = uv;
+
+			#endif
+
+			// special case for perspective projection, and segments that terminate either in, or behind, the camera plane
+			// clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
+			// but we need to perform ndc-space calculations in the shader, so we must address this issue directly
+			// perhaps there is a more elegant solution -- WestLangley
+
+			bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
+
+			if ( perspective ) {
+
+				if ( start.z < 0.0 && end.z >= 0.0 ) {
+
+					trimSegment( start, end );
+
+				} else if ( end.z < 0.0 && start.z >= 0.0 ) {
+
+					trimSegment( end, start );
+
+				}
+
+			}
+
+			// clip space
+			vec4 clipStart = projectionMatrix * start;
+			vec4 clipEnd = projectionMatrix * end;
+
+			// ndc space
+			vec3 ndcStart = clipStart.xyz / clipStart.w;
+			vec3 ndcEnd = clipEnd.xyz / clipEnd.w;
+
+			// direction
+			vec2 dir = ndcEnd.xy - ndcStart.xy;
+
+			// account for clip-space aspect ratio
+			dir.x *= aspect;
+			dir = normalize( dir );
+
+			#ifdef WORLD_UNITS
+
+				// get the offset direction as perpendicular to the view vector
+				vec3 worldDir = normalize( end.xyz - start.xyz );
+				vec3 offset;
+				if ( position.y < 0.5 ) {
+
+					offset = normalize( cross( start.xyz, worldDir ) );
+
+				} else {
+
+					offset = normalize( cross( end.xyz, worldDir ) );
+
+				}
+
+				// sign flip
+				if ( position.x < 0.0 ) offset *= - 1.0;
+
+				float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) );
+
+				// don't extend the line if we're rendering dashes because we
+				// won't be rendering the endcaps
+				#ifndef USE_DASH
+
+					// extend the line bounds to encompass  endcaps
+					start.xyz += - worldDir * linewidth * 0.5;
+					end.xyz += worldDir * linewidth * 0.5;
+
+					// shift the position of the quad so it hugs the forward edge of the line
+					offset.xy -= dir * forwardOffset;
+					offset.z += 0.5;
+
+				#endif
+
+				// endcaps
+				if ( position.y > 1.0 || position.y < 0.0 ) {
+
+					offset.xy += dir * 2.0 * forwardOffset;
+
+				}
+
+				// adjust for linewidth
+				offset *= linewidth * 0.5;
+
+				// set the world position
+				worldPos = ( position.y < 0.5 ) ? start : end;
+				worldPos.xyz += offset;
+
+				// project the worldpos
+				vec4 clip = projectionMatrix * worldPos;
+
+				// shift the depth of the projected points so the line
+				// segments overlap neatly
+				vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd;
+				clip.z = clipPose.z * clip.w;
+
+			#else
+
+				vec2 offset = vec2( dir.y, - dir.x );
+				// undo aspect ratio adjustment
+				dir.x /= aspect;
+				offset.x /= aspect;
+
+				// sign flip
+				if ( position.x < 0.0 ) offset *= - 1.0;
+
+				// endcaps
+				if ( position.y < 0.0 ) {
+
+					offset += - dir;
+
+				} else if ( position.y > 1.0 ) {
+
+					offset += dir;
+
+				}
+
+				// adjust for linewidth
+				offset *= linewidth;
+
+				// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
+				offset /= resolution.y;
+
+				// select end
+				vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
+
+				// back to clip space
+				offset *= clip.w;
+
+				clip.xy += offset;
+
+			#endif
+
+			gl_Position = clip;
+
+			vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
+
+			#include <logdepthbuf_vertex>
+			#include <clipping_planes_vertex>
+			#include <fog_vertex>
+
+		}
+		`,
+
+	fragmentShader:
+	/* glsl */`
+		uniform vec3 diffuse;
+		uniform float opacity;
+		uniform float linewidth;
+
+		#ifdef USE_DASH
+
+			uniform float dashOffset;
+			uniform float dashSize;
+			uniform float gapSize;
+
+		#endif
+
+		varying float vLineDistance;
+
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
+
+		#include <common>
+		#include <color_pars_fragment>
+		#include <fog_pars_fragment>
+		#include <logdepthbuf_pars_fragment>
+		#include <clipping_planes_pars_fragment>
+
+		vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) {
+
+			float mua;
+			float mub;
+
+			vec3 p13 = p1 - p3;
+			vec3 p43 = p4 - p3;
+
+			vec3 p21 = p2 - p1;
+
+			float d1343 = dot( p13, p43 );
+			float d4321 = dot( p43, p21 );
+			float d1321 = dot( p13, p21 );
+			float d4343 = dot( p43, p43 );
+			float d2121 = dot( p21, p21 );
+
+			float denom = d2121 * d4343 - d4321 * d4321;
+
+			float numer = d1343 * d4321 - d1321 * d4343;
+
+			mua = numer / denom;
+			mua = clamp( mua, 0.0, 1.0 );
+			mub = ( d1343 + d4321 * ( mua ) ) / d4343;
+			mub = clamp( mub, 0.0, 1.0 );
+
+			return vec2( mua, mub );
+
+		}
+
+		void main() {
+
+			#include <clipping_planes_fragment>
+
+			#ifdef USE_DASH
+
+				if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
+
+				if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
+
+			#endif
+
+			float alpha = opacity;
+
+			#ifdef WORLD_UNITS
+
+				// Find the closest points on the view ray and the line segment
+				vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
+				vec3 lineDir = worldEnd - worldStart;
+				vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
+
+				vec3 p1 = worldStart + lineDir * params.x;
+				vec3 p2 = rayEnd * params.y;
+				vec3 delta = p1 - p2;
+				float len = length( delta );
+				float norm = len / linewidth;
+
+				#ifndef USE_DASH
+
+					#ifdef USE_ALPHA_TO_COVERAGE
+
+						float dnorm = fwidth( norm );
+						alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm );
+
+					#else
+
+						if ( norm > 0.5 ) {
+
+							discard;
+
+						}
+
+					#endif
+
+				#endif
+
+			#else
+
+				#ifdef USE_ALPHA_TO_COVERAGE
+
+					// artifacts appear on some hardware if a derivative is taken within a conditional
+					float a = vUv.x;
+					float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+					float len2 = a * a + b * b;
+					float dlen = fwidth( len2 );
+
+					if ( abs( vUv.y ) > 1.0 ) {
+
+						alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 );
+
+					}
+
+				#else
+
+					if ( abs( vUv.y ) > 1.0 ) {
+
+						float a = vUv.x;
+						float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+						float len2 = a * a + b * b;
+
+						if ( len2 > 1.0 ) discard;
+
+					}
+
+				#endif
+
+			#endif
+
+			vec4 diffuseColor = vec4( diffuse, alpha );
+
+			#include <logdepthbuf_fragment>
+			#include <color_fragment>
+
+			gl_FragColor = vec4( diffuseColor.rgb, alpha );
+
+			#include <tonemapping_fragment>
+			#include <encodings_fragment>
+			#include <fog_fragment>
+			#include <premultiplied_alpha_fragment>
+
+		}
+		`
+};
+
+class LineMaterial extends ShaderMaterial {
+
+	constructor( parameters ) {
+
+		super( {
+
+			type: 'LineMaterial',
+
+			uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
+
+			vertexShader: ShaderLib[ 'line' ].vertexShader,
+			fragmentShader: ShaderLib[ 'line' ].fragmentShader,
+
+			clipping: true // required for clipping support
+
+		} );
+
+		Object.defineProperties( this, {
+
+			color: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.diffuse.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.diffuse.value = value;
+
+				}
+
+			},
+
+			worldUnits: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return 'WORLD_UNITS' in this.defines;
+
+				},
+
+				set: function ( value ) {
+
+					if ( value === true ) {
+
+						this.defines.WORLD_UNITS = '';
+
+					} else {
+
+						delete this.defines.WORLD_UNITS;
+
+					}
+
+				}
+
+			},
+
+			linewidth: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.linewidth.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.linewidth.value = value;
+
+				}
+
+			},
+
+			dashed: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return Boolean( 'USE_DASH' in this.defines );
+
+				},
+
+				set( value ) {
+
+					if ( Boolean( value ) !== Boolean( 'USE_DASH' in this.defines ) ) {
+
+						this.needsUpdate = true;
+
+					}
+
+					if ( value === true ) {
+
+						this.defines.USE_DASH = '';
+
+					} else {
+
+						delete this.defines.USE_DASH;
+
+					}
+
+				}
+
+			},
+
+			dashScale: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.dashScale.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.dashScale.value = value;
+
+				}
+
+			},
+
+			dashSize: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.dashSize.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.dashSize.value = value;
+
+				}
+
+			},
+
+			dashOffset: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.dashOffset.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.dashOffset.value = value;
+
+				}
+
+			},
+
+			gapSize: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.gapSize.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.gapSize.value = value;
+
+				}
+
+			},
+
+			opacity: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.opacity.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.opacity.value = value;
+
+				}
+
+			},
+
+			resolution: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return this.uniforms.resolution.value;
+
+				},
+
+				set: function ( value ) {
+
+					this.uniforms.resolution.value.copy( value );
+
+				}
+
+			},
+
+			alphaToCoverage: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return Boolean( 'USE_ALPHA_TO_COVERAGE' in this.defines );
+
+				},
+
+				set: function ( value ) {
+
+					if ( Boolean( value ) !== Boolean( 'USE_ALPHA_TO_COVERAGE' in this.defines ) ) {
+
+						this.needsUpdate = true;
+
+					}
+
+					if ( value === true ) {
+
+						this.defines.USE_ALPHA_TO_COVERAGE = '';
+						this.extensions.derivatives = true;
+
+					} else {
+
+						delete this.defines.USE_ALPHA_TO_COVERAGE;
+						this.extensions.derivatives = false;
+
+					}
+
+				}
+
+			}
+
+		} );
+
+		this.setValues( parameters );
+
+	}
+
+}
+
+LineMaterial.prototype.isLineMaterial = true;
+
+export { LineMaterial };

jsm/lines/LineSegments2.js

@@ -0,0 +1,355 @@
+import {
+	Box3,
+	InstancedInterleavedBuffer,
+	InterleavedBufferAttribute,
+	Line3,
+	MathUtils,
+	Matrix4,
+	Mesh,
+	Sphere,
+	Vector3,
+	Vector4
+} from 'three';
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
+import { LineMaterial } from '../lines/LineMaterial.js';
+
+const _start = new Vector3();
+const _end = new Vector3();
+
+const _start4 = new Vector4();
+const _end4 = new Vector4();
+
+const _ssOrigin = new Vector4();
+const _ssOrigin3 = new Vector3();
+const _mvMatrix = new Matrix4();
+const _line = new Line3();
+const _closestPoint = new Vector3();
+
+const _box = new Box3();
+const _sphere = new Sphere();
+const _clipToWorldVector = new Vector4();
+
+let _ray, _instanceStart, _instanceEnd, _lineWidth;
+
+// Returns the margin required to expand by in world space given the distance from the camera,
+// line width, resolution, and camera projection
+function getWorldSpaceHalfWidth( camera, distance, resolution ) {
+
+	// transform into clip space, adjust the x and y values by the pixel width offset, then
+	// transform back into world space to get world offset. Note clip space is [-1, 1] so full
+	// width does not need to be halved.
+	_clipToWorldVector.set( 0, 0, - distance, 1.0 ).applyMatrix4( camera.projectionMatrix );
+	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+	_clipToWorldVector.x = _lineWidth / resolution.width;
+	_clipToWorldVector.y = _lineWidth / resolution.height;
+	_clipToWorldVector.applyMatrix4( camera.projectionMatrixInverse );
+	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+
+	return Math.abs( Math.max( _clipToWorldVector.x, _clipToWorldVector.y ) );
+
+}
+
+function raycastWorldUnits( lineSegments, intersects ) {
+
+	for ( let i = 0, l = _instanceStart.count; i < l; i ++ ) {
+
+		_line.start.fromBufferAttribute( _instanceStart, i );
+		_line.end.fromBufferAttribute( _instanceEnd, i );
+
+		const pointOnLine = new Vector3();
+		const point = new Vector3();
+
+		_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+		const isInside = point.distanceTo( pointOnLine ) < _lineWidth * 0.5;
+
+		if ( isInside ) {
+
+			intersects.push( {
+				point,
+				pointOnLine,
+				distance: _ray.origin.distanceTo( point ),
+				object: lineSegments,
+				face: null,
+				faceIndex: i,
+				uv: null,
+				uv2: null,
+			} );
+
+		}
+
+	}
+
+}
+
+function raycastScreenSpace( lineSegments, camera, intersects ) {
+
+	const projectionMatrix = camera.projectionMatrix;
+	const material = lineSegments.material;
+	const resolution = material.resolution;
+	const matrixWorld = lineSegments.matrixWorld;
+
+	const geometry = lineSegments.geometry;
+	const instanceStart = geometry.attributes.instanceStart;
+	const instanceEnd = geometry.attributes.instanceEnd;
+
+	const near = - camera.near;
+
+	//
+
+	// pick a point 1 unit out along the ray to avoid the ray origin
+	// sitting at the camera origin which will cause "w" to be 0 when
+	// applying the projection matrix.
+	_ray.at( 1, _ssOrigin );
+
+	// ndc space [ - 1.0, 1.0 ]
+	_ssOrigin.w = 1;
+	_ssOrigin.applyMatrix4( camera.matrixWorldInverse );
+	_ssOrigin.applyMatrix4( projectionMatrix );
+	_ssOrigin.multiplyScalar( 1 / _ssOrigin.w );
+
+	// screen space
+	_ssOrigin.x *= resolution.x / 2;
+	_ssOrigin.y *= resolution.y / 2;
+	_ssOrigin.z = 0;
+
+	_ssOrigin3.copy( _ssOrigin );
+
+	_mvMatrix.multiplyMatrices( camera.matrixWorldInverse, matrixWorld );
+
+	for ( let i = 0, l = instanceStart.count; i < l; i ++ ) {
+
+		_start4.fromBufferAttribute( instanceStart, i );
+		_end4.fromBufferAttribute( instanceEnd, i );
+
+		_start4.w = 1;
+		_end4.w = 1;
+
+		// camera space
+		_start4.applyMatrix4( _mvMatrix );
+		_end4.applyMatrix4( _mvMatrix );
+
+		// skip the segment if it's entirely behind the camera
+		const isBehindCameraNear = _start4.z > near && _end4.z > near;
+		if ( isBehindCameraNear ) {
+
+			continue;
+
+		}
+
+		// trim the segment if it extends behind camera near
+		if ( _start4.z > near ) {
+
+			const deltaDist = _start4.z - _end4.z;
+			const t = ( _start4.z - near ) / deltaDist;
+			_start4.lerp( _end4, t );
+
+		} else if ( _end4.z > near ) {
+
+			const deltaDist = _end4.z - _start4.z;
+			const t = ( _end4.z - near ) / deltaDist;
+			_end4.lerp( _start4, t );
+
+		}
+
+		// clip space
+		_start4.applyMatrix4( projectionMatrix );
+		_end4.applyMatrix4( projectionMatrix );
+
+		// ndc space [ - 1.0, 1.0 ]
+		_start4.multiplyScalar( 1 / _start4.w );
+		_end4.multiplyScalar( 1 / _end4.w );
+
+		// screen space
+		_start4.x *= resolution.x / 2;
+		_start4.y *= resolution.y / 2;
+
+		_end4.x *= resolution.x / 2;
+		_end4.y *= resolution.y / 2;
+
+		// create 2d segment
+		_line.start.copy( _start4 );
+		_line.start.z = 0;
+
+		_line.end.copy( _end4 );
+		_line.end.z = 0;
+
+		// get closest point on ray to segment
+		const param = _line.closestPointToPointParameter( _ssOrigin3, true );
+		_line.at( param, _closestPoint );
+
+		// check if the intersection point is within clip space
+		const zPos = MathUtils.lerp( _start4.z, _end4.z, param );
+		const isInClipSpace = zPos >= - 1 && zPos <= 1;
+
+		const isInside = _ssOrigin3.distanceTo( _closestPoint ) < _lineWidth * 0.5;
+
+		if ( isInClipSpace && isInside ) {
+
+			_line.start.fromBufferAttribute( instanceStart, i );
+			_line.end.fromBufferAttribute( instanceEnd, i );
+
+			_line.start.applyMatrix4( matrixWorld );
+			_line.end.applyMatrix4( matrixWorld );
+
+			const pointOnLine = new Vector3();
+			const point = new Vector3();
+
+			_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+
+			intersects.push( {
+				point: point,
+				pointOnLine: pointOnLine,
+				distance: _ray.origin.distanceTo( point ),
+				object: lineSegments,
+				face: null,
+				faceIndex: i,
+				uv: null,
+				uv2: null,
+			} );
+
+		}
+
+	}
+
+}
+
+class LineSegments2 extends Mesh {
+
+	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+		super( geometry, material );
+
+		this.type = 'LineSegments2';
+
+	}
+
+	// for backwards-compatibility, but could be a method of LineSegmentsGeometry...
+
+	computeLineDistances() {
+
+		const geometry = this.geometry;
+
+		const instanceStart = geometry.attributes.instanceStart;
+		const instanceEnd = geometry.attributes.instanceEnd;
+		const lineDistances = new Float32Array( 2 * instanceStart.count );
+
+		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
+
+			_start.fromBufferAttribute( instanceStart, i );
+			_end.fromBufferAttribute( instanceEnd, i );
+
+			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
+			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+
+		}
+
+		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+
+		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
+		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+
+		return this;
+
+	}
+
+	raycast( raycaster, intersects ) {
+
+		const worldUnits = this.material.worldUnits;
+		const camera = raycaster.camera;
+
+		if ( camera === null && ! worldUnits ) {
+
+			console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' );
+
+		}
+
+		const threshold = ( raycaster.params.Line2 !== undefined ) ? raycaster.params.Line2.threshold || 0 : 0;
+
+		_ray = raycaster.ray;
+
+		const matrixWorld = this.matrixWorld;
+		const geometry = this.geometry;
+		const material = this.material;
+
+		_lineWidth = material.linewidth + threshold;
+
+		_instanceStart = geometry.attributes.instanceStart;
+		_instanceEnd = geometry.attributes.instanceEnd;
+
+		// check if we intersect the sphere bounds
+		if ( geometry.boundingSphere === null ) {
+
+			geometry.computeBoundingSphere();
+
+		}
+
+		_sphere.copy( geometry.boundingSphere ).applyMatrix4( matrixWorld );
+
+		// increase the sphere bounds by the worst case line screen space width
+		let sphereMargin;
+		if ( worldUnits ) {
+
+			sphereMargin = _lineWidth * 0.5;
+
+		} else {
+
+			const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( _ray.origin ) );
+			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution );
+
+		}
+
+		_sphere.radius += sphereMargin;
+
+		if ( _ray.intersectsSphere( _sphere ) === false ) {
+
+			return;
+
+		}
+
+		// check if we intersect the box bounds
+		if ( geometry.boundingBox === null ) {
+
+			geometry.computeBoundingBox();
+
+		}
+
+		_box.copy( geometry.boundingBox ).applyMatrix4( matrixWorld );
+
+		// increase the box bounds by the worst case line width
+		let boxMargin;
+		if ( worldUnits ) {
+
+			boxMargin = _lineWidth * 0.5;
+
+		} else {
+
+			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray.origin ) );
+			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution );
+
+		}
+
+		_box.expandByScalar( boxMargin );
+
+		if ( _ray.intersectsBox( _box ) === false ) {
+
+			return;
+
+		}
+
+		if ( worldUnits ) {
+
+			raycastWorldUnits( this, intersects );
+
+		} else {
+
+			raycastScreenSpace( this, camera, intersects );
+
+		}
+
+	}
+
+}
+
+LineSegments2.prototype.isLineSegments2 = true;
+
+export { LineSegments2 };

jsm/lines/LineSegmentsGeometry.js

@@ -0,0 +1,250 @@
+import {
+	Box3,
+	Float32BufferAttribute,
+	InstancedBufferGeometry,
+	InstancedInterleavedBuffer,
+	InterleavedBufferAttribute,
+	Sphere,
+	Vector3,
+	WireframeGeometry
+} from 'three';
+
+const _box = new Box3();
+const _vector = new Vector3();
+
+class LineSegmentsGeometry extends InstancedBufferGeometry {
+
+	constructor() {
+
+		super();
+
+		this.type = 'LineSegmentsGeometry';
+
+		const positions = [ - 1, 2, 0, 1, 2, 0, - 1, 1, 0, 1, 1, 0, - 1, 0, 0, 1, 0, 0, - 1, - 1, 0, 1, - 1, 0 ];
+		const uvs = [ - 1, 2, 1, 2, - 1, 1, 1, 1, - 1, - 1, 1, - 1, - 1, - 2, 1, - 2 ];
+		const index = [ 0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5 ];
+
+		this.setIndex( index );
+		this.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		this.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
+
+	}
+
+	applyMatrix4( matrix ) {
+
+		const start = this.attributes.instanceStart;
+		const end = this.attributes.instanceEnd;
+
+		if ( start !== undefined ) {
+
+			start.applyMatrix4( matrix );
+
+			end.applyMatrix4( matrix );
+
+			start.needsUpdate = true;
+
+		}
+
+		if ( this.boundingBox !== null ) {
+
+			this.computeBoundingBox();
+
+		}
+
+		if ( this.boundingSphere !== null ) {
+
+			this.computeBoundingSphere();
+
+		}
+
+		return this;
+
+	}
+
+	setPositions( array ) {
+
+		let lineSegments;
+
+		if ( array instanceof Float32Array ) {
+
+			lineSegments = array;
+
+		} else if ( Array.isArray( array ) ) {
+
+			lineSegments = new Float32Array( array );
+
+		}
+
+		const instanceBuffer = new InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz
+
+		this.setAttribute( 'instanceStart', new InterleavedBufferAttribute( instanceBuffer, 3, 0 ) ); // xyz
+		this.setAttribute( 'instanceEnd', new InterleavedBufferAttribute( instanceBuffer, 3, 3 ) ); // xyz
+
+		//
+
+		this.computeBoundingBox();
+		this.computeBoundingSphere();
+
+		return this;
+
+	}
+
+	setColors( array ) {
+
+		let colors;
+
+		if ( array instanceof Float32Array ) {
+
+			colors = array;
+
+		} else if ( Array.isArray( array ) ) {
+
+			colors = new Float32Array( array );
+
+		}
+
+		const instanceColorBuffer = new InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb
+
+		this.setAttribute( 'instanceColorStart', new InterleavedBufferAttribute( instanceColorBuffer, 3, 0 ) ); // rgb
+		this.setAttribute( 'instanceColorEnd', new InterleavedBufferAttribute( instanceColorBuffer, 3, 3 ) ); // rgb
+
+		return this;
+
+	}
+
+	fromWireframeGeometry( geometry ) {
+
+		this.setPositions( geometry.attributes.position.array );
+
+		return this;
+
+	}
+
+	fromEdgesGeometry( geometry ) {
+
+		this.setPositions( geometry.attributes.position.array );
+
+		return this;
+
+	}
+
+	fromMesh( mesh ) {
+
+		this.fromWireframeGeometry( new WireframeGeometry( mesh.geometry ) );
+
+		// set colors, maybe
+
+		return this;
+
+	}
+
+	fromLineSegments( lineSegments ) {
+
+		const geometry = lineSegments.geometry;
+
+		if ( geometry.isGeometry ) {
+
+			console.error( 'THREE.LineSegmentsGeometry no longer supports Geometry. Use THREE.BufferGeometry instead.' );
+			return;
+
+		} else if ( geometry.isBufferGeometry ) {
+
+			this.setPositions( geometry.attributes.position.array ); // assumes non-indexed
+
+		}
+
+		// set colors, maybe
+
+		return this;
+
+	}
+
+	computeBoundingBox() {
+
+		if ( this.boundingBox === null ) {
+
+			this.boundingBox = new Box3();
+
+		}
+
+		const start = this.attributes.instanceStart;
+		const end = this.attributes.instanceEnd;
+
+		if ( start !== undefined && end !== undefined ) {
+
+			this.boundingBox.setFromBufferAttribute( start );
+
+			_box.setFromBufferAttribute( end );
+
+			this.boundingBox.union( _box );
+
+		}
+
+	}
+
+	computeBoundingSphere() {
+
+		if ( this.boundingSphere === null ) {
+
+			this.boundingSphere = new Sphere();
+
+		}
+
+		if ( this.boundingBox === null ) {
+
+			this.computeBoundingBox();
+
+		}
+
+		const start = this.attributes.instanceStart;
+		const end = this.attributes.instanceEnd;
+
+		if ( start !== undefined && end !== undefined ) {
+
+			const center = this.boundingSphere.center;
+
+			this.boundingBox.getCenter( center );
+
+			let maxRadiusSq = 0;
+
+			for ( let i = 0, il = start.count; i < il; i ++ ) {
+
+				_vector.fromBufferAttribute( start, i );
+				maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( _vector ) );
+
+				_vector.fromBufferAttribute( end, i );
+				maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( _vector ) );
+
+			}
+
+			this.boundingSphere.radius = Math.sqrt( maxRadiusSq );
+
+			if ( isNaN( this.boundingSphere.radius ) ) {
+
+				console.error( 'THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.', this );
+
+			}
+
+		}
+
+	}
+
+	toJSON() {
+
+		// todo
+
+	}
+
+	applyMatrix( matrix ) {
+
+		console.warn( 'THREE.LineSegmentsGeometry: applyMatrix() has been renamed to applyMatrix4().' );
+
+		return this.applyMatrix4( matrix );
+
+	}
+
+}
+
+LineSegmentsGeometry.prototype.isLineSegmentsGeometry = true;
+
+export { LineSegmentsGeometry };

jsm/lines/Wireframe.js

@@ -0,0 +1,56 @@
+import {
+	InstancedInterleavedBuffer,
+	InterleavedBufferAttribute,
+	Mesh,
+	Vector3
+} from 'three';
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
+import { LineMaterial } from '../lines/LineMaterial.js';
+
+const _start = new Vector3();
+const _end = new Vector3();
+
+class Wireframe extends Mesh {
+
+	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+		super( geometry, material );
+
+		this.type = 'Wireframe';
+
+	}
+
+	// for backwards-compatibility, but could be a method of LineSegmentsGeometry...
+
+	computeLineDistances() {
+
+		const geometry = this.geometry;
+
+		const instanceStart = geometry.attributes.instanceStart;
+		const instanceEnd = geometry.attributes.instanceEnd;
+		const lineDistances = new Float32Array( 2 * instanceStart.count );
+
+		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
+
+			_start.fromBufferAttribute( instanceStart, i );
+			_end.fromBufferAttribute( instanceEnd, i );
+
+			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
+			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+
+		}
+
+		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+
+		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
+		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+
+		return this;
+
+	}
+
+}
+
+Wireframe.prototype.isWireframe = true;
+
+export { Wireframe };

jsm/lines/WireframeGeometry2.js

@@ -0,0 +1,24 @@
+import {
+	WireframeGeometry
+} from 'three';
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
+
+class WireframeGeometry2 extends LineSegmentsGeometry {
+
+	constructor( geometry ) {
+
+		super();
+
+		this.type = 'WireframeGeometry2';
+
+		this.fromWireframeGeometry( new WireframeGeometry( geometry ) );
+
+		// set colors, maybe
+
+	}
+
+}
+
+WireframeGeometry2.prototype.isWireframeGeometry2 = true;
+
+export { WireframeGeometry2 };

jsm/loaders/AMFLoader.js

@@ -0,0 +1,518 @@
+import {
+	BufferGeometry,
+	Color,
+	FileLoader,
+	Float32BufferAttribute,
+	Group,
+	Loader,
+	LoaderUtils,
+	Mesh,
+	MeshPhongMaterial
+} from 'three';
+import * as fflate from '../libs/fflate.module.js';
+
+/**
+ * Description: Early release of an AMF Loader following the pattern of the
+ * example loaders in the three.js project.
+ *
+ * Usage:
+ *	const loader = new AMFLoader();
+ *	loader.load('/path/to/project.amf', function(objecttree) {
+ *		scene.add(objecttree);
+ *	});
+ *
+ * Materials now supported, material colors supported
+ * Zip support, requires fflate
+ * No constellation support (yet)!
+ *
+ */
+
+class AMFLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const loader = new FileLoader( scope.manager );
+		loader.setPath( scope.path );
+		loader.setResponseType( 'arraybuffer' );
+		loader.setRequestHeader( scope.requestHeader );
+		loader.setWithCredentials( scope.withCredentials );
+		loader.load( url, function ( text ) {
+
+			try {
+
+				onLoad( scope.parse( text ) );
+
+			} catch ( e ) {
+
+				if ( onError ) {
+
+					onError( e );
+
+				} else {
+
+					console.error( e );
+
+				}
+
+				scope.manager.itemError( url );
+
+			}
+
+		}, onProgress, onError );
+
+	}
+
+	parse( data ) {
+
+		function loadDocument( data ) {
+
+			let view = new DataView( data );
+			const magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
+
+			if ( magic === 'PK' ) {
+
+				let zip = null;
+				let file = null;
+
+				console.log( 'THREE.AMFLoader: Loading Zip' );
+
+				try {
+
+					zip = fflate.unzipSync( new Uint8Array( data ) ); // eslint-disable-line no-undef
+
+				} catch ( e ) {
+
+					if ( e instanceof ReferenceError ) {
+
+						console.log( 'THREE.AMFLoader: fflate missing and file is compressed.' );
+						return null;
+
+					}
+
+				}
+
+				for ( file in zip ) {
+
+					if ( file.toLowerCase().slice( - 4 ) === '.amf' ) {
+
+						break;
+
+					}
+
+				}
+
+				console.log( 'THREE.AMFLoader: Trying to load file asset: ' + file );
+				view = new DataView( zip[ file ].buffer );
+
+			}
+
+			const fileText = LoaderUtils.decodeText( view );
+			const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
+
+			if ( xmlData.documentElement.nodeName.toLowerCase() !== 'amf' ) {
+
+				console.log( 'THREE.AMFLoader: Error loading AMF - no AMF document found.' );
+				return null;
+
+			}
+
+			return xmlData;
+
+		}
+
+		function loadDocumentScale( node ) {
+
+			let scale = 1.0;
+			let unit = 'millimeter';
+
+			if ( node.documentElement.attributes.unit !== undefined ) {
+
+				unit = node.documentElement.attributes.unit.value.toLowerCase();
+
+			}
+
+			const scaleUnits = {
+				millimeter: 1.0,
+				inch: 25.4,
+				feet: 304.8,
+				meter: 1000.0,
+				micron: 0.001
+			};
+
+			if ( scaleUnits[ unit ] !== undefined ) {
+
+				scale = scaleUnits[ unit ];
+
+			}
+
+			console.log( 'THREE.AMFLoader: Unit scale: ' + scale );
+			return scale;
+
+		}
+
+		function loadMaterials( node ) {
+
+			let matName = 'AMF Material';
+			const matId = node.attributes.id.textContent;
+			let color = { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
+
+			let loadedMaterial = null;
+
+			for ( let i = 0; i < node.childNodes.length; i ++ ) {
+
+				const matChildEl = node.childNodes[ i ];
+
+				if ( matChildEl.nodeName === 'metadata' && matChildEl.attributes.type !== undefined ) {
+
+					if ( matChildEl.attributes.type.value === 'name' ) {
+
+						matName = matChildEl.textContent;
+
+					}
+
+				} else if ( matChildEl.nodeName === 'color' ) {
+
+					color = loadColor( matChildEl );
+
+				}
+
+			}
+
+			loadedMaterial = new MeshPhongMaterial( {
+				flatShading: true,
+				color: new Color( color.r, color.g, color.b ),
+				name: matName
+			} );
+
+			if ( color.a !== 1.0 ) {
+
+				loadedMaterial.transparent = true;
+				loadedMaterial.opacity = color.a;
+
+			}
+
+			return { id: matId, material: loadedMaterial };
+
+		}
+
+		function loadColor( node ) {
+
+			const color = { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
+
+			for ( let i = 0; i < node.childNodes.length; i ++ ) {
+
+				const matColor = node.childNodes[ i ];
+
+				if ( matColor.nodeName === 'r' ) {
+
+					color.r = matColor.textContent;
+
+				} else if ( matColor.nodeName === 'g' ) {
+
+					color.g = matColor.textContent;
+
+				} else if ( matColor.nodeName === 'b' ) {
+
+					color.b = matColor.textContent;
+
+				} else if ( matColor.nodeName === 'a' ) {
+
+					color.a = matColor.textContent;
+
+				}
+
+			}
+
+			return color;
+
+		}
+
+		function loadMeshVolume( node ) {
+
+			const volume = { name: '', triangles: [], materialid: null };
+
+			let currVolumeNode = node.firstElementChild;
+
+			if ( node.attributes.materialid !== undefined ) {
+
+				volume.materialId = node.attributes.materialid.nodeValue;
+
+			}
+
+			while ( currVolumeNode ) {
+
+				if ( currVolumeNode.nodeName === 'metadata' ) {
+
+					if ( currVolumeNode.attributes.type !== undefined ) {
+
+						if ( currVolumeNode.attributes.type.value === 'name' ) {
+
+							volume.name = currVolumeNode.textContent;
+
+						}
+
+					}
+
+				} else if ( currVolumeNode.nodeName === 'triangle' ) {
+
+					const v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
+					const v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
+					const v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
+
+					volume.triangles.push( v1, v2, v3 );
+
+				}
+
+				currVolumeNode = currVolumeNode.nextElementSibling;
+
+			}
+
+			return volume;
+
+		}
+
+		function loadMeshVertices( node ) {
+
+			const vertArray = [];
+			const normalArray = [];
+			let currVerticesNode = node.firstElementChild;
+
+			while ( currVerticesNode ) {
+
+				if ( currVerticesNode.nodeName === 'vertex' ) {
+
+					let vNode = currVerticesNode.firstElementChild;
+
+					while ( vNode ) {
+
+						if ( vNode.nodeName === 'coordinates' ) {
+
+							const x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
+							const y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
+							const z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
+
+							vertArray.push( x, y, z );
+
+						} else if ( vNode.nodeName === 'normal' ) {
+
+							const nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
+							const ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
+							const nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
+
+							normalArray.push( nx, ny, nz );
+
+						}
+
+						vNode = vNode.nextElementSibling;
+
+					}
+
+				}
+
+				currVerticesNode = currVerticesNode.nextElementSibling;
+
+			}
+
+			return { 'vertices': vertArray, 'normals': normalArray };
+
+		}
+
+		function loadObject( node ) {
+
+			const objId = node.attributes.id.textContent;
+			const loadedObject = { name: 'amfobject', meshes: [] };
+			let currColor = null;
+			let currObjNode = node.firstElementChild;
+
+			while ( currObjNode ) {
+
+				if ( currObjNode.nodeName === 'metadata' ) {
+
+					if ( currObjNode.attributes.type !== undefined ) {
+
+						if ( currObjNode.attributes.type.value === 'name' ) {
+
+							loadedObject.name = currObjNode.textContent;
+
+						}
+
+					}
+
+				} else if ( currObjNode.nodeName === 'color' ) {
+
+					currColor = loadColor( currObjNode );
+
+				} else if ( currObjNode.nodeName === 'mesh' ) {
+
+					let currMeshNode = currObjNode.firstElementChild;
+					const mesh = { vertices: [], normals: [], volumes: [], color: currColor };
+
+					while ( currMeshNode ) {
+
+						if ( currMeshNode.nodeName === 'vertices' ) {
+
+							const loadedVertices = loadMeshVertices( currMeshNode );
+
+							mesh.normals = mesh.normals.concat( loadedVertices.normals );
+							mesh.vertices = mesh.vertices.concat( loadedVertices.vertices );
+
+						} else if ( currMeshNode.nodeName === 'volume' ) {
+
+							mesh.volumes.push( loadMeshVolume( currMeshNode ) );
+
+						}
+
+						currMeshNode = currMeshNode.nextElementSibling;
+
+					}
+
+					loadedObject.meshes.push( mesh );
+
+				}
+
+				currObjNode = currObjNode.nextElementSibling;
+
+			}
+
+			return { 'id': objId, 'obj': loadedObject };
+
+		}
+
+		const xmlData = loadDocument( data );
+		let amfName = '';
+		let amfAuthor = '';
+		const amfScale = loadDocumentScale( xmlData );
+		const amfMaterials = {};
+		const amfObjects = {};
+		const childNodes = xmlData.documentElement.childNodes;
+
+		let i, j;
+
+		for ( i = 0; i < childNodes.length; i ++ ) {
+
+			const child = childNodes[ i ];
+
+			if ( child.nodeName === 'metadata' ) {
+
+				if ( child.attributes.type !== undefined ) {
+
+					if ( child.attributes.type.value === 'name' ) {
+
+						amfName = child.textContent;
+
+					} else if ( child.attributes.type.value === 'author' ) {
+
+						amfAuthor = child.textContent;
+
+					}
+
+				}
+
+			} else if ( child.nodeName === 'material' ) {
+
+				const loadedMaterial = loadMaterials( child );
+
+				amfMaterials[ loadedMaterial.id ] = loadedMaterial.material;
+
+			} else if ( child.nodeName === 'object' ) {
+
+				const loadedObject = loadObject( child );
+
+				amfObjects[ loadedObject.id ] = loadedObject.obj;
+
+			}
+
+		}
+
+		const sceneObject = new Group();
+		const defaultMaterial = new MeshPhongMaterial( { color: 0xaaaaff, flatShading: true } );
+
+		sceneObject.name = amfName;
+		sceneObject.userData.author = amfAuthor;
+		sceneObject.userData.loader = 'AMF';
+
+		for ( const id in amfObjects ) {
+
+			const part = amfObjects[ id ];
+			const meshes = part.meshes;
+			const newObject = new Group();
+			newObject.name = part.name || '';
+
+			for ( i = 0; i < meshes.length; i ++ ) {
+
+				let objDefaultMaterial = defaultMaterial;
+				const mesh = meshes[ i ];
+				const vertices = new Float32BufferAttribute( mesh.vertices, 3 );
+				let normals = null;
+
+				if ( mesh.normals.length ) {
+
+					normals = new Float32BufferAttribute( mesh.normals, 3 );
+
+				}
+
+				if ( mesh.color ) {
+
+					const color = mesh.color;
+
+					objDefaultMaterial = defaultMaterial.clone();
+					objDefaultMaterial.color = new Color( color.r, color.g, color.b );
+
+					if ( color.a !== 1.0 ) {
+
+						objDefaultMaterial.transparent = true;
+						objDefaultMaterial.opacity = color.a;
+
+					}
+
+				}
+
+				const volumes = mesh.volumes;
+
+				for ( j = 0; j < volumes.length; j ++ ) {
+
+					const volume = volumes[ j ];
+					const newGeometry = new BufferGeometry();
+					let material = objDefaultMaterial;
+
+					newGeometry.setIndex( volume.triangles );
+					newGeometry.setAttribute( 'position', vertices.clone() );
+
+					if ( normals ) {
+
+						newGeometry.setAttribute( 'normal', normals.clone() );
+
+					}
+
+					if ( amfMaterials[ volume.materialId ] !== undefined ) {
+
+						material = amfMaterials[ volume.materialId ];
+
+					}
+
+					newGeometry.scale( amfScale, amfScale, amfScale );
+					newObject.add( new Mesh( newGeometry, material.clone() ) );
+
+				}
+
+			}
+
+			sceneObject.add( newObject );
+
+		}
+
+		return sceneObject;
+
+	}
+
+}
+
+export { AMFLoader };

jsm/loaders/BVHLoader.js

@@ -0,0 +1,437 @@
+import {
+	AnimationClip,
+	Bone,
+	FileLoader,
+	Loader,
+	Quaternion,
+	QuaternionKeyframeTrack,
+	Skeleton,
+	Vector3,
+	VectorKeyframeTrack
+} from 'three';
+
+/**
+ * Description: reads BVH files and outputs a single Skeleton and an AnimationClip
+ *
+ * Currently only supports bvh files containing a single root.
+ *
+ */
+
+class BVHLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+		this.animateBonePositions = true;
+		this.animateBoneRotations = true;
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const loader = new FileLoader( scope.manager );
+		loader.setPath( scope.path );
+		loader.setRequestHeader( scope.requestHeader );
+		loader.setWithCredentials( scope.withCredentials );
+		loader.load( url, function ( text ) {
+
+			try {
+
+				onLoad( scope.parse( text ) );
+
+			} catch ( e ) {
+
+				if ( onError ) {
+
+					onError( e );
+
+				} else {
+
+					console.error( e );
+
+				}
+
+				scope.manager.itemError( url );
+
+			}
+
+		}, onProgress, onError );
+
+	}
+
+	parse( text ) {
+
+		/*
+			reads a string array (lines) from a BVH file
+			and outputs a skeleton structure including motion data
+
+			returns thee root node:
+			{ name: '', channels: [], children: [] }
+		*/
+		function readBvh( lines ) {
+
+			// read model structure
+
+			if ( nextLine( lines ) !== 'HIERARCHY' ) {
+
+				console.error( 'THREE.BVHLoader: HIERARCHY expected.' );
+
+			}
+
+			const list = []; // collects flat array of all bones
+			const root = readNode( lines, nextLine( lines ), list );
+
+			// read motion data
+
+			if ( nextLine( lines ) !== 'MOTION' ) {
+
+				console.error( 'THREE.BVHLoader: MOTION expected.' );
+
+			}
+
+			// number of frames
+
+			let tokens = nextLine( lines ).split( /[\s]+/ );
+			const numFrames = parseInt( tokens[ 1 ] );
+
+			if ( isNaN( numFrames ) ) {
+
+				console.error( 'THREE.BVHLoader: Failed to read number of frames.' );
+
+			}
+
+			// frame time
+
+			tokens = nextLine( lines ).split( /[\s]+/ );
+			const frameTime = parseFloat( tokens[ 2 ] );
+
+			if ( isNaN( frameTime ) ) {
+
+				console.error( 'THREE.BVHLoader: Failed to read frame time.' );
+
+			}
+
+			// read frame data line by line
+
+			for ( let i = 0; i < numFrames; i ++ ) {
+
+				tokens = nextLine( lines ).split( /[\s]+/ );
+				readFrameData( tokens, i * frameTime, root );
+
+			}
+
+			return list;
+
+		}
+
+		/*
+			Recursively reads data from a single frame into the bone hierarchy.
+			The passed bone hierarchy has to be structured in the same order as the BVH file.
+			keyframe data is stored in bone.frames.
+
+			- data: splitted string array (frame values), values are shift()ed so
+			this should be empty after parsing the whole hierarchy.
+			- frameTime: playback time for this keyframe.
+			- bone: the bone to read frame data from.
+		*/
+		function readFrameData( data, frameTime, bone ) {
+
+			// end sites have no motion data
+
+			if ( bone.type === 'ENDSITE' ) return;
+
+			// add keyframe
+
+			const keyframe = {
+				time: frameTime,
+				position: new Vector3(),
+				rotation: new Quaternion()
+			};
+
+			bone.frames.push( keyframe );
+
+			const quat = new Quaternion();
+
+			const vx = new Vector3( 1, 0, 0 );
+			const vy = new Vector3( 0, 1, 0 );
+			const vz = new Vector3( 0, 0, 1 );
+
+			// parse values for each channel in node
+
+			for ( let i = 0; i < bone.channels.length; i ++ ) {
+
+				switch ( bone.channels[ i ] ) {
+
+					case 'Xposition':
+						keyframe.position.x = parseFloat( data.shift().trim() );
+						break;
+					case 'Yposition':
+						keyframe.position.y = parseFloat( data.shift().trim() );
+						break;
+					case 'Zposition':
+						keyframe.position.z = parseFloat( data.shift().trim() );
+						break;
+					case 'Xrotation':
+						quat.setFromAxisAngle( vx, parseFloat( data.shift().trim() ) * Math.PI / 180 );
+						keyframe.rotation.multiply( quat );
+						break;
+					case 'Yrotation':
+						quat.setFromAxisAngle( vy, parseFloat( data.shift().trim() ) * Math.PI / 180 );
+						keyframe.rotation.multiply( quat );
+						break;
+					case 'Zrotation':
+						quat.setFromAxisAngle( vz, parseFloat( data.shift().trim() ) * Math.PI / 180 );
+						keyframe.rotation.multiply( quat );
+						break;
+					default:
+						console.warn( 'THREE.BVHLoader: Invalid channel type.' );
+
+				}
+
+			}
+
+			// parse child nodes
+
+			for ( let i = 0; i < bone.children.length; i ++ ) {
+
+				readFrameData( data, frameTime, bone.children[ i ] );
+
+			}
+
+		}
+
+		/*
+		 Recursively parses the HIERACHY section of the BVH file
+
+		 - lines: all lines of the file. lines are consumed as we go along.
+		 - firstline: line containing the node type and name e.g. 'JOINT hip'
+		 - list: collects a flat list of nodes
+
+		 returns: a BVH node including children
+		*/
+		function readNode( lines, firstline, list ) {
+
+			const node = { name: '', type: '', frames: [] };
+			list.push( node );
+
+			// parse node type and name
+
+			let tokens = firstline.split( /[\s]+/ );
+
+			if ( tokens[ 0 ].toUpperCase() === 'END' && tokens[ 1 ].toUpperCase() === 'SITE' ) {
+
+				node.type = 'ENDSITE';
+				node.name = 'ENDSITE'; // bvh end sites have no name
+
+			} else {
+
+				node.name = tokens[ 1 ];
+				node.type = tokens[ 0 ].toUpperCase();
+
+			}
+
+			if ( nextLine( lines ) !== '{' ) {
+
+				console.error( 'THREE.BVHLoader: Expected opening { after type & name' );
+
+			}
+
+			// parse OFFSET
+
+			tokens = nextLine( lines ).split( /[\s]+/ );
+
+			if ( tokens[ 0 ] !== 'OFFSET' ) {
+
+				console.error( 'THREE.BVHLoader: Expected OFFSET but got: ' + tokens[ 0 ] );
+
+			}
+
+			if ( tokens.length !== 4 ) {
+
+				console.error( 'THREE.BVHLoader: Invalid number of values for OFFSET.' );
+
+			}
+
+			const offset = new Vector3(
+				parseFloat( tokens[ 1 ] ),
+				parseFloat( tokens[ 2 ] ),
+				parseFloat( tokens[ 3 ] )
+			);
+
+			if ( isNaN( offset.x ) || isNaN( offset.y ) || isNaN( offset.z ) ) {
+
+				console.error( 'THREE.BVHLoader: Invalid values of OFFSET.' );
+
+			}
+
+			node.offset = offset;
+
+			// parse CHANNELS definitions
+
+			if ( node.type !== 'ENDSITE' ) {
+
+				tokens = nextLine( lines ).split( /[\s]+/ );
+
+				if ( tokens[ 0 ] !== 'CHANNELS' ) {
+
+					console.error( 'THREE.BVHLoader: Expected CHANNELS definition.' );
+
+				}
+
+				const numChannels = parseInt( tokens[ 1 ] );
+				node.channels = tokens.splice( 2, numChannels );
+				node.children = [];
+
+			}
+
+			// read children
+
+			while ( true ) {
+
+				const line = nextLine( lines );
+
+				if ( line === '}' ) {
+
+					return node;
+
+				} else {
+
+					node.children.push( readNode( lines, line, list ) );
+
+				}
+
+			}
+
+		}
+
+		/*
+			recursively converts the internal bvh node structure to a Bone hierarchy
+
+			source: the bvh root node
+			list: pass an empty array, collects a flat list of all converted THREE.Bones
+
+			returns the root Bone
+		*/
+		function toTHREEBone( source, list ) {
+
+			const bone = new Bone();
+			list.push( bone );
+
+			bone.position.add( source.offset );
+			bone.name = source.name;
+
+			if ( source.type !== 'ENDSITE' ) {
+
+				for ( let i = 0; i < source.children.length; i ++ ) {
+
+					bone.add( toTHREEBone( source.children[ i ], list ) );
+
+				}
+
+			}
+
+			return bone;
+
+		}
+
+		/*
+			builds a AnimationClip from the keyframe data saved in each bone.
+
+			bone: bvh root node
+
+			returns: a AnimationClip containing position and quaternion tracks
+		*/
+		function toTHREEAnimation( bones ) {
+
+			const tracks = [];
+
+			// create a position and quaternion animation track for each node
+
+			for ( let i = 0; i < bones.length; i ++ ) {
+
+				const bone = bones[ i ];
+
+				if ( bone.type === 'ENDSITE' )
+					continue;
+
+				// track data
+
+				const times = [];
+				const positions = [];
+				const rotations = [];
+
+				for ( let j = 0; j < bone.frames.length; j ++ ) {
+
+					const frame = bone.frames[ j ];
+
+					times.push( frame.time );
+
+					// the animation system animates the position property,
+					// so we have to add the joint offset to all values
+
+					positions.push( frame.position.x + bone.offset.x );
+					positions.push( frame.position.y + bone.offset.y );
+					positions.push( frame.position.z + bone.offset.z );
+
+					rotations.push( frame.rotation.x );
+					rotations.push( frame.rotation.y );
+					rotations.push( frame.rotation.z );
+					rotations.push( frame.rotation.w );
+
+				}
+
+				if ( scope.animateBonePositions ) {
+
+					tracks.push( new VectorKeyframeTrack( '.bones[' + bone.name + '].position', times, positions ) );
+
+				}
+
+				if ( scope.animateBoneRotations ) {
+
+					tracks.push( new QuaternionKeyframeTrack( '.bones[' + bone.name + '].quaternion', times, rotations ) );
+
+				}
+
+			}
+
+			return new AnimationClip( 'animation', - 1, tracks );
+
+		}
+
+		/*
+			returns the next non-empty line in lines
+		*/
+		function nextLine( lines ) {
+
+			let line;
+			// skip empty lines
+			while ( ( line = lines.shift().trim() ).length === 0 ) { }
+
+			return line;
+
+		}
+
+		const scope = this;
+
+		const lines = text.split( /[\r\n]+/g );
+
+		const bones = readBvh( lines );
+
+		const threeBones = [];
+		toTHREEBone( bones[ 0 ], threeBones );
+
+		const threeClip = toTHREEAnimation( bones );
+
+		return {
+			skeleton: new Skeleton( threeBones ),
+			clip: threeClip
+		};
+
+	}
+
+}
+
+export { BVHLoader };

jsm/loaders/BasisTextureLoader.js

@@ -0,0 +1,790 @@
+import {
+	CompressedTexture,
+	FileLoader,
+	LinearFilter,
+	LinearMipmapLinearFilter,
+	Loader,
+	RGBAFormat,
+	RGBA_ASTC_4x4_Format,
+	RGBA_BPTC_Format,
+	RGBA_ETC2_EAC_Format,
+	RGBA_PVRTC_4BPPV1_Format,
+	RGBA_S3TC_DXT5_Format,
+	RGB_ETC1_Format,
+	RGB_ETC2_Format,
+	RGB_PVRTC_4BPPV1_Format,
+	RGB_S3TC_DXT1_Format,
+	UnsignedByteType
+} from 'three';
+
+/**
+ * Loader for Basis Universal GPU Texture Codec.
+ *
+ * Basis Universal is a "supercompressed" GPU texture and texture video
+ * compression system that outputs a highly compressed intermediate file format
+ * (.basis) that can be quickly transcoded to a wide variety of GPU texture
+ * compression formats.
+ *
+ * This loader parallelizes the transcoding process across a configurable number
+ * of web workers, before transferring the transcoded compressed texture back
+ * to the main thread.
+ */
+
+const _taskCache = new WeakMap();
+
+class BasisTextureLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+		this.transcoderPath = '';
+		this.transcoderBinary = null;
+		this.transcoderPending = null;
+
+		this.workerLimit = 4;
+		this.workerPool = [];
+		this.workerNextTaskID = 1;
+		this.workerSourceURL = '';
+		this.workerConfig = null;
+
+		console.warn(
+
+			'THREE.BasisTextureLoader: This loader is deprecated, and will be removed in a future release. '
+			+ 'Instead, use Basis Universal compression in KTX2 (.ktx2) files with THREE.KTX2Loader.'
+
+		);
+
+	}
+
+	setTranscoderPath( path ) {
+
+		this.transcoderPath = path;
+
+		return this;
+
+	}
+
+	setWorkerLimit( workerLimit ) {
+
+		this.workerLimit = workerLimit;
+
+		return this;
+
+	}
+
+	detectSupport( renderer ) {
+
+		this.workerConfig = {
+			astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
+			etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
+			etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
+			dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
+			bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
+			pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
+				|| renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
+		};
+
+		return this;
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const loader = new FileLoader( this.manager );
+
+		loader.setResponseType( 'arraybuffer' );
+		loader.setWithCredentials( this.withCredentials );
+
+		const texture = new CompressedTexture();
+
+		loader.load( url, ( buffer ) => {
+
+			// Check for an existing task using this buffer. A transferred buffer cannot be transferred
+			// again from this thread.
+			if ( _taskCache.has( buffer ) ) {
+
+				const cachedTask = _taskCache.get( buffer );
+
+				return cachedTask.promise.then( onLoad ).catch( onError );
+
+			}
+
+			this._createTexture( [ buffer ] )
+				.then( function ( _texture ) {
+
+					texture.copy( _texture );
+					texture.needsUpdate = true;
+
+					if ( onLoad ) onLoad( texture );
+
+				} )
+				.catch( onError );
+
+		}, onProgress, onError );
+
+		return texture;
+
+	}
+
+	/** Low-level transcoding API, exposed for use by KTX2Loader. */
+	parseInternalAsync( options ) {
+
+		const { levels } = options;
+
+		const buffers = new Set();
+
+		for ( let i = 0; i < levels.length; i ++ ) {
+
+			buffers.add( levels[ i ].data.buffer );
+
+		}
+
+		return this._createTexture( Array.from( buffers ), { ...options, lowLevel: true } );
+
+	}
+
+	/**
+	 * @param {ArrayBuffer[]} buffers
+	 * @param {object?} config
+	 * @return {Promise<CompressedTexture>}
+	 */
+	_createTexture( buffers, config = {} ) {
+
+		let worker;
+		let taskID;
+
+		const taskConfig = config;
+		let taskCost = 0;
+
+		for ( let i = 0; i < buffers.length; i ++ ) {
+
+			taskCost += buffers[ i ].byteLength;
+
+		}
+
+		const texturePending = this._allocateWorker( taskCost )
+			.then( ( _worker ) => {
+
+				worker = _worker;
+				taskID = this.workerNextTaskID ++;
+
+				return new Promise( ( resolve, reject ) => {
+
+					worker._callbacks[ taskID ] = { resolve, reject };
+
+					worker.postMessage( { type: 'transcode', id: taskID, buffers: buffers, taskConfig: taskConfig }, buffers );
+
+				} );
+
+			} )
+			.then( ( message ) => {
+
+				const { mipmaps, width, height, format } = message;
+
+				const texture = new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
+				texture.minFilter = mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
+				texture.magFilter = LinearFilter;
+				texture.generateMipmaps = false;
+				texture.needsUpdate = true;
+
+				return texture;
+
+			} );
+
+		// Note: replaced '.finally()' with '.catch().then()' block - iOS 11 support (#19416)
+		texturePending
+			.catch( () => true )
+			.then( () => {
+
+				if ( worker && taskID ) {
+
+					worker._taskLoad -= taskCost;
+					delete worker._callbacks[ taskID ];
+
+				}
+
+			} );
+
+		// Cache the task result.
+		_taskCache.set( buffers[ 0 ], { promise: texturePending } );
+
+		return texturePending;
+
+	}
+
+	_initTranscoder() {
+
+		if ( ! this.transcoderPending ) {
+
+			// Load transcoder wrapper.
+			const jsLoader = new FileLoader( this.manager );
+			jsLoader.setPath( this.transcoderPath );
+			jsLoader.setWithCredentials( this.withCredentials );
+			const jsContent = new Promise( ( resolve, reject ) => {
+
+				jsLoader.load( 'basis_transcoder.js', resolve, undefined, reject );
+
+			} );
+
+			// Load transcoder WASM binary.
+			const binaryLoader = new FileLoader( this.manager );
+			binaryLoader.setPath( this.transcoderPath );
+			binaryLoader.setResponseType( 'arraybuffer' );
+			binaryLoader.setWithCredentials( this.withCredentials );
+			const binaryContent = new Promise( ( resolve, reject ) => {
+
+				binaryLoader.load( 'basis_transcoder.wasm', resolve, undefined, reject );
+
+			} );
+
+			this.transcoderPending = Promise.all( [ jsContent, binaryContent ] )
+				.then( ( [ jsContent, binaryContent ] ) => {
+
+					const fn = BasisTextureLoader.BasisWorker.toString();
+
+					const body = [
+						'/* constants */',
+						'let _EngineFormat = ' + JSON.stringify( BasisTextureLoader.EngineFormat ),
+						'let _TranscoderFormat = ' + JSON.stringify( BasisTextureLoader.TranscoderFormat ),
+						'let _BasisFormat = ' + JSON.stringify( BasisTextureLoader.BasisFormat ),
+						'/* basis_transcoder.js */',
+						jsContent,
+						'/* worker */',
+						fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) )
+					].join( '\n' );
+
+					this.workerSourceURL = URL.createObjectURL( new Blob( [ body ] ) );
+					this.transcoderBinary = binaryContent;
+
+				} );
+
+		}
+
+		return this.transcoderPending;
+
+	}
+
+	_allocateWorker( taskCost ) {
+
+		return this._initTranscoder().then( () => {
+
+			if ( this.workerPool.length < this.workerLimit ) {
+
+				const worker = new Worker( this.workerSourceURL );
+
+				worker._callbacks = {};
+				worker._taskLoad = 0;
+
+				worker.postMessage( {
+					type: 'init',
+					config: this.workerConfig,
+					transcoderBinary: this.transcoderBinary,
+				} );
+
+				worker.onmessage = function ( e ) {
+
+					const message = e.data;
+
+					switch ( message.type ) {
+
+						case 'transcode':
+							worker._callbacks[ message.id ].resolve( message );
+							break;
+
+						case 'error':
+							worker._callbacks[ message.id ].reject( message );
+							break;
+
+						default:
+							console.error( 'THREE.BasisTextureLoader: Unexpected message, "' + message.type + '"' );
+
+					}
+
+				};
+
+				this.workerPool.push( worker );
+
+			} else {
+
+				this.workerPool.sort( function ( a, b ) {
+
+					return a._taskLoad > b._taskLoad ? - 1 : 1;
+
+				} );
+
+			}
+
+			const worker = this.workerPool[ this.workerPool.length - 1 ];
+
+			worker._taskLoad += taskCost;
+
+			return worker;
+
+		} );
+
+	}
+
+	dispose() {
+
+		for ( let i = 0; i < this.workerPool.length; i ++ ) {
+
+			this.workerPool[ i ].terminate();
+
+		}
+
+		this.workerPool.length = 0;
+
+		return this;
+
+	}
+
+}
+
+/* CONSTANTS */
+
+BasisTextureLoader.BasisFormat = {
+	ETC1S: 0,
+	UASTC_4x4: 1,
+};
+
+BasisTextureLoader.TranscoderFormat = {
+	ETC1: 0,
+	ETC2: 1,
+	BC1: 2,
+	BC3: 3,
+	BC4: 4,
+	BC5: 5,
+	BC7_M6_OPAQUE_ONLY: 6,
+	BC7_M5: 7,
+	PVRTC1_4_RGB: 8,
+	PVRTC1_4_RGBA: 9,
+	ASTC_4x4: 10,
+	ATC_RGB: 11,
+	ATC_RGBA_INTERPOLATED_ALPHA: 12,
+	RGBA32: 13,
+	RGB565: 14,
+	BGR565: 15,
+	RGBA4444: 16,
+};
+
+BasisTextureLoader.EngineFormat = {
+	RGBAFormat: RGBAFormat,
+	RGBA_ASTC_4x4_Format: RGBA_ASTC_4x4_Format,
+	RGBA_BPTC_Format: RGBA_BPTC_Format,
+	RGBA_ETC2_EAC_Format: RGBA_ETC2_EAC_Format,
+	RGBA_PVRTC_4BPPV1_Format: RGBA_PVRTC_4BPPV1_Format,
+	RGBA_S3TC_DXT5_Format: RGBA_S3TC_DXT5_Format,
+	RGB_ETC1_Format: RGB_ETC1_Format,
+	RGB_ETC2_Format: RGB_ETC2_Format,
+	RGB_PVRTC_4BPPV1_Format: RGB_PVRTC_4BPPV1_Format,
+	RGB_S3TC_DXT1_Format: RGB_S3TC_DXT1_Format,
+};
+
+
+/* WEB WORKER */
+
+BasisTextureLoader.BasisWorker = function () {
+
+	let config;
+	let transcoderPending;
+	let BasisModule;
+
+	const EngineFormat = _EngineFormat; // eslint-disable-line no-undef
+	const TranscoderFormat = _TranscoderFormat; // eslint-disable-line no-undef
+	const BasisFormat = _BasisFormat; // eslint-disable-line no-undef
+
+	onmessage = function ( e ) {
+
+		const message = e.data;
+
+		switch ( message.type ) {
+
+			case 'init':
+				config = message.config;
+				init( message.transcoderBinary );
+				break;
+
+			case 'transcode':
+				transcoderPending.then( () => {
+
+					try {
+
+						const { width, height, hasAlpha, mipmaps, format } = message.taskConfig.lowLevel
+							? transcodeLowLevel( message.taskConfig )
+							: transcode( message.buffers[ 0 ] );
+
+						const buffers = [];
+
+						for ( let i = 0; i < mipmaps.length; ++ i ) {
+
+							buffers.push( mipmaps[ i ].data.buffer );
+
+						}
+
+						self.postMessage( { type: 'transcode', id: message.id, width, height, hasAlpha, mipmaps, format }, buffers );
+
+					} catch ( error ) {
+
+						console.error( error );
+
+						self.postMessage( { type: 'error', id: message.id, error: error.message } );
+
+					}
+
+				} );
+				break;
+
+		}
+
+	};
+
+	function init( wasmBinary ) {
+
+		transcoderPending = new Promise( ( resolve ) => {
+
+			BasisModule = { wasmBinary, onRuntimeInitialized: resolve };
+			BASIS( BasisModule ); // eslint-disable-line no-undef
+
+		} ).then( () => {
+
+			BasisModule.initializeBasis();
+
+		} );
+
+	}
+
+	function transcodeLowLevel( taskConfig ) {
+
+		const { basisFormat, width, height, hasAlpha } = taskConfig;
+
+		const { transcoderFormat, engineFormat } = getTranscoderFormat( basisFormat, width, height, hasAlpha );
+
+		const blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
+
+		assert( BasisModule.isFormatSupported( transcoderFormat ), 'THREE.BasisTextureLoader: Unsupported format.' );
+
+		const mipmaps = [];
+
+		if ( basisFormat === BasisFormat.ETC1S ) {
+
+			const transcoder = new BasisModule.LowLevelETC1SImageTranscoder();
+
+			const { endpointCount, endpointsData, selectorCount, selectorsData, tablesData } = taskConfig.globalData;
+
+			try {
+
+				let ok;
+
+				ok = transcoder.decodePalettes( endpointCount, endpointsData, selectorCount, selectorsData );
+
+				assert( ok, 'THREE.BasisTextureLoader: decodePalettes() failed.' );
+
+				ok = transcoder.decodeTables( tablesData );
+
+				assert( ok, 'THREE.BasisTextureLoader: decodeTables() failed.' );
+
+				for ( let i = 0; i < taskConfig.levels.length; i ++ ) {
+
+					const level = taskConfig.levels[ i ];
+					const imageDesc = taskConfig.globalData.imageDescs[ i ];
+
+					const dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
+					const dst = new Uint8Array( dstByteLength );
+
+					ok = transcoder.transcodeImage(
+						transcoderFormat,
+						dst, dstByteLength / blockByteLength,
+						level.data,
+						getWidthInBlocks( transcoderFormat, level.width ),
+						getHeightInBlocks( transcoderFormat, level.height ),
+						level.width, level.height, level.index,
+						imageDesc.rgbSliceByteOffset, imageDesc.rgbSliceByteLength,
+						imageDesc.alphaSliceByteOffset, imageDesc.alphaSliceByteLength,
+						imageDesc.imageFlags,
+						hasAlpha,
+						false,
+						0, 0
+					);
+
+					assert( ok, 'THREE.BasisTextureLoader: transcodeImage() failed for level ' + level.index + '.' );
+
+					mipmaps.push( { data: dst, width: level.width, height: level.height } );
+
+				}
+
+			} finally {
+
+				transcoder.delete();
+
+			}
+
+		} else {
+
+			for ( let i = 0; i < taskConfig.levels.length; i ++ ) {
+
+				const level = taskConfig.levels[ i ];
+
+				const dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
+				const dst = new Uint8Array( dstByteLength );
+
+				const ok = BasisModule.transcodeUASTCImage(
+					transcoderFormat,
+					dst, dstByteLength / blockByteLength,
+					level.data,
+					getWidthInBlocks( transcoderFormat, level.width ),
+					getHeightInBlocks( transcoderFormat, level.height ),
+					level.width, level.height, level.index,
+					0,
+					level.data.byteLength,
+					0,
+					hasAlpha,
+					false,
+					0, 0,
+					- 1, - 1
+				);
+
+				assert( ok, 'THREE.BasisTextureLoader: transcodeUASTCImage() failed for level ' + level.index + '.' );
+
+				mipmaps.push( { data: dst, width: level.width, height: level.height } );
+
+			}
+
+		}
+
+		return { width, height, hasAlpha, mipmaps, format: engineFormat };
+
+	}
+
+	function transcode( buffer ) {
+
+		const basisFile = new BasisModule.BasisFile( new Uint8Array( buffer ) );
+
+		const basisFormat = basisFile.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
+		const width = basisFile.getImageWidth( 0, 0 );
+		const height = basisFile.getImageHeight( 0, 0 );
+		const levels = basisFile.getNumLevels( 0 );
+		const hasAlpha = basisFile.getHasAlpha();
+
+		function cleanup() {
+
+			basisFile.close();
+			basisFile.delete();
+
+		}
+
+		const { transcoderFormat, engineFormat } = getTranscoderFormat( basisFormat, width, height, hasAlpha );
+
+		if ( ! width || ! height || ! levels ) {
+
+			cleanup();
+			throw new Error( 'THREE.BasisTextureLoader:	Invalid texture' );
+
+		}
+
+		if ( ! basisFile.startTranscoding() ) {
+
+			cleanup();
+			throw new Error( 'THREE.BasisTextureLoader: .startTranscoding failed' );
+
+		}
+
+		const mipmaps = [];
+
+		for ( let mip = 0; mip < levels; mip ++ ) {
+
+			const mipWidth = basisFile.getImageWidth( 0, mip );
+			const mipHeight = basisFile.getImageHeight( 0, mip );
+			const dst = new Uint8Array( basisFile.getImageTranscodedSizeInBytes( 0, mip, transcoderFormat ) );
+
+			const status = basisFile.transcodeImage(
+				dst,
+				0,
+				mip,
+				transcoderFormat,
+				0,
+				hasAlpha
+			);
+
+			if ( ! status ) {
+
+				cleanup();
+				throw new Error( 'THREE.BasisTextureLoader: .transcodeImage failed.' );
+
+			}
+
+			mipmaps.push( { data: dst, width: mipWidth, height: mipHeight } );
+
+		}
+
+		cleanup();
+
+		return { width, height, hasAlpha, mipmaps, format: engineFormat };
+
+	}
+
+	//
+
+	// Optimal choice of a transcoder target format depends on the Basis format (ETC1S or UASTC),
+	// device capabilities, and texture dimensions. The list below ranks the formats separately
+	// for ETC1S and UASTC.
+	//
+	// In some cases, transcoding UASTC to RGBA32 might be preferred for higher quality (at
+	// significant memory cost) compared to ETC1/2, BC1/3, and PVRTC. The transcoder currently
+	// chooses RGBA32 only as a last resort and does not expose that option to the caller.
+	const FORMAT_OPTIONS = [
+		{
+			if: 'astcSupported',
+			basisFormat: [ BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.ASTC_4x4, TranscoderFormat.ASTC_4x4 ],
+			engineFormat: [ EngineFormat.RGBA_ASTC_4x4_Format, EngineFormat.RGBA_ASTC_4x4_Format ],
+			priorityETC1S: Infinity,
+			priorityUASTC: 1,
+			needsPowerOfTwo: false,
+		},
+		{
+			if: 'bptcSupported',
+			basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.BC7_M5, TranscoderFormat.BC7_M5 ],
+			engineFormat: [ EngineFormat.RGBA_BPTC_Format, EngineFormat.RGBA_BPTC_Format ],
+			priorityETC1S: 3,
+			priorityUASTC: 2,
+			needsPowerOfTwo: false,
+		},
+		{
+			if: 'dxtSupported',
+			basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.BC1, TranscoderFormat.BC3 ],
+			engineFormat: [ EngineFormat.RGB_S3TC_DXT1_Format, EngineFormat.RGBA_S3TC_DXT5_Format ],
+			priorityETC1S: 4,
+			priorityUASTC: 5,
+			needsPowerOfTwo: false,
+		},
+		{
+			if: 'etc2Supported',
+			basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.ETC1, TranscoderFormat.ETC2 ],
+			engineFormat: [ EngineFormat.RGB_ETC2_Format, EngineFormat.RGBA_ETC2_EAC_Format ],
+			priorityETC1S: 1,
+			priorityUASTC: 3,
+			needsPowerOfTwo: false,
+		},
+		{
+			if: 'etc1Supported',
+			basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.ETC1, TranscoderFormat.ETC1 ],
+			engineFormat: [ EngineFormat.RGB_ETC1_Format, EngineFormat.RGB_ETC1_Format ],
+			priorityETC1S: 2,
+			priorityUASTC: 4,
+			needsPowerOfTwo: false,
+		},
+		{
+			if: 'pvrtcSupported',
+			basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
+			transcoderFormat: [ TranscoderFormat.PVRTC1_4_RGB, TranscoderFormat.PVRTC1_4_RGBA ],
+			engineFormat: [ EngineFormat.RGB_PVRTC_4BPPV1_Format, EngineFormat.RGBA_PVRTC_4BPPV1_Format ],
+			priorityETC1S: 5,
+			priorityUASTC: 6,
+			needsPowerOfTwo: true,
+		},
+	];
+
+	const ETC1S_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
+
+		return a.priorityETC1S - b.priorityETC1S;
+
+	} );
+	const UASTC_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
+
+		return a.priorityUASTC - b.priorityUASTC;
+
+	} );
+
+	function getTranscoderFormat( basisFormat, width, height, hasAlpha ) {
+
+		let transcoderFormat;
+		let engineFormat;
+
+		const options = basisFormat === BasisFormat.ETC1S ? ETC1S_OPTIONS : UASTC_OPTIONS;
+
+		for ( let i = 0; i < options.length; i ++ ) {
+
+			const opt = options[ i ];
+
+			if ( ! config[ opt.if ] ) continue;
+			if ( ! opt.basisFormat.includes( basisFormat ) ) continue;
+			if ( opt.needsPowerOfTwo && ! ( isPowerOfTwo( width ) && isPowerOfTwo( height ) ) ) continue;
+
+			transcoderFormat = opt.transcoderFormat[ hasAlpha ? 1 : 0 ];
+			engineFormat = opt.engineFormat[ hasAlpha ? 1 : 0 ];
+
+			return { transcoderFormat, engineFormat };
+
+		}
+
+		console.warn( 'THREE.BasisTextureLoader: No suitable compressed texture format found. Decoding to RGBA32.' );
+
+		transcoderFormat = TranscoderFormat.RGBA32;
+		engineFormat = EngineFormat.RGBAFormat;
+
+		return { transcoderFormat, engineFormat };
+
+	}
+
+	function assert( ok, message ) {
+
+		if ( ! ok ) throw new Error( message );
+
+	}
+
+	function getWidthInBlocks( transcoderFormat, width ) {
+
+		return Math.ceil( width / BasisModule.getFormatBlockWidth( transcoderFormat ) );
+
+	}
+
+	function getHeightInBlocks( transcoderFormat, height ) {
+
+		return Math.ceil( height / BasisModule.getFormatBlockHeight( transcoderFormat ) );
+
+	}
+
+	function getTranscodedImageByteLength( transcoderFormat, width, height ) {
+
+		const blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
+
+		if ( BasisModule.formatIsUncompressed( transcoderFormat ) ) {
+
+			return width * height * blockByteLength;
+
+		}
+
+		if ( transcoderFormat === TranscoderFormat.PVRTC1_4_RGB
+				|| transcoderFormat === TranscoderFormat.PVRTC1_4_RGBA ) {
+
+			// GL requires extra padding for very small textures:
+			// https://www.khronos.org/registry/OpenGL/extensions/IMG/IMG_texture_compression_pvrtc.txt
+			const paddedWidth = ( width + 3 ) & ~ 3;
+			const paddedHeight = ( height + 3 ) & ~ 3;
+
+			return ( Math.max( 8, paddedWidth ) * Math.max( 8, paddedHeight ) * 4 + 7 ) / 8;
+
+		}
+
+		return ( getWidthInBlocks( transcoderFormat, width )
+			* getHeightInBlocks( transcoderFormat, height )
+			* blockByteLength );
+
+	}
+
+	function isPowerOfTwo( value ) {
+
+		if ( value <= 2 ) return true;
+
+		return ( value & ( value - 1 ) ) === 0 && value !== 0;
+
+	}
+
+};
+
+export { BasisTextureLoader };

jsm/loaders/DDSLoader.js

@@ -0,0 +1,281 @@
+import {
+	CompressedTextureLoader,
+	RGBAFormat,
+	RGBA_S3TC_DXT3_Format,
+	RGBA_S3TC_DXT5_Format,
+	RGB_ETC1_Format,
+	RGB_S3TC_DXT1_Format
+} from 'three';
+
+class DDSLoader extends CompressedTextureLoader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	parse( buffer, loadMipmaps ) {
+
+		const dds = { mipmaps: [], width: 0, height: 0, format: null, mipmapCount: 1 };
+
+		// Adapted from @toji's DDS utils
+		// https://github.com/toji/webgl-texture-utils/blob/master/texture-util/dds.js
+
+		// All values and structures referenced from:
+		// http://msdn.microsoft.com/en-us/library/bb943991.aspx/
+
+		const DDS_MAGIC = 0x20534444;
+
+		// let DDSD_CAPS = 0x1;
+		// let DDSD_HEIGHT = 0x2;
+		// let DDSD_WIDTH = 0x4;
+		// let DDSD_PITCH = 0x8;
+		// let DDSD_PIXELFORMAT = 0x1000;
+		const DDSD_MIPMAPCOUNT = 0x20000;
+		// let DDSD_LINEARSIZE = 0x80000;
+		// let DDSD_DEPTH = 0x800000;
+
+		// let DDSCAPS_COMPLEX = 0x8;
+		// let DDSCAPS_MIPMAP = 0x400000;
+		// let DDSCAPS_TEXTURE = 0x1000;
+
+		const DDSCAPS2_CUBEMAP = 0x200;
+		const DDSCAPS2_CUBEMAP_POSITIVEX = 0x400;
+		const DDSCAPS2_CUBEMAP_NEGATIVEX = 0x800;
+		const DDSCAPS2_CUBEMAP_POSITIVEY = 0x1000;
+		const DDSCAPS2_CUBEMAP_NEGATIVEY = 0x2000;
+		const DDSCAPS2_CUBEMAP_POSITIVEZ = 0x4000;
+		const DDSCAPS2_CUBEMAP_NEGATIVEZ = 0x8000;
+		// let DDSCAPS2_VOLUME = 0x200000;
+
+		// let DDPF_ALPHAPIXELS = 0x1;
+		// let DDPF_ALPHA = 0x2;
+		const DDPF_FOURCC = 0x4;
+		// let DDPF_RGB = 0x40;
+		// let DDPF_YUV = 0x200;
+		// let DDPF_LUMINANCE = 0x20000;
+
+		function fourCCToInt32( value ) {
+
+			return value.charCodeAt( 0 ) +
+				( value.charCodeAt( 1 ) << 8 ) +
+				( value.charCodeAt( 2 ) << 16 ) +
+				( value.charCodeAt( 3 ) << 24 );
+
+		}
+
+		function int32ToFourCC( value ) {
+
+			return String.fromCharCode(
+				value & 0xff,
+				( value >> 8 ) & 0xff,
+				( value >> 16 ) & 0xff,
+				( value >> 24 ) & 0xff
+			);
+
+		}
+
+		function loadARGBMip( buffer, dataOffset, width, height ) {
+
+			const dataLength = width * height * 4;
+			const srcBuffer = new Uint8Array( buffer, dataOffset, dataLength );
+			const byteArray = new Uint8Array( dataLength );
+			let dst = 0;
+			let src = 0;
+			for ( let y = 0; y < height; y ++ ) {
+
+				for ( let x = 0; x < width; x ++ ) {
+
+					const b = srcBuffer[ src ]; src ++;
+					const g = srcBuffer[ src ]; src ++;
+					const r = srcBuffer[ src ]; src ++;
+					const a = srcBuffer[ src ]; src ++;
+					byteArray[ dst ] = r; dst ++;	//r
+					byteArray[ dst ] = g; dst ++;	//g
+					byteArray[ dst ] = b; dst ++;	//b
+					byteArray[ dst ] = a; dst ++;	//a
+
+				}
+
+			}
+
+			return byteArray;
+
+		}
+
+		const FOURCC_DXT1 = fourCCToInt32( 'DXT1' );
+		const FOURCC_DXT3 = fourCCToInt32( 'DXT3' );
+		const FOURCC_DXT5 = fourCCToInt32( 'DXT5' );
+		const FOURCC_ETC1 = fourCCToInt32( 'ETC1' );
+
+		const headerLengthInt = 31; // The header length in 32 bit ints
+
+		// Offsets into the header array
+
+		const off_magic = 0;
+
+		const off_size = 1;
+		const off_flags = 2;
+		const off_height = 3;
+		const off_width = 4;
+
+		const off_mipmapCount = 7;
+
+		const off_pfFlags = 20;
+		const off_pfFourCC = 21;
+		const off_RGBBitCount = 22;
+		const off_RBitMask = 23;
+		const off_GBitMask = 24;
+		const off_BBitMask = 25;
+		const off_ABitMask = 26;
+
+		// let off_caps = 27;
+		const off_caps2 = 28;
+		// let off_caps3 = 29;
+		// let off_caps4 = 30;
+
+		// Parse header
+
+		const header = new Int32Array( buffer, 0, headerLengthInt );
+
+		if ( header[ off_magic ] !== DDS_MAGIC ) {
+
+			console.error( 'THREE.DDSLoader.parse: Invalid magic number in DDS header.' );
+			return dds;
+
+		}
+
+		if ( ! header[ off_pfFlags ] & DDPF_FOURCC ) {
+
+			console.error( 'THREE.DDSLoader.parse: Unsupported format, must contain a FourCC code.' );
+			return dds;
+
+		}
+
+		let blockBytes;
+
+		const fourCC = header[ off_pfFourCC ];
+
+		let isRGBAUncompressed = false;
+
+		switch ( fourCC ) {
+
+			case FOURCC_DXT1:
+
+				blockBytes = 8;
+				dds.format = RGB_S3TC_DXT1_Format;
+				break;
+
+			case FOURCC_DXT3:
+
+				blockBytes = 16;
+				dds.format = RGBA_S3TC_DXT3_Format;
+				break;
+
+			case FOURCC_DXT5:
+
+				blockBytes = 16;
+				dds.format = RGBA_S3TC_DXT5_Format;
+				break;
+
+			case FOURCC_ETC1:
+
+				blockBytes = 8;
+				dds.format = RGB_ETC1_Format;
+				break;
+
+			default:
+
+				if ( header[ off_RGBBitCount ] === 32
+					&& header[ off_RBitMask ] & 0xff0000
+					&& header[ off_GBitMask ] & 0xff00
+					&& header[ off_BBitMask ] & 0xff
+					&& header[ off_ABitMask ] & 0xff000000 ) {
+
+					isRGBAUncompressed = true;
+					blockBytes = 64;
+					dds.format = RGBAFormat;
+
+				} else {
+
+					console.error( 'THREE.DDSLoader.parse: Unsupported FourCC code ', int32ToFourCC( fourCC ) );
+					return dds;
+
+				}
+
+		}
+
+		dds.mipmapCount = 1;
+
+		if ( header[ off_flags ] & DDSD_MIPMAPCOUNT && loadMipmaps !== false ) {
+
+			dds.mipmapCount = Math.max( 1, header[ off_mipmapCount ] );
+
+		}
+
+		const caps2 = header[ off_caps2 ];
+		dds.isCubemap = caps2 & DDSCAPS2_CUBEMAP ? true : false;
+		if ( dds.isCubemap && (
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEX ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEX ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEY ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEY ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEZ ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEZ )
+		) ) {
+
+			console.error( 'THREE.DDSLoader.parse: Incomplete cubemap faces' );
+			return dds;
+
+		}
+
+		dds.width = header[ off_width ];
+		dds.height = header[ off_height ];
+
+		let dataOffset = header[ off_size ] + 4;
+
+		// Extract mipmaps buffers
+
+		const faces = dds.isCubemap ? 6 : 1;
+
+		for ( let face = 0; face < faces; face ++ ) {
+
+			let width = dds.width;
+			let height = dds.height;
+
+			for ( let i = 0; i < dds.mipmapCount; i ++ ) {
+
+				let byteArray, dataLength;
+
+				if ( isRGBAUncompressed ) {
+
+					byteArray = loadARGBMip( buffer, dataOffset, width, height );
+					dataLength = byteArray.length;
+
+				} else {
+
+					dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
+					byteArray = new Uint8Array( buffer, dataOffset, dataLength );
+
+				}
+
+				const mipmap = { 'data': byteArray, 'width': width, 'height': height };
+				dds.mipmaps.push( mipmap );
+
+				dataOffset += dataLength;
+
+				width = Math.max( width >> 1, 1 );
+				height = Math.max( height >> 1, 1 );
+
+			}
+
+		}
+
+		return dds;
+
+	}
+
+}
+
+export { DDSLoader };

jsm/loaders/DRACOLoader.js

@@ -0,0 +1,587 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	FileLoader,
+	Loader
+} from 'three';
+
+const _taskCache = new WeakMap();
+
+class DRACOLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+		this.decoderPath = '';
+		this.decoderConfig = {};
+		this.decoderBinary = null;
+		this.decoderPending = null;
+
+		this.workerLimit = 4;
+		this.workerPool = [];
+		this.workerNextTaskID = 1;
+		this.workerSourceURL = '';
+
+		this.defaultAttributeIDs = {
+			position: 'POSITION',
+			normal: 'NORMAL',
+			color: 'COLOR',
+			uv: 'TEX_COORD'
+		};
+		this.defaultAttributeTypes = {
+			position: 'Float32Array',
+			normal: 'Float32Array',
+			color: 'Float32Array',
+			uv: 'Float32Array'
+		};
+
+	}
+
+	setDecoderPath( path ) {
+
+		this.decoderPath = path;
+
+		return this;
+
+	}
+
+	setDecoderConfig( config ) {
+
+		this.decoderConfig = config;
+
+		return this;
+
+	}
+
+	setWorkerLimit( workerLimit ) {
+
+		this.workerLimit = workerLimit;
+
+		return this;
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const loader = new FileLoader( this.manager );
+
+		loader.setPath( this.path );
+		loader.setResponseType( 'arraybuffer' );
+		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( this.withCredentials );
+
+		loader.load( url, ( buffer ) => {
+
+			const taskConfig = {
+				attributeIDs: this.defaultAttributeIDs,
+				attributeTypes: this.defaultAttributeTypes,
+				useUniqueIDs: false
+			};
+
+			this.decodeGeometry( buffer, taskConfig )
+				.then( onLoad )
+				.catch( onError );
+
+		}, onProgress, onError );
+
+	}
+
+	/** @deprecated Kept for backward-compatibility with previous DRACOLoader versions. */
+	decodeDracoFile( buffer, callback, attributeIDs, attributeTypes ) {
+
+		const taskConfig = {
+			attributeIDs: attributeIDs || this.defaultAttributeIDs,
+			attributeTypes: attributeTypes || this.defaultAttributeTypes,
+			useUniqueIDs: !! attributeIDs
+		};
+
+		this.decodeGeometry( buffer, taskConfig ).then( callback );
+
+	}
+
+	decodeGeometry( buffer, taskConfig ) {
+
+		// TODO: For backward-compatibility, support 'attributeTypes' objects containing
+		// references (rather than names) to typed array constructors. These must be
+		// serialized before sending them to the worker.
+		for ( const attribute in taskConfig.attributeTypes ) {
+
+			const type = taskConfig.attributeTypes[ attribute ];
+
+			if ( type.BYTES_PER_ELEMENT !== undefined ) {
+
+				taskConfig.attributeTypes[ attribute ] = type.name;
+
+			}
+
+		}
+
+		//
+
+		const taskKey = JSON.stringify( taskConfig );
+
+		// Check for an existing task using this buffer. A transferred buffer cannot be transferred
+		// again from this thread.
+		if ( _taskCache.has( buffer ) ) {
+
+			const cachedTask = _taskCache.get( buffer );
+
+			if ( cachedTask.key === taskKey ) {
+
+				return cachedTask.promise;
+
+			} else if ( buffer.byteLength === 0 ) {
+
+				// Technically, it would be possible to wait for the previous task to complete,
+				// transfer the buffer back, and decode again with the second configuration. That
+				// is complex, and I don't know of any reason to decode a Draco buffer twice in
+				// different ways, so this is left unimplemented.
+				throw new Error(
+
+					'THREE.DRACOLoader: Unable to re-decode a buffer with different ' +
+					'settings. Buffer has already been transferred.'
+
+				);
+
+			}
+
+		}
+
+		//
+
+		let worker;
+		const taskID = this.workerNextTaskID ++;
+		const taskCost = buffer.byteLength;
+
+		// Obtain a worker and assign a task, and construct a geometry instance
+		// when the task completes.
+		const geometryPending = this._getWorker( taskID, taskCost )
+			.then( ( _worker ) => {
+
+				worker = _worker;
+
+				return new Promise( ( resolve, reject ) => {
+
+					worker._callbacks[ taskID ] = { resolve, reject };
+
+					worker.postMessage( { type: 'decode', id: taskID, taskConfig, buffer }, [ buffer ] );
+
+					// this.debug();
+
+				} );
+
+			} )
+			.then( ( message ) => this._createGeometry( message.geometry ) );
+
+		// Remove task from the task list.
+		// Note: replaced '.finally()' with '.catch().then()' block - iOS 11 support (#19416)
+		geometryPending
+			.catch( () => true )
+			.then( () => {
+
+				if ( worker && taskID ) {
+
+					this._releaseTask( worker, taskID );
+
+					// this.debug();
+
+				}
+
+			} );
+
+		// Cache the task result.
+		_taskCache.set( buffer, {
+
+			key: taskKey,
+			promise: geometryPending
+
+		} );
+
+		return geometryPending;
+
+	}
+
+	_createGeometry( geometryData ) {
+
+		const geometry = new BufferGeometry();
+
+		if ( geometryData.index ) {
+
+			geometry.setIndex( new BufferAttribute( geometryData.index.array, 1 ) );
+
+		}
+
+		for ( let i = 0; i < geometryData.attributes.length; i ++ ) {
+
+			const attribute = geometryData.attributes[ i ];
+			const name = attribute.name;
+			const array = attribute.array;
+			const itemSize = attribute.itemSize;
+
+			geometry.setAttribute( name, new BufferAttribute( array, itemSize ) );
+
+		}
+
+		return geometry;
+
+	}
+
+	_loadLibrary( url, responseType ) {
+
+		const loader = new FileLoader( this.manager );
+		loader.setPath( this.decoderPath );
+		loader.setResponseType( responseType );
+		loader.setWithCredentials( this.withCredentials );
+
+		return new Promise( ( resolve, reject ) => {
+
+			loader.load( url, resolve, undefined, reject );
+
+		} );
+
+	}
+
+	preload() {
+
+		this._initDecoder();
+
+		return this;
+
+	}
+
+	_initDecoder() {
+
+		if ( this.decoderPending ) return this.decoderPending;
+
+		const useJS = typeof WebAssembly !== 'object' || this.decoderConfig.type === 'js';
+		const librariesPending = [];
+
+		if ( useJS ) {
+
+			librariesPending.push( this._loadLibrary( 'draco_decoder.js', 'text' ) );
+
+		} else {
+
+			librariesPending.push( this._loadLibrary( 'draco_wasm_wrapper.js', 'text' ) );
+			librariesPending.push( this._loadLibrary( 'draco_decoder.wasm', 'arraybuffer' ) );
+
+		}
+
+		this.decoderPending = Promise.all( librariesPending )
+			.then( ( libraries ) => {
+
+				const jsContent = libraries[ 0 ];
+
+				if ( ! useJS ) {
+
+					this.decoderConfig.wasmBinary = libraries[ 1 ];
+
+				}
+
+				const fn = DRACOWorker.toString();
+
+				const body = [
+					'/* draco decoder */',
+					jsContent,
+					'',
+					'/* worker */',
+					fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) )
+				].join( '\n' );
+
+				this.workerSourceURL = URL.createObjectURL( new Blob( [ body ] ) );
+
+			} );
+
+		return this.decoderPending;
+
+	}
+
+	_getWorker( taskID, taskCost ) {
+
+		return this._initDecoder().then( () => {
+
+			if ( this.workerPool.length < this.workerLimit ) {
+
+				const worker = new Worker( this.workerSourceURL );
+
+				worker._callbacks = {};
+				worker._taskCosts = {};
+				worker._taskLoad = 0;
+
+				worker.postMessage( { type: 'init', decoderConfig: this.decoderConfig } );
+
+				worker.onmessage = function ( e ) {
+
+					const message = e.data;
+
+					switch ( message.type ) {
+
+						case 'decode':
+							worker._callbacks[ message.id ].resolve( message );
+							break;
+
+						case 'error':
+							worker._callbacks[ message.id ].reject( message );
+							break;
+
+						default:
+							console.error( 'THREE.DRACOLoader: Unexpected message, "' + message.type + '"' );
+
+					}
+
+				};
+
+				this.workerPool.push( worker );
+
+			} else {
+
+				this.workerPool.sort( function ( a, b ) {
+
+					return a._taskLoad > b._taskLoad ? - 1 : 1;
+
+				} );
+
+			}
+
+			const worker = this.workerPool[ this.workerPool.length - 1 ];
+			worker._taskCosts[ taskID ] = taskCost;
+			worker._taskLoad += taskCost;
+			return worker;
+
+		} );
+
+	}
+
+	_releaseTask( worker, taskID ) {
+
+		worker._taskLoad -= worker._taskCosts[ taskID ];
+		delete worker._callbacks[ taskID ];
+		delete worker._taskCosts[ taskID ];
+
+	}
+
+	debug() {
+
+		console.log( 'Task load: ', this.workerPool.map( ( worker ) => worker._taskLoad ) );
+
+	}
+
+	dispose() {
+
+		for ( let i = 0; i < this.workerPool.length; ++ i ) {
+
+			this.workerPool[ i ].terminate();
+
+		}
+
+		this.workerPool.length = 0;
+
+		return this;
+
+	}
+
+}
+
+/* WEB WORKER */
+
+function DRACOWorker() {
+
+	let decoderConfig;
+	let decoderPending;
+
+	onmessage = function ( e ) {
+
+		const message = e.data;
+
+		switch ( message.type ) {
+
+			case 'init':
+				decoderConfig = message.decoderConfig;
+				decoderPending = new Promise( function ( resolve/*, reject*/ ) {
+
+					decoderConfig.onModuleLoaded = function ( draco ) {
+
+						// Module is Promise-like. Wrap before resolving to avoid loop.
+						resolve( { draco: draco } );
+
+					};
+
+					DracoDecoderModule( decoderConfig ); // eslint-disable-line no-undef
+
+				} );
+				break;
+
+			case 'decode':
+				const buffer = message.buffer;
+				const taskConfig = message.taskConfig;
+				decoderPending.then( ( module ) => {
+
+					const draco = module.draco;
+					const decoder = new draco.Decoder();
+					const decoderBuffer = new draco.DecoderBuffer();
+					decoderBuffer.Init( new Int8Array( buffer ), buffer.byteLength );
+
+					try {
+
+						const geometry = decodeGeometry( draco, decoder, decoderBuffer, taskConfig );
+
+						const buffers = geometry.attributes.map( ( attr ) => attr.array.buffer );
+
+						if ( geometry.index ) buffers.push( geometry.index.array.buffer );
+
+						self.postMessage( { type: 'decode', id: message.id, geometry }, buffers );
+
+					} catch ( error ) {
+
+						console.error( error );
+
+						self.postMessage( { type: 'error', id: message.id, error: error.message } );
+
+					} finally {
+
+						draco.destroy( decoderBuffer );
+						draco.destroy( decoder );
+
+					}
+
+				} );
+				break;
+
+		}
+
+	};
+
+	function decodeGeometry( draco, decoder, decoderBuffer, taskConfig ) {
+
+		const attributeIDs = taskConfig.attributeIDs;
+		const attributeTypes = taskConfig.attributeTypes;
+
+		let dracoGeometry;
+		let decodingStatus;
+
+		const geometryType = decoder.GetEncodedGeometryType( decoderBuffer );
+
+		if ( geometryType === draco.TRIANGULAR_MESH ) {
+
+			dracoGeometry = new draco.Mesh();
+			decodingStatus = decoder.DecodeBufferToMesh( decoderBuffer, dracoGeometry );
+
+		} else if ( geometryType === draco.POINT_CLOUD ) {
+
+			dracoGeometry = new draco.PointCloud();
+			decodingStatus = decoder.DecodeBufferToPointCloud( decoderBuffer, dracoGeometry );
+
+		} else {
+
+			throw new Error( 'THREE.DRACOLoader: Unexpected geometry type.' );
+
+		}
+
+		if ( ! decodingStatus.ok() || dracoGeometry.ptr === 0 ) {
+
+			throw new Error( 'THREE.DRACOLoader: Decoding failed: ' + decodingStatus.error_msg() );
+
+		}
+
+		const geometry = { index: null, attributes: [] };
+
+		// Gather all vertex attributes.
+		for ( const attributeName in attributeIDs ) {
+
+			const attributeType = self[ attributeTypes[ attributeName ] ];
+
+			let attribute;
+			let attributeID;
+
+			// A Draco file may be created with default vertex attributes, whose attribute IDs
+			// are mapped 1:1 from their semantic name (POSITION, NORMAL, ...). Alternatively,
+			// a Draco file may contain a custom set of attributes, identified by known unique
+			// IDs. glTF files always do the latter, and `.drc` files typically do the former.
+			if ( taskConfig.useUniqueIDs ) {
+
+				attributeID = attributeIDs[ attributeName ];
+				attribute = decoder.GetAttributeByUniqueId( dracoGeometry, attributeID );
+
+			} else {
+
+				attributeID = decoder.GetAttributeId( dracoGeometry, draco[ attributeIDs[ attributeName ] ] );
+
+				if ( attributeID === - 1 ) continue;
+
+				attribute = decoder.GetAttribute( dracoGeometry, attributeID );
+
+			}
+
+			geometry.attributes.push( decodeAttribute( draco, decoder, dracoGeometry, attributeName, attributeType, attribute ) );
+
+		}
+
+		// Add index.
+		if ( geometryType === draco.TRIANGULAR_MESH ) {
+
+			geometry.index = decodeIndex( draco, decoder, dracoGeometry );
+
+		}
+
+		draco.destroy( dracoGeometry );
+
+		return geometry;
+
+	}
+
+	function decodeIndex( draco, decoder, dracoGeometry ) {
+
+		const numFaces = dracoGeometry.num_faces();
+		const numIndices = numFaces * 3;
+		const byteLength = numIndices * 4;
+
+		const ptr = draco._malloc( byteLength );
+		decoder.GetTrianglesUInt32Array( dracoGeometry, byteLength, ptr );
+		const index = new Uint32Array( draco.HEAPF32.buffer, ptr, numIndices ).slice();
+		draco._free( ptr );
+
+		return { array: index, itemSize: 1 };
+
+	}
+
+	function decodeAttribute( draco, decoder, dracoGeometry, attributeName, attributeType, attribute ) {
+
+		const numComponents = attribute.num_components();
+		const numPoints = dracoGeometry.num_points();
+		const numValues = numPoints * numComponents;
+		const byteLength = numValues * attributeType.BYTES_PER_ELEMENT;
+		const dataType = getDracoDataType( draco, attributeType );
+
+		const ptr = draco._malloc( byteLength );
+		decoder.GetAttributeDataArrayForAllPoints( dracoGeometry, attribute, dataType, byteLength, ptr );
+		const array = new attributeType( draco.HEAPF32.buffer, ptr, numValues ).slice();
+		draco._free( ptr );
+
+		return {
+			name: attributeName,
+			array: array,
+			itemSize: numComponents
+		};
+
+	}
+
+	function getDracoDataType( draco, attributeType ) {
+
+		switch ( attributeType ) {
+
+			case Float32Array: return draco.DT_FLOAT32;
+			case Int8Array: return draco.DT_INT8;
+			case Int16Array: return draco.DT_INT16;
+			case Int32Array: return draco.DT_INT32;
+			case Uint8Array: return draco.DT_UINT8;
+			case Uint16Array: return draco.DT_UINT16;
+			case Uint32Array: return draco.DT_UINT32;
+
+		}
+
+	}
+
+}
+
+export { DRACOLoader };