Documentation material browser

docs/api/materials/Material.html

@@ -53,14 +53,15 @@
 		</div>
 		<div>Default is *false*.</div>
 
-		<h3>.[page:Blending blending]</h3>
+		<h3>.[page:Materials blending]</h3>
 		<div>
-		Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending].
+		Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values.
+
 		</div>
 
-		<h3>.[page:Integer blendSrc]</h3>
+		<h3>.[page:Materials blendSrc]</h3>
 		<div>
-		Blending source. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation SrcAlphaFactor]
+		Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.
 		</div>
 
 		<h3>.[page:Integer blendDst]</h3>

docs/api/materials/MeshBasicMaterial.html

@@ -14,6 +14,7 @@
 		<div class="desc">A material for drawing geometries in a simple shaded (flat or wireframe) way.</div>
 		<div class="desc">The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshBasicMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -58,10 +59,10 @@
 		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
 		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
 		
-		<h3>.[page:String shading]</h3>
-		<div>Define shading type. Default is THREE.SmoothShading.</div>
+		<h3>.[page:Materials shading]</h3>
+		<div>Define shading type. Default is THREE.SmoothShading. Possible values are THREE.NoShading, THREE.FlatShading, THREE.SmoothShading.</div>
 
-		<h3>.[page:Integer vertexColors]</h3>
+		<h3>.[page:Materials vertexColors]</h3>
 		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
 		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
 

docs/api/materials/MeshDepthMaterial.html

@@ -13,6 +13,8 @@
 
 		<div class="desc">A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshDepthMaterial'></iframe>
+
 		<h2>Constructor</h2>
 
 

docs/api/materials/MeshFaceMaterial.html

@@ -13,7 +13,7 @@
 
 		<div class="desc">
 		A Material to define multiple materials for the same geometry. 
-		The geometry decides which material is used for which faces by the [page:Face3 faces materialindex].
+		The geometry decides which material is used for which faces by the [page:Face3 faces] materialindex.
 		The materialindex corresponds with the index of the material in the materials array.
 		</div>
 

docs/api/materials/MeshLambertMaterial.html

@@ -13,6 +13,7 @@
 
 		<div class="desc">A material for non-shiny (Lambertian) surfaces, evaluated per vertex.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshLambertMaterial'></iframe>
 
 		<h2>Constructor</h2>
 

docs/api/materials/MeshNormalMaterial.html

@@ -13,6 +13,7 @@
 
 		<div class="desc">A material that maps the normal vectors to RGB colors.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshNormalMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -39,7 +40,7 @@
 		<h3>.[page:number shading]</h3>
 		<div>
 			How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.<br/><br/>
-			Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading]
+			Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading] (default)
 		</div>
 		
 

docs/api/materials/MeshPhongMaterial.html

@@ -13,6 +13,7 @@
 
 		<div class="desc">A material for shiny surfaces, evaluated per pixel.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshPhongMaterial'></iframe>
 
 		<h2>Constructor</h2>
 

docs/page.css

@@ -65,7 +65,11 @@ code {
 	background-color: #f9f9f9;
 	overflow: auto;
 }
