Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Clean up

Mugen87 8 years ago
parent
affbb2b895
commit
d9831d7b36
4 changed files with 187 additions and 127 deletions
Unified View Show Diff Stats
  1. 28 1
      examples/js/WaterShader.js
  2. 74 51
      examples/webgl_gpu_particle_system.html
  3. 45 62
      examples/webgl_morphtargets.html
  4. 40 13
      examples/webgl_shaders_ocean.html

+ 28 - 1
examples/js/WaterShader.js
View File 

@@ -210,9 +210,36 @@ THREE.Water = function ( renderer, camera, scene, options ) {
 
 
 
 };
 
 };
 
 
 
-THREE.Water.prototype = Object.create( THREE.Mirror.prototype );
 
+THREE.Water.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.Water.prototype.constructor = THREE.Water;
 
 THREE.Water.prototype.constructor = THREE.Water;
 
 
 
+THREE.Water.prototype.render = function () {
 
+
 
+	if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
 
+
 
+	this.matrixNeedsUpdate = true;
 
+
 
+	// Render the mirrored view of the current scene into the target texture
 
+	var scene = this;
 
+
 
+	while ( scene.parent !== null ) {
 
+
 
+		scene = scene.parent;
 
+
 
+	}
 
+
 
+	if ( scene !== undefined && scene instanceof THREE.Scene ) {
 
+
 
+		this.material.visible = false;
 
+
 
+		this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );
 
+
 
+		this.material.visible = true;
 
+
 
+	}
 
+
 
+};
 
