홈 탐색 도움말
로그인
javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git
2
0
포크 0
파일 이슈 0 위키
소스 검색

Examples clean up.

Mr.doob 9 년 전
부모
0e5cf5bcf6
커밋
a455e248ac
55개의 변경된 파일과 414개의 추가작업 그리고 402개의 파일을 삭제
분할 보기 변경상태 보기
  1. 0 1
      examples/canvas_ascii_effect.html
  2. 0 1
      examples/canvas_geometry_nurbs.html
  3. 1 1
      examples/css3d_molecules.html
  4. 1 1
      examples/css3d_panorama.html
  5. 1 1
      examples/css3d_panorama_deviceorientation.html
  6. 1 1
      examples/css3d_periodictable.html
  7. 1 0
      examples/css3d_sandbox.html
  8. 1 1
      examples/css3d_sprites.html
  9. 1 1
      examples/css3d_youtube.html
  10. 1 1
      examples/css3dstereo_periodictable.html
  11. 1 1
      examples/index.html
  12. 1 0
      examples/misc_animation_authoring.html
  13. 3 2
      examples/misc_controls_pointerlock.html
  14. 1 0
      examples/misc_controls_transform.html
  15. 5 4
      examples/misc_uv_tests.html
  16. 1 1
      examples/webgl_animation_cloth.html
  17. 4 4
      examples/webgl_animation_scene.html
  18. 1 1
      examples/webgl_animation_skinning_morph.html
  19. 4 5
      examples/webgl_buffergeometry_constructed_from_geometry.html
  20. 3 4
      examples/webgl_buffergeometry_selective_draw.html
  21. 1 1
      examples/webgl_decals.html
  22. 18 17
      examples/webgl_exporter_obj.html
  23. 1 0
      examples/webgl_geometry_cube.html
  24. 0 1
      examples/webgl_geometry_extrude_shapes.html
  25. 0 1
      examples/webgl_geometry_nurbs.html
  26. 114 115
      examples/webgl_gpu_particle_system.html
  27. 4 3
      examples/webgl_helpers.html
  28. 1 1
      examples/webgl_interactive_points.html
  29. 1 1
      examples/webgl_interactive_raycasting_points.html
  30. 0 2
      examples/webgl_kinect.html
  31. 2 2
      examples/webgl_lensflares.html
  32. 1 0
      examples/webgl_loader_fbx.html
  33. 1 1
      examples/webgl_loader_gltf.html
  34. 0 1
      examples/webgl_loader_pcd.html
  35. 1 1
      examples/webgl_loader_pdb.html
  36. 1 0
      examples/webgl_marchingcubes.html
  37. 1 0
      examples/webgl_materials_blending.html
  38. 2 1
      examples/webgl_materials_blending_custom.html
  39. 1 0
      examples/webgl_materials_cubemap_dynamic.html
  40. 0 1
      examples/webgl_materials_envmaps.html
  41. 1 0
      examples/webgl_materials_texture_compressed.html
  42. 9 8
      examples/webgl_materials_texture_pvrtc.html
  43. 1 0
      examples/webgl_materials_wireframe.html
  44. 112 111
      examples/webgl_multiple_canvases_circle.html
  45. 4 2
      examples/webgl_nearestneighbour.html
  46. 96 98
      examples/webgl_octree_raycasting.html
  47. 1 0
      examples/webgl_postprocessing.html
  48. 1 0
      examples/webgl_postprocessing_glitch.html
  49. 1 0
      examples/webgl_postprocessing_nodes.html
  50. 1 1
      examples/webgl_raymarching_reflect.html
  51. 1 1
      examples/webgl_shaders_ocean2.html
  52. 1 0
      examples/webgl_shadowmap_pointlight.html
  53. 1 0
      examples/webgl_shadowmap_viewer.html
  54. 1 1
      examples/webgl_shadowmesh.html
  55. 1 0
      examples/webgl_terrain_dynamic.html

+ 0 - 1
examples/canvas_ascii_effect.html
파일 보기 

@@ -1,6 +1,5 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-
 
 	<head>
 
 		<title>three.js - ASCII Effect</title>
 
 		<meta charset="utf-8">

+ 0 - 1
examples/canvas_geometry_nurbs.html
파일 보기 

@@ -1,6 +1,5 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-	<!-- based on canvas_geometry_shapes.html -->
 
 	<head>
 
 		<title>three.js canvas - geometry - NURBS</title>
 
 		<meta charset="utf-8">