-
+iframe {
+	width: 100%;
+	height: 420px;
+	border:0;
+}
 strong {
 	color: #000;
 	font-weight: normal;

docs/scenes/js/material.js

@@ -0,0 +1,271 @@
+var constants = {
+	
+	side: {
+		"THREE.FrontSide": THREE.FrontSide,
+		"THREE.BackSide": THREE.BackSide,
+		"THREE.DoubleSide": THREE.DoubleSide
+	},
+	
+	shading: {
+		"THREE.NoShading": THREE.NoShading,
+		"THREE.FlatShading": THREE.FlatShading,
+		"THREE.SmoothShading": THREE.SmoothShading
+	},
+
+	colors: {
+		"THREE.NoColors": THREE.NoColors,
+		"THREE.FaceColors": THREE.FaceColors,
+		"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 handleColorChange( color ) {
+	
+	return function( value ){
+		if(typeof value === "string") {
+			value = value.replace('#', '0x');
+		}
+		color.setHex( value );
+    };
+	
+}
+
+function guiMaterial( gui, material ) {
+	var folder = gui.addFolder('THREE.Material');
+	
+	folder.add( material, 'transparent' );
+	folder.add( material, 'opacity', 0, 1 );
+	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' );
+	folder.add( material, 'overdraw' );
+	folder.add( material, 'visible' );
+	folder.add( material, 'side', constants.side );
+}
+
+function guiMeshBasicMaterial( gui, material ) {
+	
+	var data = {
+		color : material.color.getHex()
+	};
+		
+	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, 'wireframeLinecap', ["butt", "round", "square"] );
+	folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
+	folder.add( material, 'shading', constants.shading);
+	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'fog' );
+	
+	//folder.add( material, 'lightMap' );
+	//folder.add( material, 'specularMap' );
+	//folder.add( material, 'alphaMap' );
+	//folder.add( material, 'envMap' );
+	//folder.add( material, 'skinning' );
+	//folder.add( material, 'morphTargets' );
+	//folder.add( material, 'map' );
+	//folder.add( material, 'combine' );
+	//folder.add( material, 'relectivity' );
+	//folder.add( material, 'refractionRatio' );
+}
+
+function guiMeshDepthMaterial( gui, material ) {
+	
+	var folder = gui.addFolder('THREE.MeshDepthMaterial');
+		
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+}
+
+function guiMeshNormalMaterial( gui, material ) {
+	
+	var folder = gui.addFolder('THREE.MeshNormalMaterial');
+	
+	folder.add( material, 'morphTargets');
+	folder.add( material, 'shading', constants.shading);
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+}
+
+function guiLineBasicMaterial( gui, material ) {
+	
+	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);
+	folder.add( material, 'fog' );
+	
+}
+
+function guiMeshLambertMaterial( gui, material ) {
+	
+	var data = {
+		color : material.color.getHex(),
+		ambient : material.ambient.getHex(),
+		emissive : material.emissive.getHex()
+	};
+		
+	var folder = gui.addFolder('THREE.MeshLambertMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
+	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+	
+	folder.add( material, 'shading', constants.shading);
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
+	folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
+	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'fog' );
+	
+}
+
+function guiMeshPhongMaterial( gui, material ) {
+	
+	var data = {
+		color : material.color.getHex(),
+		ambient : material.ambient.getHex(),
+		emissive : material.emissive.getHex(),
+		specular : material.specular.getHex()
+	};
+		
+	var folder = gui.addFolder('THREE.MeshPhongMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
+	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, 'shading', constants.shading);
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
+	folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
+	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'fog' );
+	
+}
+
+
+function chooseFromHash() {
+
+	var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
+	var material;
+	
+	var gui = new dat.GUI();
+	switch (selectedMaterial) {
+		
+	case "MeshBasicMaterial":
+
+		material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+		guiMaterial( gui, material );
+		guiMeshBasicMaterial( gui, material );
+
+		return material;
+
+		break;
+	
+	case "MeshLambertMaterial":
+
+		material = new THREE.MeshLambertMaterial({color: 0x00ff00});
+		guiMaterial( gui, material );
+		guiMeshLambertMaterial( gui, material );
+
+		return material;
+
+		break;
+	
+	case "MeshPhongMaterial":
+
+		material = new THREE.MeshPhongMaterial({color: 0x00ff00});
+		guiMaterial( gui, material );
+		guiMeshPhongMaterial( gui, material );
+
+		return material;
+
+		break;
+	
+	case "MeshDepthMaterial":
+		
+		material = new THREE.MeshDepthMaterial({color: 0x00ff00});
+		guiMaterial( gui, material );
+		guiMeshDepthMaterial( gui, material );
+
+		return material;
+		
+		break;
+	
+	case "MeshNormalMaterial":
+		
+		material = new THREE.MeshNormalMaterial();
+		guiMaterial( gui, material );
+		guiMeshNormalMaterial( gui, material );
+
+		return material;
+		
+		break;
+		
+	case "LineBasicMaterial":
+
+		material = new THREE.LineBasicMaterial({color: 0x00ff00});
+		guiMaterial( gui, material );
+		guiLineBasicMaterial( gui, material );
+
+		return material;
+
+		break;
+	}
+				
+	
+}

docs/scenes/material-browser.html

