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: Unified CSS.

Mr.doob 6 years ago
parent
6abf9cc9ad
commit
0f44080d79
100 changed files with 555 additions and 2296 deletions
Unified View Show Diff Stats
  1. 3 24
      examples/css2d_label.html
  2. 21 45
      examples/css3d_molecules.html
  3. 6 17
      examples/css3d_orthographic.html
  4. 1 24
      examples/css3d_panorama.html
  5. 2 25
      examples/css3d_panorama_deviceorientation.html
  6. 7 26
      examples/css3d_periodictable.html
  7. 4 20
      examples/css3d_sandbox.html
  8. 5 24
      examples/css3d_sprites.html
  9. 10 9
      examples/css3d_youtube.html
  10. 3 4
      examples/js/renderers/RaytracingRenderer.js
  11. 40 0
      examples/main.css
  12. 1 18
      examples/misc_animation_authoring.html
  13. 1 23
      examples/misc_animation_groups.html
  14. 1 23
      examples/misc_animation_keys.html
  15. 10 11
      examples/misc_boxselection.html
  16. 3 25
      examples/misc_controls_deviceorientation.html
  17. 4 20
      examples/misc_controls_fly.html
  18. 4 18
      examples/misc_controls_map.html
  19. 4 18
      examples/misc_controls_orbit.html
  20. 9 22
      examples/misc_controls_pointerlock.html
  21. 4 24
      examples/misc_controls_trackball.html
  22. 1 24
      examples/misc_controls_transform.html
  23. 3 31
      examples/misc_exporter_collada.html
  24. 17 21
      examples/misc_exporter_draco.html
  25. 3 17
      examples/misc_exporter_gltf.html
  26. 8 35
      examples/misc_exporter_obj.html
  27. 1 21
      examples/misc_exporter_stl.html
  28. 1 22
      examples/misc_fps.html
  29. 5 17
      examples/misc_lookat.html
  30. 5 27
      examples/raytracing_sandbox.html
  31. 2 20
      examples/software_geometry_earth.html
  32. 3 34
      examples/software_lines_splines.html
  33. 1 20
      examples/software_sandbox.html
  34. 4 22
      examples/svg_lines.html
  35. 3 4
      examples/svg_sandbox.html
  36. 21 47
      examples/webaudio_orientation.html
  37. 21 45
      examples/webaudio_sandbox.html
  38. 19 44
      examples/webaudio_timing.html
  39. 21 46
      examples/webaudio_visualizer.html
  40. 1 22
      examples/webgl2_loader_gltf.html
  41. 1 23
      examples/webgl2_materials_texture2darray.html
  42. 1 34
      examples/webgl2_materials_texture3d.html
  43. 17 30
      examples/webgl2_multisampled_renderbuffers.html
  44. 2 28
      examples/webgl2_sandbox.html
  45. 3 15
      examples/webgl_animation_cloth.html
  46. 7 22
      examples/webgl_animation_keyframes.html
  47. 3 10
      examples/webgl_animation_multiple.html
  48. 4 17
      examples/webgl_animation_skinning_blending.html
  49. 9 24
      examples/webgl_animation_skinning_morph.html
  50. 1 23
      examples/webgl_buffergeometry.html
  51. 6 17
      examples/webgl_buffergeometry_constructed_from_geometry.html
  52. 1 22
      examples/webgl_buffergeometry_custom_attributes_particles.html
  53. 5 21
      examples/webgl_buffergeometry_drawcalls.html
  54. 6 31
      examples/webgl_buffergeometry_indexed.html
  55. 3 25
      examples/webgl_buffergeometry_instancing.html
  56. 3 21
      examples/webgl_buffergeometry_instancing2.html
  57. 4 26
      examples/webgl_buffergeometry_instancing_billboards.html
  58. 3 25
      examples/webgl_buffergeometry_instancing_dynamic.html
  59. 4 26
      examples/webgl_buffergeometry_instancing_interleaved_dynamic.html
  60. 3 21
      examples/webgl_buffergeometry_instancing_lambert.html
  61. 2 19
      examples/webgl_buffergeometry_lines.html
  62. 2 19
      examples/webgl_buffergeometry_lines_indexed.html
  63. 4 15
      examples/webgl_buffergeometry_morphtargets.html
  64. 2 23
      examples/webgl_buffergeometry_points.html
  65. 2 23
      examples/webgl_buffergeometry_points_interleaved.html
  66. 1 25
      examples/webgl_buffergeometry_rawshader.html
  67. 2 22
      examples/webgl_buffergeometry_selective_draw.html
  68. 1 23
      examples/webgl_buffergeometry_uint.html
  69. 5 18
      examples/webgl_camera.html
  70. 1 7
      examples/webgl_camera_array.html
  71. 6 10
      examples/webgl_camera_cinematic.html
  72. 10 33
      examples/webgl_camera_logarithmicdepthbuffer.html
  73. 1 7
      examples/webgl_clipping.html
  74. 1 7
      examples/webgl_clipping_advanced.html
  75. 1 7
      examples/webgl_clipping_intersection.html
  76. 1 21
      examples/webgl_custom_attributes.html
  77. 1 21
      examples/webgl_custom_attributes_lines.html
  78. 1 21
      examples/webgl_custom_attributes_points.html
  79. 1 21
      examples/webgl_custom_attributes_points2.html
  80. 1 21
      examples/webgl_custom_attributes_points3.html
  81. 6 26
      examples/webgl_decals.html
  82. 2 31
      examples/webgl_depth_texture.html
  83. 5 30
      examples/webgl_effects_anaglyph.html
  84. 1 25
      examples/webgl_effects_ascii.html
  85. 5 29
      examples/webgl_effects_parallaxbarrier.html
  86. 75 110
      examples/webgl_effects_peppersghost.html
  87. 1 26
      examples/webgl_effects_stereo.html
  88. 3 30
      examples/webgl_fire.html
  89. 3 26
      examples/webgl_framebuffer_texture.html
  90. 4 25
      examples/webgl_furnace_test.html
  91. 1 23
      examples/webgl_geometries.html
  92. 1 23
      examples/webgl_geometries_parametric.html
  93. 3 17
      examples/webgl_geometry_colors.html
  94. 5 19
      examples/webgl_geometry_colors_lookuptable.html
  95. 2 20
      examples/webgl_geometry_convex.html
  96. 1 7
      examples/webgl_geometry_cube.html
  97. 7 25
      examples/webgl_geometry_dynamic.html
  98. 1 3
      examples/webgl_geometry_extrude_shapes.html
  99. 6 25
      examples/webgl_geometry_extrude_shapes2.html
  100. 8 13
      examples/webgl_geometry_extrude_splines.html

+ 3 - 24
examples/css2d_label.html
View File 

@@ -4,39 +4,18 @@
 
 		<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">
 
 		<title>three.js css2d - label</title>
 
 		<title>three.js css2d - label</title>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background-color: #000;
 
-				margin: 0;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #FFF;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index: 1;
 
-			}
 
-
 
-			.label{
 
+			.label {
 
 				color: #FFF;
 
 				color: #FFF;
 
 				font-family: sans-serif;
 
 				font-family: sans-serif;
 
 				padding: 2px;
 
 				padding: 2px;
 
 				background: rgba( 0, 0, 0, .6 );
 
 				background: rgba( 0, 0, 0, .6 );
 
 			}
 
 			}
 
-
 
-			a {
 
-				color: #000000;
 
-			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 21 - 45
examples/css3d_molecules.html
View File 

@@ -4,71 +4,49 @@
 
 		<title>three.js css3d - molecules</title>
 
 		<title>three.js css3d - molecules</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			body {
 
 			body {
 
 				background-color: #050505;
 
 				background-color: #050505;
 
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
 
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
 
-
 
-				margin: 0;
 
-				font-family: Arial;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
 			}
 
 			}
 
 
 
-			#info {
 
+			#topmenu {
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px;
 
+				top: 50px;
 
 				width: 100%;
 
 				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
+				padding: 10px;
 
+				box-sizing: border-box;
 
 				text-align: center;
 
 				text-align: center;
 
-				z-index: 1;
 
 			}
 
 			}
 
 
 
 			#menu {
 
 			#menu {
 
 				position: absolute;
 
 				position: absolute;
 
 				bottom: 20px;
 
 				bottom: 20px;
 
 				width: 100%;
 
 				width: 100%;
 
+				padding: 10px;
 
+				box-sizing: border-box;
 
 				text-align: center;
 
 				text-align: center;
 
-				padding: 0;
 
-				margin: 0;
 
-			}
 
-
 
-			#topmenu {
 
-				position: absolute;
 
-				top: 10px;
 
-				right: 10px;
 
-				width: 100%;
 
-				text-align: right;
 
-				padding: 0;
 
-				margin: 0;
 
-				z-index: 1;
 
 			}
 
 			}
 
 
 
 			button {
 
 			button {
 
 				color: rgb(255,255,255);
 
 				color: rgb(255,255,255);
 
-				background: transparent;
 
+				background: rgb(255,255,255,0.1);
 
 				border: 0px;
 
 				border: 0px;
 
 				padding: 5px 10px;
 
 				padding: 5px 10px;
 
+				margin: 2px;
 
+				font-size: 14px;
 
 				cursor: pointer;
 
 				cursor: pointer;
 
 			}
 
 			}
 
-			button:hover {
 
-				background-color: rgba(0,255,255,0.5);
 
-			}
 
-			button:active {
 
-				color: #000000;
 
-				background-color: rgba(0,255,255,1);
 
-			}
 
+
 
+				button:hover {
 
+					background-color: rgba(0,255,255,0.5);
 
+				}
 
+
 
+				button:active {
 
+					color: #000000;
 
+					background-color: rgba(0,255,255,1);
 
+				}
 
 
 
 			.bond {
 
 			.bond {
 
 				width: 5px;
 
 				width: 5px;
 
@@ -85,11 +63,9 @@
 
 		<script src="js/loaders/PDBLoader.js"></script>
 
 		<script src="js/loaders/PDBLoader.js"></script>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - molecules</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 
 		<div id="topmenu">
 
 		<div id="topmenu">
 
-			<button id="b_a">Atoms</button>
 
-			<button id="b_b">Bonds</button>
 
-			<button id="b_ab">Atoms + Bonds</button>
 
+			<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
 
 		</div>
 
 		</div>
 
 		<div id="menu"></div>
 
 		<div id="menu"></div>

+ 6 - 17
examples/css3d_orthographic.html
View File 

@@ -3,32 +3,21 @@
 
 	<head>
 
 	<head>
 
 		<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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				overflow: hidden;
 
+				background-color: #f0f0f0;
 
 			}
 
 			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #000000;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index: 1;
 
-			}
 
