Strona główna Odkrywaj Pomoc
Zaloguj się
javascript
/
three.js
kopia lustrzana https://github.com/tazdij/three.js.git
2
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

Examples: Unified CSS.

Mr.doob 6 lat temu
rodzic
6abf9cc9ad
commit
0f44080d79
100 zmienionych plików z 555 dodań i 2296 usunięć
Widok podzielony Pokaż statystyki zmian
  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
Wyświetl plik 

@@ -4,39 +4,18 @@
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<title>three.js css2d - label</title>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<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;
 
 				font-family: sans-serif;
 
 				padding: 2px;
 
 				background: rgba( 0, 0, 0, .6 );
 
 			}
 
-
 
-			a {
 
-				color: #000000;
 
-			}
 
-
 
 		</style>
 
 	</head>
 
 	<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>

+ 21 - 45
examples/css3d_molecules.html
Wyświetl plik 

@@ -4,71 +4,49 @@
 
 		<title>three.js css3d - molecules</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			body {
 
 				background-color: #050505;
 
 				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;
 
-				top: 0px;
 
+				top: 50px;
 
 				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				font-weight: bold;
 
+				padding: 10px;
 
+				box-sizing: border-box;
 
 				text-align: center;
 
-				z-index: 1;
 
 			}
 
 
 			#menu {
 
 				position: absolute;
 
 				bottom: 20px;
 
 				width: 100%;
 
+				padding: 10px;
 
+				box-sizing: border-box;
 
 				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 {
 
 				color: rgb(255,255,255);
 
-				background: transparent;
 
+				background: rgb(255,255,255,0.1);
 
 				border: 0px;
 
 				padding: 5px 10px;
 
+				margin: 2px;
 
+				font-size: 14px;
 
 				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 {
 
 				width: 5px;
 
@@ -85,11 +63,9 @@
 
 		<script src="js/loaders/PDBLoader.js"></script>
 
 
 		<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">
 
-			<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 id="menu"></div>

+ 6 - 17
examples/css3d_orthographic.html
Wyświetl plik 

@@ -3,32 +3,21 @@
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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 {
 
+				color: #f00;
 
+			}
 
+			#info {
 
 				color: #000000;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<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>

+ 1 - 24
examples/css3d_panorama.html
Wyświetl plik 

@@ -4,30 +4,7 @@
 
 		<title>three.js css3d - panorama</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<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>
 
 	<body>
 
 		<script src="../build/three.js"></script>

+ 2 - 25
examples/css3d_panorama_deviceorientation.html
Wyświetl plik 

@@ -4,37 +4,14 @@
 
 		<title>three.js css3d - panorama - device orientation</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 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>
 
 	<body>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/DeviceOrientationControls.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>

+ 7 - 26
examples/css3d_periodictable.html
Wyświetl plik 

@@ -4,32 +4,10 @@
 
 		<title>three.js css3d - periodic table</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0;
 
-				font-family: Helvetica, sans-serif;;
 
-				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;
 
+				color: #8ff;
 
 			}
 
 
 			#menu {
 
@@ -44,7 +22,9 @@
 
 				height: 160px;
 
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 
 				border: 1px solid rgba(127,255,255,0.25);
 
+				font-family: Helvetica, sans-serif;
 
 				text-align: center;
 
+				line-height: normal;
 
 				cursor: default;
 
 			}
 
 
@@ -89,9 +69,11 @@
 
 				padding: 5px 10px;
 
 				cursor: pointer;
 
 			}
 
+
 
 			button:hover {
 
 				background-color: rgba(0,255,255,0.5);
 
 			}
 