@@ -0,0 +1,68 @@
+<html>
+	<head>
+		<title>MeshBasicMaterial</title>
+		<style>
+			body {margin:0;}
+			canvas { width: 100%; height: 100% }
+		</style>
+	</head>
+	<body>
+		
+		<script src="../../build/three.min.js"></script>
+		<script src='../../examples/js/libs/dat.gui.min.js'></script>
+		<script src='js/material.js'></script>
+		
+		<script>
+		
+			var scene = new THREE.Scene();
+			var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 50);
+
+			var renderer = new THREE.WebGLRenderer();
+			renderer.setSize(window.innerWidth, window.innerHeight);
+			document.body.appendChild(renderer.domElement);
+
+			var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
+			var material = chooseFromHash();
+			
+			var torus = new THREE.Mesh(geometry, material);
+			scene.add(torus);
+
+			var lights = [];
+			lights[0] = new THREE.AmbientLight( 0x555555 );
+			lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
+			
+			lights[1].position.set(0, 200, 0);
+			lights[2].position.set(100, 200, 100);
+			lights[3].position.set(-100, -200, -100);
+			
+			//scene.add( lights[0] );
+			scene.add( lights[1] );
+			scene.add( lights[2] );
+			scene.add( lights[3] );
+
+			camera.position.z = 30;
+			
+			var render = function () {
+				
+				requestAnimationFrame(render);
+
+				torus.rotation.x += 0.01;
+				torus.rotation.y += 0.01;
+				material.needsUpdate = true;
+
+				renderer.render(scene, camera);
+			};
+			
+			window.addEventListener( 'resize', function() {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );				
+			}, false );			
+
+			render();
+		</script>
+	</body>
+</html>

docs/scenes/threejs-example.html