+
 
 
 
 THREE.Water.prototype.updateTextureMatrix = function () {
 
 THREE.Water.prototype.updateTextureMatrix = function () {

+ 74 - 51
examples/webgl_gpu_particle_system.html
View File 

@@ -5,36 +5,46 @@
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<style>
 
 	<style>
 
-		body {
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		a {
 
-			color: #0078ff;
 
-		}
 
-
 
-		.dg {
 
-			right: auto!important;
 
-			left: 20px!important;
 
-		}
 
+	body {
 
+		font-family: Monospace;
 
+		background-color: #f0f0f0;
 
+		margin: 0px;
 
+		overflow: hidden;
 
+	}
 
+
 
+	#info {
 
+		position: absolute;
 
+		top: 0px;
 
+		width: 100%;
 
+		padding: 5px;
 
+		font-family:Monospace;
 
+		font-size:13px;
 
+		text-align:center;
 
+		color: #ffffff;
 
+	}
 
+
 
+	a {
 
+		color: #ffffff;
 
+	}
 
 	</style>
 
 	</style>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-	<div style="position: absolute; top: 10px; width: 100%; text-align: center; color:#eee">
 
-		<a href="http://threejs.org" target="_blank">three.js</a> - GPU particle system plugin by <a href="http://charliehoey.com">Charlie Hoey</a>.</div>
 
+
 
+	<div id="container"></div>
 
+	<div id="info">
 
+		<a href="https://threejs.org" target="_blank">three.js</a> - GPU particle system plugin by <a href="http://charliehoey.com">Charlie Hoey</a>.
 
+	</div>
 
 
 
 	<script src="../build/three.js"></script>
 
 	<script src="../build/three.js"></script>
 
 	<script src="./js/controls/TrackballControls.js"></script>
 
 	<script src="./js/controls/TrackballControls.js"></script>
 
 	<script src="./js/libs/dat.gui.min.js"></script>
 
 	<script src="./js/libs/dat.gui.min.js"></script>
 
-	<script src="./js/GPUParticleSystem.js" charset="utf-8"></script>
 
+	<script src="./js/GPUParticleSystem.js"></script>
 
 
 
 	<script>
 
 	<script>
 
 		var camera, tick = 0,
 
 		var camera, tick = 0,
 
-			scene, renderer, clock = new THREE.Clock(true),
 
-			controls, container, gui = new dat.GUI(),
 
+			scene, renderer, clock = new THREE.Clock(),
 
+			controls, container, gui = new dat.GUI( { width: 350 } ),
 
 			options, spawnerOptions, particleSystem;
 
 			options, spawnerOptions, particleSystem;
 
 
 
 		init();
 
 		init();
 
@@ -42,11 +52,11 @@
 
 
 
 		function init() {
 
 		function init() {
 
 
 
+			//
 
 
 
-			container = document.createElement('div');
 
-			document.body.appendChild(container);
 
+			container = document.getElementById( 'container' );
 
 
 
-			camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 1, 10000);
 
+			camera = new THREE.PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 10000 );
 
 			camera.position.z = 100;
 
 			camera.position.z = 100;
 
 
 
 			scene = new THREE.Scene();
 
 			scene = new THREE.Scene();
 
@@ -55,13 +65,15 @@
 
 			// as you would any other scene graph component.	Particle positions will be
 
 			// as you would any other scene graph component.	Particle positions will be
 
 			// relative to the position of the particle system, but you will probably only need one
 
 			// relative to the position of the particle system, but you will probably only need one
 
 			// system for your whole scene
 
 			// system for your whole scene
 
-			particleSystem = new THREE.GPUParticleSystem({
 
+
 
+			particleSystem = new THREE.GPUParticleSystem( {
 
 				maxParticles: 250000
 
 				maxParticles: 250000
 
-			});
 
-			scene.add( particleSystem);
 
+			} );
 
 
 
+			scene.add( particleSystem );
 
 
 
 			// options passed during each spawned
 
 			// options passed during each spawned
 
+
 
 			options = {
 
 			options = {
 
 				position: new THREE.Vector3(),
 
 				position: new THREE.Vector3(),
 
 				positionRandomness: .3,
 
 				positionRandomness: .3,
 
@@ -82,30 +94,35 @@
 
 				timeScale: 1
 
 				timeScale: 1
 
 			};
 
 			};
 
 
 
-			gui.add(options, "velocityRandomness", 0, 3);
 
-			gui.add(options, "positionRandomness", 0, 3);
 
-			gui.add(options, "size", 1, 20);
 
-			gui.add(options, "sizeRandomness", 0, 25);
 
-			gui.add(options, "colorRandomness", 0, 1);
 
-			gui.add(options, "lifetime", .1, 10);
 
-			gui.add(options, "turbulence", 0, 1);
 
+			//
 
+
 
+			gui.add( options, "velocityRandomness", 0, 3 );
 
+			gui.add( options, "positionRandomness", 0, 3 );
 
+			gui.add( options, "size", 1, 20 );
 
+			gui.add( options, "sizeRandomness", 0, 25 );
 
+			gui.add( options, "colorRandomness", 0, 1 );
 
+			gui.add( options, "lifetime", .1, 10 );
 
+			gui.add( options, "turbulence", 0, 1 );
 
 
 
-			gui.add(spawnerOptions, "spawnRate", 10, 30000);
 
-			gui.add(spawnerOptions, "timeScale", -1, 1);
 
+			gui.add( spawnerOptions, "spawnRate", 10, 30000 );
 
+			gui.add( spawnerOptions, "timeScale", -1, 1 );
 
+
 
+			//
 
 
 
 			renderer = new THREE.WebGLRenderer();
 
 			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio(window.devicePixelRatio);
 
-			renderer.setSize(window.innerWidth, window.innerHeight);
 
-			container.appendChild(renderer.domElement);
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			container.appendChild( renderer.domElement );
 
+
 
+			//
 
 
 
-			// setup controls
 
-			controls = new THREE.TrackballControls(camera, renderer.domElement);
 
+			controls = new THREE.TrackballControls( camera, renderer.domElement );
 
 			controls.rotateSpeed = 5.0;
 
 			controls.rotateSpeed = 5.0;
 
 			controls.zoomSpeed = 2.2;
 
 			controls.zoomSpeed = 2.2;
 
 			controls.panSpeed = 1;
 
 			controls.panSpeed = 1;
 
 			controls.dynamicDampingFactor = 0.3;
 
 			controls.dynamicDampingFactor = 0.3;
 
 
 
-			window.addEventListener('resize', onWindowResize, false);
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
 
 		}
 
 		}
 
 
 
@@ -114,34 +131,39 @@
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 
 			camera.updateProjectionMatrix();
 
 			camera.updateProjectionMatrix();
 
 
 