+
 
 			button:active {
 
 				color: #000000;
 
 				background-color: rgba(0,255,255,0.75);
 
@@ -104,7 +86,7 @@
 
 		<script src="js/controls/TrackballControls.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="menu">
 
 			<button id="table">TABLE</button>
 
@@ -360,7 +342,6 @@
 
 				//
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
-				controls.rotateSpeed = 0.5;
 
 				controls.minDistance = 500;
 
 				controls.maxDistance = 6000;
 
 				controls.addEventListener( 'change', render );

+ 4 - 20
examples/css3d_sandbox.html
Wyświetl plik 

@@ -3,37 +3,21 @@
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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 {
 
-				color: #000000;
 
+				color: #080;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<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="js/controls/TrackballControls.js"></script>
 
-
 
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 		<script>

+ 5 - 24
examples/css3d_sprites.html
Wyświetl plik 

@@ -4,32 +4,14 @@
 
 		<title>three.js css3d - sprites</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				font-family: Arial;
 
-				overflow: hidden;
 
+				background-color: #fff;
 
+				color: #000;
 
 			}
 
-
 
 			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>
 
 	</head>
 
@@ -39,7 +21,7 @@
 
 		<script src="js/controls/TrackballControls.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>
 
 
 		<script>
 
@@ -155,7 +137,6 @@
 
 				//
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
-				controls.rotateSpeed = 0.5;
 
 
 				//

+ 10 - 9
examples/css3d_youtube.html
Wyświetl plik 

@@ -4,17 +4,18 @@
 
 		<title>three.js css3d - youtube</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
-			html, body {
 
-				height: 100%;
 
-				overflow: hidden;
 
+			body {
 
+				background-color: #ffffff;
 
 			}
 
+
 
 			#blocker {
 
 				position: absolute;
 
-				top: 0px;
 
-				left: 0px;
 
-				width: 100%;
 
-				height: 100%;
 
+				top: 0;
 
+				left: 0;
 
+				bottom: 0;
 
+				right: 0;
 
 			}
 
 		</style>
 
 	</head>
 
@@ -86,12 +87,12 @@
 
 				var blocker = document.getElementById( 'blocker' );
 
 				blocker.style.display = 'none';
 
 
-				document.addEventListener( 'mousedown', function () {
 
+				controls.addEventListener( 'start', function () {
 
 
 					blocker.style.display = '';
 
 
 				} );
 
-				document.addEventListener( 'mouseup', function () {
 
+				controls.addEventListener( 'end', function () {
 
 
 					blocker.style.display = 'none';

+ 3 - 4
examples/js/renderers/RaytracingRenderer.js
Wyświetl plik 

@@ -124,8 +124,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 		canvasWidth = canvas.width;
 
 		canvasHeight = canvas.height;
 
 
-		context.fillStyle = 'white';
 
-
 
 		pool.forEach( updateSettings );
 
 
 	};
 
@@ -175,7 +173,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 
 		} );
 
 
 		context.fillStyle = '#' + worker.color;
 
-
 
 		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();
 
 
 		xblocks = Math.ceil( canvasWidth / blockSize );

+ 40 - 0
examples/main.css
Wyświetl plik 

@@ -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
Wyświetl plik 

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

+ 1 - 23
examples/misc_animation_groups.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - animation - groups</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #fff;
 
-				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>
 
 	<body>

+ 1 - 23
examples/misc_animation_keys.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - animation - basic</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #fff;
 
-				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>
 
 	<body>

+ 10 - 11
examples/misc_boxselection.html
Wyświetl plik 

@@ -4,12 +4,15 @@
 
 		<title>three.js webgl - box selection</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
-				font-family: Monospace;
 
 				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+				color: #000;
 
+			}
 
+
 
+			a {
 
+				color: #08e;
 
 			}
 
 
 			.selectBox {
 
@@ -21,6 +24,10 @@
 
 	</head>
 
 	<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="js/libs/stats.min.js"></script>
 
 
@@ -94,14 +101,6 @@
 
 
 				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();
 
 				container.appendChild( stats.dom );

+ 3 - 25
examples/misc_controls_deviceorientation.html
Wyświetl plik 

@@ -3,35 +3,13 @@
 
 	<head>
 
 		<title>three.js webgl - controls - deviceorientation</title>
 
 		<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>
 
 	<body>
 
 
 		<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>.
 
 		</div>

+ 4 - 20
examples/misc_controls_fly.html
Wyświetl plik 

@@ -4,35 +4,19 @@
 
 		<title>three.js webgl - fly controls - earth</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
 				background:#000;
 
 				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 {
 
-
 
 				color: #0080ff;
 
 			}
 
 
 			b {
 
-				color:orange
 
+				color: orange
 
 			}
 
 		</style>
 
 
@@ -56,8 +40,8 @@
 
 
 	<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>
 
 
 		<script>

+ 4 - 18
examples/misc_controls_map.html
Wyświetl plik 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - map controls</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
+				background-color: #ccc;
 
 				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 {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<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>
 
 
 		<script src="../build/three.js"></script>

+ 4 - 18
examples/misc_controls_orbit.html
Wyświetl plik 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - orbit controls</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
+				background-color: #ccc;
 
 				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 {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<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>
 
 
 		<script src="../build/three.js"></script>

+ 9 - 22
examples/misc_controls_pointerlock.html
Wyświetl plik 

@@ -4,32 +4,16 @@
 
 		<title>three.js - pointerlock controls</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
-			html, body {
 
-				width: 100%;
 
-				height: 100%;
 
-			}
 
-
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0;
 
-				overflow: hidden;
 
-				font-family: arial;
 
-			}
 
-
 
 			#blocker {
 
-
 
 				position: absolute;
 
-
 
 				width: 100%;
 
 				height: 100%;
 
-
 
 				background-color: rgba(0,0,0,0.5);
 
-
 
 			}
 
 
 			#instructions {
 
-
 
 				width: 100%;
 
 				height: 100%;
 
 
@@ -51,11 +35,12 @@
 
 
 				color: #ffffff;
 
 				text-align: center;
 
+				font-family: Arial;
 
+				font-size: 14px;
 
+				line-height: 24px;
 
 
 				cursor: pointer;
 
-
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>
 
@@ -65,9 +50,11 @@
 
 		<div id="blocker">
 
 
 			<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>

+ 4 - 24
examples/misc_controls_trackball.html
Wyświetl plik 

@@ -4,41 +4,21 @@
 
 		<title>three.js webgl - trackball controls</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			html, body {
 
-				width: 100%;
 
-				height: 100%;
 
-				overflow: hidden;
 
-			}
 
-
 
 			body {
 
+				background-color: #ccc;
 
 				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 {
 
-				color: red;
 
+				color: #f00;
 
 			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<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
 
 		</div>

+ 1 - 24
examples/misc_controls_transform.html
Wyświetl plik 

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

+ 3 - 31
examples/misc_exporter_collada.html
Wyświetl plik 

@@ -4,30 +4,7 @@
 
 		<title>three.js webgl - exporter - collada</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #fff;
 
-				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>
 
 	<body>
 
 		<div id="info">
 
@@ -36,17 +13,12 @@
 
 		</div>
 
 
 		<script src="../build/three.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/libs/dat.gui.min.js'></script>
 
 
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
 
-
 
-		<script src="js/exporters/ColladaExporter.js"></script>
 
-
 
 		<script>
 
 
 			////////////////////////////////////////////////////////////////////////////////

+ 17 - 21
examples/misc_exporter_draco.html
Wyświetl plik 

@@ -4,38 +4,28 @@
 
 		<title>three.js webgl - exporter - draco</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
-				font-family: Monospace;
 
-				background-color: #000;
 
+				background-color: #a0a0a0;
 
 				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>
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
 			<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>
 
 
 		<script src="../build/three.js"></script>
 
-		
+
 
 		<script src="js/libs/draco/draco_encoder.js"></script>
 
 
 		<script src="js/controls/OrbitControls.js"></script>
 
@@ -79,6 +69,7 @@
 
 				mesh.castShadow = true;
 
 				mesh.position.y = 25;
 
 				scene.add( mesh );
 
+
 
 			}
 
 
 			function init() {
 
@@ -98,7 +89,7 @@
 
 				hemiLight.position.set( 0, 200, 0 );
 
 				scene.add( hemiLight );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
 				directionalLight.position.set( 0, 200, 100 );
 
 				directionalLight.castShadow = true;
 
 				directionalLight.shadow.camera.top = 180;
 
@@ -109,14 +100,19 @@
 
 
 				// 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.position.y = - 75;
 
 				ground.receiveShadow = true;
 
 				scene.add( ground );
 
 
 				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 
 				grid.material.opacity = 0.2;
 
 				grid.material.transparent = true;
 
+				grid.position.y = - 75;
 
 				scene.add( grid );
 
 
 				// export mesh

+ 3 - 17
examples/misc_exporter_gltf.html
Wyświetl plik 

@@ -4,35 +4,21 @@
 
 		<title>three.js webgl - exporter - gltf</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				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>
 
 	<body>
 
 		<div id="info">
 
 			<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_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_objects">Export Sphere and Grid</button>
 
 			<button id="export_scene_object">Export Scene1 and Sphere</button>
 
 			<br/><br/>
 
 			<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_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_forceindices" name="visible" type="checkbox">Force indices</label>
 
 			<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>

+ 8 - 35
examples/misc_exporter_obj.html
Wyświetl plik 

@@ -4,26 +4,9 @@
 
 		<title>three.js webgl - exporter - obj</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<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;
 
 				opacity : 0.8;
 
 				width : 80%;
 
@@ -37,27 +20,17 @@
 
 				overflow : auto;
 
 				z-index: 100;
 
 			}
 
-
 
-			span.link {
 
-				color: skyblue;
 
-				cursor: pointer;
 
-				text-decoration : underline;
 
-			}
 
-
 
-			a {
 
-				color: skyblue
 
-			}
 
 		</style>
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
 			<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>
 
 
 		<script src="../build/three.js"></script>

+ 1 - 21
examples/misc_exporter_stl.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - exporter - stl</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				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>
 
 	<body>
 
 		<div id="info">

+ 1 - 22
examples/misc_fps.html
Wyświetl plik 

@@ -4,28 +4,7 @@
 
 		<title>three.js - platformer demo</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: 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>
 
 	<body>

+ 5 - 17
examples/misc_lookat.html
Wyświetl plik 

@@ -4,32 +4,20 @@
 
 		<title>three.js misc - lookAt</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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 {
 
-
 
-				color: #0080bb;
 
+				color: #08b;
 
 			}
 
 		</style>
 
 	</head>
 
 	<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>

+ 5 - 27
examples/raytracing_sandbox.html
Wyświetl plik 

@@ -4,19 +4,12 @@
 
 		<title>three.js - raytracing renderer with web workers</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				color: #ffffff;
 
-				margin: 0px;
 
-				padding: 0px;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
 		<script src="../build/three.js"></script>
 
 		<script src="js/renderers/RaytracingRenderer.js"></script>
 
-
 
+		<div id="info"></div>
 
 		<script>
 
 
 			var hash = location.hash ? location.hash.substring( 1 ) : '3';
 
@@ -232,16 +225,7 @@
 
 
 			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();
 
 
@@ -258,12 +242,7 @@
 
 					blockSize: 64
 
 				} );
 
 				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 () {
 
@@ -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>';
 
 
-
 
 			}
 
 
 			function rearrange() {

+ 2 - 20
examples/software_geometry_earth.html
Wyświetl plik 

@@ -4,29 +4,11 @@
 
 		<title>three.js software - geometry - earth</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>

+ 3 - 34
examples/software_lines_splines.html
Wyświetl plik 

@@ -4,44 +4,13 @@
 
 		<title>three.js software - lines - splines</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#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>
 
 	<body>
 
 
 		<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>
 
 
 		<script src="../build/three.js"></script>

+ 1 - 20
examples/software_sandbox.html
Wyświetl plik 

@@ -4,26 +4,7 @@
 
 		<title>three.js - software renderer</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				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>
 
 	<body>

+ 4 - 22
examples/svg_lines.html
Wyświetl plik 

@@ -4,32 +4,14 @@
 
 		<title>three.js svg - lines</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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;
 
+				color: #08f;
 
 			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
+			svg {
 
+				display: block;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>

+ 3 - 4
examples/svg_sandbox.html
Wyświetl plik 

@@ -4,11 +4,10 @@
 
 		<title>three.js svg - sandbox</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
+			svg {
 
+				display: block;
 
 			}
 
 		</style>
 
 	</head>

+ 21 - 47
examples/webaudio_orientation.html
Wyświetl plik 

@@ -4,66 +4,40 @@
 
 		<title>three.js webaudio - orientation</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: absolute;
 
-				z-index: 1;
 
 				top: 0;
 
 				left: 0;
 
 				width: 100%;
 
-				height:100%;
 
+				height: 100%;
 
 				display: flex;
 
 				align-items: center;
 
 				justify-content: center;
 
 				opacity: 1;
 
 				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>
 
 
 		<script src="../build/three.js"></script>
 
@@ -82,12 +56,12 @@
 
 	<div id="overlay">
 
 		<div>
 
 			<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 id="container"></div>
 
 	<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>
 
 	</div>

+ 21 - 45
examples/webaudio_sandbox.html
Wyświetl plik 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - sandbox</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: absolute;
 
 				z-index: 1;
 
@@ -45,35 +21,35 @@
 
 				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>
 
 	</head>
 
 	<body>
 
 		<div id="overlay">
 
 			<div>
 
 				<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 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>,
 
 			<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/>

+ 19 - 44
examples/webaudio_timing.html
Wyświetl plik 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - timing</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: absolute;
 
 				z-index: 1;
 
@@ -45,25 +21,24 @@
 
 				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>
 
 
 		<script src="../build/three.js"></script>
 
@@ -76,12 +51,12 @@
 
 	<div id="overlay">
 
 		<div>
 
 			<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 id="container"></div>
 
 	<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>
 
 	</div>

+ 21 - 46
examples/webaudio_visualizer.html
Wyświetl plik 

@@ -4,32 +4,8 @@
 
 		<title>three.js webaudio - visualizer</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: absolute;
 
 				z-index: 1;
 
@@ -45,25 +21,24 @@
 
 				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>
 
 
 		<script src="../build/three.js"></script>
 
@@ -108,12 +83,12 @@
 
 		<div id="overlay">
 
 			<div>
 
 				<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 id="container"></div>
 
 		<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>
 
 		</div>

+ 1 - 22
examples/webgl2_loader_gltf.html
Wyświetl plik 

@@ -4,28 +4,7 @@
 
 		<title>three.js webgl - glTF loader (module version)</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				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>
 
 
 	<body>

+ 1 - 23
examples/webgl2_materials_texture2darray.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - 2D texture array</title>
 
 		<meta charset="UTF-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#000;
 
-				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>
 
 	<script id="vs" type="x-shader/x-vertex">
 
 	#version 300 es

+ 1 - 34
examples/webgl2_materials_texture3d.html
Wyświetl plik 

@@ -4,40 +4,7 @@
 
 	<title>three.js webgl - volume rendering example</title>
 
 	<meta charset="utf-8">
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-	<style>
 
-		body {
 
-			font-family: Monospace;
 
-			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>
 
 
 <body>

+ 17 - 30
examples/webgl2_multisampled_renderbuffers.html
Wyświetl plik 

@@ -4,35 +4,22 @@
 
 		<title>three.js WebGL 2 - Multisampled Renderbuffers</title>
 
 		<meta charset="UTF-8">
 
 		<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>
 
-			html, body {
 
-				height: 100%;
 
-			}
 
-
 
 			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 {
 
+				position: absolute;
 
+				top: 80px;
 
 				width: 100%;
 
-				height: calc(100% - 80px);
 
+				bottom: 0px;
 
 			}
 
 		</style>
 
 	</head>
 
@@ -74,7 +61,7 @@
 
 
 				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;
 
 
 				scene = new THREE.Scene();
 
@@ -120,7 +107,7 @@
 
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
 				renderer.autoClear = false;
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( container.offsetWidth, container.offsetHeight );
 
 				container.appendChild( renderer.domElement );
 
 
 				//
 
@@ -156,12 +143,12 @@
 
 
 			function onWindowResize() {
 
 
-				camera.aspect = ( window.innerWidth * 0.5 ) / window.innerHeight;
 
+				camera.aspect = ( container.offsetWidth * 0.5 ) / container.offsetHeight;
 
 				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 );
 
 
-				var halfWidth = window.innerWidth / 2;
 
+				var halfWidth = container.offsetWidth / 2;
 
 
 				group.rotation.y += clock.getDelta() * 0.1;
 
 
-				renderer.setViewport( 0, 0, halfWidth, window.innerHeight );
 
+				renderer.setViewport( 0, 0, halfWidth, container.offsetHeight );
 
 
 				composer1.render();
 
 
-				renderer.setViewport( halfWidth, 0, halfWidth, window.innerHeight );
 
+				renderer.setViewport( halfWidth, 0, halfWidth, container.offsetHeight );
 
 
 				composer2.render();

+ 2 - 28
examples/webgl2_sandbox.html
Wyświetl plik 

@@ -4,37 +4,11 @@
 
 		<title>three.js - webgl2 sandbox</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background: #000;
 
-				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>
 
 
 	<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">

+ 3 - 15
examples/webgl_animation_cloth.html
Wyświetl plik 

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

+ 7 - 22
examples/webgl_animation_keyframes.html
Wyświetl plik 

@@ -4,26 +4,13 @@
 
 		<title>three.js webgl - animation - keyframes</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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 {
 
 				color: #2983ff;
 
 			}
 
@@ -35,11 +22,9 @@
 
 		<div id="container"></div>
 
 
 		<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>
 
 
 		<script src="../build/three.js"></script>

+ 3 - 10
examples/webgl_animation_multiple.html
Wyświetl plik 

@@ -4,20 +4,13 @@
 
 		<title>Multiple animated objects</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 	<body>
 
 		<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>.
 
 		</div>

+ 4 - 17
examples/webgl_animation_skinning_blending.html
Wyświetl plik 

@@ -4,23 +4,10 @@
 
 		<title>three.js webgl - animation - skinning</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-				color: #ff0000;
 
+				color: #f00;
 
 			}
 
 			.ac {  /* prevent dat-gui from being selected */
 
 				-webkit-user-select: none;
 
@@ -41,8 +28,8 @@
 
 		<div id="container"></div>
 
 		<div id="info">
 
 			<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>
 
 
 		<script src="../build/three.js"></script>

+ 9 - 24
examples/webgl_animation_skinning_morph.html
Wyświetl plik 

@@ -4,45 +4,30 @@
 
 		<title>three.js webgl - skinning and morphing</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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;
 
 				margin-left: auto;
 
 				margin-right: auto;
 
 				padding: 0 2em;
 
 			}
 
-			#info a {
 
-				color: #2fa1d6;
 
-				font-weight: bold;
 
-			}
 
-			.dg.ac {
 
-				z-index: 999 !important;
 
-			}
 
 		</style>
 
 	</head>
 
 
 	<body>
 
 		<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>
 
-				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>
 
 			Model by
 
 			<a href="https://www.patreon.com/quaternius" target="_blank" rel="noopener">Tomás Laulhé</a>,

+ 1 - 23
examples/webgl_buffergeometry.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - buffergeometry</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 6 - 17
examples/webgl_buffergeometry_constructed_from_geometry.html
Wyświetl plik 

@@ -4,24 +4,10 @@
 
 		<title>three.js webgl - buffer geometry constructed from geometry</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
 		</style>
 
 		<script src="../build/three.js"></script>
 
@@ -30,7 +16,10 @@
 
 		<script src="js/WebGL.js"></script>
 
 	</head>
 
 	<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>

+ 1 - 22
examples/webgl_buffergeometry_custom_attributes_particles.html
Wyświetl plik 

@@ -4,29 +4,8 @@
 
 		<title>three.js webgl - buffer geometry custom attributes - particles</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
-
 
 	<body>
 
 		<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>

+ 5 - 21
examples/webgl_buffergeometry_drawcalls.html
Wyświetl plik 

@@ -4,35 +4,19 @@
 
 		<title>three.js webgl - buffergeometry - lines drawcalls</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>
 
 
 		<div id="container"></div>
 
 		<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>
 
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
@@ -113,7 +97,7 @@
 
 				scene.add( group );
 
 
 				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.transparent = true;
 
 				group.add( helper );

+ 6 - 31
examples/webgl_buffergeometry_indexed.html
Wyświetl plik 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - indexed</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<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 ) );
 
 
 				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 );

+ 3 - 25
examples/webgl_buffergeometry_instancing.html
Wyświetl plik 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - instancing test (single triangle)</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}

