Merge pull request #16851 from Mugen87/dev32

Docs: Convert browsers to modules.

docs/scenes/bones-browser.html

@@ -21,11 +21,27 @@
 
 		<a id='newWindow' href='./bones-browser.html' target='_blank'>Open in New Window</a>
 
-		<script src="../../build/three.min.js"></script>
-		<script src='../../examples/js/libs/dat.gui.min.js'></script>
-		<script src="../../examples/js/controls/OrbitControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				Bone,
+				Color,
+				CylinderBufferGeometry,
+				DoubleSide,
+				Float32BufferAttribute,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SkinnedMesh,
+				Skeleton,
+				SkeletonHelper,
+				Vector3,
+				Uint16BufferAttribute,
+				WebGLRenderer
+			} from "../../build/three.module.js";
+
+			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
 
 			var gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
 
@@ -35,27 +51,27 @@
 
 			function initScene() {
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x444444 );
+				scene = new Scene();
+				scene.background = new Color( 0x444444 );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.z = 30;
 				camera.position.y = 30;
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				orbit = new THREE.OrbitControls( camera, renderer.domElement );
+				orbit = new OrbitControls( camera, renderer.domElement );
 				orbit.enableZoom = false;
 
 				lights = [];
-				lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+				lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
+				lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
+				lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
 
 				lights[ 0 ].position.set( 0, 200, 0 );
 				lights[ 1 ].position.set( 100, 200, 100 );