-
 
 			a {
 
 			a {
 
+				color: #f00;
 
+			}
 
+			#info {
 
 				color: #000000;
 
 				color: #000000;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d orthographic</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 1 - 24
examples/css3d_panorama.html
View File 

@@ -4,30 +4,7 @@
 
 		<title>three.js css3d - panorama</title>
 
 		<title>three.js css3d - panorama</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>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0;
 
-				cursor: move;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
-				text-align: center;
 
-				z-index: 1;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 2 - 25
examples/css3d_panorama_deviceorientation.html
View File 

@@ -4,37 +4,14 @@
 
 		<title>three.js css3d - panorama - device orientation</title>
 
 		<title>three.js css3d - panorama - device orientation</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>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0;
 
-				cursor: move;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
-				text-align: center;
 
-				z-index: 1;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama - device orientation. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 
 
 		<script>
 
 		<script>

+ 7 - 26
examples/css3d_periodictable.html
View File 

@@ -4,32 +4,10 @@
 
 		<title>three.js css3d - periodic table</title>
 
 		<title>three.js css3d - periodic table</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0;
 
-				font-family: Helvetica, sans-serif;;
 
-				overflow: hidden;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
-				text-align: center;
 
-				z-index: 1;
 
+				color: #8ff;
 
 			}
 
 			}
 
 
 
 			#menu {
 
 			#menu {
 
@@ -44,7 +22,9 @@
 
 				height: 160px;
 
 				height: 160px;
 
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 
 				border: 1px solid rgba(127,255,255,0.25);
 
 				border: 1px solid rgba(127,255,255,0.25);
 
+				font-family: Helvetica, sans-serif;
 
 				text-align: center;
 
 				text-align: center;
 
+				line-height: normal;
 
 				cursor: default;
 
 				cursor: default;
 
 			}
 
 			}
 
 
 
@@ -89,9 +69,11 @@
 
 				padding: 5px 10px;
 
 				padding: 5px 10px;
 
 				cursor: pointer;
 
 				cursor: pointer;
 
 			}
 
 			}
 
+
 
 			button:hover {
 
 			button:hover {
 
 				background-color: rgba(0,255,255,0.5);
 
 				background-color: rgba(0,255,255,0.5);
 
 			}
 
 			}
 
+
 
 			button:active {
 
 			button:active {
 
 				color: #000000;
 
 				color: #000000;
 
 				background-color: rgba(0,255,255,0.75);
 
 				background-color: rgba(0,255,255,0.75);
 
@@ -104,7 +86,7 @@
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="menu">
 
 		<div id="menu">
 
 			<button id="table">TABLE</button>
 
 			<button id="table">TABLE</button>
 
@@ -360,7 +342,6 @@
 
 				//
 
 				//
 
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
-				controls.rotateSpeed = 0.5;
 
 				controls.minDistance = 500;
 
 				controls.minDistance = 500;
 
 				controls.maxDistance = 6000;
 
 				controls.maxDistance = 6000;
 
 				controls.addEventListener( 'change', render );
 
 				controls.addEventListener( 'change', render );

+ 4 - 20
examples/css3d_sandbox.html
View File 

@@ -3,37 +3,21 @@
 
 	<head>
 
 	<head>
 
 		<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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				overflow: hidden;
 
+				color: #000;
 
 			}
 
 			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #000000;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index: 1;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #000000;
 
+				color: #080;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d sandbox</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</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/renderers/CSS3DRenderer.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 
 		<script>
 
 		<script>

+ 5 - 24
examples/css3d_sprites.html
View File 

@@ -4,32 +4,14 @@
 
 		<title>three.js css3d - sprites</title>
 
 		<title>three.js css3d - sprites</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			body {
 
 			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				font-family: Arial;
 
-				overflow: hidden;
 
+				background-color: #fff;
 
+				color: #000;
 
 			}
 
 			}
 
-
 
 			a {
 
 			a {
 
-				color: #8888ff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				width: 100%;
 
-				color: #000000;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
-				text-align: center;
 
-				z-index: 1;
 
+				color: #48f;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -39,7 +21,7 @@
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - sprites.</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sprites</div>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 
 
 		<script>
 
 		<script>
 
@@ -155,7 +137,6 @@
 
 				//
 
 				//
 
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
-				controls.rotateSpeed = 0.5;
 
 
 
 				//
 
 				//

+ 10 - 9
examples/css3d_youtube.html
View File 

@@ -4,17 +4,18 @@
 
 		<title>three.js css3d - youtube</title>
 
 		<title>three.js css3d - youtube</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-				overflow: hidden;
 
+			body {
 
+				background-color: #ffffff;
 
 			}
 
 			}
 
+
 
 			#blocker {
 
 			#blocker {
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px;
 
-				left: 0px;
 
-				width: 100%;
 
-				height: 100%;
 
+				top: 0;
 
+				left: 0;
 
+				bottom: 0;
 
+				right: 0;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -86,12 +87,12 @@
 
 				var blocker = document.getElementById( 'blocker' );
 
 				var blocker = document.getElementById( 'blocker' );
 
 				blocker.style.display = 'none';
 
 				blocker.style.display = 'none';
 
 
 
-				document.addEventListener( 'mousedown', function () {
 
+				controls.addEventListener( 'start', function () {
 
 
 
 					blocker.style.display = '';
 
 					blocker.style.display = '';
 
 
 
 				} );
 
 				} );
 
-				document.addEventListener( 'mouseup', function () {
 
+				controls.addEventListener( 'end', function () {
 
 
 
 					blocker.style.display = 'none';
 
 					blocker.style.display = 'none';

+ 3 - 4
examples/js/renderers/RaytracingRenderer.js
View File 

@@ -124,8 +124,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 		canvasWidth = canvas.width;
 
 		canvasWidth = canvas.width;
 
 		canvasHeight = canvas.height;
 
 		canvasHeight = canvas.height;
 
 
 
-		context.fillStyle = 'white';
 
-
 
 		pool.forEach( updateSettings );
 
 		pool.forEach( updateSettings );
 
 
 
 	};
 
 	};
 
@@ -175,7 +173,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 		} );
 
 		} );
 
 
 
 		context.fillStyle = '#' + worker.color;
 
 		context.fillStyle = '#' + worker.color;
 
-
 
 		context.fillRect( blockX, blockY, blockSize, blockSize );
 
 		context.fillRect( blockX, blockY, blockSize, blockSize );
 
 
 
 	}
 
 	}
 
@@ -246,7 +243,9 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 
 
 		} );
 
 		} );
 
 
 
-		context.clearRect( 0, 0, canvasWidth, canvasHeight );
 
+		context.fillStyle = clearColor.getStyle();
 
+		context.fillRect( 0, 0, canvasWidth, canvasHeight );
 
+
 
 		reallyThen = Date.now();
 
 		reallyThen = Date.now();
 
 
 
 		xblocks = Math.ceil( canvasWidth / blockSize );
 
 		xblocks = Math.ceil( canvasWidth / blockSize );

+ 40 - 0
examples/main.css
View File 

@@ -0,0 +1,40 @@
 
+body {
 
+	margin: 0;
 
+	background-color: #000;
 
+	color: #fff;
 
+	font-family: Monospace;
 
+	font-size: 13px;
 
+	line-height: 24px;
 
+}
 
+
 
+a {
 
+	color: #ff0;
 
+	text-decoration: none;
 
+}
 
+
 
+a:hover {
 
+	text-decoration: underline;
 
+}
 
+
 
+button {
 
+	cursor: pointer;
 
+	text-transform: uppercase;
 
+}
 
+
 
+canvas {
 
+	display: block;
 
+}
 
+
 
+#info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 100%;
 
+	padding: 10px;
 
+	box-sizing: border-box;
 
+	text-align: center;
 
+	z-index: 1; /* TODO Solve this in HTML */
 
+}
 
+
 
+.dg.ac {
 
+	z-index: 2 !important; /* TODO Solve this in HTML */
 
+}

+ 1 - 18
examples/misc_animation_authoring.html
View File 

@@ -4,24 +4,7 @@
 
 		<title>three.js webgl - animation authoring</title>
 
 		<title>three.js webgl - animation authoring</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				font-size: 15px;
 
-				line-height: 30px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				text-align: center;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 15px;
 
-				z-index:100;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 23
examples/misc_animation_groups.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - animation - groups</title>
 
 		<title>three.js webgl - animation - groups</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>
 
-			body {
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #f00;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 23
examples/misc_animation_keys.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - animation - basic</title>
 
 		<title>three.js webgl - animation - basic</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>
 
-			body {
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #f00;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 10 - 11
examples/misc_boxselection.html
View File 

@@ -4,12 +4,15 @@
 
 		<title>three.js webgl - box selection</title>
 
 		<title>three.js webgl - box selection</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
 				background-color: #f0f0f0;
 
 				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				color: #000;
 
+			}
 
+
 
+			a {
 
+				color: #08e;
 
 			}
 
 			}
 
 
 
 			.selectBox {
 
 			.selectBox {
 
@@ -21,6 +24,10 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection
 
+		</div>
 
+
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
@@ -94,14 +101,6 @@
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection';
 
-				container.appendChild( info );
 
-
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 				container.appendChild( stats.dom );

+ 3 - 25
examples/misc_controls_deviceorientation.html
View File 

@@ -3,35 +3,13 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js webgl - controls - deviceorientation</title>
 
 		<title>three.js webgl - controls - deviceorientation</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="user-scalable=no, initial-scale=1">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				font-weight: bold;
 
-				text-align:center;
 
-				box-sizing: border-box;
 
-			}
 
-
 
-			a {
 
-				color: #ff8800;
 
-			}
 
-		</style>
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.<br/>
 
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
 
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
 
 		</div>
 
 		</div>

+ 4 - 20
examples/misc_controls_fly.html
View File 

@@ -4,35 +4,19 @@
 
 		<title>three.js webgl - fly controls - earth</title>
 
 		<title>three.js webgl - fly controls - earth</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
 				background:#000;
 
 				background:#000;
 
 				color: #eee;
 
 				color: #eee;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight:bold;
 
-				overflow:hidden;
 
-
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-				box-sizing: border-box;
 
 			}
 
 			}
 
 
 
 			a {
 
 			a {
 
-
 
 				color: #0080ff;
 
 				color: #0080ff;
 
 			}
 
 			}
 
 
 
 			b {
 
 			b {
 
-				color:orange
 
+				color: orange
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 
 
@@ -56,8 +40,8 @@
 
 
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth [fly controls]<br/><br/>
 
-		<b>WASD</b> move, <b>R|F</b> up | down, <b>Q|E</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw<br/>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth [fly controls]<br/>
 
+		<b>WASD</b> move, <b>R|F</b> up | down, <b>Q|E</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw
 
 		</div>
 
 		</div>
 
 
 
 		<script>
 
 		<script>

+ 4 - 18
examples/misc_controls_map.html
View File 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - map controls</title>
 
 		<title>three.js webgl - map controls</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
+				background-color: #ccc;
 
 				color: #000;
 
 				color: #000;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				color:#000;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				box-sizing: border-box;
 
 			}
 
 			}
 
 
 
 			a {
 
 			a {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls example
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 4 - 18
examples/misc_controls_orbit.html
View File 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - orbit controls</title>
 
 		<title>three.js webgl - orbit controls</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
+				background-color: #ccc;
 
 				color: #000;
 
 				color: #000;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				color:#000;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				box-sizing: border-box;
 
 			}
 
 			}
 
 
 
 			a {
 
 			a {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls example
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 9 - 22
examples/misc_controls_pointerlock.html
View File 

@@ -4,32 +4,16 @@
 
 		<title>three.js - pointerlock controls</title>
 
 		<title>three.js - pointerlock controls</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				overflow: hidden;
 
-				font-family: arial;
 
-			}
 
-
 
 			#blocker {
 
 			#blocker {
 
-
 
 				position: absolute;
 
 				position: absolute;
 
-
 
 				width: 100%;
 
 				width: 100%;
 
 				height: 100%;
 
 				height: 100%;
 
-
 
 				background-color: rgba(0,0,0,0.5);
 
 				background-color: rgba(0,0,0,0.5);
 
-
 
 			}
 
 			}
 
 
 
 			#instructions {
 
 			#instructions {
 