+ 1 - 1
examples/css3d_molecules.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - molecules</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - molecules</title>
 
 		<style>
 
 			html, body {
 
 				height: 100%;

+ 1 - 1
examples/css3d_panorama.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - panorama</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - panorama</title>
 
 		<style>
 
 			body {
 
 				background-color: #000000;

+ 1 - 1
examples/css3d_panorama_deviceorientation.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - panorama - deviceorientation</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - panorama - deviceorientation</title>
 
 		<style>
 
 			body {
 
 				background-color: #000000;

+ 1 - 1
examples/css3d_periodictable.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - periodic table</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - periodic table</title>
 
 		<style>
 
 			html, body {
 
 				height: 100%;

+ 1 - 0
examples/css3d_sandbox.html
파일 보기 

@@ -2,6 +2,7 @@
 
 <html>
 
 	<head>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				background-color: #ffffff;

+ 1 - 1
examples/css3d_sprites.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - sprites</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - sprites</title>
 
 		<style>
 
 			html, body {
 
 				height: 100%;

+ 1 - 1
examples/css3d_youtube.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d - youtube</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d - youtube</title>
 
 		<style>
 
 			html, body {
 
 				height: 100%;

+ 1 - 1
examples/css3dstereo_periodictable.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js css3d stereo - periodic table</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js css3d stereo - periodic table</title>
 
 		<style>
 
 			html, body {
 
 				height: 100%;

+ 1 - 1
examples/index.html
파일 보기 

@@ -1,8 +1,8 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset="utf-8">
 
 		<title>three.js / examples</title>
 
+		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>

+ 1 - 0
examples/misc_animation_authoring.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - animation authoring</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 3 - 2
examples/misc_controls_pointerlock.html
파일 보기 

@@ -1,8 +1,9 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
-		<meta charset="utf-8">
 
 		<title>three.js - pointerlock controls</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			html, body {
 
 				width: 100%;

+ 1 - 0
examples/misc_controls_transform.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - transform controls</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 5 - 4
examples/misc_uv_tests.html
파일 보기 

@@ -1,8 +1,9 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset=utf-8 />
 
 		<title>three.js - uv mapping tests</title>
 
+		<meta charset=utf-8 />
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	</head>
 
 
 	<body>
 
@@ -12,9 +13,9 @@
 
 
 		<script>
 
 
-			/* 
-			 * This is to help debug UVs problems in geometry, 
-			 * as well as allow a new user to visualize what UVs are about. 
+			/*
 
+			 * This is to help debug UVs problems in geometry,
 
+			 * as well as allow a new user to visualize what UVs are about.
 
 			 */
 
 
 			function test(name, geometry) {

+ 1 - 1
examples/webgl_animation_cloth.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - cloth simulation</title>

+ 4 - 4
examples/webgl_animation_scene.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - scene animation</title>
 
@@ -59,7 +59,7 @@
 
 			var mesh, helper;
 
 
 			var mixer;
 
-		
+
 
 			var mouseX = 0, mouseY = 0;
 
 
 			var windowHalfX = window.innerWidth / 2;
 
@@ -128,9 +128,9 @@
 
 					scene = loadedScene;
 
 					scene.add( camera );
 
 					scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
 
-		
+
 
 					mixer = new THREE.AnimationMixer( scene );
 
-			
+
 
 					mixer.clipAction( sceneAnimationClip ).play();
 
 
 				} );

+ 1 - 1
examples/webgl_animation_skinning_morph.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - skinning + morphing [knight]</title>

+ 4 - 5
examples/webgl_buffergeometry_constructed_from_geometry.html
파일 보기 

@@ -1,10 +1,9 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
 	<title>three.js - BufferGeometry constructed from Geometry Example</title>
 
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-	<meta content="initial-scale=1.0, maximum-scale=1.0" name="viewport">
 
-	<meta name="Generator" content="https://callum.com">
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<style>
 
 		body {
 
 			background-color: #000;
 
@@ -247,4 +246,4 @@
 
 		}
 
 		</script>
 
 	</body>
 
-</html>
 
+</html>

+ 3 - 4
examples/webgl_buffergeometry_selective_draw.html
파일 보기 

@@ -1,10 +1,9 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
 	<title>three.js - BufferGeometry selectively drawn using attributes and a shader</title>
 
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-	<meta content="initial-scale=1.0, maximum-scale=1.0" name="viewport">
 
-	<meta name="Generator" content="https://callum.com">
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<style>
 
 		body {
 
 			background-color: #000;

+ 1 - 1
examples/webgl_decals.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>WebGL decals</title>

+ 18 - 17
examples/webgl_exporter_obj.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - exporter - obj</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				font-family: Monospace;
 
@@ -10,7 +11,7 @@
 
 				margin: 0px;
 
 				overflow: hidden;
 
 			}
 
-			
+
 
 			#info {
 
 				color: #fff;
 
 				position: absolute;
 
@@ -36,13 +37,13 @@
 
 				overflow : auto;
 
 				z-index: 100;
 
 			}
 
-			
+
 
 			span.link {
 
 				color: skyblue;
 
 				cursor: pointer;
 
 				text-decoration : underline;
 
 			}
 
-			
+
 
 			a {
 
 				color: skyblue
 
 			}
 
@@ -59,7 +60,7 @@
 
 			<span class="link" id="transformed">transformed</span>
 
 			- <span class="link" id="export">export to obj</span>
 
 		</div>
 
-		
+
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="js/exporters/OBJExporter.js"></script>
 
 
@@ -76,7 +77,7 @@
 
 				floatingDiv.style.display = 'block';
 
 				floatingDiv.innerHTML = result.split ('\n').join ('<br />');
 
 			}
 
-			
+
 
 			function addGeometry (type)
 
 			{
 
 				for (var i = 0; i < scene.children.length; i++) {
 
@@ -87,9 +88,9 @@
 
 						i--;
 
 					}
 
 				}
 
-				
+
 
 				console.log (renderer.info);
 
-	
+
 
 				if (type == 1) {
 
 					var material = new THREE.MeshLambertMaterial ( { color : 0x00cc00 } );
 
 					var geometry = new THREE.Geometry ();
 
@@ -97,7 +98,7 @@
 
 					geometry.vertices.push (new THREE.Vector3 (50, -50, 0));
 
 					geometry.vertices.push (new THREE.Vector3 (50, 50, 0));
 
 					var face = new THREE.Face3 (0, 1, 2);
 
-					geometry.faces.push (face);	
+					geometry.faces.push (face);
 
 					geometry.computeFaceNormals ();
 
 					scene.add( new THREE.Mesh( geometry, material ) );
 
 				} else if (type == 2) {
 
@@ -115,7 +116,7 @@
 
 					geometry.vertices.push (new THREE.Vector3 (-50, -50, 0));
 
 					geometry.vertices.push (new THREE.Vector3 (50, -50, 0));
 
 					geometry.vertices.push (new THREE.Vector3 (50, 50, 0));
 
-					geometry.faces.push (new THREE.Face3 (0, 1, 2));	
+					geometry.faces.push (new THREE.Face3 (0, 1, 2));
 
 					geometry.computeFaceNormals ();
 
 					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = -200;
 
@@ -141,7 +142,7 @@
 
 					scene.add( mesh3 );
 
 				}
 
 			}
 
-			
+
 
 			function init() {
 
 
 				renderer = new THREE.WebGLRenderer();
 
@@ -158,21 +159,21 @@
 
 				scene.add( light );
 
 
 				addGeometry (1);
 
-				
+
 
 				window.addEventListener( 'click', onWindowClick, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'mouseover', onDocumentMouseMove, false );
 
-				
+
 
 				document.getElementById( 'triangle' ).addEventListener( 'click', function() { addGeometry (1); });
 
 				document.getElementById( 'cube' ).addEventListener( 'click', function() { addGeometry (2); });
 
 				document.getElementById( 'cylinder' ).addEventListener( 'click', function() { addGeometry (3); });
 
 				document.getElementById( 'both' ).addEventListener( 'click', function() { addGeometry (4); });
 
 				document.getElementById( 'transformed' ).addEventListener( 'click', function() { addGeometry (5); });
 
-				
+
 
 				exportButton = document.getElementById( 'export' );
 
 				exportButton.addEventListener( 'click', function() { exportToObj (); });
 
-				
+
 
 				floatingDiv = document.createElement ('div');
 
 				floatingDiv.className = 'floating';
 
 				document.body.appendChild (floatingDiv);
 
@@ -189,13 +190,13 @@
 
 					}
 
 					target = target.parentElement;
 
 				}
 
-				
+
 
 				if (needToClose) {
 
 					floatingDiv.style.display = 'none';
 
 				}
 
 
-			}			
-			
+			}
 
+
 
 			function onWindowResize() {
 
 
 				camera.aspect = window.innerWidth / window.innerHeight;

+ 1 - 0
examples/webgl_geometry_cube.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - geometry - cube</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 0 - 1
examples/webgl_geometry_extrude_shapes.html
파일 보기 

@@ -4,7 +4,6 @@
 
 		<title>three.js webgl - geometry - extrude shapes</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-
 
 		<style>
 
 			body {
 
 				font-family: Monospace;

+ 0 - 1
examples/webgl_geometry_nurbs.html
파일 보기 

@@ -1,6 +1,5 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-	<!-- based on webgl_geometry_shapes.html and webgl_geometries2.html -->
 
 	<head>
 
 		<title>three.js webgl - geometry - NURBS</title>
 
 		<meta charset="utf-8">

+ 114 - 115
examples/webgl_gpu_particle_system.html
파일 보기 

@@ -1,159 +1,158 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-
 
 <head>
 
-  <title>three.js - gpu particle system</title>
 
-  <meta charset="utf-8">
 
-  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-  <style>
 
-    body {
 
-      background-color: #000000;
 
-      margin: 0px;
 
-      overflow: hidden;
 
-    }
 
-
 
-    a {
 
-      color: #0078ff;
 
-    }
 
-
 
-    .dg {
 
-      right: auto!important;
 
-      left: 20px!important;
 
-    }
 
-  </style>
 
+	<title>three.js - gpu particle system</title>
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+	<style>
 
+		body {
 
+			background-color: #000000;
 
+			margin: 0px;
 
+			overflow: hidden;
 
+		}
 
+
 
+		a {
 
+			color: #0078ff;
 
+		}
 
+
 
+		.dg {
 
+			right: auto!important;
 
+			left: 20px!important;
 
+		}
 
+	</style>
 
 </head>
 
 
 <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 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>
 
 
-  <script src="../build/three.min.js"></script>
 
-  <script src="./js/controls/TrackballControls.js"></script>
 
-  <script src="./js/libs/dat.gui.min.js"></script>
 
-  <script src="./js/GPUParticleSystem.js" charset="utf-8"></script>
 
+	<script src="../build/three.min.js"></script>
 
+	<script src="./js/controls/TrackballControls.js"></script>
 
+	<script src="./js/libs/dat.gui.min.js"></script>
 
+	<script src="./js/GPUParticleSystem.js" charset="utf-8"></script>
 
 
-  <script>
 
-    var camera, tick = 0,
 
-      scene, renderer, clock = new THREE.Clock(true),
 
-      controls, container, gui = new dat.GUI(),
 
-      options, spawnerOptions, particleSystem;
 
+	<script>
 
+		var camera, tick = 0,
 
+			scene, renderer, clock = new THREE.Clock(true),
 
+			controls, container, gui = new dat.GUI(),
 
+			options, spawnerOptions, particleSystem;
 
 
-    init();
 
-    animate();
 
+		init();
 
+		animate();
 
 
-    function init() {
 
+		function init() {
 
 
 
-      container = document.createElement('div');
 
-      document.body.appendChild(container);
 
+			container = document.createElement('div');
 
+			document.body.appendChild(container);
 
 
-      camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 1, 10000);
 
-      camera.position.z = 100;
 
+			camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 1, 10000);
 
+			camera.position.z = 100;
 
 
-      scene = new THREE.Scene();
 
+			scene = new THREE.Scene();
 
 
-      // The GPU Particle system extends THREE.Object3D, and so you can use it
 
-      // 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
 
-      // system for your whole scene
 
-      particleSystem = new THREE.GPUParticleSystem({
 
-        maxParticles: 250000
 
-      });
 
-      scene.add( particleSystem);
 
+			// The GPU Particle system extends THREE.Object3D, and so you can use it
 
+			// 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
 
+			// system for your whole scene
 
+			particleSystem = new THREE.GPUParticleSystem({
 
+				maxParticles: 250000
 
+			});
 
+			scene.add( particleSystem);
 
 
 
-      // options passed during each spawned
 
-      options = {
 
-        position: new THREE.Vector3(),
 
-        positionRandomness: .3,
 
-        velocity: new THREE.Vector3(),
 
-        velocityRandomness: .5,
 
-        color: 0xaa88ff,
 
-        colorRandomness: .2,
 
-        turbulence: .5,
 
-        lifetime: 2,
 
-        size: 5,
 
-        sizeRandomness: 1
 
-      };
 
+			// options passed during each spawned
 
+			options = {
 
+				position: new THREE.Vector3(),
 
+				positionRandomness: .3,
 
+				velocity: new THREE.Vector3(),
 
+				velocityRandomness: .5,
 
+				color: 0xaa88ff,
 
+				colorRandomness: .2,
 
+				turbulence: .5,
 
+				lifetime: 2,
 
+				size: 5,
 
+				sizeRandomness: 1
 
+			};
 
 
-      spawnerOptions = {
 
-        spawnRate: 15000,
 
-        horizontalSpeed: 1.5,
 
-        verticalSpeed: 1.33,
 
-        timeScale: 1
 
-      }
 
+			spawnerOptions = {
 
+				spawnRate: 15000,
 
+				horizontalSpeed: 1.5,
 
+				verticalSpeed: 1.33,
 
+				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.setPixelRatio(window.devicePixelRatio);
 
-      renderer.setSize(window.innerWidth, window.innerHeight);
 
-      container.appendChild(renderer.domElement);
 
+			renderer = new THREE.WebGLRenderer();
 
+			renderer.setPixelRatio(window.devicePixelRatio);
 
+			renderer.setSize(window.innerWidth, window.innerHeight);
 
+			container.appendChild(renderer.domElement);
 
 
-      // setup controls
 
-      controls = new THREE.TrackballControls(camera, renderer.domElement);
 
-      controls.rotateSpeed = 5.0;
 
-      controls.zoomSpeed = 2.2;
 
-      controls.panSpeed = 1;
 
-      controls.dynamicDampingFactor = 0.3;
 
+			// setup controls
 
+			controls = new THREE.TrackballControls(camera, renderer.domElement);
 
+			controls.rotateSpeed = 5.0;
 
+			controls.zoomSpeed = 2.2;
 
+			controls.panSpeed = 1;
 
+			controls.dynamicDampingFactor = 0.3;
 
 
-      window.addEventListener('resize', onWindowResize, false);
 
+			window.addEventListener('resize', onWindowResize, false);
 
 
-    }
 
+		}
 
 
-    function onWindowResize() {
 
+		function onWindowResize() {
 
 
-      camera.aspect = window.innerWidth / window.innerHeight;
 
-      camera.updateProjectionMatrix();
 
+			camera.aspect = window.innerWidth / window.innerHeight;
 
+			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;
 
-      tick += delta;
 
+			var delta = clock.getDelta() * spawnerOptions.timeScale;
 
+			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++) {
 
-          // 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
 
-          particleSystem.spawnParticle(options);
 
-        }
 
-      }
 
+				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
 
+					// their lifecycle is handled entirely on the GPU, driven by a time uniform updated below
 
+					particleSystem.spawnParticle(options);
 
+				}
 
+			}
 
 
-      particleSystem.update(tick);
 