+ 3 - 21
examples/webgl_buffergeometry_instancing2.html
Wyświetl plik 

@@ -4,33 +4,15 @@
 
 	<title>three.js webgl - instancing test (meshes)</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}

+ 4 - 26
examples/webgl_buffergeometry_instancing_billboards.html
Wyświetl plik 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - instanced particles - billboards - colors</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}
 
@@ -44,7 +22,7 @@
 
 
 	<div id="info">
 
 		<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>
 
 
 	<script src="../build/three.js"></script>

+ 3 - 25
examples/webgl_buffergeometry_instancing_dynamic.html
Wyświetl plik 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - indexed instancing (single box), dynamic updates</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}

+ 4 - 26
examples/webgl_buffergeometry_instancing_interleaved_dynamic.html
Wyświetl plik 

@@ -4,37 +4,15 @@
 
 	<title>three.js webgl - indexed instancing (single box), interleaved buffers, dynamic updates</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
-		#webglmessage a {
 
-			color: #da0;
 
-		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}
 
@@ -44,7 +22,7 @@
 
 
 	<div id="container"></div>
 
 	<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>

+ 3 - 21
examples/webgl_buffergeometry_instancing_lambert.html
Wyświetl plik 

@@ -4,33 +4,15 @@
 
 	<title>three.js webgl - instancing - lambert shader</title>
 
 	<meta charset="utf-8">
 
 	<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>
 