@@ -1,368 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Simple Example ThreeJS</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-		<style>
-			body {
-				font-family: Monospace;
-				background-color: #f0f0f0;
-				margin: 0px;
-				overflow: hidden;
-			}
-			#material {
-				bottom:5px;
-				left:5px;
-				position:absolute;
-			}
-		</style>
-		
-		<script src="../../build/three.min.js"></script>
-		<script src='../../examples/js/libs/dat.gui.min.js'></script>
-		<script>
-
-			var ExampleScene = function() {
-				
-				//The current selected material saved to the hash
-				var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial";
-				
-				this.renderer = undefined;
-				this.controls = undefined;
-				this.div = document.getElementById( 'clean' );
-				this.scene = new THREE.Scene();
-				this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum)
-				this.camera.position.z = 50;
-				this.gui = new dat.GUI();
-
-				this.addRenderer();
-				this.addControls();
-				this.addLights();
-				//this.addSpheresBasic();
-				this.addSpheresWithMaterial( selectedMaterial );
-				//this.addGeometry();
-				this.addGrid();
-				this.addEventListeners();
-				
-				this.loop();
-			};
-					
-			ExampleScene.prototype = {
-				
-				addLights : function() {
-					this.lights = [];
-					this.lights[0] = new THREE.AmbientLight( 0xffffff );
-					this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
-					this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
-					this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
-					
-					this.lights[1].position.set(0, 200, 0);
-					this.lights[2].position.set(100, 200, 100);
-					this.lights[3].position.set(-100, -200, -100);
-					
-					//this.scene.add( this.lights[0] );
-					this.scene.add( this.lights[1] );
-					this.scene.add( this.lights[2] );
-					this.scene.add( this.lights[3] );
-				},
-						
-				addGeometry : function() {
-					
-					//-------------------------------------------------------------------------------
-					// Various types of geometry to play with, only un-comment 1 geometry at a time
-					
-					//var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI);
-					//var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1);			//(width, height, depth, widthSegments, heightSegments, depthSegments)
-					var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false);	//(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
-					//var geometry = new THREE.CircleGeometry();
-					
-					/*
-						// Extruded Geometry
-					
-						var extrudeSettings = {
-							bevelEnabled: true,
-							bevelSegments: 2,
-							steps: 100,
-							extrudePath : new THREE.SplineCurve3([
-								new THREE.Vector3( 0, -8, 0),
-								new THREE.Vector3( 3, -1.66, 0),
-								new THREE.Vector3( -3, 1.66, 0),
-								new THREE.Vector3( 0, 8, 0)
-							])
-						};
-						var extrudeBend = new THREE.Shape([ //Closed
-					
-							new THREE.Vector3( 0.05, 0.00, 0.00),
-							new THREE.Vector3( 0.85, 0.00, 0.00),
-							new THREE.Vector3( 1.00, 0.05, 0.00),
-							new THREE.Vector3( 1.00, 0.85, 0.00),
-							new THREE.Vector3( 0.85, 1.00, 0.00),
-							new THREE.Vector3( 0.05, 1.00, 0.00),
-							new THREE.Vector3( 0.00, 0.85, 0.00),
-							new THREE.Vector3( 0.00, 0.05, 0.00)
-
-						]);
-						var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings);
-					*/
-					
-					
-					var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
-						new THREE.MeshNormalMaterial( {} ),
-						new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2,  opacity: 0.1, transparent: true } ) ]
-					);
-					
-					this.scene.add(mesh);
-				},
-				
-				addRenderer : function() {
-					this.renderer = new THREE.WebGLRenderer();
-					this.renderer.setSize( window.innerWidth, window.innerHeight );
-					this.div.appendChild( this.renderer.domElement );
-				},
-				
-				addControls : function() {
-					this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
-				},
-				
-				addSpheresBasic : function() {
-
-					var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments)
-					
-					this.spheres = [];
-					
-					this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
-					this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
-					this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
-					this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-					
-					this.spheres[0].position.set(10,  0,  0);
-					this.spheres[1].position.set( 0, 10,  0);
-					this.spheres[2].position.set( 0,  0, 10);
-					this.spheres[3].position.set(10, 10,  0);
-					
-					this.scene.add(this.spheres[0]);
-					this.scene.add(this.spheres[1]);
-					this.scene.add(this.spheres[2]);
-					this.scene.add(this.spheres[3]);
-					
-				},
-
-				addGenericGui : function( material ) {
-					
-					gui.add( material, "opacity", 0, 1 );
-					gui.add( material, "transparent" );
-					gui.add( blending, {
-						"THREE.NoBlending" : THREE.NoBlending,
-						"THREE.NormalBlending" : THREE.NormalBlending,
-						"THREE.AdditiveBlending" : THREE.AdditiveBlending,
-						"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
-						"THREE.MultiplyBlending" : THREE.MultiplyBlending,
-						"THREE.CustomBlending" : THREE.CustomBlending
-					});
-					gui.add( side, {
-						"THREE.FrontSide" : THREE.FrontSide,
-						"THREE.BackSide" : THREE.BackSide,
-						"THREE.DoubleSide" : THREE.DoubleSide
-					});
-
-				},
-				
-				addSpheresWithMaterial : function( materialType ) {
-
-					var sphere, colors, material;
-
-					sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments)
-					
-					this.spheres = [];
-					
-					colors = [
-						0x9f0040,
-						0x00409f,
-						0x809f80,
-						0x9faa00
-					];
-					
-					for(var i=0; i < 4; ++i) {
-						
-						
-						//Non-shiny material
-						if(materialType === "MeshLambertMaterial") {
-							
-							material = new THREE.MeshLambertMaterial( {
-								color: colors[i],
-								emissive : new THREE.Color( 0x000510 ),
-								wireframe : false,
-								wireframeLinewidth : 3
-							})
-
-							this.spheres.push(
-								new THREE.Mesh( sphere, material)
-							);
-
-							this.gui.add( material, 'speed', 0, 2 );
-
-								
-						} else if(materialType === "MeshPhongMaterial") {
-							
-							this.spheres.push(
-								new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( {
-									color: colors[i],
-									specular : new THREE.Color( 0xffffff ),
-									shininess : Math.pow(10, i),
-									emissive : new THREE.Color( 0x000510 ),
-									shading : THREE.NoShading,
-									wireframe : false,
-									wireframeLinewidth : 3
-								}))
-							);
-								
-						} else if(materialType === "MeshNormalMaterial") {	
-							
-							this.spheres.push(
-								new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( {
-									
-								}))
-							);
-								
-						} else if(materialType === "MeshDepthMaterial") {	
-							
-							this.spheres.push(
-								new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( {
-									shading: THREE.FlatShading,
-									wireframe: true
-								}))
-							);
-								
-							this.camera.near = 20;
-							this.camera.far = 100;
-								
-						} else if(materialType === "MeshFaceMaterial") {
-							
-							/* Can't get to work
-							var materials = [],
-								colorIterator;
-
-							//Create 6 materials
-							for (var j=0; j<6; j++) {
-								
-								var img = new Image();
-								img.src = "textures/cube/clean/" + i + '.jpg';
-								var tex = new THREE.Texture(img);
-								img.tex = tex;
-
-								img.onload = function() {
-									this.tex.needsUpdate = true;
-								};
-								colorIterator = Math.floor(Math.random() * colors.length);
-								
-								materials[j] = new THREE.MeshBasicMaterial({
-									color: 0xffffff,
-									transparent: true,
-									blending: THREE.AdditiveBlending,
-									map: tex
-								});
-								
-							}
-							
-							
-							console.log(materials);
-							
-							this.spheres.push(
-								new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials ))
-							);
-							*/
-							
-						} else {	
-							if(materialType !== "MeshBasicMaterial") {
-								console.log(material + " material not implemented by this script. Using MeshBasicMaterial");
-							}
-							this.spheres.push(
-								new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) )
-							);
-						}
-						
-					}
-					
-					//Set the position
-					
-					this.spheres[0].position.set( 0,   0,  0);
-					this.spheres[1].position.set( 10,  0,  0);
-					this.spheres[2].position.set(-10,  0,  0);
-					this.spheres[3].position.set(  0,  10,  0);
-					
-					this.scene.add(this.spheres[0]);
-					this.scene.add(this.spheres[1]);
-					this.scene.add(this.spheres[2]);
-					this.scene.add(this.spheres[3]);
-					
-				},
-				
-				addGrid : function() {
-
-					var lineMaterial = new THREE.LineBasicMaterial( { color: 0x303030 } ),
-						geometry = new THREE.Geometry(),
-						floor = -75, step = 25;
-
-					for ( var i = 0; i <= 40; i ++ ) {
-
-						geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
-						geometry.vertices.push( new THREE.Vector3(   500, floor, i * step - 500 ) );
-
-						geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
-						geometry.vertices.push( new THREE.Vector3( i * step - 500, floor,  500 ) );
-
-					}
-
-					this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces );
-					this.scene.add( this.grid );
-
-				},
-				
-				addEventListeners : function() {
-					window.onresize = this.resizeHandler.bind(this);
-				},
-				
-				resizeHandler : function() {
-					
-					this.camera.aspect = window.innerWidth / window.innerHeight;
-					this.camera.updateProjectionMatrix();
-
-					this.renderer.setSize( window.innerWidth, window.innerHeight );
-
-				},
-						
-				loop : function() {
-
-					requestAnimationFrame( this.loop.bind(this) );
-					this.render();
-
-				},
-						
-				render : function() {
-
-					this.renderer.render( this.scene, this.camera );
-
-				}
-				
-			};
-
-
-
-			
-
-			window.onload = function() {
-				window.exampleScene = new ExampleScene();
-			};
-		</script>
-	</head>
-	<body>
-		<div id='clean'></div>
-		<select id='material'>
-			<option>MeshBasicMaterial</option>
-			<option>MeshLambertMaterial</option>
-			<option>MeshPhongMaterial</option>
-			<option>MeshNormalMaterial</option>
-			<option>MeshDepthMaterial</option>
-			<!-- <option>MeshFaceMaterial</option> -->
-		</select>
-	</body>
-</html>