+			particleSystem.update(tick);
 
 
-      render();
 
+			render();
 
 
-    }
 
+		}
 
 
-    function render() {
 
+		function render() {
 
 
-      renderer.render(scene, camera);
 
+			renderer.render(scene, camera);
 
 
-    }
 
-  </script>
 
+		}
 
+	</script>
 
 </body>
 
 
 </html>

+ 4 - 3
examples/webgl_helpers.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - helpers</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;
 
@@ -57,7 +58,7 @@
 
 					var group = new THREE.Group();
 
 					group.scale.multiplyScalar( 50 );
 
 					scene.add( group );
 
-					
+
 
 					// To make sure that the matrixWorld is up to date for the boxhelpers
 
 					group.updateMatrixWorld(true);
 
 
@@ -89,10 +90,10 @@
 
 					line.position.x = -4;
 
 					group.add( line );
 
 					scene.add( new THREE.BoxHelper( line ) );
 
-					
+
 
 					scene.add( new THREE.BoxHelper( group ) );
 
 					scene.add( new THREE.BoxHelper( scene ) );
 
-					
+
 
 
 				} );

+ 1 - 1
examples/webgl_interactive_points.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - interactive particles</title>

+ 1 - 1
examples/webgl_interactive_raycasting_points.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - interactive - raycasting - points</title>