-		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;
 
+			color: #08f;
 
 		}
 
-
 
 		#notSupported {
 
 			width: 50%;
 
 			margin: auto;
 
-			border: 2px red solid;
 
+			background-color: #f00;
 
 			margin-top: 20px;
 
 			padding: 10px;
 
 		}

+ 2 - 19
examples/webgl_buffergeometry_lines.html
Wyświetl plik 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - lines</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>

+ 2 - 19
examples/webgl_buffergeometry_lines_indexed.html
Wyświetl plik 

@@ -4,28 +4,11 @@
 
 		<title>three.js webgl - buffergeometry - lines - indexed</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>

+ 4 - 15
examples/webgl_buffergeometry_morphtargets.html
Wyświetl plik 

@@ -4,29 +4,18 @@
 
 		<title>three.js webgl - buffergeometry - morph targets</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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>
 
 	</head>
 
 
 	<body>
 
 		<div id="container"></div>
 
 		<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>
 
 		</div>

+ 2 - 23
examples/webgl_buffergeometry_points.html
Wyświetl plik 

@@ -1,31 +1,10 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl - buffergeometry [particles]</title>
 
+		<title>three.js webgl - buffergeometry - particles</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 2 - 23
examples/webgl_buffergeometry_points_interleaved.html
Wyświetl plik 