docs/scenes/threejs-example.js

@@ -1,335 +0,0 @@
-var ExampleScene = function() {
-	
-	//The current selected material saved to the hash
-	var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial";
-	
-	this.renderer = undefined;
-	this.controls = undefined;
-	this.div = document.getElementById( 'clean' );
-	this.scene = new THREE.Scene();
-	this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum)
-	this.camera.position.z = 50;
-
-	this.addRenderer();
-	this.addControls();
-	this.addLights();
-	//this.addSpheresBasic();
-	this.addSpheresWithMaterial( selectedMaterial );
-	//this.addGeometry();
-	this.addGrid();
-	this.addEventListeners();
-	
-	this.loop();
-};
-		
-ExampleScene.prototype = {
-	
-	addLights : function() {
-		this.lights = [];
-		this.lights[0] = new THREE.AmbientLight( 0xffffff );
-		this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
-		this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
-		this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
-		
-		this.lights[1].position.set(0, 200, 0);
-		this.lights[2].position.set(100, 200, 100);
-		this.lights[3].position.set(-100, -200, -100);
-		
-		//this.scene.add( this.lights[0] );
-		this.scene.add( this.lights[1] );
-		this.scene.add( this.lights[2] );
-		this.scene.add( this.lights[3] );
-	},
-			
-	addGeometry : function() {
-		
-		//-------------------------------------------------------------------------------
-		// Various types of geometry to play with, only un-comment 1 geometry at a time
-		
-		//var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI);
-		//var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1);			//(width, height, depth, widthSegments, heightSegments, depthSegments)
-		var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false);	//(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
-		//var geometry = new THREE.CircleGeometry();
-		
-		/*
-			// Extruded Geometry
-		
-			var extrudeSettings = {
-				bevelEnabled: true,
-				bevelSegments: 2,
-				steps: 100,
-				extrudePath : new THREE.SplineCurve3([
-					new THREE.Vector3( 0, -8, 0),
-					new THREE.Vector3( 3, -1.66, 0),
-					new THREE.Vector3( -3, 1.66, 0),
-					new THREE.Vector3( 0, 8, 0)
-				])
-			};
-			var extrudeBend = new THREE.Shape([ //Closed
-		
-				new THREE.Vector3( 0.05, 0.00, 0.00),
-				new THREE.Vector3( 0.85, 0.00, 0.00),
-				new THREE.Vector3( 1.00, 0.05, 0.00),
-				new THREE.Vector3( 1.00, 0.85, 0.00),
-				new THREE.Vector3( 0.85, 1.00, 0.00),
-				new THREE.Vector3( 0.05, 1.00, 0.00),
-				new THREE.Vector3( 0.00, 0.85, 0.00),
-				new THREE.Vector3( 0.00, 0.05, 0.00)
-
-			]);
-			var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings);
-		*/
-		
-		
-		var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
-			new THREE.MeshNormalMaterial( {} ),
-			new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2,  opacity: 0.1, transparent: true } ) ]
-		);
-		
-		this.scene.add(mesh);
-	},
-	
-	addRenderer : function() {
-		this.renderer = new THREE.WebGLRenderer();
-		this.renderer.setSize( window.innerWidth, window.innerHeight );
-		this.div.appendChild( this.renderer.domElement );
-	},
-	
-	addControls : function() {
-		this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
-	},
-	
-	addSpheresBasic : function() {
-
-		var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments)
-		
-		this.spheres = [];
-		
-		this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
-		this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
-		this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
-		this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-		
-		this.spheres[0].position.set(10,  0,  0);
-		this.spheres[1].position.set( 0, 10,  0);
-		this.spheres[2].position.set( 0,  0, 10);
-		this.spheres[3].position.set(10, 10,  0);
-		
-		this.scene.add(this.spheres[0]);
-		this.scene.add(this.spheres[1]);
-		this.scene.add(this.spheres[2]);
-		this.scene.add(this.spheres[3]);
-		
-	},
-	
-	addSpheresWithMaterial : function(material) {
-
-		var sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments)
-		
-		this.spheres = [];
-		
-		var colors = [
-			0x9f0040,
-			0x00409f,
-			0x809f80,
-			0x9faa00
-		];
-		
-		for(var i=0; i < 4; ++i) {
-			
-			
-			//Non-shiny material
-			if(material === "MeshLambertMaterial") {
-				
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( {
-						color: colors[i],
-						emissive : new THREE.Color( 0x000510 ),
-						wireframe : false,
-						wireframeLinewidth : 3
-					}))
-				);
-					
-			} else if(material === "MeshPhongMaterial") {
-				
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( {
-						color: colors[i],
-						specular : new THREE.Color( 0xffffff ),
-						shininess : Math.pow(10, i),
-						emissive : new THREE.Color( 0x000510 ),
-						shading : THREE.NoShading,
-						wireframe : false,
-						wireframeLinewidth : 3
-					}))
-				);
-					
-			} else if(material === "MeshNormalMaterial") {	
-				
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( {
-						
-					}))
-				);
-					
-			} else if(material === "MeshDepthMaterial") {	
-				
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( {
-						shading: THREE.FlatShading,
-						wireframe: true
-					}))
-				);
-					
-				this.camera.near = 20;
-				this.camera.far = 100;
-					
-			} else if(material === "MeshFaceMaterial") {
-				
-				/* Can't get to work
-				var materials = [],
-					colorIterator;
-
-				//Create 6 materials
-				for (var j=0; j<6; j++) {
-					
-					var img = new Image();
-					img.src = "textures/cube/clean/" + i + '.jpg';
-					var tex = new THREE.Texture(img);
-					img.tex = tex;
-
-					img.onload = function() {
-						this.tex.needsUpdate = true;
-					};
-					colorIterator = Math.floor(Math.random() * colors.length);
-					
-					materials[j] = new THREE.MeshBasicMaterial({
-						color: 0xffffff,
-						transparent: true,
-						blending: THREE.AdditiveBlending,
-						map: tex
-					});
-					
-				}
-				
-				
-				console.log(materials);
-				
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials ))
-				);
-				*/
-				
-			} else {	
-				if(material !== "MeshBasicMaterial") {
-					console.log(material + " material not implemented by this script. Using MeshBasicMaterial");
-				}
-				this.spheres.push(
-					new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) )
-				);
-			}
-			
-		}
-		
-		//Set the position
-		
-		this.spheres[0].position.set( 0,   0,  0);
-		this.spheres[1].position.set( 10,  0,  0);
-		this.spheres[2].position.set(-10,  0,  0);
-		this.spheres[3].position.set(  0,  10,  0);
-		
-		this.scene.add(this.spheres[0]);
-		this.scene.add(this.spheres[1]);
-		this.scene.add(this.spheres[2]);
-		this.scene.add(this.spheres[3]);
-		
-	},
-	
-	addGrid : function() {
-
-		var lineMaterial = new THREE.LineBasicMaterial( { color: 0x303030 } ),
-			geometry = new THREE.Geometry(),
-			floor = -75, step = 25;
-
-		for ( var i = 0; i <= 40; i ++ ) {
-
-			geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
-			geometry.vertices.push( new THREE.Vector3(   500, floor, i * step - 500 ) );
-
-			geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
-			geometry.vertices.push( new THREE.Vector3( i * step - 500, floor,  500 ) );
-
-		}
-
-		this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces );
-		this.scene.add( this.grid );
-
-	},
-	
-	addEventListeners : function() {
-		$(window).on('resize', this.resizeHandler.bind(this));
-	},
-	
-	resizeHandler : function() {
-		
-		this.camera.aspect = window.innerWidth / window.innerHeight;
-		this.camera.updateProjectionMatrix();
-
-		this.renderer.setSize( window.innerWidth, window.innerHeight );
-
-	},
-			
-	loop : function() {
-
-		requestAnimationFrame( this.loop.bind(this) );
-		this.render();
-
-	},
-			
-	render : function() {
-		this.controls.update();
-		this.renderer.render( this.scene, this.camera );
-	}
-	
-};
-
-var MaterialSelector = function() {
-
-	this.setSelectedChoiceFromHash();
-	this.addEventListeners();
-	
-}
-
-MaterialSelector.prototype = {
-	
-	addEventListeners : function() {
-		$('#material').change(this.loadNewMaterial.bind(this));
-	},
-	
-	loadNewMaterial : function() {
-
-		window.location.hash = $('#material').val();
-		window.location.reload()
-		
-	},
-	
-	setSelectedChoiceFromHash : function() {
-		$('#material > option').each(function() {
-			
-			var $this = $(this),
-				hash = window.location.hash.substring(1);
-				
-			if( $this.text() == hash ) {
-				$this.attr('selected', 'selected');
-			}
-		})
-	},
-}
-
-
-var exampleScene, materialSelector;
-
-$(function() {
-	materialSelector = new MaterialSelector();
-	exampleScene = new ExampleScene();
-});