+ 0 - 2
examples/webgl_kinect.html
파일 보기 

@@ -1,8 +1,6 @@
 
-
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 		<title>three.js - kinect</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

+ 2 - 2
examples/webgl_lensflares.html
파일 보기 

@@ -1,10 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - lensflares</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style type="text/css">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				padding:0;

+ 1 - 0
examples/webgl_loader_fbx.html
파일 보기 

@@ -1,3 +1,4 @@
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - FBX loader</title>

+ 1 - 1
examples/webgl_loader_gltf.html
파일 보기 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - glTF</title>

+ 0 - 1
examples/webgl_loader_pcd.html
파일 보기 

@@ -1,4 +1,3 @@
 
-
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>

+ 1 - 1
examples/webgl_loader_pdb.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html>
 
 	<head>
 
+		<title>three.js webgl - molecules</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js webgl - molecules</title>
 
 		<style>
 
 
 			body {

+ 1 - 0
examples/webgl_marchingcubes.html
파일 보기 

@@ -3,6 +3,7 @@
 
 <head>
 
 	<title>three.js webgl - marching cubes</title>
 
 	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<style>
 
 		body {
 
 		  color: #fff;

+ 1 - 0
examples/webgl_materials_blending.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - blending</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 2 - 1
examples/webgl_materials_blending_custom.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - custom blending</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;
 
@@ -104,7 +105,7 @@
 
 				scene = new THREE.Scene();
 
 
 				// TEXTURE LOADER
 
-				
+
 
 				var textureLoader = new THREE.TextureLoader();
 
 
 				// BACKGROUND IMAGES

+ 1 - 0
examples/webgl_materials_cubemap_dynamic.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - dynamic cube reflection</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				background: #000;

+ 0 - 1
examples/webgl_materials_envmaps.html
파일 보기 

@@ -1,4 +1,3 @@
 
-
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>

+ 1 - 0
examples/webgl_materials_texture_compressed.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - compressed textures</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 9 - 8
examples/webgl_materials_texture_pvrtc.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - compressed textures</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;
 
@@ -62,13 +63,13 @@
 
 				geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
 
 
-     
-          
+
 
+
 
 
 				/*
 
 
 				*/
 
-              
+
 
     			var onCube1Loaded = function(texture){
 
 					texture.magFilter = THREE.LinearFilter;
 
 					texture.minFilter = THREE.LinearFilter;
 
@@ -82,8 +83,8 @@
 
 					texture.mapping = THREE.CubeReflectionMapping;
 
 					material8.needsUpdate = true;
 
     			};
 
-     
-    
+
 
+
 
 				var loader = new THREE.PVRLoader();
 
 
 				var disturb_4bpp_rgb            = loader.load( 'textures/compressed/disturb_4bpp_rgb.pvr');
 
@@ -96,8 +97,8 @@
 
 				var park3_cube_mip_2bpp_rgb_v3  = loader.load( 'textures/compressed/park3_cube_mip_2bpp_rgb_v3.pvr', onCube2Loaded );
 
 
 
-				disturb_2bpp_rgb.minFilter = 
-				disturb_2bpp_rgb.magFilter = 
+				disturb_2bpp_rgb.minFilter =
 
+				disturb_2bpp_rgb.magFilter =
 
 				flare_4bpp_rgba.minFilter  =
 
 				flare_4bpp_rgba.magFilter  =
 
 				disturb_4bpp_rgb.minFilter =
 
@@ -116,7 +117,7 @@
 
 				var material8 = new THREE.MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
 
 
 				var material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3       } );
 