@@ -1,31 +1,10 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl - buffergeometry [particles]</title>
 
+		<title>three.js webgl - buffergeometry - particles</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 1 - 25
examples/webgl_buffergeometry_rawshader.html
Wyświetl plik 

@@ -4,31 +4,7 @@
 
 		<title>three.js webgl - raw shader</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 2 - 22
examples/webgl_buffergeometry_selective_draw.html
Wyświetl plik 

@@ -4,28 +4,8 @@
 
 	<title>three.js webgl - buffergeometry - selective - draw</title>
 
 	<meta charset="utf-8">
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-	<style>
 
-	body {
 
-		color: #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="js/libs/stats.min.js"></script>
 
 	<script src="js/WebGL.js"></script>

+ 1 - 23
examples/webgl_buffergeometry_uint.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - buffergeometry - uint</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 5 - 18
examples/webgl_camera.html
Wyświetl plik 

@@ -4,27 +4,14 @@
 
 		<title>three.js webgl - cameras</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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>
 
 	</head>
 
 	<body>

+ 1 - 7
examples/webgl_camera_array.html
Wyświetl plik 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - arraycamera</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>

+ 6 - 10
examples/webgl_camera_cinematic.html
Wyświetl plik 

@@ -1,21 +1,17 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl-camera cinematic</title>
 
+		<title>three.js webgl - camera cinematic</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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>
 
 	</head>

+ 10 - 33
examples/webgl_camera_logarithmicdepthbuffer.html
Wyświetl plik 

@@ -4,33 +4,8 @@
 
 		<title>three.js webgl - cameras - logarithmic depth buffer</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: absolute;
 
 				bottom: 1em;
 
@@ -40,24 +15,27 @@
 
 				display: block;
 
 				text-align: center;
 
 			}
 