-
 
 				width: 100%;
 
 				width: 100%;
 
 				height: 100%;
 
 				height: 100%;
 
 
 
@@ -51,11 +35,12 @@
 
 
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 				text-align: center;
 
 				text-align: center;
 
+				font-family: Arial;
 
+				font-size: 14px;
 
+				line-height: 24px;
 
 
 
 				cursor: pointer;
 
 				cursor: pointer;
 
-
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
@@ -65,9 +50,11 @@
 
 		<div id="blocker">
 
 		<div id="blocker">
 
 
 
 			<div id="instructions">
 
 			<div id="instructions">
 
-				<span style="font-size:40px">Click to play</span>
 
-				<br />
 
-				(W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)
 
+				<span style="font-size:36px">Click to play</span>
 
+				<br /><br />
 
+				Move: WASD<br/>
 
+				Jump: SPACE<br/>
 
+				Look: MOUSE
 
 			</div>
 
 			</div>
 
 
 
 		</div>
 
 		</div>

+ 4 - 24
examples/misc_controls_trackball.html
View File 

@@ -4,41 +4,21 @@
 
 		<title>three.js webgl - trackball controls</title>
 
 		<title>three.js webgl - trackball controls</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				width: 100%;
 
-				height: 100%;
 
-				overflow: hidden;
 
-			}
 
-
 
 			body {
 
 			body {
 
+				background-color: #ccc;
 
 				color: #000;
 
 				color: #000;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #fff;
 
-				margin: 0px;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				color:#000;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				box-sizing: border-box;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - trackball controls example<br />
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - trackball controls<br />
 
 			MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
 
 			MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
 
 		</div>
 
 		</div>

+ 1 - 24
examples/misc_controls_transform.html
View File 

@@ -4,30 +4,7 @@
 
 		<title>three.js webgl - transform controls</title>
 
 		<title>three.js webgl - transform controls</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				text-align: center;
 
-				font-size: 15px;
 
-				line-height: 30px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 15px;
 
-				z-index:100;
 
-				box-sizing: border-box;
 
-			}
 
-
 
-			a {
 
-				color: white;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 3 - 31
examples/misc_exporter_collada.html
View File 

@@ -4,30 +4,7 @@
 
 		<title>three.js webgl - exporter - collada</title>
 
 		<title>three.js webgl - exporter - collada</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>
 
-			body {
 
-				color: #fff;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				padding: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				color: #fff;
 
-			}
 
-
 
-			a { color: blue; }
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
@@ -36,17 +13,12 @@
 
 		</div>
 
 		</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/exporters/ColladaExporter.js"></script>
 
+		<script src='js/geometries/TeapotBufferGeometry.js'></script>
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
-
 
 		<script src='js/libs/dat.gui.min.js'></script>
 
 		<script src='js/libs/dat.gui.min.js'></script>
 
 
 
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
 
-
 
-		<script src="js/exporters/ColladaExporter.js"></script>
 
-
 
 		<script>
 
 		<script>
 
 
 
 			////////////////////////////////////////////////////////////////////////////////
 
 			////////////////////////////////////////////////////////////////////////////////

+ 17 - 21
examples/misc_exporter_draco.html
View File 

@@ -4,38 +4,28 @@
 
 		<title>three.js webgl - exporter - draco</title>
 
 		<title>three.js webgl - exporter - draco</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
+				background-color: #a0a0a0;
 
 				color: #fff;
 
 				color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
 			}
 
 			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				display:block;
 
-			}
 
-			#info a {
 
-				color: #046;
 
-				font-weight: bold;
 
+
 
+			a {
 
+				color: #0f0;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco<br/><br/>
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco<br/><br/>
 
-			<button onclick="exportFile()">export</button>
 
-			<button onclick="createGeometry()">geometry</button>
 
-			<button onclick="createBufferGeometry()">buffer geometry</button>
 
+			<button onclick="createGeometry()">Geometry</button>
 
+			<button onclick="createBufferGeometry()">BufferGeometry</button> |
 
+			<button onclick="exportFile()">Export DRC</button>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
-		
+
 
 		<script src="js/libs/draco/draco_encoder.js"></script>
 
 		<script src="js/libs/draco/draco_encoder.js"></script>
 
 
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
@@ -79,6 +69,7 @@
 
 				mesh.castShadow = true;
 
 				mesh.castShadow = true;
 
 				mesh.position.y = 25;
 
 				mesh.position.y = 25;
 
 				scene.add( mesh );
 
 				scene.add( mesh );
 
+
 
 			}
 
 			}
 
 
 
 			function init() {
 
 			function init() {
 
@@ -98,7 +89,7 @@
 
 				hemiLight.position.set( 0, 200, 0 );
 
 				hemiLight.position.set( 0, 200, 0 );
 
 				scene.add( hemiLight );
 
 				scene.add( hemiLight );
 
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
 				directionalLight.position.set( 0, 200, 100 );
 
 				directionalLight.position.set( 0, 200, 100 );
 
 				directionalLight.castShadow = true;
 
 				directionalLight.castShadow = true;
 
 				directionalLight.shadow.camera.top = 180;
 
 				directionalLight.shadow.camera.top = 180;
 
@@ -109,14 +100,19 @@
 
 
 
 				// ground
 
 				// ground
 
 
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
+				var ground = new THREE.Mesh(
 
+					new THREE.PlaneBufferGeometry( 2000, 2000 ),
 
+					new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
 
+				);
 
 				ground.rotation.x = - Math.PI / 2;
 
 				ground.rotation.x = - Math.PI / 2;
 
+				ground.position.y = - 75;
 
 				ground.receiveShadow = true;
 
 				ground.receiveShadow = true;
 
 				scene.add( ground );
 
 				scene.add( ground );
 
 
 
 				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 
 				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 
 				grid.material.opacity = 0.2;
 
 				grid.material.opacity = 0.2;
 
 				grid.material.transparent = true;
 
 				grid.material.transparent = true;
 
+				grid.position.y = - 75;
 
 				scene.add( grid );
 
 				scene.add( grid );
 
 
 
 				// export mesh
 
 				// export mesh

+ 3 - 17
examples/misc_exporter_gltf.html
View File 

@@ -4,35 +4,21 @@
 
 		<title>three.js webgl - exporter - gltf</title>
 
 		<title>three.js webgl - exporter - gltf</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>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #ccc;
 
-				text-align: center;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - gltf<br/><br/>
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - gltf<br/><br/>
 
 			<button id="export_scene">Export Scene1</button>
 
 			<button id="export_scene">Export Scene1</button>
 
 			<button id="export_scenes">Export Scene1 and Scene 2</button>
 
 			<button id="export_scenes">Export Scene1 and Scene 2</button>
 
-			<button id="export_object">Export Sphere</button>
 
+			<button id="export_object">Export Sphere</button><br/>
 
 			<button id="export_obj">Export WaltHead</button>
 
 			<button id="export_obj">Export WaltHead</button>
 
 			<button id="export_objects">Export Sphere and Grid</button>
 
 			<button id="export_objects">Export Sphere and Grid</button>
 
 			<button id="export_scene_object">Export Scene1 and Sphere</button>
 
 			<button id="export_scene_object">Export Scene1 and Sphere</button>
 
 			<br/><br/>
 
 			<br/><br/>
 
 			<label><input id="option_trs" name="trs" type="checkbox"/>TRS</label>
 
 			<label><input id="option_trs" name="trs" type="checkbox"/>TRS</label>
 
 			<label><input id="option_visible" name="visible" type="checkbox" checked="checked"/>Only Visible</label>
 
 			<label><input id="option_visible" name="visible" type="checkbox" checked="checked"/>Only Visible</label>
 
-			<label><input id="option_drawrange" name="visible" type="checkbox" checked="checked"/>Truncate drawRange</label>
 
+			<label><input id="option_drawrange" name="visible" type="checkbox" checked="checked"/>Truncate drawRange</label><br/>
 
 			<label><input id="option_binary" name="visible" type="checkbox">Binary (<code>.glb</code>)</label>
 
 			<label><input id="option_binary" name="visible" type="checkbox">Binary (<code>.glb</code>)</label>
 
 			<label><input id="option_forceindices" name="visible" type="checkbox">Force indices</label>
 
 			<label><input id="option_forceindices" name="visible" type="checkbox">Force indices</label>
 
 			<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>
 
 			<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>

+ 8 - 35
examples/misc_exporter_obj.html
View File 

@@ -4,26 +4,9 @@
 
 		<title>three.js webgl - exporter - obj</title>
 
 		<title>three.js webgl - exporter - obj</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				z-index: 100;
 
-				display: block;
 
-			}
 
-
 
-			div.floating {
 
-				color : #ffffff;
 
+			.floating {
 
 				background : #000000;
 
 				background : #000000;
 
 				opacity : 0.8;
 
 				opacity : 0.8;
 
 				width : 80%;
 
 				width : 80%;
 
@@ -37,27 +20,17 @@
 
 				overflow : auto;
 
 				overflow : auto;
 
 				z-index: 100;
 
 				z-index: 100;
 
 			}
 
 			}
 
-
 
-			span.link {
 
-				color: skyblue;
 
-				cursor: pointer;
 
-				text-decoration : underline;
 
-			}
 
-
 
-			a {
 
-				color: skyblue
 
-			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - obj<br /><br />
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - obj<br /><br />
 
-			<span class="link" id="triangle">triangle</span>,
 
-			<span class="link" id="cube">cube</span>,
 
-			<span class="link" id="cylinder">cylinder</span>,
 
-			<span class="link" id="multiple">multiple</span>,
 
-			<span class="link" id="transformed">transformed</span><br /><br />
 
-			<span class="link" id="export">export to obj</span>
 
+			<button id="triangle">triangle</button>
 
+			<button id="cube">cube</button>
 
+			<button id="cylinder">cylinder</button>
 
+			<button id="multiple">multiple</button>
 
+			<button id="transformed">transformed</button><br /><br />
 
+			<button id="export">export to obj</button>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 1 - 21
examples/misc_exporter_stl.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - exporter - stl</title>
 
 		<title>three.js webgl - exporter - stl</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>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
-				color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				display:block;
 
-			}
 
-			#info a {
 
-				color: #046;
 
-				font-weight: bold;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">

+ 1 - 22
examples/misc_fps.html
View File 

@@ -4,28 +4,7 @@
 
 		<title>three.js - platformer demo</title>
 
 		<title>three.js - platformer demo</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>
 
-			body {
 
-				background-color: rgb(200,200,200);
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				font-weight: bold;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 5 - 17
examples/misc_lookat.html
View File 

@@ -4,32 +4,20 @@
 
 		<title>three.js misc - lookAt</title>
 
 		<title>three.js misc - lookAt</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				color: #404040;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
+				background-color: #fff;
 
+				color: #444;
 
 			}
 
 			}
 
 
 
 			a {
 
 			a {
 
-
 
-				color: #0080bb;
 
+				color: #08b;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D::lookAt() demo</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 5 - 27
examples/raytracing_sandbox.html
View File 

@@ -4,19 +4,12 @@
 
 		<title>three.js - raytracing renderer with web workers</title>
 
 		<title>three.js - raytracing renderer with web workers</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>
 
-			body {
 
-				font-family: Monospace;
 
-				color: #ffffff;
 
-				margin: 0px;
 
-				padding: 0px;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/renderers/RaytracingRenderer.js"></script>
 
 		<script src="js/renderers/RaytracingRenderer.js"></script>
 
-
 
+		<div id="info"></div>
 
 		<script>
 
 		<script>
 
 
 
 			var hash = location.hash ? location.hash.substring( 1 ) : '3';
 
 			var hash = location.hash ? location.hash.substring( 1 ) : '3';
 
@@ -232,16 +225,7 @@
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.zIndex = '100';
 
-				info.style.textAlign = 'center';
 
-				container.appendChild( info );
 
+				info = document.getElementById( 'info' );
 
 
 
 				updateWorkers();
 
 				updateWorkers();
 
 
 
@@ -258,12 +242,7 @@
 
 					blockSize: 64
 
 					blockSize: 64
 
 				} );
 
 				} );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				renderer.domElement.style.position = "absolute";
 