-			
+
 
 
 				var mesh = new THREE.Mesh( geometry, material1 );
 
 				mesh.position.x = -500;

+ 1 - 0
examples/webgl_materials_wireframe.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - materials - wireframe</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 112 - 111
examples/webgl_multiple_canvases_circle.html
파일 보기 

@@ -1,141 +1,142 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <head>
 
-  <meta charset="utf-8">
 
-  <title>three.js webgl - multiple canvases - circle</title>
 
-  <style type="text/css" media="screen">
 
-    body {
 
-      background-color: #555;
 
-      color: white;
 
+	<title>three.js webgl - multiple canvases - circle</title>
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+	<style type="text/css" media="screen">
 
+		body {
 
+			background-color: #555;
 
+			color: white;
 
 			font-family:Monospace;
 
 			font-size:13px;
 
 			text-align:center;
 
 			margin: 0px;
 
-		  overflow: hidden;
 
+			overflow: hidden;
 
 			width: 100%;
 
 			height: 100%;
 
-    }
 
+		}
 
 
-    #container {
 
-      width: 100%;
 
-      height: 700px;
 
-      -webkit-perspective: 800px;
 
-      -webkit-perspective-origin: 50% 225px;
 
+		#container {
 
+			width: 100%;
 
+			height: 700px;
 
+			-webkit-perspective: 800px;
 
+			-webkit-perspective-origin: 50% 225px;
 
 			-moz-perspective: 800px;
 
 			-moz-perspective-origin: 50% 225px;
 
 			perspective: 800px;
 
 			perspective-origin: 50% 225px;
 
-    }
 
-    #stage {
 
-      width: 100%;
 
-      height: 100%;
 
-      -webkit-transform-style: preserve-3d;
 
-      -moz-transform-style: preserve-3d;
 
-      transform-style: preserve-3d;
 
-    }
 
-
 
-    #shape {
 
-      position: relative;
 
-      top: 160px;
 
-      margin: 0 auto;
 
-      height: 200px;
 
-      width: 200px;
 
-      -webkit-transform: translateZ(-0px);
 
-      -webkit-transform-style: preserve-3d;
 
+		}
 
+		#stage {
 
+			width: 100%;
 
+			height: 100%;
 
+			-webkit-transform-style: preserve-3d;
 
+			-moz-transform-style: preserve-3d;
 
+			transform-style: preserve-3d;
 
+		}
 
+
 
+		#shape {
 
+			position: relative;
 
+			top: 160px;
 
+			margin: 0 auto;
 
+			height: 200px;
 
+			width: 200px;
 
+			-webkit-transform: translateZ(-0px);
 
+			-webkit-transform-style: preserve-3d;
 
 			-moz-transform: translateZ(-0px);
 
 			-moz-transform-style: preserve-3d;
 
 			transform: translateZ(-0px);
 
 			transform-style: preserve-3d;
 
-    }
 
-
 
-    .ring {
 
-      position: absolute;
 
-      height: 300px;
 
-      width: 200px;
 
-      text-align: center;
 
-      font-family: Times, serif;
 
-      font-size: 124pt;
 
-      color: black;
 
-      background-color: #fff;
 
-    }
 
-
 
-    #shape {
 
-      border: 0px;
 
-      background-color: rgba(255, 255, 255, 0);
 
-    }
 
-
 
-    .ring > .r1 {
 
-      -webkit-transform: rotateY(300deg) translateZ(-380px);
 
-      -moz-transform: rotateY(300deg) translateZ(-380px);
 
-      transform: rotateY(300deg) translateZ(-380px);
 
-    }
 
-
 
-    .ring > .r2 {
 
-      -webkit-transform: rotateY(330deg) translateZ(-380px);
 
-      -moz-transform: rotateY(330deg) translateZ(-380px);
 
-      transform: rotateY(330deg) translateZ(-380px);
 
-    }
 
-
 
-    .ring > .r3 {
 
-      -webkit-transform: rotateY(0deg) translateZ(-380px);
 
-      -moz-transform: rotateY(0deg) translateZ(-380px);
 
-      transform: rotateY(0deg) translateZ(-380px);
 
-    }
 
-
 
-    .ring > .r4 {
 
-      -webkit-transform: rotateY(30deg) translateZ(-380px);
 
-      -moz-transform: rotateY(30deg) translateZ(-380px);
 
-      transform: rotateY(30deg) translateZ(-380px);
 
-    }
 
-
 
-    .ring > .r5 {
 
-      -webkit-transform: rotateY(60deg) translateZ(-380px);
 
-      -moz-transform: rotateY(60deg) translateZ(-380px);
 
-      transform: rotateY(60deg) translateZ(-380px);
 
-    }
 
-
 
-  	#info {
 
+		}
 
+
 
+		.ring {
 
+			position: absolute;
 
+			height: 300px;
 
+			width: 200px;
 
+			text-align: center;
 
+			font-family: Times, serif;
 
+			font-size: 124pt;
 
+			color: black;
 
+			background-color: #fff;
 
+		}
 
+
 
+		#shape {
 
+			border: 0px;
 
+			background-color: rgba(255, 255, 255, 0);
 
+		}
 
+
 
+		.ring > .r1 {
 
+			-webkit-transform: rotateY(300deg) translateZ(-380px);
 
+			-moz-transform: rotateY(300deg) translateZ(-380px);
 
+			transform: rotateY(300deg) translateZ(-380px);
 
+		}
 
+
 
+		.ring > .r2 {
 
+			-webkit-transform: rotateY(330deg) translateZ(-380px);
 
+			-moz-transform: rotateY(330deg) translateZ(-380px);
 
+			transform: rotateY(330deg) translateZ(-380px);
 
+		}
 
+
 
+		.ring > .r3 {
 
+			-webkit-transform: rotateY(0deg) translateZ(-380px);
 
+			-moz-transform: rotateY(0deg) translateZ(-380px);
 
+			transform: rotateY(0deg) translateZ(-380px);
 
+		}
 
+
 
+		.ring > .r4 {
 
+			-webkit-transform: rotateY(30deg) translateZ(-380px);
 
+			-moz-transform: rotateY(30deg) translateZ(-380px);
 
+			transform: rotateY(30deg) translateZ(-380px);
 
+		}
 
+
 
+		.ring > .r5 {
 
+			-webkit-transform: rotateY(60deg) translateZ(-380px);
 
+			-moz-transform: rotateY(60deg) translateZ(-380px);
 
+			transform: rotateY(60deg) translateZ(-380px);
 
+		}
 
+
 
+		#info {
 
 				position: absolute;
 
 				top: 0px; width: 100%;
 
 				padding: 5px;
 
 		}
 
 
-    #help {
 
+		#help {
 
 				position: absolute;
 
 				top: 50px; width: 100%;
 
-        text-align: center;
 
-    }
 
-    #help>div {
 
-        margin: auto;
 
-        padding: 1em;
 
-        background-color: rgba(0,0,0,0.3);
 
-        width: 50%;
 
-    }
 
-
 
-  </style>
 
+				text-align: center;
 
+		}
 
+		#help>div {
 
+				margin: auto;
 
+				padding: 1em;
 
+				background-color: rgba(0,0,0,0.3);
 
+				width: 50%;
 
+		}
 
+
 
+	</style>
 
 </head>
 
 <body>
 
 
-  <div id="container">
 
-    <div id="stage">
 
-      <div id="shape" class="ring backfaces">
 
-        <div id="container1" class="ring r1"></div>
 
-        <div id="container2" class="ring r2"></div>
 
-        <div id="container3" class="ring r3"></div>
 
-        <div id="container4" class="ring r4"></div>
 
-        <div id="container5" class="ring r5"></div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div id="container">
 
+		<div id="stage">
 
+			<div id="shape" class="ring backfaces">
 
+				<div id="container1" class="ring r1"></div>
 
+				<div id="container2" class="ring r2"></div>
 
+				<div id="container3" class="ring r3"></div>
 
+				<div id="container4" class="ring r4"></div>
 
+				<div id="container5" class="ring r5"></div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 
 	<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - multiple canvases - circle</div>
 
-  <div id="help" gstyle="display: none">
 
-    <div>
 
-    This example is shows how to setup multi-monitor displays like <a href="http://code.google.com/p/liquid-galaxy/">Google's Liquid Galaxy using three.js</a>.
 
-    Here 5 monitors are simulated using 3d css. WebGL is then rendered onto each one.<br/>
 
-    Note: 3d css support required! Use Chrome, Safari or Firefox 10
 
-    </div>
 
-  </div>
 
+	<div id="help" gstyle="display: none">
 
+		<div>
 
+		This example is shows how to setup multi-monitor displays like <a href="http://code.google.com/p/liquid-galaxy/">Google's Liquid Galaxy using three.js</a>.
 
+		Here 5 monitors are simulated using 3d css. WebGL is then rendered onto each one.<br/>
 
+		Note: 3d css support required! Use Chrome, Safari or Firefox 10
 
+		</div>
 
+	</div>
 
 
 		<script type="text/javascript" src="../build/three.min.js"></script>
 
 
@@ -164,9 +165,9 @@
 
 
 				apps.push( new App( 'container1', rot * -2 * fudge ) );
 
 				apps.push( new App( 'container2', rot * -1 * fudge ) );
 
-				apps.push( new App( 'container3', rot *  0 * fudge ) );
 
-				apps.push( new App( 'container4', rot *  1 * fudge ) );
 
-				apps.push( new App( 'container5', rot *  2 * fudge ) );
 
+				apps.push( new App( 'container3', rot *	0 * fudge ) );
 
+				apps.push( new App( 'container4', rot *	1 * fudge ) );
 
+				apps.push( new App( 'container5', rot *	2 * fudge ) );
 
 
 			}

+ 4 - 2
examples/webgl_nearestneighbour.html
파일 보기 

@@ -1,7 +1,9 @@
 
-<html>
 
+<!DOCTYPE html>
 
+<html lang="en">
 
 	<head>
 