+
 
 			#container {
 
-				white-space: nowrap;
 
+				display: flex;
 
 			}
 
+
 
 			#container_normal {
 
 				width: 50%;
 
 				display: inline-block;
 
 				position: relative;
 
-				overflow: hidden;
 
 			}
 
+
 
 			#container_logzbuf {
 
 				width: 50%;
 
 				display: inline-block;
 
 				position: relative;
 
-				overflow: hidden;
 
 			}
 
+
 
 			#renderer_border {
 
 				position: absolute;
 
 				top: 0;
 
+				left: 25%;
 
 				bottom: 0;
 
 				width: 2px;
 
 				z-index: 10;
 
@@ -71,15 +49,14 @@
 
 	<body>
 
 
 		<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>
 
 
 		<div id="info">
 
 			<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>
 
 
 		<script src="../build/three.js"></script>

+ 1 - 7
examples/webgl_clipping.html
Wyświetl plik 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipping planes</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>

+ 1 - 7
examples/webgl_clipping_advanced.html
Wyświetl plik 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipping planes</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>

+ 1 - 7
examples/webgl_clipping_intersection.html
Wyświetl plik 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - clipIntersection</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_lines.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [lines]</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles]</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points2.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles][billboards]</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 
 	<body>

+ 1 - 21
examples/webgl_custom_attributes_points3.html
Wyświetl plik 