-				renderer.domElement.style.top = "0px";
 
-				renderer.domElement.style.left = "0px";
 
-
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 
 
 
 				window.addEventListener( 'resize', function () {
 
 				window.addEventListener( 'resize', function () {
 
@@ -283,10 +262,9 @@
 
 
 
 				}
 
 				}
 
 
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js<a/> - raytracing renderer (using ' + WORKERS + ' <button onclick="updateWorkers(-1)">-</button><button onclick="updateWorkers(1)">+</button> web workers)' +
 
+				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raytracing renderer (using ' + WORKERS + ' <button onclick="updateWorkers(-1)">-</button><button onclick="updateWorkers(1)">+</button> web workers)' +
 
 				'<br/><button onclick="rearrange()">Rearrange</button><button onclick="render()">Render</button>';
 
 				'<br/><button onclick="rearrange()">Rearrange</button><button onclick="render()">Render</button>';
 
 
 
-
 
 			}
 
 			}
 
 
 
 			function rearrange() {
 
 			function rearrange() {

+ 2 - 20
examples/software_geometry_earth.html
View File 

@@ -4,29 +4,11 @@
 
 		<title>three.js software - geometry - earth</title>
 
 		<title>three.js software - geometry - earth</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #808080;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 3 - 34
examples/software_lines_splines.html
View File 

@@ -4,44 +4,13 @@
 
 		<title>three.js software - lines - splines</title>
 
 		<title>three.js software - lines - splines</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>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 10px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index:100;
 
-			}
 
-
 
-			a {
 
-				color: orange;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - splines Software demo
 
-			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - splines Software demo<br/>
 
+			<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 1 - 20
examples/software_sandbox.html
View File 

@@ -4,26 +4,7 @@
 
 		<title>three.js - software renderer</title>
 
 		<title>three.js - software renderer</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>
 
-			body {
 
-				font-family: Monospace;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 10px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index:100;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 4 - 22
examples/svg_lines.html
View File 

@@ -4,32 +4,14 @@
 
 		<title>three.js svg - lines</title>
 
 		<title>three.js svg - lines</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 10px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index:100;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
+			svg {
 
+				display: block;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 3 - 4
examples/svg_sandbox.html
View File 

@@ -4,11 +4,10 @@
 
 		<title>three.js svg - sandbox</title>
 
 		<title>three.js svg - sandbox</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+			svg {
 
+				display: block;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>

+ 21 - 47
examples/webaudio_orientation.html
View File 

@@ -4,66 +4,40 @@
 
 		<title>three.js webaudio - orientation</title>
 
 		<title>three.js webaudio - orientation</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family: Monospace;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				z-index: 2;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
 			#overlay {
 
 			#overlay {
 
 				position: absolute;
 
 				position: absolute;
 
-				z-index: 1;
 
 				top: 0;
 
 				top: 0;
 
 				left: 0;
 
 				left: 0;
 
 				width: 100%;
 
 				width: 100%;
 
-				height:100%;
 
+				height: 100%;
 
 				display: flex;
 
 				display: flex;
 
 				align-items: center;
 
 				align-items: center;
 
 				justify-content: center;
 
 				justify-content: center;
 
 				opacity: 1;
 
 				opacity: 1;
 
 				background-color: #000000;
 
 				background-color: #000000;
 
-				color: #ffffff;
 
-			}
 
-
 
-			#overlay > div {
 
-				text-align: center;
 
+				z-index: 1;
 
 			}
 
 			}
 
 
 
-			#overlay > div > button {
 
-				height: 20px;
 
-				width: 100px;
 
-				background: transparent;
 
-				color: #ffffff;
 
-				outline: 1px solid #ffffff;
 
-				border: 0px;
 
-				cursor: pointer;
 
-			}
 
+				#overlay > div {
 
+					text-align: center;
 
+				}
 
 
 
-			#overlay > div > p {
 
-				color: #777777;
 
-				font-size: 12px;
 
-			}
 
+				#overlay > div > button {
 
+					height: 20px;
 
+					width: 100px;
 
+					background: transparent;
 
+					color: #ffffff;
 
+					outline: 1px solid #ffffff;
 
+					border: 0px;
 
+					cursor: pointer;
 
+				}
 
 
 
+				#overlay > div > p {
 
+					color: #777777;
 
+					font-size: 12px;
 
+				}
 
 		</style>
 
 		</style>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -82,12 +56,12 @@
 
 	<div id="overlay">
 
 	<div id="overlay">
 
 		<div>
 
 		<div>
 
 			<button id="startButton">Click to Play</button>
 
 			<button id="startButton">Click to Play</button>
 
-			<p>Automatic audio playback requires a user interaction.</p>
 
+			<p>Audio playback requires user interaction.</p>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 	<div id="container"></div>
 
 	<div id="container"></div>
 
 	<div id="info">
 
 	<div id="info">
 
-		<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio orientation |
 
+		<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - orientation<br/>
 
 		music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener noreferrer">skullbeatz</a>
 
 		music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener noreferrer">skullbeatz</a>
 
 	</div>
 
 	</div>

+ 21 - 45
examples/webaudio_sandbox.html
View File 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - sandbox</title>
 
 		<title>three.js webaudio - sandbox</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family: Monospace;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				z-index: 2;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
 			#overlay {
 
 			#overlay {
 
 				position: absolute;
 
 				position: absolute;
 
 				z-index: 1;
 
 				z-index: 1;
 
@@ -45,35 +21,35 @@
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
 
 
-			#overlay > div {
 
-				text-align: center;
 
-			}
 
-
 
-			#overlay > div > button {
 
-				height: 20px;
 
-				width: 100px;
 
-				background: transparent;
 
-				color: #ffffff;
 
-				outline: 1px solid #ffffff;
 
-				border: 0px;
 
-				cursor: pointer;
 
-			}
 
-
 
-			#overlay > div > p {
 
-				color: #777777;
 
-				font-size: 12px;
 
-			}
 
+				#overlay > div {
 
+					text-align: center;
 
+				}
 
+
 
+				#overlay > div > button {
 
+					height: 20px;
 
+					width: 100px;
 
+					background: transparent;
 
+					color: #ffffff;
 
+					outline: 1px solid #ffffff;
 
+					border: 0px;
 
+					cursor: pointer;
 
+				}
 
+
 
+				#overlay > div > p {
 
+					color: #777777;
 
+					font-size: 12px;
 
+				}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="overlay">
 
 		<div id="overlay">
 
 			<div>
 
 			<div>
 
 				<button id="startButton">Click to Play</button>
 
 				<button id="startButton">Click to Play</button>
 
-				<p>Automatic audio playback requires a user interaction.</p>
 
+				<p>Audio playback requires user interaction.</p>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webaudio - sandbox |
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webaudio - sandbox<br/>
 
 			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a>,
 
 			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a>,
 
 			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a> and
 
 			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a> and
 
 			<a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank" rel="noopener">congusbongus</a><br/><br/>
 
 			<a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank" rel="noopener">congusbongus</a><br/><br/>

+ 19 - 44
examples/webaudio_timing.html
View File 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - timing</title>
 
 		<title>three.js webaudio - timing</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family: Monospace;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				z-index: 2;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
 			#overlay {
 
 			#overlay {
 
 				position: absolute;
 
 				position: absolute;
 
 				z-index: 1;
 
 				z-index: 1;
 
@@ -45,25 +21,24 @@
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
 
 
-			#overlay > div {
 
-				text-align: center;
 
-			}
 
-
 
-			#overlay > div > button {
 
-				height: 20px;
 
-				width: 100px;
 
-				background: transparent;
 
-				color: #ffffff;
 
-				outline: 1px solid #ffffff;
 
-				border: 0px;
 
-				cursor: pointer;
 
-			}
 
+				#overlay > div {
 
+					text-align: center;
 
+				}
 
 
 
-			#overlay > div > p {
 
-				color: #777777;
 
-				font-size: 12px;
 
-			}
 
+				#overlay > div > button {
 
+					height: 20px;
 
+					width: 100px;
 
+					background: transparent;
 
+					color: #ffffff;
 
+					outline: 1px solid #ffffff;
 
+					border: 0px;
 
+					cursor: pointer;
 
+				}
 
 
 
+				#overlay > div > p {
 
+					color: #777777;
 
+					font-size: 12px;
 
+				}
 
 		</style>
 
 		</style>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -76,12 +51,12 @@
 
 	<div id="overlay">
 
 	<div id="overlay">
 
 		<div>
 
 		<div>
 
 			<button id="startButton">Click to Play</button>
 
 			<button id="startButton">Click to Play</button>
 
-			<p>Automatic audio playback requires a user interaction.</p>
 
+			<p>Audio playback requires user interaction.</p>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 	<div id="container"></div>
 
 	<div id="container"></div>
 
 	<div id="info">
 
 	<div id="info">
 
-		<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio timing |
 
+		<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - timing<br/>
 
 		sound effect by <a href="https://freesound.org/people/michorvath/sounds/269718/" target="_blank" rel="noopener noreferrer">michorvath</a>
 
 		sound effect by <a href="https://freesound.org/people/michorvath/sounds/269718/" target="_blank" rel="noopener noreferrer">michorvath</a>
 
 	</div>
 
 	</div>

+ 21 - 46
examples/webaudio_visualizer.html
View File 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - visualizer</title>
 
 		<title>three.js webaudio - visualizer</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family: Monospace;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				z-index: 2;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
 			#overlay {
 
 			#overlay {
 
 				position: absolute;
 
 				position: absolute;
 
 				z-index: 1;
 
 				z-index: 1;
 
@@ -45,25 +21,24 @@
 
 				color: #ffffff;
 
 				color: #ffffff;
 
 			}
 
 			}
 
 
 
-			#overlay > div {
 
-				text-align: center;
 
-			}
 
-
 
-			#overlay > div > button {
 
-				height: 20px;
 
-				width: 100px;
 
-				background: transparent;
 
-				color: #ffffff;
 
-				outline: 1px solid #ffffff;
 
-				border: 0px;
 
-				cursor: pointer;
 
-			}
 
-
 
-			#overlay > div > p {
 
-				color: #777777;
 
-				font-size: 12px;
 
-			}
 
-
 
+				#overlay > div {
 
+					text-align: center;
 
+				}
 
+
 
+				#overlay > div > button {
 
+					height: 20px;
 
+					width: 100px;
 
+					background: transparent;
 
+					color: #ffffff;
 
+					outline: 1px solid #ffffff;
 
+					border: 0px;
 
+					cursor: pointer;
 
+				}
 
+
 
+				#overlay > div > p {
 
+					color: #777777;
 
+					font-size: 12px;
 
+				}
 
 		</style>
 
 		</style>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -108,12 +83,12 @@
 
 		<div id="overlay">
 
 		<div id="overlay">
 
 			<div>
 
 			<div>
 
 				<button id="startButton">Click to Play</button>
 
 				<button id="startButton">Click to Play</button>
 
-				<p>Automatic audio playback requires a user interaction.</p>
 
+				<p>Audio playback requires user interaction.</p>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - visualizer |
 
+			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - visualizer<br/>
 
 			music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
 
 			music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
 
 		</div>
 
 		</div>

+ 1 - 22
examples/webgl2_loader_gltf.html
View File 

@@ -4,28 +4,7 @@
 
 		<title>three.js webgl - glTF loader (module version)</title>
 
 		<title>three.js webgl - glTF loader (module version)</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>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
-				color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				z-index: 100;
 
-				display:block;
 
-			}
 
-			#info a {
 
-				color: #75ddc1;
 
-				font-weight: bold;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 1 - 23
examples/webgl2_materials_texture2darray.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - 2D texture array</title>
 
 		<title>three.js webgl - 2D texture array</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>
 
-			body {
 
-				background:#000;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			#info a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<script id="vs" type="x-shader/x-vertex">
 
 	<script id="vs" type="x-shader/x-vertex">
 
 	#version 300 es
 
 	#version 300 es

+ 1 - 34
examples/webgl2_materials_texture3d.html
View File 

@@ -4,40 +4,7 @@
 
 	<title>three.js webgl - volume rendering example</title>
 
 	<title>three.js webgl - volume rendering example</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>
 
-		body {
 
-			font-family: Monospace;
 
-			background-color: #000;
 
-			color: #fff;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-		#info {
 
-			color: #fff;
 
-			position: absolute;
 
-			top: 10px;
 
-			width: 100%;
 
-			text-align: center;
 
-			z-index: 5;
 
-			display:block;
 
-		}
 
-		.dg {
 
-			z-index: 10 !important;
 
-		}
 
-		#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 
-		#inset  {
 
-			width: 150px;
 
-			height: 150px;
 
-			background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
 
-			border: none; /* or none; */
 
-			margin: 0;
 
-			padding: 0px;
 
-			position: absolute;
 
-			left: 20px;
 
-			bottom: 20px;
 
-			z-index: 100;
 
-		}
 
-	</style>
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>

+ 17 - 30
examples/webgl2_multisampled_renderbuffers.html
View File 

@@ -4,35 +4,22 @@
 
 		<title>three.js WebGL 2 - Multisampled Renderbuffers</title>
 
 		<title>three.js WebGL 2 - Multisampled Renderbuffers</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			body {
 
 			body {
 
-				background: #ffffff;
 
-				padding: 0;
 
-				margin: 0;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #000000;
 
-				margin: 6px 0px;
 
-				text-align: center;
 
+				background-color: #fff;
 
+				color: #222;
 
 			}
 
 			}
 
 
 
-			#info a {
 
-				color: #000000;
 
+			a {
 
+				color: #08f;
 
 			}
 
 			}
 
 
 
 			#container {
 
 			#container {
 
+				position: absolute;
 
+				top: 80px;
 
 				width: 100%;
 
 				width: 100%;
 
-				height: calc(100% - 80px);
 
+				bottom: 0px;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -74,7 +61,7 @@
 
 
 
 				var container = document.getElementById( 'container' );
 
 				var container = document.getElementById( 'container' );
 
 
 
-				camera = new THREE.PerspectiveCamera( 45, ( window.innerWidth * 0.5 ) / window.innerHeight, 1, 2000 );
 
+				camera = new THREE.PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
 
 				camera.position.z = 500;
 
 				camera.position.z = 500;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
@@ -120,7 +107,7 @@
 
 
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer.autoClear = false;
 
 				renderer.autoClear = false;
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( container.offsetWidth, container.offsetHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				//
 
 				//
 
@@ -156,12 +143,12 @@
 
 
 
 			function onWindowResize() {
 
 			function onWindowResize() {
 
 
 
-				camera.aspect = ( window.innerWidth * 0.5 ) / window.innerHeight;
 
+				camera.aspect = ( container.offsetWidth * 0.5 ) / container.offsetHeight;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				composer1.setSize( window.innerWidth, window.innerHeight );
 
-				composer2.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( container.offsetWidth, container.offsetHeight  );
 
+				composer1.setSize( container.offsetWidth, container.offsetHeight  );
 
+				composer2.setSize( container.offsetWidth, container.offsetHeight  );
 
 
 
 			}
 
 			}
 
 
 
@@ -169,15 +156,15 @@
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
 
 
-				var halfWidth = window.innerWidth / 2;
 
+				var halfWidth = container.offsetWidth / 2;
 
 
 
 				group.rotation.y += clock.getDelta() * 0.1;
 
 				group.rotation.y += clock.getDelta() * 0.1;
 
 
 
-				renderer.setViewport( 0, 0, halfWidth, window.innerHeight );
 
+				renderer.setViewport( 0, 0, halfWidth, container.offsetHeight );
 
 
 
 				composer1.render();
 
 				composer1.render();
 
 
 
-				renderer.setViewport( halfWidth, 0, halfWidth, window.innerHeight );
 
+				renderer.setViewport( halfWidth, 0, halfWidth, container.offsetHeight );
 
 
 
 				composer2.render();
 
 				composer2.render();

+ 2 - 28
examples/webgl2_sandbox.html
View File 

@@ -4,37 +4,11 @@
 
 		<title>three.js - webgl2 sandbox</title>
 
 		<title>three.js - webgl2 sandbox</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>
 
-			body {
 
-				background: #000;
 
-				padding: 0;
 
-				margin: 0;
 
-				font-weight: bold;
 
-			}
 
-
 
-			canvas {
 
-				display: block;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl2 sandbox.</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl2 sandbox</div>
 
 
 
 		<script type="module">
 
 		<script type="module">

+ 3 - 15
examples/webgl_animation_cloth.html
View File 

@@ -4,27 +4,15 @@
 
 		<title>three.js webgl - cloth simulation</title>
 
 		<title>three.js webgl - cloth simulation</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
+				background-color: #cce0ff;
 
 				color: #000;
 
 				color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				padding: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				text-decoration: underline;
 
-				cursor: pointer;
 
+				color: #080;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>

+ 7 - 22
examples/webgl_animation_keyframes.html
View File 

@@ -4,26 +4,13 @@
 
 		<title>three.js webgl - animation - keyframes</title>
 
 		<title>three.js webgl - animation - keyframes</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-			#info p {
 
-				max-width: 600px;
 
-				margin-left: auto;
 
-				margin-right: auto;
 
-				padding: 0 2em;
 
+				background-color: #bfe3dd;
 
+				color: #000;
 
 			}
 
 			}
 
+
 
 			a {
 
 			a {
 
 				color: #2983ff;
 
 				color: #2983ff;
 
 			}
 
 			}
 
@@ -35,11 +22,9 @@
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes
 
-			<p>
 
-				Model: <a href="https://www.artstation.com/artwork/1AGwX" target="_blank" rel="noopener">Littlest Tokyo</a> by
 
-				<a href="https://www.artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.
 
-			</p>
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes<br/>
 
+			Model: <a href="https://www.artstation.com/artwork/1AGwX" target="_blank" rel="noopener">Littlest Tokyo</a> by
 
+			<a href="https://www.artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 3 - 10
examples/webgl_animation_multiple.html
View File 

@@ -4,20 +4,13 @@
 
 		<title>Multiple animated objects</title>
 
 		<title>Multiple animated objects</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
 
 		<meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
 
-		<style>
 
-			body {
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 
 
-		<div id="info"
 
-		style="position: absolute; left: 0; top: 0; width: 100%; background-color: white; border: 1px solid black; margin: 10px; padding: 10px;">
 
-			This demo shows how to load several instances of the same 3D model (same .GLTF file) into the
 
-			scene, position them at different locations and launch different animations for them.
 
-			To do it, some tricky cloning of SkinnedMesh, Skeleton and Bone objects is necessary (done by SkeletonUtils.clone().
 
+		<div id="info">
 
+			This demo shows how clone a skinned 3d model using <strong>SkeletonUtils.clone()</strong><br/>
 
 			Soldier model from <a href="https://www.mixamo.com" target="_blank" rel="noopener">https://www.mixamo.com</a>.
 
 			Soldier model from <a href="https://www.mixamo.com" target="_blank" rel="noopener">https://www.mixamo.com</a>.
 
 		</div>
 
 		</div>

+ 4 - 17
examples/webgl_animation_skinning_blending.html
View File 

@@ -4,23 +4,10 @@
 
 		<title>three.js webgl - animation - skinning</title>
 
 		<title>three.js webgl - animation - skinning</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
 			a {
 
 			a {
 
-				color: #ff0000;
 
+				color: #f00;
 
 			}
 
 			}
 
 			.ac {  /* prevent dat-gui from being selected */
 
 			.ac {  /* prevent dat-gui from being selected */
 
 				-webkit-user-select: none;
 
 				-webkit-user-select: none;
 
@@ -41,8 +28,8 @@
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Skeletal Animation Blending
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Skeletal Animation Blending
 
-			(model from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo.com</a>)
 
-			<br/><br/>Note: crossfades are possible with blend weights being set to (1,0,0), (0,1,0) or (0,0,1)
 
+			(model from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo.com</a>)<br/>
 
+			Note: crossfades are possible with blend weights being set to (1,0,0), (0,1,0) or (0,0,1)
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 9 - 24
examples/webgl_animation_skinning_morph.html
View File 

@@ -4,45 +4,30 @@
 
 		<title>three.js webgl - skinning and morphing</title>
 
 		<title>three.js webgl - skinning and morphing</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				color: #222;
 
 			}
 
 			}
 
-			#info {
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
-				z-index: 100;
 
-				display:block;
 
+
 
+			a {
 
+				color: #2fa1d6;
 
 			}
 
 			}
 
-			#info p {
 
+
 
+			p {
 
 				max-width: 600px;
 
 				max-width: 600px;
 
 				margin-left: auto;
 
 				margin-left: auto;
 
 				margin-right: auto;
 
 				margin-right: auto;
 
 				padding: 0 2em;
 
 				padding: 0 2em;
 
 			}
 
 			}
 
-			#info a {
 
-				color: #2fa1d6;
 
-				font-weight: bold;
 
-			}
 
-			.dg.ac {
 
-				z-index: 999 !important;
 
-			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - skinning and morphing<br />
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - skinning and morphing<br />
 
 			<p>
 
 			<p>
 
-				The animation system allows clips to be played individually, looped, or crossfaded with
 
-				other clips. This example shows a character looping in one of several base animation states,
 
-				then transitioning smoothly to one-time actions. Facial expressions are controlled
 
-				independently with morph targets.
 
+				The animation system allows clips to be played individually, looped, or crossfaded with other clips. This example shows a character looping in one of several base animation states, then transitioning smoothly to one-time actions. Facial expressions are controlled independently with morph targets.
 
 			</p>
 
 			</p>
 
 			Model by
 
 			Model by
 
 			<a href="https://www.patreon.com/quaternius" target="_blank" rel="noopener">Tomás Laulhé</a>,
 
 			<a href="https://www.patreon.com/quaternius" target="_blank" rel="noopener">Tomás Laulhé</a>,

+ 1 - 23
examples/webgl_buffergeometry.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - buffergeometry</title>
 
 		<title>three.js webgl - buffergeometry</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>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #050505;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 6 - 17
examples/webgl_buffergeometry_constructed_from_geometry.html
View File 

@@ -4,24 +4,10 @@
 
 		<title>three.js webgl - buffer geometry constructed from geometry</title>
 
 		<title>three.js webgl - buffer geometry constructed from geometry</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #ffffff;
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
 			a {
 
 			a {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -30,7 +16,10 @@
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffer geometry constructed from geometry - by <a target="_blank" href="http://callum.com">Callum Prentice</a></div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry constructed from geometry<br/>
 
+			by <a target="_blank" href="http://callum.com">Callum Prentice</a>
 
+		</div>
 
 
 
 		<script>
 
 		<script>

+ 1 - 22
examples/webgl_buffergeometry_custom_attributes_particles.html
View File 

@@ -4,29 +4,8 @@
 
 		<title>three.js webgl - buffer geometry custom attributes - particles</title>
 
 		<title>three.js webgl - buffer geometry custom attributes - particles</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>
 
-			body {
 
-				color: #ffffff;
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				font-weight: bold;
 
-			}
 
-			a {
 
-				color: #fff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
-
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry custom attributes - particles</div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry custom attributes - particles</div>

+ 5 - 21
examples/webgl_buffergeometry_drawcalls.html
View File 

@@ -4,35 +4,19 @@
 
 		<title>three.js webgl - buffergeometry - lines drawcalls</title>
 
 		<title>three.js webgl - buffergeometry - lines drawcalls</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry drawcalls - by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry drawcalls<br/>
 
+			by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
@@ -113,7 +97,7 @@
 
 				scene.add( group );
 
 				scene.add( group );
 
 
 
 				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 
 				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 
-				helper.material.color.setHex( 0x080808 );
 
+				helper.material.color.setHex( 0x101010 );
 
 				helper.material.blending = THREE.AdditiveBlending;
 
 				helper.material.blending = THREE.AdditiveBlending;
 
 				helper.material.transparent = true;
 
 				helper.material.transparent = true;
 
 				group.add( helper );
 
 				group.add( helper );

+ 6 - 31
examples/webgl_buffergeometry_indexed.html
View File 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - indexed</title>
 
 		<title>three.js webgl - buffergeometry - indexed</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #050505;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
@@ -66,16 +49,8 @@
 
 
 
 				//
 
 				//
 
 
 
-				var ambientLight = new THREE.AmbientLight( 0x222222 );
 
-				scene.add( ambientLight );
 
-
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
-				light1.position.set( 1, 1, 1 );
 
-				scene.add( light1 );
 
-
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1 );
 
-				light2.position.set( 0, - 1, 0 );
 
-				scene.add( light2 );
 
+				var light = new THREE.HemisphereLight();
 
+				scene.add( light );
 
 
 
 				//
 
 				//
 
 
 
@@ -143,8 +118,8 @@
 
 				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 
 
 				var material = new THREE.MeshPhongMaterial( {
 
 				var material = new THREE.MeshPhongMaterial( {
 
-					specular: 0x111111, shininess: 250,
 
-					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 
+					side: THREE.DoubleSide,
 
+					vertexColors: THREE.VertexColors
 
 				} );
 
 				} );
 
 
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				mesh = new THREE.Mesh( geometry, material );

+ 3 - 25
examples/webgl_buffergeometry_instancing.html
View File 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - instancing test (single triangle)</title>
 
 	<title>three.js webgl - instancing test (single triangle)</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}

+ 3 - 21
examples/webgl_buffergeometry_instancing2.html
View File 

@@ -4,33 +4,15 @@
 
 	<title>three.js webgl - instancing test (meshes)</title>
 
 	<title>three.js webgl - instancing test (meshes)</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}

+ 4 - 26
examples/webgl_buffergeometry_instancing_billboards.html
View File 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - instanced particles - billboards - colors</title>
 
 	<title>three.js webgl - instanced particles - billboards - colors</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}
 
@@ -44,7 +22,7 @@
 
 
 
 	<div id="info">
 
 	<div id="info">
 
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - instanced circle billboards - colors
 
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - instanced circle billboards - colors
 
-		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
+		<div id="notSupported" style="display:none">Sorry, your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 	</div>
 
 
 
 	<script src="../build/three.js"></script>
 
 	<script src="../build/three.js"></script>

+ 3 - 25
examples/webgl_buffergeometry_instancing_dynamic.html
View File 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - indexed instancing (single box), dynamic updates</title>
 
 	<title>three.js webgl - indexed instancing (single box), dynamic updates</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}

+ 4 - 26
examples/webgl_buffergeometry_instancing_interleaved_dynamic.html
View File 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - indexed instancing (single box), interleaved buffers, dynamic updates</title>
 
 	<title>three.js webgl - indexed instancing (single box), interleaved buffers, dynamic updates</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}
 
@@ -44,7 +22,7 @@
 
 
 
 	<div id="container"></div>
 
 	<div id="container"></div>
 
 	<div id="info">
 
 	<div id="info">
 
-		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - indexed instancing (single box), interleaved buffers, dynamic updates
 
+		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - indexed instancing (single box)<br/>interleaved buffers, dynamic updates
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 	</div>

+ 3 - 21
examples/webgl_buffergeometry_instancing_lambert.html
View File 

@@ -4,33 +4,15 @@
 
 	<title>three.js webgl - instancing - lambert shader</title>
 
 	<title>three.js webgl - instancing - lambert shader</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">
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
 	<style>
 
 	<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
 		a {
 
 		a {
 
-			color: #ffffff;
 
+			color: #08f;
 
 		}
 
 		}
 
-
 
 		#notSupported {
 
 		#notSupported {
 
 			width: 50%;
 
 			width: 50%;
 
 			margin: auto;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 			padding: 10px;
 
 		}
 
 		}

+ 2 - 19
examples/webgl_buffergeometry_lines.html
View File 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - lines</title>
 
 		<title>three.js webgl - buffergeometry - lines</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 2 - 19
examples/webgl_buffergeometry_lines_indexed.html
View File 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - lines - indexed</title>
 
 		<title>three.js webgl - buffergeometry - lines - indexed</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 4 - 15
examples/webgl_buffergeometry_morphtargets.html
View File 

@@ -4,29 +4,18 @@
 
 		<title>three.js webgl - buffergeometry - morph targets</title>
 
 		<title>three.js webgl - buffergeometry - morph targets</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-				text-align: center;
 
+			a {
 
+				color: #f00;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - buffergeometry - morph targets
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - buffergeometry - morph targets<br/>
 
 			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 
 			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 
 		</div>
 
 		</div>

+ 2 - 23
examples/webgl_buffergeometry_points.html
View File 

@@ -1,31 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - buffergeometry [particles]</title>
 
+		<title>three.js webgl - buffergeometry - particles</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>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #050505;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 2 - 23
examples/webgl_buffergeometry_points_interleaved.html
View File 

@@ -1,31 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - buffergeometry [particles]</title>
 
+		<title>three.js webgl - buffergeometry - particles</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>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #050505;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 25
examples/webgl_buffergeometry_rawshader.html
View File 

@@ -4,31 +4,7 @@
 
 		<title>three.js webgl - raw shader</title>
 
 		<title>three.js webgl - raw shader</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#webglmessage a { color:#da0 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 2 - 22
examples/webgl_buffergeometry_selective_draw.html
View File 

@@ -4,28 +4,8 @@
 
 	<title>three.js webgl - buffergeometry - selective - draw</title>
 
 	<title>three.js webgl - buffergeometry - selective - draw</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>
 
-	body {
 
-		color: #cccccc;
 
-		font-family:Monospace;
 
-		font-size:13px;
 
-		text-align:center;
 
-
 
-		background-color: #050505;
 
-		margin: 0px;
 
-		overflow: hidden;
 
-	}
 
-
 
-	#info {
 
-		position: absolute;
 
-		top: 0px; width: 100%;
 
-		padding: 5px;
 
-	}
 
-
 
-	a {
 
-		color: #0080ff;
 
-	}
 
-	</style>
 
+	<link type="text/css" rel="stylesheet" href="main.css">
 
+
 
 	<script src="../build/three.js"></script>
 
 	<script src="../build/three.js"></script>
 
 	<script src="js/libs/stats.min.js"></script>
 
 	<script src="js/libs/stats.min.js"></script>
 
 	<script src="js/WebGL.js"></script>
 
 	<script src="js/WebGL.js"></script>

+ 1 - 23
examples/webgl_buffergeometry_uint.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - buffergeometry - uint</title>
 
 		<title>three.js webgl - buffergeometry - uint</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>
 
-			body {
 
-				color: #cccccc;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #050505;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 5 - 18
examples/webgl_camera.html
View File 

@@ -4,27 +4,14 @@
 
 		<title>three.js webgl - cameras</title>
 
 		<title>three.js webgl - cameras</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #808080;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+			a {
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 5px; width: 100%;
 
-				z-index: 100;
 
+			b {
 
+				color: lightgreen;
 
 			}
 
 			}
 
-
 
-			a {color: #0080ff; }
 
-			b { color: lightgreen }
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 7
examples/webgl_camera_array.html
View File 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - arraycamera</title>
 
 		<title>three.js webgl - arraycamera</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 6 - 10
examples/webgl_camera_cinematic.html
View File 

@@ -1,21 +1,17 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl-camera cinematic</title>
 
+		<title>three.js webgl - camera cinematic</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				background-color: #fff;
 
+				color: #000;
 
 			}
 
 			}
 
-			#info {
 
-				position: absolute;
 
-				top: 10px;
 
-				width: 100%;
 
-				text-align: center;
 
+			a {
 
+				color: #08f;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>

+ 10 - 33
examples/webgl_camera_logarithmicdepthbuffer.html
View File 

@@ -4,33 +4,8 @@
 
 		<title>three.js webgl - cameras - logarithmic depth buffer</title>
 
 		<title>three.js webgl - cameras - logarithmic depth buffer</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #808080;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index: 100;
 
-				color: #ddd;
 
-				text-shadow: 0 0 1px rgba(0,0,0,1);
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-
 
-			b { color: lightgreen }
 
-
 
 			.renderer_label {
 
 			.renderer_label {
 
 				position: absolute;
 
 				position: absolute;
 
 				bottom: 1em;
 
 				bottom: 1em;
 
@@ -40,24 +15,27 @@
 
 				display: block;
 
 				display: block;
 
 				text-align: center;
 
 				text-align: center;
 
 			}
 
 			}
 
+
 
 			#container {
 
 			#container {
 
-				white-space: nowrap;
 
+				display: flex;
 
 			}
 
 			}
 
+
 
 			#container_normal {
 
 			#container_normal {
 
 				width: 50%;
 
 				width: 50%;
 
 				display: inline-block;
 
 				display: inline-block;
 
 				position: relative;
 
 				position: relative;
 
-				overflow: hidden;
 
 			}
 
 			}
 
+
 
 			#container_logzbuf {
 
 			#container_logzbuf {
 
 				width: 50%;
 
 				width: 50%;
 
 				display: inline-block;
 
 				display: inline-block;
 
 				position: relative;
 
 				position: relative;
 
-				overflow: hidden;
 
 			}
 
 			}
 
+
 
 			#renderer_border {
 
 			#renderer_border {
 
 				position: absolute;
 
 				position: absolute;
 
 				top: 0;
 
 				top: 0;
 
+				left: 25%;
 
 				bottom: 0;
 
 				bottom: 0;
 
 				width: 2px;
 
 				width: 2px;
 
 				z-index: 10;
 
 				z-index: 10;
 
@@ -71,15 +49,14 @@
 
 	<body>
 
 	<body>
 
 
 
 		<div id="container">
 
 		<div id="container">
 
-			<div id="container_normal"><h2 class="renderer_label">normal z-buffer</h2></div><div id="container_logzbuf"><h2 class="renderer_label">logarithmic z-buffer</h2></div>
 
+			<div id="container_normal"><h2 class="renderer_label">normal z-buffer</h2></div>
 
+			<div id="container_logzbuf"><h2 class="renderer_label">logarithmic z-buffer</h2></div>
 
 			<div id="renderer_border"></div>
 
 			<div id="renderer_border"></div>
 
 		</div>
 
 		</div>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - cameras - logarithmic depth buffer<br/>
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - cameras - logarithmic depth buffer<br/>
 
-			Zoom through scene with objects ranging in size from 1µm to 100,000,000 light years using the mousewheel<br/>
 
-			Linear z-buffer handles close-up objects well, but fails spectacularly at distant objects<br/>
 
-			Logarithmic handles all but the smallest objects with ease
 
+			mousewheel to dolly out
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 1 - 7
examples/webgl_clipping.html
View File 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipping planes</title>
 
 		<title>three.js webgl - clipping planes</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 7
examples/webgl_clipping_advanced.html
View File 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipping planes</title>
 
 		<title>three.js webgl - clipping planes</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 7
examples/webgl_clipping_intersection.html
View File 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipIntersection</title>
 
 		<title>three.js webgl - clipIntersection</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes</title>
 
 		<title>three.js webgl - custom attributes</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_lines.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [lines]</title>
 
 		<title>three.js webgl - custom attributes [lines]</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles]</title>
 
 		<title>three.js webgl - custom attributes [particles]</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-			a { color: #ff0000 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points2.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles][billboards]</title>
 
 		<title>three.js webgl - custom attributes [particles][billboards]</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points3.html
View File 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles][billboards][alphatest]</title>
 
 		<title>three.js webgl - custom attributes [particles][billboards][alphatest]</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>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 6 - 26
examples/webgl_decals.html
View File 

@@ -1,38 +1,18 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - decals - Decal Splatter</title>
 
+		<title>three.js webgl - decal splatter</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>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - decals - Decal Splatter (click or tap to shoot)</div>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - decal splatter<br/>
 
+			click to shoot
 
+		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/geometries/DecalGeometry.js"></script>
 
 		<script src="js/geometries/DecalGeometry.js"></script>

+ 2 - 31
examples/webgl_depth_texture.html
View File 

@@ -4,37 +4,8 @@
 
 		<title>three.js webgl - Depth Texture</title>
 
 		<title>three.js webgl - Depth Texture</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				color: #fff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			a {
 
-				color: #B2E9FF;
 
-				font-weight: bold;
 
-				pointer-events: auto;
 
-			}
 
-
 
-			canvas {
 
-				position: absolute;
 
-				top: 0;
 
-				left: 0;
 
-			}
 
-
 
-			#info {
 
-				pointer-events: none;
 
-				position: absolute;
 
-				left: 0;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				display: inline-block;
 
-			}
 
-
 
 			#error {
 
 			#error {
 
 				margin: auto;
 
 				margin: auto;
 
 				margin-top: 40px;
 
 				margin-top: 40px;
 
@@ -82,7 +53,7 @@
 
 	<body>
 
 	<body>
 
 		<canvas></canvas>
 
 		<canvas></canvas>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - WebGL - Depth Texture<br/>
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> webgl - depth texture<br/>
 
 			Stores render target depth in a texture attachment.<br/>
 
 			Stores render target depth in a texture attachment.<br/>
 
 			Created by <a href="http://twitter.com/mattdesl" target="_blank" rel="noopener">@mattdesl</a>.
 
 			Created by <a href="http://twitter.com/mattdesl" target="_blank" rel="noopener">@mattdesl</a>.

+ 5 - 30
examples/webgl_effects_anaglyph.html
View File 

@@ -4,41 +4,16 @@
 
 		<title>three.js webgl - effects - anaglyph</title>
 
 		<title>three.js webgl - effects - anaglyph</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>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				z-index:1000;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#webglmessage a { color:#da0 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
-
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - anaglyph. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a></div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - anaglyph<br/>
 
+			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 
+		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
-
 
 		<script src="js/effects/AnaglyphEffect.js"></script>
 
 		<script src="js/effects/AnaglyphEffect.js"></script>
 
-
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
 
 
 		<script>
 
 		<script>

+ 1 - 25
examples/webgl_effects_ascii.html
View File 

@@ -4,31 +4,7 @@
 
 		<title>three.js webgl - effects - ascii</title>
 
 		<title>three.js webgl - effects - ascii</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>
 
-			body {
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				z-index:1000;
 
-			}
 
-
 
-			a {
 
-				color: #ff0000;
 
-			}
 
-
 
-			#webglmessage a { color:#da0 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 5 - 29
examples/webgl_effects_parallaxbarrier.html
View File 

@@ -4,41 +4,17 @@
 
 		<title>three.js webgl - effects - parallax barrier</title>
 
 		<title>three.js webgl - effects - parallax barrier</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>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				z-index:1000;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#webglmessage a { color:#da0 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a></div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier<br/>
 
+			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 
+		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
-
 
 		<script src="js/effects/ParallaxBarrierEffect.js"></script>
 
 		<script src="js/effects/ParallaxBarrierEffect.js"></script>
 
-
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
 
 
 		<script>
 
 		<script>

+ 75 - 110
examples/webgl_effects_peppersghost.html
View File 

@@ -1,161 +1,126 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-<head>
 
+	<head>
 
 		<title>three.js webgl - effects - peppers ghost</title>
 
 		<title>three.js webgl - effects - peppers ghost</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>
 
-				body {
 
-						background: #777;
 
-						padding: 0;
 
-						margin: 0;
 
-						font-weight: bold;
 
-						overflow: hidden;
 
-				}
 
-
 
-				#info {
 
-						position: absolute;
 
-						top: 0px;
 
-						width: 100%;
 
-						color: #ffffff;
 
-						padding: 5px;
 
-						font-family: Monospace;
 
-						font-size: 13px;
 
-						text-align: center;
 
-						z-index: 1000;
 
-				}
 
-
 
-				a {
 
-						color: #ffffff;
 
-				}
 
-
 
-				#webglmessage a {
 
-						color: #da0
 
-				}
 
-		</style>
 
-</head>
 
-
 
-<body>
 
-<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
 
-		<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">basic instructions for building the reflective prism</a></div>
 
-
 
-<script src="../build/three.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
+	</head>
 
+	<body>
 
 
 
-<script src="js/effects/PeppersGhostEffect.js"></script>
 
+			<div id="info">
 
+				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
 
+				<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
 
+			</div>
 
 
 
-<script src="js/WebGL.js"></script>
 
+		<script src="../build/three.js"></script>
 
+		<script src="js/effects/PeppersGhostEffect.js"></script>
 
+		<script src="js/WebGL.js"></script>
 
 
 
-<script>
 
+		<script>
 
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+				if ( WEBGL.isWebGLAvailable() === false ) {
 
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+					document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 
 
-		}
 
-
 
-		var container;
 
-
 
-		var camera, scene, renderer, effect;
 
-		var group;
 
-
 
-		init();
 
-		animate();
 
-
 
-		function init() {
 
+				}
 
 
 
-			container = document.createElement( 'div' );
 
-			document.body.appendChild( container );
 
+				var container;
 
 
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
+				var camera, scene, renderer, effect;
 
+				var group;
 
 
 
-			scene = new THREE.Scene();
 
+				init();
 
+				animate();
 
 
 
-			group = new THREE.Group();
 
-			scene.add( group );
 
+				function init() {
 
 
 
-			// Cube
 
+					container = document.createElement( 'div' );
 
+					document.body.appendChild( container );
 
 
 
-			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
-			geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
+					camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
 
 
-			var position = geometry.attributes.position;
 
-			var colors = [];
 
-			var color = new THREE.Color();
 
+					scene = new THREE.Scene();
 
 
 
-			// generate for each side of the cube a different color
 
+					group = new THREE.Group();
 
+					scene.add( group );
 
 
 
-			for ( var i = 0; i < position.count; i += 6 ) {
 
+					// Cube
 
 
 
-				color.setHex( Math.random() * 0xffffff );
 
+					var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
+					geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
 
 
-				// first face
 
+					var position = geometry.attributes.position;
 
+					var colors = [];
 
+					var color = new THREE.Color();
 
 
 
-				colors.push( color.r, color.g, color.b );
 
-				colors.push( color.r, color.g, color.b );
 
-				colors.push( color.r, color.g, color.b );
 
+					// generate for each side of the cube a different color
 
 
 
-				// second face
 
+					for ( var i = 0; i < position.count; i += 6 ) {
 
 
 
-				colors.push( color.r, color.g, color.b );
 
-				colors.push( color.r, color.g, color.b );
 
-				colors.push( color.r, color.g, color.b );
 
+						color.setHex( Math.random() * 0xffffff );
 
 
 
-			}
 
+						// first face
 
 
 
-			geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+						colors.push( color.r, color.g, color.b );
 
+						colors.push( color.r, color.g, color.b );
 
+						colors.push( color.r, color.g, color.b );
 
 
 
-			var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
+						// second face
 
 
 
-			for ( var i = 0; i < 10; i ++ ) {
 
+						colors.push( color.r, color.g, color.b );
 
+						colors.push( color.r, color.g, color.b );
 
+						colors.push( color.r, color.g, color.b );
 
 
 
-				var cube = new THREE.Mesh( geometry, material );
 
-				cube.position.x = Math.random() * 2 - 1;
 
-				cube.position.y = Math.random() * 2 - 1;
 
-				cube.position.z = Math.random() * 2 - 1;
 
-				cube.scale.multiplyScalar( Math.random() + 0.5 );
 
-				group.add( cube );
 
+					}
 
 
 
-			}
 
+					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			container.appendChild( renderer.domElement );
 
+					var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 
 
-			effect = new THREE.PeppersGhostEffect( renderer );
 
-			effect.setSize( window.innerWidth, window.innerHeight );
 
-			effect.cameraDistance = 5;
 
+					for ( var i = 0; i < 10; i ++ ) {
 
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+						var cube = new THREE.Mesh( geometry, material );
 
+						cube.position.x = Math.random() * 2 - 1;
 
+						cube.position.y = Math.random() * 2 - 1;
 
+						cube.position.z = Math.random() * 2 - 1;
 
+						cube.scale.multiplyScalar( Math.random() + 0.5 );
 
+						group.add( cube );
 
 
 
-		}
 
+					}
 
 
 
-		function onWindowResize() {
 
+					renderer = new THREE.WebGLRenderer();
 
+					renderer.setPixelRatio( window.devicePixelRatio );
 
+					container.appendChild( renderer.domElement );
 
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+					effect = new THREE.PeppersGhostEffect( renderer );
 
+					effect.setSize( window.innerWidth, window.innerHeight );
 
+					effect.cameraDistance = 5;
 
 
 
-			effect.setSize( window.innerWidth, window.innerHeight );
 
+					window.addEventListener( 'resize', onWindowResize, false );
 
 
 
-		}
 
+				}
 
 
 
-		function animate() {
 
+				function onWindowResize() {
 
 
 
-			requestAnimationFrame( animate );
 
+					camera.aspect = window.innerWidth / window.innerHeight;
 
+					camera.updateProjectionMatrix();
 
 
 
-			render();
 
+					effect.setSize( window.innerWidth, window.innerHeight );
 
 
 
-		}
 
+				}
 
 
 
-		function render() {
 
+				function animate() {
 
 
 
-			group.rotation.y += 0.01;
 
+					requestAnimationFrame( animate );
 
 
 
-			effect.render( scene, camera );
 
+					group.rotation.y += 0.01;
 
 
 
-		}
 
+					effect.render( scene, camera );
 
 
 
+				}
 
 
 
-</script>
 
+		</script>
 
 
 
-</body>
 
+	</body>
 
 </html>
 
 </html>

+ 1 - 26
examples/webgl_effects_stereo.html
View File 

@@ -4,32 +4,7 @@
 
 		<title>three.js webgl - effects - stereo</title>
 
 		<title>three.js webgl - effects - stereo</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>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				z-index:1000;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			#webglmessage a { color:#da0 }
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 	<body>
 
 	<body>

+ 3 - 30
examples/webgl_fire.html
View File 

@@ -1,32 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - fire - texture</title>
 
+		<title>three.js webgl - fire</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>
 
-			body {
 
-				background:#222;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
@@ -38,12 +16,7 @@
 
 	<body>
 
 	<body>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> fire and smoke demo <br/>
 
-		</div>
 
-
 
-		<div id="overlay">
 
-			<div>
 
-			</div>
 
+			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> fire and smoke demo
 
 		</div>
 
 		</div>
 
 
 
 		<script>
 
 		<script>

+ 3 - 26
examples/webgl_framebuffer_texture.html
View File 

@@ -4,29 +4,8 @@
 
 		<title>three.js webgl - framebuffer - texture</title>
 
 		<title>three.js webgl - framebuffer - texture</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
 			#overlay {
 
 			#overlay {
 
 				position: fixed;
 
 				position: fixed;
 
 				display: flex;
 
 				display: flex;
 
@@ -54,13 +33,11 @@
 
 	<body>
 
 	<body>
 
 
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> framebuffer to texture <br/>
 
-			The area of the white square is copied from the framebuffer to a texture (shown in the top-left corner).
 
+			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> framebuffer to texture
 
 		</div>
 
 		</div>
 
 
 
 		<div id="overlay">
 
 		<div id="overlay">
 
-			<div>
 
-			</div>
 
+			<div></div>
 
 		</div>
 
 		</div>
 
 
 
 		<script>
 
 		<script>

+ 4 - 25
examples/webgl_furnace_test.html
View File 

@@ -4,31 +4,10 @@
 
 		<title>three.js white furnace test</title>
 
 		<title>three.js white furnace test</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				background:#777;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				min-width: 60%;
 
-				margin: 0 20%;
 
-				color: #ffffff;
 
-				padding: 15px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				background-color: black;
 
-				color: white;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
+				color: #444;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 
 
@@ -44,9 +23,9 @@
 
 		<div id="container">
 
 		<div id="container">
 
 			<div id="info">
 
 			<div id="info">
 
 				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
 
 				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
 
-				<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test.<br />
 
+				<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a><br/><br/>
 
 				There are 11 fully metal spheres with full white specular color and increasing roughness values rendered here. A metal object, no matter how rough, fully reflects all energy. If uniformly lit, the spheres should be indistinguishable from the environment. If spheres are visible, then some energy has been lost or gained after reflection.<br />
 
 				There are 11 fully metal spheres with full white specular color and increasing roughness values rendered here. A metal object, no matter how rough, fully reflects all energy. If uniformly lit, the spheres should be indistinguishable from the environment. If spheres are visible, then some energy has been lost or gained after reflection.<br />
 
-				<a href="https://jsantell.com/" target="_blank" rel="noopener">by Jordan Santell</a><br/><br/></div>
 
+			</div>
 
 		</div>
 
 		</div>
 
 
 
 		<script>
 
 		<script>

+ 1 - 23
examples/webgl_geometries.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - geometries</title>
 
 		<title>three.js webgl - geometries</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>
 
-			body {
 
-				color: #eee;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				padding: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 1 - 23
examples/webgl_geometries_parametric.html
View File 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - parametric geometries</title>
 
 		<title>three.js webgl - parametric geometries</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>
 
-			body {
 
-				color: #eee;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #000;
 
-				margin: 0px;
 
-				padding: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 3 - 17
examples/webgl_geometry_colors.html
View File 

@@ -4,29 +4,15 @@
 
 		<title>three.js webgl - geometry - vertex colors</title>
 
 		<title>three.js webgl - geometry - vertex colors</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				color: #808080;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-
 
 				background-color: #fff;
 
 				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
+				color: #444;
 
 			}
 
 			}
 
-
 
 			a {
 
 			a {
 
-
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 5 - 19
examples/webgl_geometry_colors_lookuptable.html
View File 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - lookup table</title>
 
 		<title>three.js webgl - lookup table</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				color: #000;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
 				background-color: #fff;
 
 				background-color: #fff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				color:#000;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-
 
+				color: #444;
 
 			}
 
 			}
 
-
 
 			a {
 
 			a {
 
 				color: red;
 
 				color: red;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
-
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lookuptable - vertex color values from a range of data values.<br />
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lookup table<br/>
 
+			vertex color values from a range of data values
 
 		</div>
 
 		</div>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>

+ 2 - 20
examples/webgl_geometry_convex.html
View File 

@@ -4,29 +4,11 @@
 
 		<title>three.js webgl - convex geometry</title>
 
 		<title>three.js webgl - convex geometry</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>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				color: #fff;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				text-align:center;
 
-			}
 
-			a {
 
-				color: #fff;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - ConvexGeometry</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - convex geometry</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>

+ 1 - 7
examples/webgl_geometry_cube.html
View File 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - geometry - cube</title>
 
 		<title>three.js webgl - geometry - cube</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>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>

+ 7 - 25
examples/webgl_geometry_dynamic.html
View File 

@@ -4,40 +4,22 @@
 
 		<title>three.js webgl - geometry - dynamic</title>
 
 		<title>three.js webgl - geometry - dynamic</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				color: #61443e;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #aaccff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				color: #666;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				color: #ffffff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
 			a {
 
 			a {
 
-
 
-				color: yellow;
 
+				color: #08f;
 
 			}
 
 			}
 
-
 
-			#webglmessage {
 
-				background:rgb(0,0,50) !important;
 
-				color:#fff !important;
 
-			}
 
-
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic geometry<br />
 
+			left click: forward, right click: backward
 
+		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>

+ 1 - 3
examples/webgl_geometry_extrude_shapes.html
View File 

@@ -4,12 +4,10 @@
 
 		<title>three.js webgl - geometry - extrude shapes</title>
 
 		<title>three.js webgl - geometry - extrude shapes</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
 				background-color: #222;
 
 				background-color: #222;
 
-				margin: 0px;
 
-				overflow: hidden;
 
 			}
 
 			}
 
 			a {
 
 			a {
 
 				color: #f80;
 
 				color: #f80;

+ 6 - 25
examples/webgl_geometry_extrude_shapes2.html
View File 

@@ -1,39 +1,20 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - geometry - extrude shapes from geodata</title>
 
+		<title>three.js webgl - geometry - shapes extrusion via geodata</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-		body {
 
-			color: #ffffff;
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-			font-weight: bold;
 
-			background-color: #000000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-		}
 
-
 
-		a {
 
-			color: #ffffff;
 
-		}
 
+			body {
 
+				color: #fff;
 
+			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
-
 
 	<body>
 
 	<body>
 
-
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Shapes Extrusion via Geo Data
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shapes extrusion via geodata
 
 		</div>
 
 		</div>
 
 
 
 		<script type="text/javascript" src="../build/three.js"></script>
 
 		<script type="text/javascript" src="../build/three.js"></script>

+ 8 - 13
examples/webgl_geometry_extrude_splines.html
View File 

@@ -4,29 +4,24 @@
 
 		<title>three.js webgl - geometry - spline extrusion</title>
 
 		<title>three.js webgl - geometry - spline extrusion</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">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
 			body {
 
 			body {
 
-				font-family: Monospace;
 
 				background-color: #f0f0f0;
 
 				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				color: #444;
 
 			}
 
 			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
+			a {
 
+				color: #08f;
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - spline extrusion examples by <a href="http://www.lab4games.net/zz85/blog" target="_blank" rel="noopener">zz85</a></div>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - spline extrusion examples<br/>
 
+			by <a href="http://www.lab4games.net/zz85/blog" target="_blank" rel="noopener">zz85</a>
 
+		</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>

Some files were not shown because too many files changed in this diff