-		<meta charset="utf-8">
 
 		<title>three.js webgl - nearest neighbour</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			html, body {
 
 				width: 100%;

+ 96 - 98
examples/webgl_octree_raycasting.html
파일 보기 

@@ -2,9 +2,7 @@
 
 <html>
 
 <head>
 
 	<title>three.js webgl - octree raycasting</title>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <meta name="description" content="">
 
+	<meta charset="utf-8">
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<style>
 
 		body {
 
@@ -19,39 +17,39 @@
 
 
 <body>
 
 
-    <script type="text/javascript" src="../build/three.min.js"></script>
 
-    <script type="text/javascript" src="js/Octree.js"></script>
 
+	<script type="text/javascript" src="../build/three.min.js"></script>
 
+	<script type="text/javascript" src="js/Octree.js"></script>
 
 	<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
 
 	<script type="text/javascript" src="js/libs/stats.min.js"></script>
 
 	<script>
 
-		
+
 
 		var camera, scene, renderer;
 
 
 		var controls, stats;
 
-		
+
 
 		var tracker;
 
-		
+
 
 		var octree;
 
-		
+
 
 		var objects = [];
 
 		var objectsSearch = [];
 
 		var totalFaces = 0;
 
-		
+
 
 		var simpleMeshCount = 2000;
 
 		var radius = 100;
 
 		var radiusMax = radius * 10;
 
 		var radiusMaxHalf = radiusMax * 0.5;
 
 		var radiusSearch = radius * 0.75;
 
-		
+
 
 		var baseColor = 0x333333;
 
 		var foundColor = 0x12C0E3;
 
 		var intersectColor = 0x00D66B;
 
-		
+
 
 		var clock = new THREE.Clock();
 
 		var searchDelay = 1;
 
 		var searchInterval = 0;
 
 		var useOctree = true;
 
-		
+
 
 		var raycaster = new THREE.Raycaster();
 
 		var mouse = new THREE.Vector2();
 
 		var intersected;
 
@@ -60,7 +58,7 @@
 
 		animate();
 
 
 		function init() {
 
-			
+
 
 			// standard three scene, camera, renderer
 
 
 			scene = new THREE.Scene();
 
@@ -73,9 +71,9 @@
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			document.body.appendChild( renderer.domElement );
 
-			
+
 
 			// create octree
 
-			
+
 
 			octree = new THREE.Octree( {
 
 				// uncomment below to see the octree (may kill the fps)
 
 				//scene: scene,
 
@@ -91,46 +89,46 @@
 
 				// helps insert objects that lie over more than one node
 
 				overlapPct: 0.15
 
 			} );
 
-			
+
 
 			// lights
 
-			
+
 
 			var ambient = new THREE.AmbientLight( 0x101010 );
 
 			scene.add( ambient );
 
 
 			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
 			directionalLight.position.set( 1, 1, 2 ).normalize();
 
 			scene.add( directionalLight );
 
-			
+
 
 			// create all objects
 
-			
+
 
 			var simpleGeometry = new THREE.BoxGeometry( 1, 1, 1 );
 
-			
+
 
 			for ( var i = 0; i < simpleMeshCount - 1; i++ ) {
 
-				
+
 
 				totalFaces += simpleGeometry.faces.length;
 
-				
+
 
 				var simpleMaterial = new THREE.MeshBasicMaterial();
 
 				simpleMaterial.color.setHex( baseColor );
 
-				
+
 
 				modifyOctree( simpleGeometry, simpleMaterial, false, true, true, true );
 
-				
+
 
 			}
 
-			
+
 
 			var loader = new THREE.JSONLoader();
 
-			
+
 
 			loader.load( 'obj/lucy/Lucy100k_slim.js', function ( geometry ) {
 
 
 				geometry.computeVertexNormals();
 
 				totalFaces += geometry.faces.length;
 
-				
+
 
 				var material = new THREE.MeshPhongMaterial( { color: 0x030303, specular: 0x030303, shininess: 30 } );
 
-				
+
 
 				modifyOctree( geometry, material, true );
 
-				
+
 
 			} );
 
-			
+
 
 			// camera controls
 
-			
+
 
 			controls = new THREE.TrackballControls( camera );
 
 			controls.rotateSpeed = 1.0;
 
 			controls.zoomSpeed = 1.2;
 
@@ -139,9 +137,9 @@
 
 			controls.noPan = false;
 
 			controls.staticMoving = true;
 
 			controls.dynamicDampingFactor = 0.3;
 
-			
+
 
 			// info
 
-			
+
 
 			var info = document.createElement( 'div' );
 
 			info.style.position = 'absolute';
 
 			info.style.top = '0';
 
@@ -151,36 +149,36 @@
 
 			info.style.background = '#FFFFFF';
 
 			info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - octree (raycasting performance) - by <a href="http://github.com/collinhover/threeoctree" target="_blank">collinhover</a><br><small style="opacity:0.5">Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>)</small>';
 
 			document.body.appendChild( info );
 
-			
+
 
 			// stats
 
-			
+
 
 			stats = new Stats();
 
 			stats.domElement.style.position = 'absolute';
 
 			stats.domElement.style.top = '0';
 
 			stats.domElement.style.left = '0';
 
 			stats.domElement.style.zIndex = 100;
 
-			
+
 
 			document.body.appendChild( stats.domElement );
 
-			
+
 
 			// bottom container
 
-			
+
 
 			var container = document.createElement( 'div' );
 
 			container.style.position = 'absolute';
 
 			container.style.bottom = '0';
 
 			container.style.width = '100%';
 
 			container.style.textAlign = 'center';
 
 			document.body.appendChild( container );
 
-			
+
 
 			// tracker
 
-			
+
 
 			tracker = document.createElement( 'div' );
 
 			tracker.style.width = '100%';
 
 			tracker.style.padding = '10px';
 
 			tracker.style.background = '#FFFFFF';
 
 			container.appendChild( tracker );
 
-			
+
 
 			// octree use toggle
 
-			
+
 
 			var toggle = document.createElement( 'div' );
 
 			toggle.style.position = 'absolute';
 
 			toggle.style.bottom = '100%';
 
@@ -188,7 +186,7 @@
 
 			toggle.style.padding = '10px';
 
 			toggle.style.background = '#FFFFFF';
 
 			container.appendChild( toggle );
 
-			
+
 
 			var checkbox = document.createElement('input');
 
 			checkbox.type = "checkbox";
 
 			checkbox.name = "octreeToggle";
 
@@ -202,7 +200,7 @@
 
 
 			toggle.appendChild(checkbox);
 
 			toggle.appendChild(label);
 
-			
+
 
 			// events
 
 
 			checkbox.addEventListener( 'click', toggleOctree, false );
 
@@ -211,83 +209,83 @@
 
 			window.addEventListener( 'resize', onWindowResize, false );
 
 
 		}
 
-		
+
 
 		function toggleOctree () {
 
-			
+
 
 			useOctree = !useOctree;
 
-			
+
 
 		}
 
 
 		function animate() {
 
 
 			// note: three.js includes requestAnimationFrame shim
 
-			
+
 
 			requestAnimationFrame( animate );
 
-			
+
 
 			render();
 
-			
+
 
 			stats.update();
 
 
 		}
 
-		
+
 
 		function render() {
 
 
 			controls.update();
 
 
 			renderer.render( scene, camera );
 
-			
+
 
 			// update octree post render
 
 			// this ensures any objects being added
 
 			// have already had their matrices updated
 
-			
+
 
 			octree.update();
 
 
 		}
 
-		
+
 
 		function modifyOctree( geometry, material, useFaces, randomPosition, randomRotation, randomScale ) {
 
-			
+
 
 			var mesh;
 
-			
+
 
 			if ( geometry ) {
 
-				
+
 
 				// create new object
 
-				
+
 
 				mesh = new THREE.Mesh( geometry, material );
 
-				
+
 
 				// give new object a random position, rotation, and scale
 
-				
+
 
 				if ( randomPosition ) {
 
-				
+
 
 					mesh.position.set( Math.random() * radiusMax - radiusMaxHalf, Math.random() * radiusMax - radiusMaxHalf, Math.random() * radiusMax - radiusMaxHalf );
 
-				
+
 
 				}
 
-				
+
 
 				if ( randomRotation ) {
 
-					
+
 
 					mesh.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
 
-				
+
 
 				}
 
-				
+
 
 				if ( randomScale ) {
 
-					
+
 
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * radius * 0.1 + radius * 0.05;
 
-					
+
 
 				}
 
-				
+
 
 				// add new object to octree and scene
 
 				// NOTE: octree object insertion is deferred until after the next render cycle
 
-				
+
 
 				octree.add( mesh, { useFaces: useFaces } );
 
 				scene.add( mesh );
 
-				
+
 
 				// store object
 
-				
+
 
 				objects.push( mesh );
 
-				
+
 
 				/*
 
-				
+
 
 				// octree details to console
 
-				
+
 
 				console.log( ' ============================================================================================================');
 
 				console.log( ' OCTREE: ', octree );
 
 				console.log( ' ... depth ', octree.depth, ' vs depth end?', octree.depthEnd() );
 
@@ -295,17 +293,17 @@
 
 				console.log( ' ... total objects: ', octree.objectCountEnd(), ' vs tree objects length: ', octree.objects.length );
 
 				console.log( ' ============================================================================================================');
 
 				console.log( ' ');
 
-				
+
 
 				// print full octree structure to console
 
-				
+
 
 				octree.toConsole();
 
-				
+
 
 				*/
 
-				
+
 
 			}
 
-			
+
 
 		}
 
-		
+
 
 		function onWindowResize() {
 
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 
@@ -321,37 +319,37 @@
 
 
 			mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
 
 			mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
-			
+
 
 			raycaster.setFromCamera( mouse, camera );
 
 
 			var octreeObjects;
 
 			var numObjects;
 
 			var numFaces = 0;
 
 			var intersections;
 
-			
+
 
 			if ( useOctree ) {
 
-					
+
 
 				octreeObjects = octree.search( raycaster.ray.origin, raycaster.ray.far, true, raycaster.ray.direction );
 
-				
+
 
 				intersections = raycaster.intersectOctreeObjects( octreeObjects );
 
-				
+
 
 				numObjects = octreeObjects.length;
 
-				
+
 
 				for ( var i = 0, il = numObjects; i < il; i++ ) {
 
-					
+
 
 					numFaces += octreeObjects[ i ].faces.length;
 
-					
+
 
 				}
 
-				
+
 
 			}
 
 			else {
 
-				
+
 
 				intersections = raycaster.intersectObjects( objects );
 
 				numObjects = objects.length;
 
 				numFaces = totalFaces;
 
-				
+
 
 			}
 
-			
+
 
 			if ( intersections.length > 0 ) {
 
 
 				if ( intersected != intersections[ 0 ].object ) {
 
@@ -367,18 +365,18 @@
 
 
 			}
 
 			else if ( intersected ) {
 
-				
+
 
 				intersected.material.color.setHex( baseColor );
 
 				intersected = null;
 
 
 				document.body.style.cursor = 'auto';
 
 
 			}
 
-			
+
 
 			// update tracker
 
-			
+
 
 			tracker.innerHTML = ( useOctree ? 'Octree search' : 'Search without octree' ) + ' using infinite ray from camera found [ ' + numObjects + ' / ' + objects.length + ' ] objects, [ ' + numFaces + ' / ' + totalFaces + ' ] faces, and [ ' + intersections.length + ' ] intersections.';
 
-			
+
 
 		}
 
 
 	</script>

+ 1 - 0
examples/webgl_postprocessing.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - postprocessing</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 1 - 0
examples/webgl_postprocessing_glitch.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - postprocessing - digital glitch</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 1 - 0
examples/webgl_postprocessing_nodes.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - postprocessing</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				margin: 0px;

+ 1 - 1
examples/webgl_raymarching_reflect.html
파일 보기 

@@ -1,9 +1,9 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
+		<title>three.js webgl - raymarching - reflect</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<title>three.js webgl - raymarching - reflect</title>
 
 		<style type="text/css">
 
 			body {
 
 				background-color: black;

+ 1 - 1
examples/webgl_shaders_ocean2.html
파일 보기 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
 	<head>
 
 		<meta charset="utf-8" />
 
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style type="text/css">
 
 			body {
 
 				margin: 0px;

+ 1 - 0
examples/webgl_shadowmap_pointlight.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - PointLight ShadowMap </title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				font-family: Monospace;

+ 1 - 0
examples/webgl_shadowmap_viewer.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - ShadowMapViewer example </title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				font-family: Monospace;

+ 1 - 1
examples/webgl_shadowmesh.html
파일 보기 

@@ -2,8 +2,8 @@
 
 <html lang="en">
 
 	<head>
 
 		<title> three.js webgl - ShadowMesh </title>
 
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
 				background-color: rgb(0, 0, 0);

+ 1 - 0
examples/webgl_terrain_dynamic.html
파일 보기 

@@ -3,6 +3,7 @@
 
 	<head>
 
 		<title>three.js webgl - dynamic procedural terrain</title>
 
 		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style type="text/css">
 
 			body {
 
 				background: #000;