@@ -4,27 +4,7 @@
 
 		<title>three.js webgl - custom attributes [particles][billboards][alphatest]</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 
 	<body>

+ 6 - 26
examples/webgl_decals.html
Wyświetl plik 

@@ -1,38 +1,18 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl - decals - Decal Splatter</title>
 
+		<title>three.js webgl - decal splatter</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#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>
 
 	<body>
 
 
 		<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="js/geometries/DecalGeometry.js"></script>

+ 2 - 31
examples/webgl_depth_texture.html
Wyświetl plik 

@@ -4,37 +4,8 @@
 
 		<title>three.js webgl - Depth Texture</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				margin: auto;
 
 				margin-top: 40px;
 
@@ -82,7 +53,7 @@
 
 	<body>
 
 		<canvas></canvas>
 
 		<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/>
 
 			Created by <a href="http://twitter.com/mattdesl" target="_blank" rel="noopener">@mattdesl</a>.

+ 5 - 30
examples/webgl_effects_anaglyph.html
Wyświetl plik 

@@ -4,41 +4,16 @@
 
 		<title>three.js webgl - effects - anaglyph</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#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>
 
-
 
 	<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="js/effects/AnaglyphEffect.js"></script>
 
-
 
 		<script src="js/WebGL.js"></script>
 
 
 		<script>

+ 1 - 25
examples/webgl_effects_ascii.html
Wyświetl plik 

@@ -4,31 +4,7 @@
 
 		<title>three.js webgl - effects - ascii</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				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>
 
 
 	<body>

+ 5 - 29
examples/webgl_effects_parallaxbarrier.html
Wyświetl plik 

@@ -4,41 +4,17 @@
 
 		<title>three.js webgl - effects - parallax barrier</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#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>
 
 
 	<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="js/effects/ParallaxBarrierEffect.js"></script>
 
-
 
 		<script src="js/WebGL.js"></script>
 
 
 		<script>

+ 75 - 110
examples/webgl_effects_peppersghost.html
Wyświetl plik 

@@ -1,161 +1,126 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-<head>
 