-			renderer.setSize(window.innerWidth, window.innerHeight);
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 		}
 
 		}
 
 
 
 		function animate() {
 
 		function animate() {
 
 
 
-			requestAnimationFrame(animate);
 
+			requestAnimationFrame( animate );
 
 
 
 			controls.update();
 
 			controls.update();
 
 
 
 			var delta = clock.getDelta() * spawnerOptions.timeScale;
 
 			var delta = clock.getDelta() * spawnerOptions.timeScale;
 
 			tick += delta;
 
 			tick += delta;
 
 
 
-			if (tick < 0) tick = 0;
 
+			if ( tick < 0 ) tick = 0;
 
+
 
+			if ( delta > 0 ) {
 
+
 
+				options.position.x = Math.sin( tick * spawnerOptions.horizontalSpeed ) * 20;
 
+				options.position.y = Math.sin( tick * spawnerOptions.verticalSpeed ) * 10;
 
+				options.position.z = Math.sin( tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed ) * 5;
 
 
 
-			if (delta > 0) {
 
-				options.position.x = Math.sin(tick * spawnerOptions.horizontalSpeed) * 20;
 
-				options.position.y = Math.sin(tick * spawnerOptions.verticalSpeed) * 10;
 
-				options.position.z = Math.sin(tick * spawnerOptions.horizontalSpeed + spawnerOptions.verticalSpeed) * 5;
 
+				for ( var x = 0; x < spawnerOptions.spawnRate * delta; x++ ) {
 
 
 
-				for (var x = 0; x < spawnerOptions.spawnRate * delta; x++) {
 
 					// Yep, that's really it.	Spawning particles is super cheap, and once you spawn them, the rest of
 
 					// Yep, that's really it.	Spawning particles is super cheap, and once you spawn them, the rest of
 
 					// their lifecycle is handled entirely on the GPU, driven by a time uniform updated below
 
 					// their lifecycle is handled entirely on the GPU, driven by a time uniform updated below
 
-					particleSystem.spawnParticle(options);
 
+
 
+					particleSystem.spawnParticle( options );
 
+
 
 				}
 
 				}
 
+
 
 			}
 
 			}
 
 
 
-			particleSystem.update(tick);
 
+			particleSystem.update( tick );
 
 
 
 			render();
 
 			render();
 
 
 
@@ -149,9 +171,10 @@
 
 
 
 		function render() {
 
 		function render() {
 
 
 
-			renderer.render(scene, camera);
 
+			renderer.render( scene, camera );
 
 
 
 		}
 
 		}
 
+
 
 	</script>
 
 	</script>
 
 </body>
 
 </body>

+ 45 - 62
examples/webgl_morphtargets.html
View File 

@@ -6,64 +6,41 @@
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				background:#000;
 
-				color:#fff;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
 			}
 
 			}
 
 
 
 			#info {
 
 			#info {
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
+				top: 0px;
 
+				width: 100%;
 
 				padding: 5px;
 
 				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index:100;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+				color: #ffffff;
 
 			}
 
 			}
 
 
 
-			#ctrl {
 
-				position: absolute;
 
-				top: 0px;
 
-				left: 0px;
 
-				width: 200px;
 
+			a {
 
 				color: #ffffff;
 
 				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				z-index:100;
 
 			}
 
 			}
 
 
 
-			a { color:red }
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
+		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - WebGL morph target example
 
 			<a href="http://threejs.org" target="_blank">three.js</a> - WebGL morph target example
 
 		</div>
 
 		</div>
 
 
 
-
 
-		<div id="ctrl">
 
-			Use controls to change morph target influences:<br/>
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 0 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 1 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 2 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 3 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 4 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 5 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 6 ] = this.value/100;" />
 
-			<input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 7 ] = this.value/100;" />
 
-		</div>
 
-
 
-
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
 		<script>
 
 		<script>
 
@@ -76,21 +53,14 @@
 
 
 
 			var geometry, objects;
 
 			var geometry, objects;
 
 
 
-			var mouseX = 0, mouseY = 0;
 
-
 
 			var mesh;
 
 			var mesh;
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
+				container = document.getElementById( 'container' );
 
 
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 
 				camera.position.z = 500;
 
 				camera.position.z = 500;
 
@@ -138,6 +108,32 @@
 
 
 
 				//
 
 				//
 
 
 
+				var params = {
 
+					influence1: 0,
 
+					influence2: 0,
 
+					influence3: 0,
 
+					influence4: 0,
 
+					influence5: 0,
 
+					influence6: 0,
 
+					influence7: 0,
 
+					influence8: 0
 
+				};
 
+
 
+				var gui = new dat.GUI();
 
+
 
+				var folder = gui.addFolder( 'Morph Targets' );
 
+				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 0 ] = value; } );
 
+				folder.add( params, 'influence2', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 1 ] = value; } );
 
+				folder.add( params, 'influence3', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 2 ] = value; } );
 
+				folder.add( params, 'influence4', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 3 ] = value; } );
 
+				folder.add( params, 'influence5', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 4 ] = value; } );
 
+				folder.add( params, 'influence6', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 5 ] = value; } );
 
+				folder.add( params, 'influence7', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 6 ] = value; } );
 
+				folder.add( params, 'influence8', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 7 ] = value; } );
 
+				folder.open();
 
+
 
+				//
 
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setClearColor( 0x222222 );
 
 				renderer.setClearColor( 0x222222 );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
@@ -147,15 +143,16 @@
 
 
 
 				//
 
 				//
 
 
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+
 
+				//
 
+
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
 
 			}
 
 			}
 
 
 
 			function onWindowResize() {
 
 			function onWindowResize() {
 
 
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 
 
@@ -163,13 +160,6 @@
 
 
 
 			}
 
 			}
 
 
 
-			function onDocumentMouseMove(event) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX );
 
-				mouseY = ( event.clientY - windowHalfY ) * 2;
 
-
 
-			}
 
-
 
 			function animate() {
 
 			function animate() {
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
@@ -181,13 +171,6 @@
 
 
 
 				mesh.rotation.y += 0.01;
 
 				mesh.rotation.y += 0.01;
 
 
 
-				//mesh.morphTargetInfluences[ 0 ] = Math.sin( mesh.rotation.y ) * 0.5 + 0.5;
 
-
 
-				//camera.position.x += ( mouseX - camera.position.x ) * .005;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .01;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );
 
 
 
 			}
 
 			}

+ 40 - 13
examples/webgl_shaders_ocean.html
View File 

@@ -1,10 +1,11 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - geometry - terrain</title>
 
+		<title>three.js webgl - shaders - ocean</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
+
 
 			body {
 
 			body {
 
 				color: #000;
 
 				color: #000;
 
 				font-family:Monospace;
 
 				font-family:Monospace;
 
@@ -20,21 +21,18 @@
 
 				padding: 5px;
 
 				padding: 5px;
 
 			}
 
 			}
 
 
 
-			a {
 
-
 
-				color: #a06851;
 
-			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean demo</div>
 
+		<div id="container"></div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean demo
 
+		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/Mirror.js"></script>
 
 		<script src="js/WaterShader.js"></script>
 
 		<script src="js/WaterShader.js"></script>
 
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
@@ -70,20 +68,27 @@
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
+				container = document.getElementById( 'container' );
 
+
 
+				//
 
 
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
+				//
 
+
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
-				scene.fog = new THREE.FogExp2(0xaabbbb, 0.0001);
 
+				scene.fog = new THREE.FogExp2( 0xaabbbb, 0.0001 );
 
+
 
+				//
 
 
 
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
 
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
 
 				camera.position.set( 2000, 750, 2000 );
 
 				camera.position.set( 2000, 750, 2000 );
 
 
 
+				//
 
+
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				controls.enablePan = false;
 
 				controls.enablePan = false;
 
 				controls.minDistance = 1000.0;
 
 				controls.minDistance = 1000.0;
 
@@ -93,10 +98,13 @@
 
 
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
 
 
+				//
 
+
 
 				var light = new THREE.DirectionalLight( 0xffffbb, 1 );
 
 				var light = new THREE.DirectionalLight( 0xffffbb, 1 );
 
 				light.position.set( - 1, 1, - 1 );
 
 				light.position.set( - 1, 1, - 1 );
 
 				scene.add( light );
 
 				scene.add( light );
 
 
 
+				//
 
 
 
 				waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
 
 				waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
 
 				waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
 
 				waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
 
@@ -123,8 +131,7 @@
 
 				mirrorMesh.rotation.x = - Math.PI * 0.5;
 
 				mirrorMesh.rotation.x = - Math.PI * 0.5;
 
 				scene.add( mirrorMesh );
 
 				scene.add( mirrorMesh );
 
 
 
-
 
-				// load skybox
 
+				// skybox
 
 
 
 				var cubeMap = new THREE.CubeTexture( [] );
 
 				var cubeMap = new THREE.CubeTexture( [] );
 
 				cubeMap.format = THREE.RGBFormat;
 
 				cubeMap.format = THREE.RGBFormat;
 
@@ -175,6 +182,7 @@
 
 
 
 				scene.add( skyBox );
 
 				scene.add( skyBox );
 
 
 
+				//
 
 
 
 				var geometry = new THREE.IcosahedronGeometry( 400, 4 );
 
 				var geometry = new THREE.IcosahedronGeometry( 400, 4 );
 
 
 
@@ -193,6 +201,24 @@
 
 				sphere = new THREE.Mesh( geometry, material );
 
 				sphere = new THREE.Mesh( geometry, material );
 
 				scene.add( sphere );
 
 				scene.add( sphere );
 
 
 
+				//
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
@@ -201,6 +227,7 @@
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
 				render();
 
 				render();
 
+				stats.update();
 
 
 
 			}
 
 			}