@@ -81,7 +97,7 @@
 
 			function createGeometry( sizing ) {
 
-				var geometry = new THREE.CylinderBufferGeometry(
+				var geometry = new CylinderBufferGeometry(
 					5, // radiusTop
 					5, // radiusBottom
 					sizing.height, // height
@@ -92,7 +108,7 @@
 
 				var position = geometry.attributes.position;
 
-				var vertex = new THREE.Vector3();
+				var vertex = new Vector3();
 
 				var skinIndices = [];
 				var skinWeights = [];
@@ -111,8 +127,8 @@
 
 				}
 
-				geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
-				geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+				geometry.addAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
+				geometry.addAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
 
 				return geometry;
 
@@ -122,13 +138,13 @@
 
 				bones = [];
 
-				var prevBone = new THREE.Bone();
+				var prevBone = new Bone();
 				bones.push( prevBone );
 				prevBone.position.y = - sizing.halfHeight;
 
 				for ( var i = 0; i < sizing.segmentCount; i ++ ) {
 
-					var bone = new THREE.Bone();
+					var bone = new Bone();
 					bone.position.y = sizing.segmentHeight;
 					bones.push( bone );
 					prevBone.add( bone );
@@ -142,22 +158,22 @@
 
 			function createMesh( geometry, bones ) {
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					skinning: true,
 					color: 0x156289,
 					emissive: 0x072534,
-					side: THREE.DoubleSide,
+					side: DoubleSide,
 					flatShading: true
 				} );
 
-				var mesh = new THREE.SkinnedMesh( geometry,	material );
-				var skeleton = new THREE.Skeleton( bones );
+				var mesh = new SkinnedMesh( geometry,	material );
+				var skeleton = new Skeleton( bones );
 
 				mesh.add( bones[ 0 ] );
 
 				mesh.bind( skeleton );
 
-				skeletonHelper = new THREE.SkeletonHelper( mesh );
+				skeletonHelper = new SkeletonHelper( mesh );
 				skeletonHelper.material.linewidth = 2;
 				scene.add( skeletonHelper );
 

docs/scenes/js/geometry.js

@@ -1,1384 +0,0 @@
-/**
- * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
- */
-
-var twoPi = Math.PI * 2;
-
-function updateGroupGeometry( mesh, geometry ) {
-
-	if ( geometry.isGeometry ) {
-
-		geometry = new THREE.BufferGeometry().fromGeometry( geometry );
-
-		console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );
-
-	}
-
-	mesh.children[ 0 ].geometry.dispose();
-	mesh.children[ 1 ].geometry.dispose();
-
-	mesh.children[ 0 ].geometry = new THREE.WireframeGeometry( geometry );
-	mesh.children[ 1 ].geometry = geometry;
-
-	// these do not update nicely together if shared
-
-}
-
-function CustomSinCurve( scale ) {
-
-	THREE.Curve.call( this );
-
-	this.scale = ( scale === undefined ) ? 1 : scale;
-
-}
-
-CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
-CustomSinCurve.prototype.constructor = CustomSinCurve;
-
-CustomSinCurve.prototype.getPoint = function ( t ) {
-
-	var tx = t * 3 - 1.5;
-	var ty = Math.sin( 2 * Math.PI * t );
-	var tz = 0;
-
-	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
-
-};
-
-// heart shape
-
-var x = 0, y = 0;
-
-var heartShape = new THREE.Shape();
-
-heartShape.moveTo( x + 5, y + 5 );
-heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
-heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
-heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
-heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
-heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
-heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
-
-var guis = {
-
-	BoxBufferGeometry: function ( mesh ) {
-
-		var data = {
-			width: 15,
-			height: 15,
-			depth: 15,
-			widthSegments: 1,
-			heightSegments: 1,
-			depthSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.BoxBufferGeometry(
-					data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.BoxBufferGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	BoxGeometry: function ( mesh ) {
-
-		var data = {
-			width: 15,
-			height: 15,
-			depth: 15,
-			widthSegments: 1,
-			heightSegments: 1,
-			depthSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.BoxGeometry(
-					data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.BoxGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	CylinderBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radiusTop: 5,
-			radiusBottom: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CylinderBufferGeometry(
-					data.radiusTop,
-					data.radiusBottom,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CylinderBufferGeometry' );
-
-		folder.add( data, 'radiusTop', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'radiusBottom', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	CylinderGeometry: function ( mesh ) {
-
-		var data = {
-			radiusTop: 5,
-			radiusBottom: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CylinderGeometry(
-					data.radiusTop,
-					data.radiusBottom,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CylinderGeometry' );
-
-		folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	ConeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ConeBufferGeometry(
-					data.radius,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ConeBufferGeometry' );
-
-		folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	ConeGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ConeGeometry(
-					data.radius,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ConeGeometry' );
-
-		folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-
-	CircleBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			segments: 32,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CircleBufferGeometry(
-					data.radius, data.segments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	CircleGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			segments: 32,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CircleGeometry(
-					data.radius, data.segments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CircleGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	DodecahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.DodecahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	DodecahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.DodecahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.DodecahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	IcosahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.IcosahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	IcosahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.IcosahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.IcosahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	LatheBufferGeometry: function ( mesh ) {
-
-		var points = [];
-
-		for ( var i = 0; i < 10; i ++ ) {
-
-			points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
-
-		}
-
-		var data = {
-			segments: 12,
-			phiStart: 0,
-			phiLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.LatheBufferGeometry(
-				points, data.segments, data.phiStart, data.phiLength
-			);
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );
-
-		folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	LatheGeometry: function ( mesh ) {
-
-		var points = [];
-
-		for ( var i = 0; i < 10; i ++ ) {
-
-			points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
-
-		}
-
-		var data = {
-			segments: 12,
-			phiStart: 0,
-			phiLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.LatheGeometry(
-				points, data.segments, data.phiStart, data.phiLength
-			);
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.LatheGeometry' );
-
-		folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	OctahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.OctahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	OctahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.OctahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.OctahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	PlaneBufferGeometry: function ( mesh ) {
-
-		var data = {
-			width: 10,
-			height: 10,
-			widthSegments: 1,
-			heightSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.PlaneBufferGeometry(
-					data.width, data.height, data.widthSegments, data.heightSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	PlaneGeometry: function ( mesh ) {
-
-		var data = {
-			width: 10,
-			height: 10,
-			widthSegments: 1,
-			heightSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.PlaneGeometry(
-					data.width, data.height, data.widthSegments, data.heightSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.PlaneGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	RingBufferGeometry: function ( mesh ) {
-
-		var data = {
-			innerRadius: 5,
-			outerRadius: 10,
-			thetaSegments: 8,
-			phiSegments: 8,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.RingBufferGeometry(
-					data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
-
-		folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	RingGeometry: function ( mesh ) {
-
-		var data = {
-			innerRadius: 5,
-			outerRadius: 10,
-			thetaSegments: 8,
-			phiSegments: 8,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.RingGeometry(
-					data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.RingGeometry' );
-
-		folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	SphereBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 15,
-			widthSegments: 8,
-			heightSegments: 6,
-			phiStart: 0,
-			phiLength: twoPi,
-			thetaStart: 0,
-			thetaLength: Math.PI
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.SphereBufferGeometry(
-					data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	SphereGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 15,
-			widthSegments: 8,
-			heightSegments: 6,
-			phiStart: 0,
-			phiLength: twoPi,
-			thetaStart: 0,
-			thetaLength: Math.PI
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.SphereGeometry(
-					data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.SphereGeometry' );
-
-		folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TetrahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TetrahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TetrahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TetrahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TetrahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TextGeometry: function ( mesh ) {
-
-		var data = {
-			text: "TextGeometry",
-			size: 5,
-			height: 2,
-			curveSegments: 12,
-			font: "helvetiker",
-			weight: "regular",
-			bevelEnabled: false,
-			bevelThickness: 1,
-			bevelSize: 0.5,
-			bevelOffset: 0.0,
-			bevelSegments: 3
-		};
-
-		var fonts = [
-			"helvetiker",
-			"optimer",
-			"gentilis",
-			"droid/droid_serif"
-		];
-
-		var weights = [
-			"regular", "bold"
-		];
-
-		function generateGeometry() {
-
-			var loader = new THREE.FontLoader();
-			loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
-
-				var geometry = new THREE.TextGeometry( data.text, {
-					font: font,
-					size: data.size,
-					height: data.height,
-					curveSegments: data.curveSegments,
-					bevelEnabled: data.bevelEnabled,
-					bevelThickness: data.bevelThickness,
-					bevelSize: data.bevelSize,
-					bevelOffset: data.bevelOffset,
-					bevelSegments: data.bevelSegments
-				} );
-				geometry.center();
-
-				updateGroupGeometry( mesh, geometry );
-
-			} );
-
-		}
-
-		//Hide the wireframe
-		mesh.children[ 0 ].visible = false;
-
-		var folder = gui.addFolder( 'THREE.TextGeometry' );
-
-		folder.add( data, 'text' ).onChange( generateGeometry );
-		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'font', fonts ).onChange( generateGeometry );
-		folder.add( data, 'weight', weights ).onChange( generateGeometry );
-		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TextBufferGeometry: function ( mesh ) {
-
-		var data = {
-			text: "TextBufferGeometry",
-			size: 5,
-			height: 2,
-			curveSegments: 12,
-			font: "helvetiker",
-			weight: "regular",
-			bevelEnabled: false,
-			bevelThickness: 1,
-			bevelSize: 0.5,
-			bevelOffset: 0.0,
-			bevelSegments: 3
-		};
-
-		var fonts = [
-			"helvetiker",
-			"optimer",
-			"gentilis",
-			"droid/droid_serif"
-		];
-
-		var weights = [
-			"regular", "bold"
-		];
-
-		function generateGeometry() {
-
-			var loader = new THREE.FontLoader();
-			loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
-
-				var geometry = new THREE.TextBufferGeometry( data.text, {
-					font: font,
-					size: data.size,
-					height: data.height,
-					curveSegments: data.curveSegments,
-					bevelEnabled: data.bevelEnabled,
-					bevelThickness: data.bevelThickness,
-					bevelSize: data.bevelSize,
-					bevelOffset: data.bevelOffset,
-					bevelSegments: data.bevelSegments
-				} );
-				geometry.center();
-
-				updateGroupGeometry( mesh, geometry );
-
-			} );
-
-		}
-
-		//Hide the wireframe
-		mesh.children[ 0 ].visible = false;
-
-		var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
-
-		folder.add( data, 'text' ).onChange( generateGeometry );
-		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'font', fonts ).onChange( generateGeometry );
-		folder.add( data, 'weight', weights ).onChange( generateGeometry );
-		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			radialSegments: 16,
-			tubularSegments: 100,
-			arc: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusBufferGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			radialSegments: 16,
-			tubularSegments: 100,
-			arc: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusKnotBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			tubularSegments: 64,
-			radialSegments: 8,
-			p: 2,
-			q: 3
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusKnotBufferGeometry(
-					data.radius, data.tube, data.tubularSegments, data.radialSegments,
-					data.p, data.q
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusKnotGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			tubularSegments: 64,
-			radialSegments: 8,
-			p: 2,
-			q: 3
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusKnotGeometry(
-					data.radius, data.tube, data.tubularSegments, data.radialSegments,
-					data.p, data.q
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ParametricBufferGeometry: function ( mesh ) {
-
-		var data = {
-			slices: 25,
-			stacks: 25
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
-
-		folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ParametricGeometry: function ( mesh ) {
-
-		var data = {
-			slices: 25,
-			stacks: 25
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ParametricGeometry' );
-
-		folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TubeGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 20,
-			radius: 2,
-			radialSegments: 8
-		};
-
-		var path = new CustomSinCurve( 10 );
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TubeGeometry' );
-
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TubeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 20,
-			radius: 2,
-			radialSegments: 8
-		};
-
-		var path = new CustomSinCurve( 10 );
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
-
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ShapeGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 12
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ShapeGeometry( heartShape, data.segments );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ShapeGeometry' );
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ShapeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 12
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ExtrudeGeometry: function ( mesh ) {
-
-		var data = {
-			steps: 2,
-			depth: 16,
-			bevelEnabled: true,
-			bevelThickness: 1,
-			bevelSize: 1,
-			bevelOffset: 0,
-			bevelSegments: 1
-		};
-
-		var length = 12, width = 8;
-
-		var shape = new THREE.Shape();
-		shape.moveTo( 0, 0 );
-		shape.lineTo( 0, width );
-		shape.lineTo( length, width );
-		shape.lineTo( length, 0 );
-		shape.lineTo( 0, 0 );
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ExtrudeGeometry( shape, data );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
-
-		folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ExtrudeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			steps: 2,
-			depth: 16,
-			bevelEnabled: true,
-			bevelThickness: 1,
-			bevelSize: 1,
-			bevelOffset: 0,
-			bevelSegments: 1
-		};
-
-		var length = 12, width = 8;
-
-		var shape = new THREE.Shape();
-		shape.moveTo( 0, 0 );
-		shape.lineTo( 0, width );
-		shape.lineTo( length, width );
-		shape.lineTo( length, 0 );
-		shape.lineTo( 0, 0 );
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ExtrudeBufferGeometry( shape, data );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );
-
-		folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	}
-
-};
-
-function chooseFromHash( mesh ) {
-
-	var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
-
-	if ( guis[ selectedGeometry ] !== undefined ) {
-
-		guis[ selectedGeometry ]( mesh );
-
-	}
-
-	if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
-
-		return { fixed: true };
-
-	}
-
-	//No configuration options
-	return {};
-
-}

docs/scenes/js/material.js

@@ -1,674 +0,0 @@
-/**
- * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
- */
-
-var constants = {
-
-	combine: {
-
-		'THREE.MultiplyOperation': THREE.MultiplyOperation,
-		'THREE.MixOperation': THREE.MixOperation,
-		'THREE.AddOperation': THREE.AddOperation
-
-	},
-
-	side: {
-
-		'THREE.FrontSide': THREE.FrontSide,
-		'THREE.BackSide': THREE.BackSide,
-		'THREE.DoubleSide': THREE.DoubleSide
-
-	},
-
-	colors: {
-
-		'THREE.NoColors': THREE.NoColors,
-		'THREE.VertexColors': THREE.VertexColors
-
-	},
-
-	blendingMode: {
-
-		'THREE.NoBlending': THREE.NoBlending,
-		'THREE.NormalBlending': THREE.NormalBlending,
-		'THREE.AdditiveBlending': THREE.AdditiveBlending,
-		'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
-		'THREE.MultiplyBlending': THREE.MultiplyBlending,
-		'THREE.CustomBlending': THREE.CustomBlending
-
-	},
-
-	equations: {
-
-		'THREE.AddEquation': THREE.AddEquation,
-		'THREE.SubtractEquation': THREE.SubtractEquation,
-		'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
-
-	},
-
-	destinationFactors: {
-
-		'THREE.ZeroFactor': THREE.ZeroFactor,
-		'THREE.OneFactor': THREE.OneFactor,
-		'THREE.SrcColorFactor': THREE.SrcColorFactor,
-		'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor,
-		'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor,
-		'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor,
-		'THREE.DstAlphaFactor': THREE.DstAlphaFactor,
-		'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor
-
-	},
-
-	sourceFactors: {
-
-		'THREE.DstColorFactor': THREE.DstColorFactor,
-		'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
-		'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
-
-	}
-
-};
-
-function getObjectsKeys( obj ) {
-
-	var keys = [];
-
-	for ( var key in obj ) {
-
-		if ( obj.hasOwnProperty( key ) ) {
-
-			keys.push( key );
-
-		}
-
-	}
-
-	return keys;
-
-}
-
-var textureLoader = new THREE.TextureLoader();
-var cubeTextureLoader = new THREE.CubeTextureLoader();
-
-var envMaps = ( function () {
-
-	var path = '../../examples/textures/cube/SwedishRoyalCastle/';
-	var format = '.jpg';
-	var urls = [
-		path + 'px' + format, path + 'nx' + format,
-		path + 'py' + format, path + 'ny' + format,
-		path + 'pz' + format, path + 'nz' + format
-	];
-
-	var reflectionCube = cubeTextureLoader.load( urls );
-	reflectionCube.format = THREE.RGBFormat;
-
-	var refractionCube = cubeTextureLoader.load( urls );
-	refractionCube.mapping = THREE.CubeRefractionMapping;
-	refractionCube.format = THREE.RGBFormat;
-
-	return {
-		none: null,
-		reflection: reflectionCube,
-		refraction: refractionCube
-	};
-
-} )();
-
-var diffuseMaps = ( function () {
-
-	var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
-	bricks.wrapS = THREE.RepeatWrapping;
-	bricks.wrapT = THREE.RepeatWrapping;
-	bricks.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		bricks: bricks
-	};
-
-} )();
-
-var roughnessMaps = ( function () {
-
-	var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
-	bricks.wrapT = THREE.RepeatWrapping;
-	bricks.wrapS = THREE.RepeatWrapping;
-	bricks.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		bricks: bricks
-	};
-
-} )();
-
-var matcaps = ( function () {
-
-	return {
-		none: null,
-		porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
-	};
-
-} )();
-
-var alphaMaps = ( function () {
-
-	var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
-	fibers.wrapT = THREE.RepeatWrapping;
-	fibers.wrapS = THREE.RepeatWrapping;
-	fibers.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		fibers: fibers
-	};
-
-} )();
-
-var gradientMaps = ( function () {
-
-	var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
-	threeTone.minFilter = THREE.NearestFilter;
-	threeTone.magFilter = THREE.NearestFilter;
-
-	var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
-	fiveTone.minFilter = THREE.NearestFilter;
-	fiveTone.magFilter = THREE.NearestFilter;
-
-	return {
-		none: null,
-		threeTone: threeTone,
-		fiveTone: fiveTone
-	};
-
-} )();
-
-var envMapKeys = getObjectsKeys( envMaps );
-var diffuseMapKeys = getObjectsKeys( diffuseMaps );
-var roughnessMapKeys = getObjectsKeys( roughnessMaps );
-var matcapKeys = getObjectsKeys( matcaps );
-var alphaMapKeys = getObjectsKeys( alphaMaps );
-var gradientMapKeys = getObjectsKeys( gradientMaps );
-
-function generateVertexColors( geometry ) {
-
-	var positionAttribute = geometry.attributes.position;
-
-	var colors = [];
-	var color = new THREE.Color();
-
-	for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
-
-		color.setHSL( i / il * Math.random(), 0.5, 0.5 );
-		colors.push( color.r, color.g, color.b );
-
-	}
-
-	geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-}
-
-function handleColorChange( color ) {
-
-	return function ( value ) {
-
-		if ( typeof value === 'string' ) {
-
-			value = value.replace( '#', '0x' );
-
-		}
-
-		color.setHex( value );
-
-	};
-
-}
-
-function needsUpdate( material, geometry ) {
-
-	return function () {
-
-		material.vertexColors = parseInt( material.vertexColors ); //Ensure number
-		material.side = parseInt( material.side ); //Ensure number
-		material.needsUpdate = true;
-		geometry.attributes.position.needsUpdate = true;
-		geometry.attributes.normal.needsUpdate = true;
-		geometry.attributes.color.needsUpdate = true;
-
-	};
-
-}
-
-function updateTexture( material, materialKey, textures ) {
-
-	return function ( key ) {
-
-		material[ materialKey ] = textures[ key ];
-		material.needsUpdate = true;
-
-	};
-
-}
-
-function guiScene( gui, scene ) {
-
-	var folder = gui.addFolder( 'Scene' );
-
-	var data = {
-		background: '#000000',
-		'ambient light': ambientLight.color.getHex()
-	};
-
-	var color = new THREE.Color();
-	var colorConvert = handleColorChange( color );
-
-	folder.addColor( data, 'background' ).onChange( function ( value ) {
-
-		colorConvert( value );
-
-		renderer.setClearColor( color.getHex() );
-
-	} );
-
-	folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
-
-	guiSceneFog( folder, scene );
-
-}
-
-function guiSceneFog( folder, scene ) {
-
-	var fogFolder = folder.addFolder( 'scene.fog' );
-
-	var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
-
-	var data = {
-		fog: {
-			'THREE.Fog()': false,
-			'scene.fog.color': fog.color.getHex()
-		}
-	};
-
-	fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
-
-		if ( useFog ) {
-
-			scene.fog = fog;
-
-		} else {
-
-			scene.fog = null;
-
-		}
-
-	} );
-
-	fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
-
-}
-
-function guiMaterial( gui, mesh, material, geometry ) {
-
-	var folder = gui.addFolder( 'THREE.Material' );
-
-	folder.add( material, 'transparent' );
-	folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
-	// folder.add( material, 'blending', constants.blendingMode );
-	// folder.add( material, 'blendSrc', constants.destinationFactors );
-	// folder.add( material, 'blendDst', constants.destinationFactors );
-	// folder.add( material, 'blendEquation', constants.equations );
-	folder.add( material, 'depthTest' );
-	folder.add( material, 'depthWrite' );
-	// folder.add( material, 'polygonOffset' );
-	// folder.add( material, 'polygonOffsetFactor' );
-	// folder.add( material, 'polygonOffsetUnits' );
-	folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'visible' );
-	folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
-
-}
-
-function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-	folder.add( material, 'combine', constants.combine );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'refractionRatio', 0, 1 );
-
-}
-
-function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
-
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
-
-	var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
-
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-
-}
-
-function guiLineBasicMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex()
-	};
-
-	var folder = gui.addFolder( 'THREE.LineBasicMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( material, 'linewidth', 0, 10 );
-	folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
-	folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-}
-
-function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-	folder.add( material, 'combine', constants.combine );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'refractionRatio', 0, 1 );
-
-}
-
-function guiMeshMatcapMaterial( gui, mesh, material ) {
-
-	var data = {
-		color: material.color.getHex(),
-		matcap: matcapKeys[ 1 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		specular: material.specular.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-	folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
-
-	folder.add( material, 'shininess', 0, 100 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshToonMaterial( gui, mesh, material ) {
-
-	var data = {
-		color: material.color.getHex(),
-		map: diffuseMapKeys[ 0 ],
-		gradientMap: gradientMapKeys[ 1 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		roughnessMap: roughnessMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'roughness', 0, 1 );
-	folder.add( material, 'metalness', 0, 1 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-	// TODO metalnessMap
-
-}
-
-function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		roughnessMap: roughnessMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'roughness', 0, 1 );
-	folder.add( material, 'metalness', 0, 1 );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
-	folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-	// TODO metalnessMap
-
-}
-
-function chooseFromHash( gui, mesh, geometry ) {
-
-	var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
-	var material;
-
-	switch ( selectedMaterial ) {
-
-		case 'MeshBasicMaterial' :
-
-			material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshBasicMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshLambertMaterial' :
-
-			material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshLambertMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshMatcapMaterial' :
-
-			material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshMatcapMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshPhongMaterial' :
-
-			material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshPhongMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshToonMaterial' :
-
-			material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshToonMaterial( gui, mesh, material, geometry );
-
-			// only use a single point light
-
-			lights[ 0 ].visible = false;
-			lights[ 2 ].visible = false;
-
-			return material;
-
-			break;
-
-		case 'MeshStandardMaterial' :
-
-			material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshStandardMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshPhysicalMaterial' :
-
-			material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshPhysicalMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshDepthMaterial' :
-
-			material = new THREE.MeshDepthMaterial();
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshDepthMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshNormalMaterial' :
-
-			material = new THREE.MeshNormalMaterial();
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshNormalMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'LineBasicMaterial' :
-
-			material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiLineBasicMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-	}
-
-}

docs/scenes/material-browser.html

@@ -21,34 +21,732 @@
 
 		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
 
-		<script src="../../build/three.min.js"></script>
-		<script src='../../examples/js/libs/dat.gui.min.js'></script>
-		<script src='js/material.js'></script>
+		<script type="module">
+			import {
+				AdditiveBlending, CustomBlending, MultiplyBlending, NormalBlending, NoBlending, SubtractiveBlending,
+				AddEquation, ReverseSubtractEquation, SubtractEquation,
+				AddOperation, MixOperation, MultiplyOperation,
+				AmbientLight,
+				Color,
+				CubeTextureLoader,
+				CubeRefractionMapping,
+				DoubleSide, FrontSide, BackSide,
+				DstAlphaFactor, DstColorFactor, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, ZeroFactor,
+				Float32BufferAttribute,
+				Fog,
+				LineBasicMaterial,
+				Mesh,
+				MeshBasicMaterial,
+				MeshDepthMaterial,
+				MeshLambertMaterial,
+				MeshMatcapMaterial,
+				MeshNormalMaterial,
+				MeshPhongMaterial,
+				MeshPhysicalMaterial,
+				MeshStandardMaterial,
+				MeshToonMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				PointLight,
+				RepeatWrapping,
+				RGBFormat,
+				Scene,
+				TextureLoader,
+				TorusKnotBufferGeometry,
+				VertexColors, NoColors,
+				WebGLRenderer
+			} from "../../build/three.module.js";
+
+			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+
+			/**
+			 * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
+			 */
+
+			var constants = {
+
+				combine: {
+
+					'THREE.MultiplyOperation': MultiplyOperation,
+					'THREE.MixOperation': MixOperation,
+					'THREE.AddOperation': AddOperation
+
+				},
+
+				side: {
+
+					'THREE.FrontSide': FrontSide,
+					'THREE.BackSide': BackSide,
+					'THREE.DoubleSide': DoubleSide
+
+				},
+
+				colors: {
+
+					'THREE.NoColors': NoColors,
+					'THREE.VertexColors': VertexColors
+
+				},
+
+				blendingMode: {
+
+					'THREE.NoBlending': NoBlending,
+					'THREE.NormalBlending': NormalBlending,
+					'THREE.AdditiveBlending': AdditiveBlending,
+					'THREE.SubtractiveBlending': SubtractiveBlending,
+					'THREE.MultiplyBlending': MultiplyBlending,
+					'THREE.CustomBlending': CustomBlending
+
+				},
+
+				equations: {
+
+					'THREE.AddEquation': AddEquation,
+					'THREE.SubtractEquation': SubtractEquation,
+					'THREE.ReverseSubtractEquation': ReverseSubtractEquation
+
+				},
+
+				destinationFactors: {
+
+					'THREE.ZeroFactor': ZeroFactor,
+					'THREE.OneFactor': OneFactor,
+					'THREE.SrcColorFactor': SrcColorFactor,
+					'THREE.OneMinusSrcColorFactor': OneMinusSrcColorFactor,
+					'THREE.SrcAlphaFactor': SrcAlphaFactor,
+					'THREE.OneMinusSrcAlphaFactor': OneMinusSrcAlphaFactor,
+					'THREE.DstAlphaFactor': DstAlphaFactor,
+					'THREE.OneMinusDstAlphaFactor': OneMinusDstAlphaFactor
+
+				},
+
+				sourceFactors: {
+
+					'THREE.DstColorFactor': DstColorFactor,
+					'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
+					'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
 
-		<script>
+				}
+
+			};
+
+			function getObjectsKeys( obj ) {
+
+				var keys = [];
+
+				for ( var key in obj ) {
+
+					if ( obj.hasOwnProperty( key ) ) {
+
+						keys.push( key );
+
+					}
+
+				}
+
+				return keys;
+
+			}
+
+			var textureLoader = new TextureLoader();
+			var cubeTextureLoader = new CubeTextureLoader();
+
+			var envMaps = ( function () {
+
+				var path = '../../examples/textures/cube/SwedishRoyalCastle/';
+				var format = '.jpg';
+				var urls = [
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
+
+				var reflectionCube = cubeTextureLoader.load( urls );
+				reflectionCube.format = RGBFormat;
+
+				var refractionCube = cubeTextureLoader.load( urls );
+				refractionCube.mapping = CubeRefractionMapping;
+				refractionCube.format = RGBFormat;
+
+				return {
+					none: null,
+					reflection: reflectionCube,
+					refraction: refractionCube
+				};
+
+			} )();
+
+			var diffuseMaps = ( function () {
+
+				var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
+				bricks.wrapS = RepeatWrapping;
+				bricks.wrapT = RepeatWrapping;
+				bricks.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					bricks: bricks
+				};
+
+			} )();
+
+			var roughnessMaps = ( function () {
+
+				var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
+				bricks.wrapT = RepeatWrapping;
+				bricks.wrapS = RepeatWrapping;
+				bricks.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					bricks: bricks
+				};
+
+			} )();
+
+			var matcaps = ( function () {
+
+				return {
+					none: null,
+					porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
+				};
+
+			} )();
+
+			var alphaMaps = ( function () {
+
+				var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
+				fibers.wrapT = RepeatWrapping;
+				fibers.wrapS = RepeatWrapping;
+				fibers.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					fibers: fibers
+				};
+
+			} )();
+
+			var gradientMaps = ( function () {
+
+				var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
+				threeTone.minFilter = NearestFilter;
+				threeTone.magFilter = NearestFilter;
+
+				var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
+				fiveTone.minFilter = NearestFilter;
+				fiveTone.magFilter = NearestFilter;
+
+				return {
+					none: null,
+					threeTone: threeTone,
+					fiveTone: fiveTone
+				};
+
+			} )();
+
+			var envMapKeys = getObjectsKeys( envMaps );
+			var diffuseMapKeys = getObjectsKeys( diffuseMaps );
+			var roughnessMapKeys = getObjectsKeys( roughnessMaps );
+			var matcapKeys = getObjectsKeys( matcaps );
+			var alphaMapKeys = getObjectsKeys( alphaMaps );
+			var gradientMapKeys = getObjectsKeys( gradientMaps );
+
+			function generateVertexColors( geometry ) {
+
+				var positionAttribute = geometry.attributes.position;
+
+				var colors = [];
+				var color = new Color();
+
+				for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
+
+					color.setHSL( i / il * Math.random(), 0.5, 0.5 );
+					colors.push( color.r, color.g, color.b );
+
+				}
+
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+
+			}
+
+			function handleColorChange( color ) {
+
+				return function ( value ) {
+
+					if ( typeof value === 'string' ) {
+
+						value = value.replace( '#', '0x' );
+
+					}
+
+					color.setHex( value );
+
+				};
+
+			}
+
+			function needsUpdate( material, geometry ) {
+
+				return function () {
+
+					material.vertexColors = parseInt( material.vertexColors ); //Ensure number
+					material.side = parseInt( material.side ); //Ensure number
+					material.needsUpdate = true;
+					geometry.attributes.position.needsUpdate = true;
+					geometry.attributes.normal.needsUpdate = true;
+					geometry.attributes.color.needsUpdate = true;
+
+				};
+
+			}
+
+			function updateTexture( material, materialKey, textures ) {
+
+				return function ( key ) {
+
+					material[ materialKey ] = textures[ key ];
+					material.needsUpdate = true;
+
+				};
+
+			}
+
+			function guiScene( gui, scene ) {
+
+				var folder = gui.addFolder( 'Scene' );
+
+				var data = {
+					background: '#000000',
+					'ambient light': ambientLight.color.getHex()
+				};
+
+				folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
+
+				guiSceneFog( folder, scene );
+
+			}
+
+			function guiSceneFog( folder, scene ) {
+
+				var fogFolder = folder.addFolder( 'scene.fog' );
+
+				var fog = new Fog( 0x3f7b9d, 0, 60 );
+
+				var data = {
+					fog: {
+						'THREE.Fog()': false,
+						'scene.fog.color': fog.color.getHex()
+					}
+				};
+
+				fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
+
+					if ( useFog ) {
+
+						scene.fog = fog;
+
+					} else {
+
+						scene.fog = null;
+
+					}
+
+				} );
+
+				fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
+
+			}
+
+			function guiMaterial( gui, mesh, material, geometry ) {
+
+				var folder = gui.addFolder( 'THREE.Material' );
+
+				folder.add( material, 'transparent' );
+				folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
+				// folder.add( material, 'blending', constants.blendingMode );
+				// folder.add( material, 'blendSrc', constants.destinationFactors );
+				// folder.add( material, 'blendDst', constants.destinationFactors );
+				// folder.add( material, 'blendEquation', constants.equations );
+				folder.add( material, 'depthTest' );
+				folder.add( material, 'depthWrite' );
+				// folder.add( material, 'polygonOffset' );
+				// folder.add( material, 'polygonOffsetFactor' );
+				// folder.add( material, 'polygonOffsetUnits' );
+				folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'visible' );
+				folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
+
+			}
+
+			function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'refractionRatio', 0, 1 );
+
+			}
+
+			function guiMeshDepthMaterial( gui, mesh, material ) {
+
+				var data = {
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
+
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
+
+				var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
+
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+
+			}
+
+			function guiLineBasicMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex()
+				};
+
+				var folder = gui.addFolder( 'THREE.LineBasicMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( material, 'linewidth', 0, 10 );
+				folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
+				folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+			}
+
+			function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'refractionRatio', 0, 1 );
+
+			}
+
+			function guiMeshMatcapMaterial( gui, mesh, material ) {
+
+				var data = {
+					color: material.color.getHex(),
+					matcap: matcapKeys[ 1 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					specular: material.specular.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+				folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
+
+				folder.add( material, 'shininess', 0, 100 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshToonMaterial( gui, mesh, material ) {
+
+				var data = {
+					color: material.color.getHex(),
+					map: diffuseMapKeys[ 0 ],
+					gradientMap: gradientMapKeys[ 1 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					roughnessMap: roughnessMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'roughness', 0, 1 );
+				folder.add( material, 'metalness', 0, 1 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+				// TODO metalnessMap
+
+			}
+
+			function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					roughnessMap: roughnessMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'roughness', 0, 1 );
+				folder.add( material, 'metalness', 0, 1 );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
+				folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+				// TODO metalnessMap
+
+			}
+
+			function chooseFromHash( gui, mesh, geometry ) {
+
+				var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
+				var material;
+
+				switch ( selectedMaterial ) {
+
+					case 'MeshBasicMaterial' :
+
+						material = new MeshBasicMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshBasicMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshLambertMaterial' :
+
+						material = new MeshLambertMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshLambertMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshMatcapMaterial' :
+
+						material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshMatcapMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshPhongMaterial' :
+
+						material = new MeshPhongMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshPhongMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshToonMaterial' :
+
+						material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshToonMaterial( gui, mesh, material, geometry );
+
+						// only use a single point light
+
+						lights[ 0 ].visible = false;
+						lights[ 2 ].visible = false;
+
+						return material;
+
+						break;
+
+					case 'MeshStandardMaterial' :
+
+						material = new MeshStandardMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshStandardMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshPhysicalMaterial' :
+
+						material = new MeshPhysicalMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshPhysicalMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshDepthMaterial' :
+
+						material = new MeshDepthMaterial();
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshDepthMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshNormalMaterial' :
+
+						material = new MeshNormalMaterial();
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshNormalMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'LineBasicMaterial' :
+
+						material = new LineBasicMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiLineBasicMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+				}
+
+			}
+
+			//
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
-			var scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x444444 );
+			var scene = new Scene();
+			scene.background = new Color( 0x444444 );
 
-			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
+			var camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
+			var renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
-			var ambientLight = new THREE.AmbientLight( 0x000000 );
+			var ambientLight = new AmbientLight( 0x000000 );
 			scene.add( ambientLight );
 
 			var lights = [];
-			lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-			lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-			lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
+			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
+			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
 
 			lights[ 0 ].position.set( 0, 200, 0 );
 			lights[ 1 ].position.set( 100, 200, 100 );
@@ -60,12 +758,12 @@
 
 			guiScene( gui, scene, camera );
 
-			var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
+			var geometry = new TorusKnotBufferGeometry( 10, 3, 100, 16 );
 			geometry = geometry.toNonIndexed();
 
 			generateVertexColors( geometry );
 
-			var mesh = new THREE.Mesh( geometry );
+			var mesh = new Mesh( geometry );
 			mesh.material = chooseFromHash( gui, mesh, geometry );
 
 			scene.add( mesh );
@@ -76,8 +774,6 @@
 
 				requestAnimationFrame( render );
 
-				var time = Date.now() * 0.001;
-
 				mesh.rotation.x += 0.005;
 				mesh.rotation.y += 0.005;