+	<head>
 
 		<title>three.js webgl - effects - peppers ghost</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-				body {
 
-						background: #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>

+ 1 - 26
examples/webgl_effects_stereo.html
Wyświetl plik 

@@ -4,32 +4,7 @@
 
 		<title>three.js webgl - effects - stereo</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#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>
 
 
 	<body>

+ 3 - 30
examples/webgl_fire.html
Wyświetl plik 

@@ -1,32 +1,10 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl - fire - texture</title>
 
+		<title>three.js webgl - fire</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#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="js/WebGL.js"></script>
 
@@ -38,12 +16,7 @@
 
 	<body>
 
 
 		<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>
 
 
 		<script>

+ 3 - 26
examples/webgl_framebuffer_texture.html
Wyświetl plik 

@@ -4,29 +4,8 @@
 
 		<title>three.js webgl - framebuffer - texture</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
-			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 {
 
 				position: fixed;
 
 				display: flex;
 
@@ -54,13 +33,11 @@
 
 	<body>
 
 
 		<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 id="overlay">
 
-			<div>
 
-			</div>
 
+			<div></div>
 
 		</div>
 
 
 		<script>

+ 4 - 25
examples/webgl_furnace_test.html
Wyświetl plik 

@@ -4,31 +4,10 @@
 
 		<title>three.js white furnace test</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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>
 
 
@@ -44,9 +23,9 @@
 
 		<div id="container">
 
 			<div id="info">
 
 				<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 />
 
-				<a href="https://jsantell.com/" target="_blank" rel="noopener">by Jordan Santell</a><br/><br/></div>
 
+			</div>
 
 		</div>
 
 
 		<script>

+ 1 - 23
examples/webgl_geometries.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - geometries</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 1 - 23
examples/webgl_geometries_parametric.html
Wyświetl plik 

@@ -4,29 +4,7 @@
 
 		<title>three.js webgl - parametric geometries</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #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>
 
 	<body>

+ 3 - 17
examples/webgl_geometry_colors.html
Wyświetl plik 

@@ -4,29 +4,15 @@
 
 		<title>three.js webgl - geometry - vertex colors</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
-				color: #808080;
 
-				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;
 
+				color: #444;
 
 			}
 
-
 
 			a {
 
-
 
-				color: #0080ff;
 
+				color: #08f;
 
 			}
 
-
 
 		</style>
 
 	</head>
 
 	<body>

+ 5 - 19
examples/webgl_geometry_colors_lookuptable.html
Wyświetl plik 

@@ -4,36 +4,22 @@
 
 		<title>three.js webgl - lookup table</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
-				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;
 
-
 
+				color: #444;
 
 			}
 
-
 
 			a {
 
 				color: red;
 
 			}
 
 		</style>
 
 	</head>
 
-
 
 	<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 id="container"></div>

+ 2 - 20
examples/webgl_geometry_convex.html
Wyświetl plik 

@@ -4,29 +4,11 @@
 
 		<title>three.js webgl - convex geometry</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				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>
 
 	<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="js/controls/OrbitControls.js"></script>

+ 1 - 7
examples/webgl_geometry_cube.html
Wyświetl plik 

@@ -4,13 +4,7 @@
 
 		<title>three.js webgl - geometry - cube</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>

+ 7 - 25
examples/webgl_geometry_dynamic.html
Wyświetl plik 

@@ -4,40 +4,22 @@
 
 		<title>three.js webgl - geometry - dynamic</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			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 {
 
-
 
-				color: yellow;
 
+				color: #08f;
 
 			}
 
-
 
-			#webglmessage {
 
-				background:rgb(0,0,50) !important;
 
-				color:#fff !important;
 
-			}
 
-
 
 		</style>
 
 	</head>
 
 	<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>

+ 1 - 3
examples/webgl_geometry_extrude_shapes.html
Wyświetl plik 

@@ -4,12 +4,10 @@
 
 		<title>three.js webgl - geometry - extrude shapes</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 			body {
 
-				font-family: Monospace;
 
 				background-color: #222;
 
-				margin: 0px;
 
-				overflow: hidden;
 
 			}
 
 			a {
 
 				color: #f80;

+ 6 - 25
examples/webgl_geometry_extrude_shapes2.html
Wyświetl plik 

@@ -1,39 +1,20 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<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 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>
 
-		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>
 
 	</head>
 
-
 
 	<body>
 
-
 
 		<div id="container"></div>
 
 		<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>
 
 
 		<script type="text/javascript" src="../build/three.js"></script>

+ 8 - 13
examples/webgl_geometry_extrude_splines.html
Wyświetl plik 

@@ -4,29 +4,24 @@
 
 		<title>three.js webgl - geometry - spline extrusion</title>
 
 		<meta charset="utf-8">
 
 		<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>
 
 			body {
 
-				font-family: Monospace;
 
 				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>
 
 	</head>
 
 	<body>
 
 
 		<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="js/controls/OrbitControls.js"></script>

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików