javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!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>