Trang chủ Khám phá Trợ giúp
Đăng nhập
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

Updated HTML of the rest of the examples.

Mr.doob 14 năm trước cách đây
mục cha
19d8261174
commit
bbb65a768c
76 tập tin đã thay đổi với 652 bổ sung và 570 xóa
Split View Hiển thị tình trạng sai khác
  1. 3 2
      examples/webgl_custom_attributes_particles.html
  2. 3 2
      examples/webgl_custom_attributes_particles2.html
  3. 3 2
      examples/webgl_custom_attributes_particles3.html
  4. 228 217
      examples/webgl_flycamera_earth.html
  5. 3 2
      examples/webgl_geometries.html
  6. 3 2
      examples/webgl_geometry_blenderexport_colors.html
  7. 3 2
      examples/webgl_geometry_colors.html
  8. 3 2
      examples/webgl_geometry_dynamic.html
  9. 3 2
      examples/webgl_geometry_hierarchy.html
  10. 3 2
      examples/webgl_geometry_hierarchy2.html
  11. 3 2
      examples/webgl_geometry_large_mesh.html
  12. 3 2
      examples/webgl_geometry_minecraft.html
  13. 3 2
      examples/webgl_geometry_minecraft_ao.html
  14. 3 3
      examples/webgl_geometry_shapes.html
  15. 3 2
      examples/webgl_geometry_terrain.html
  16. 3 2
      examples/webgl_geometry_terrain_fog.html
  17. 3 3
      examples/webgl_geometry_text.html
  18. 3 2
      examples/webgl_hdr.html
  19. 3 2
      examples/webgl_interactive_cubes.html
  20. 3 2
      examples/webgl_interactive_draggablecubes.html
  21. 3 2
      examples/webgl_interactive_voxelpainter.html
  22. 3 2
      examples/webgl_lights_pointlights.html
  23. 3 2
      examples/webgl_lines_colors.html
  24. 3 2
      examples/webgl_lines_cubes.html
  25. 3 2
      examples/webgl_lines_sphere.html
  26. 3 2
      examples/webgl_lines_splines.html
  27. 3 2
      examples/webgl_lod.html
  28. 3 2
      examples/webgl_lod_text.html
  29. 3 2
      examples/webgl_materials.html
  30. 3 2
      examples/webgl_materials_cars.html
  31. 3 2
      examples/webgl_materials_cars_anaglyph.html
  32. 3 2
      examples/webgl_materials_cars_camaro.html
  33. 3 2
      examples/webgl_materials_cars_camaro_crosseyed.html
  34. 3 2
      examples/webgl_materials_cubemap.html
  35. 3 2
      examples/webgl_materials_cubemap_balls_reflection.html
  36. 3 2
      examples/webgl_materials_cubemap_balls_reflection_anaglyph.html
  37. 3 2
      examples/webgl_materials_cubemap_balls_refraction.html
  38. 3 2
      examples/webgl_materials_cubemap_balls_refraction_crosseyed.html
  39. 3 2
      examples/webgl_materials_cubemap_escher.html
  40. 3 2
      examples/webgl_materials_cubemap_refraction.html
  41. 3 2
      examples/webgl_materials_grass.html
  42. 3 2
      examples/webgl_materials_normalmap.html
  43. 3 2
      examples/webgl_materials_normalmap2.html
  44. 3 2
      examples/webgl_materials_shaders.html
  45. 3 2
      examples/webgl_materials_shaders_fresnel.html
  46. 3 2
      examples/webgl_materials_skin.html
  47. 3 2
      examples/webgl_materials_texture_filters.html
  48. 3 2
      examples/webgl_materials_video.html
  49. 3 2
      examples/webgl_morphtargets.html
  50. 3 2
      examples/webgl_morphtargets_horse.html
  51. 3 2
      examples/webgl_multiple_canvases_complex.html
  52. 3 2
      examples/webgl_multiple_canvases_grid.html
  53. 3 2
      examples/webgl_objconvert_test.html
  54. 3 2
      examples/webgl_panorama_equirectangular.html
  55. 3 2
      examples/webgl_particles_billboards.html
  56. 3 2
      examples/webgl_particles_billboards_colors.html
  57. 3 2
      examples/webgl_particles_dynamic.html
  58. 3 2
      examples/webgl_particles_random.html
  59. 3 3
      examples/webgl_particles_shapes.html
  60. 3 2
      examples/webgl_particles_sprites.html
  61. 3 2
      examples/webgl_performance.html
  62. 3 2
      examples/webgl_postprocessing.html
  63. 3 2
      examples/webgl_postprocessing_dof.html
  64. 3 2
      examples/webgl_ribbons.html
  65. 3 2
      examples/webgl_rtt.html
  66. 3 2
      examples/webgl_sandbox.html
  67. 3 2
      examples/webgl_scene_test.html
  68. 3 2
      examples/webgl_scene_test_blender.html
  69. 3 2
      examples/webgl_shader.html
  70. 3 2
      examples/webgl_shader2.html
  71. 3 2
      examples/webgl_shader_lava.html
  72. 3 2
      examples/webgl_shadowmap.html
  73. 3 2
      examples/webgl_sprites.html
  74. 3 2
      examples/webgl_test_memory.html
  75. 202 202
      examples/webgl_trackballcamera_earth.html
  76. 3 2
      examples/webgl_utf8loader.html

+ 3 - 2
examples/webgl_custom_attributes_particles.html
Xem Tập Tin 

@@ -1,8 +1,9 @@
 
 <!doctype html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />
 
 		<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;

+ 3 - 2
examples/webgl_custom_attributes_particles2.html
Xem Tập Tin 

@@ -1,8 +1,9 @@
 
 <!doctype html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />
 
 		<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;

+ 3 - 2
examples/webgl_custom_attributes_particles3.html
Xem Tập Tin 

@@ -1,8 +1,9 @@
 
 <!doctype html>
 
-<html>
 
+<html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />
 
 		<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;

+ 228 - 217
examples/webgl_flycamera_earth.html
Xem Tập Tin 

@@ -1,332 +1,343 @@
 
-<!DOCTYPE html>
 
-<html>
 
-	<title>three.js webgl - fly camera - earth</title>
 
-	<style type="text/css">
 
-	body {
 
-		background:#000;
 
-		color: #eee;
 
-		padding:0;
 
-		margin:0;
 
-		font-weight:bold;
 
-		overflow:hidden;
 
+<!doctype html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - fly camera - earth</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;
 
+				color: #eee;
 
+				padding:0;
 
+				margin:0;
 
+				font-weight:bold;
 
+				overflow:hidden;
 
 
-		font-family:Monospace;
 
-		font-size:13px;
 
-		text-align:center;
 
-	}
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+			}
 
 
-	#info {
 
-		position: absolute;
 
-		top: 0px; width: 100%;
 
-		padding: 5px;
 
-		z-index:100;
 
-	}
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+				z-index:100;
 
+			}
 
 
-	a {
 
+			a {
 
 
-		color: #0080ff;
 
-	}
 
+				color: #0080ff;
 
+			}
 
 
-	b { color:orange }
 
+			b { color:orange }
 
+		</style>
 
 
-	</style>
 
+		<script src="../build/Three.js"></script>
 
 
-	<script src="../build/Three.js"></script>
 
+		<script src="js/ShaderExtras.js"></script>
 
 
-	<script src="js/ShaderExtras.js"></script>
 
+		<script src="js/postprocessing/EffectComposer.js"></script>
 
+		<script src="js/postprocessing/ShaderPass.js"></script>
 
+		<script src="js/postprocessing/MaskPass.js"></script>
 
+		<script src="js/postprocessing/RenderPass.js"></script>
 
+		<script src="js/postprocessing/FilmPass.js"></script>
 
 
-	<script src="js/postprocessing/EffectComposer.js"></script>
 
-	<script src="js/postprocessing/ShaderPass.js"></script>
 
-	<script src="js/postprocessing/MaskPass.js"></script>
 
-	<script src="js/postprocessing/RenderPass.js"></script>
 
-	<script src="js/postprocessing/FilmPass.js"></script>
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/RequestAnimationFrame.js"></script>
 
+		<script src="js/Stats.js"></script>
 
 
-	<script src="js/Detector.js"></script>
 
-	<script src="js/RequestAnimationFrame.js"></script>
 
-	<script src="js/Stats.js"></script>
 
+	</head>
 
 
-</head>
 
+	<body>
 
 
-<body>
 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [fly camera]<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>
 
 
-<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [fly camera]<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>
 
+		<script>
 
 
-<script>
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			var radius = 6371;
 
+			var tilt = 0.41;
 
+			var rotationSpeed = 0.02;
 
 
-	var radius = 6371;
 
-	var tilt = 0.41;
 
-	var rotationSpeed = 0.02;
 
+			var cloudsScale = 1.005;
 
+			var moonScale = 0.23;
 
 
-	var cloudsScale = 1.005;
 
-	var moonScale = 0.23;
 
+			var MARGIN = 0;
 
+			var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
 
+			var SCREEN_WIDTH  = window.innerWidth;
 
 
-	var MARGIN = 0;
 
-	var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
 
-	var SCREEN_WIDTH  = window.innerWidth;
 
+			var container, stats;
 
+			var camera, scene, sceneCube, renderer;
 
+			var geometry, meshPlanet, meshClouds, meshMoon;
 
+			var dirLight, pointLight, ambientLight;
 
+			var lastUpdate = new Date().getTime();
 
 
-	var container, stats;
 
-	var camera, scene, sceneCube, renderer;
 
-	var geometry, meshPlanet, meshClouds, meshMoon;
 
-	var dirLight, pointLight, ambientLight;
 
-	var lastUpdate = new Date().getTime();
 
+			var delta, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
 
 
-	var delta, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
 
+			init();
 
+			animate();
 
 
-	init();
 
-	animate();
 
+			function init() {
 
 
-	function init() {
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
-		container = document.createElement( 'div' );
 
-        document.body.appendChild( container );
 
+				camera = new THREE.FlyCamera({
 
 
-        camera = new THREE.FlyCamera({
 
+						fov: 25,
 
+						aspect: SCREEN_WIDTH / SCREEN_HEIGHT,
 
+						movementSpeed: 1000,
 
+						domElement: container,
 
+						rollSpeed: Math.PI / 24,
 
+						autoForward: false,
 
+						dragToLook: false,
 
+						near: 50,
 
+						far: 1e7
 
 
-			fov: 25,
 
-			aspect: SCREEN_WIDTH / SCREEN_HEIGHT,
 
-			movementSpeed: 1000,
 
-			domElement: container,
 
-			rollSpeed: Math.PI / 24,
 
-			autoForward: false,
 
-			dragToLook: false,
 
-			near: 50,
 
-			far: 1e7
 
+				});
 
 
-        });
 
+				camera.position.z = radius * 5;
 
 
-        camera.position.z = radius * 5;
 
+				scene = new THREE.Scene();
 
+				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
 
 
-        scene = new THREE.Scene();
 
-		scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
 
+				dirLight = new THREE.DirectionalLight( 0xffffff );
 
+				dirLight.position.set( -1, 0, 1 );
 
+				dirLight.position.normalize();
 
+				scene.add( dirLight );
 
 
-        dirLight = new THREE.DirectionalLight( 0xffffff );
 
-        dirLight.position.set( -1, 0, 1 );
 
-        dirLight.position.normalize();
 
-        scene.add( dirLight );
 
+				ambientLight = new THREE.AmbientLight( 0x000000 );
 
+				scene.add( ambientLight );
 
 
-		ambientLight = new THREE.AmbientLight( 0x000000 );
 
-		scene.add( ambientLight );
 
+				var planetTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" );
 
+				var cloudsTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" );
 
+				var normalTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" );
 
+				var specularTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" );
 
 
-		var planetTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" );
 
-		var cloudsTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" );
 
-		var normalTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" );
 
-		var specularTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" );
 
+				var moonTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
 
-		var moonTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
+				var shader = THREE.ShaderUtils.lib[ "normal" ];
 
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 
-		var shader = THREE.ShaderUtils.lib[ "normal" ];
 
-		var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+				uniforms[ "tNormal" ].texture = normalTexture;
 
+				uniforms[ "uNormalScale" ].value = 0.85;
 
 
-		uniforms[ "tNormal" ].texture = normalTexture;
 
-		uniforms[ "uNormalScale" ].value = 0.85;
 
+				uniforms[ "tDiffuse" ].texture = planetTexture;
 
+				uniforms[ "tSpecular" ].texture = specularTexture;
 
 
-		uniforms[ "tDiffuse" ].texture = planetTexture;
 
-		uniforms[ "tSpecular" ].texture = specularTexture;
 
+				uniforms[ "enableAO" ].value = false;
 
+				uniforms[ "enableDiffuse" ].value = true;
 
+				uniforms[ "enableSpecular" ].value = true;
 
 
-		uniforms[ "enableAO" ].value = false;
 
-		uniforms[ "enableDiffuse" ].value = true;
 
-		uniforms[ "enableSpecular" ].value = true;
 
+				uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
 
+				uniforms[ "uSpecularColor" ].value.setHex( 0xaaaaaa );
 
+				uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
 
 
-		uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
 
-		uniforms[ "uSpecularColor" ].value.setHex( 0xaaaaaa );
 
-		uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
 
+				uniforms[ "uShininess" ].value = 30;
 
 
-		uniforms[ "uShininess" ].value = 30;
 
+				var parameters = {
 
+				
+					fragmentShader: shader.fragmentShader,
 
+					vertexShader: shader.vertexShader,
 
+					uniforms: uniforms,
 
+					lights: true,
 
+					fog: true
 
 
-		var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: true };
 
-		var materialNormalMap = new THREE.ShaderMaterial( parameters );
 
+				};
 
 
-		// planet
 
+				var materialNormalMap = new THREE.ShaderMaterial( parameters );
 
 
-        geometry = new THREE.SphereGeometry( radius, 100, 50 );
 
-		geometry.computeTangents();
 
+				// planet
 
 
-        meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 
-		meshPlanet.rotation.y = 1.3;
 
-		meshPlanet.rotation.z = tilt;
 
-        scene.add( meshPlanet );
 
+				geometry = new THREE.SphereGeometry( radius, 100, 50 );
 
+				geometry.computeTangents();
 
 
-		// clouds
 
+				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 
+				meshPlanet.rotation.y = 1.3;
 
+				meshPlanet.rotation.z = tilt;
 
+				scene.add( meshPlanet );
 
 
-        var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent: true } );
 
+				// clouds
 
 
-		meshClouds = new THREE.Mesh( geometry, materialClouds );
 
-		meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 
-		meshClouds.rotation.z = tilt;
 
-        scene.add( meshClouds );
 
+				var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent: true } );
 
 
-		// moon
 
+				meshClouds = new THREE.Mesh( geometry, materialClouds );
 
+				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 
+				meshClouds.rotation.z = tilt;
 
+				scene.add( meshClouds );
 
 
-        var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
 
+				// moon
 
 
-        meshMoon = new THREE.Mesh( geometry, materialMoon );
 
-		meshMoon.position.set( radius * 5, 0, 0 );
 
-		meshMoon.scale.set( moonScale, moonScale, moonScale );
 
-        scene.add( meshMoon );
 
+				var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
 
 
-		// stars
 
+				meshMoon = new THREE.Mesh( geometry, materialMoon );
 
+				meshMoon.position.set( radius * 5, 0, 0 );
 
+				meshMoon.scale.set( moonScale, moonScale, moonScale );
 
+				scene.add( meshMoon );
 
 
-		var i, r = radius,
 
-			starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ];
 
+				// stars
 
 
-		for ( i = 0; i < 250; i ++ ) {
 
+				var i, r = radius, starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ];
 
 
-			vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
-			vector1.multiplyScalar( r );
 
+				for ( i = 0; i < 250; i ++ ) {
 
 
-			starsGeometry[ 0 ].vertices.push( new THREE.Vertex( vector1 ) );
 
+					vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
+					vector1.multiplyScalar( r );
 
 
-		}
 
+					starsGeometry[ 0 ].vertices.push( new THREE.Vertex( vector1 ) );
 
 
-		for ( i = 0; i < 1500; ++i ) {
 
+				}
 
 
-			vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
-			vector1.multiplyScalar( r );
 
+				for ( i = 0; i < 1500; ++i ) {
 
 
-			starsGeometry[ 1 ].vertices.push( new THREE.Vertex( vector1 ) );
 
+					vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
+					vector1.multiplyScalar( r );
 
 
-		}
 
+					starsGeometry[ 1 ].vertices.push( new THREE.Vertex( vector1 ) );
 
 
-		var stars;
 
-		var starsMaterials = [ new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 
-							   new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 
-							   new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
 
-							   new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
 
-							   new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
 
-							   new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 
-							];
 
+				}
 
 
-		for ( i = 10; i < 30; i ++ ) {
 
+				var stars;
 
+				var starsMaterials = [
 
+					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 
+				];
 
 
-			stars = new THREE.ParticleSystem( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
 
+				for ( i = 10; i < 30; i ++ ) {
 
 
-			stars.rotation.x = Math.random() * 6;
 
-			stars.rotation.y = Math.random() * 6;
 
-			stars.rotation.z = Math.random() * 6;
 
+					stars = new THREE.ParticleSystem( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
 
 
-			s = i * 10;
 
-			stars.scale.set( s, s, s );
 
+					stars.rotation.x = Math.random() * 6;
 
+					stars.rotation.y = Math.random() * 6;
 
+					stars.rotation.z = Math.random() * 6;
 
 
-			stars.matrixAutoUpdate = false;
 
-			stars.updateMatrix();
 
+					s = i * 10;
 
+					stars.scale.set( s, s, s );
 
 
-			scene.add( stars );
 
+					stars.matrixAutoUpdate = false;
 
+					stars.updateMatrix();
 
 
-		}
 
+					scene.add( stars );
 
 
-        renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
 
-        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-        renderer.sortObjects = false;
 
+				}
 
 
-		renderer.autoClear = false;
 
+				renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				renderer.sortObjects = false;
 
 
-        container.appendChild( renderer.domElement );
 
+				renderer.autoClear = false;
 
 
-        stats = new Stats();
 
-        stats.domElement.style.position = 'absolute';
 
-        stats.domElement.style.top = '0px';
 
-        stats.domElement.style.zIndex = 100;
 
-        container.appendChild( stats.domElement );
 
+				container.appendChild( renderer.domElement );
 
 
-		window.addEventListener( 'resize', onWindowResize, false );
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				stats.domElement.style.zIndex = 100;
 
+				container.appendChild( stats.domElement );
 
 
-		// postprocessing
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-		var renderModel = new THREE.RenderPass( scene, camera );
 
-		var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
 
+				// postprocessing
 
 
-		effectFilm.renderToScreen = true;
 
+				var renderModel = new THREE.RenderPass( scene, camera );
 
+				var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
 
 
-		composer = new THREE.EffectComposer( renderer );
 
+				effectFilm.renderToScreen = true;
 
 
-		composer.addPass( renderModel );
 
-		composer.addPass( effectFilm );
 
+				composer = new THREE.EffectComposer( renderer );
 
 
-	};
 
+				composer.addPass( renderModel );
 
+				composer.addPass( effectFilm );
 
 
-	function onWindowResize( event ) {
 
+			};
 
 
-		SCREEN_HEIGHT = window.innerHeight;
 
-		SCREEN_WIDTH  = window.innerWidth;
 
+			function onWindowResize( event ) {
 
 
-		renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				SCREEN_HEIGHT = window.innerHeight;
 
+				SCREEN_WIDTH  = window.innerWidth;
 
 
-		camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
-		camera.updateProjectionMatrix();
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 
-		composer.reset();
 
+				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
+				camera.updateProjectionMatrix();
 
 
-	}
 
+				composer.reset();
 
 
-	function cap_bottom( val, bottom ) {
 
+			}
 
 
-		return val < bottom ? bottom : val;
 
+			function cap_bottom( val, bottom ) {
 
 
-	};
 
+				return val < bottom ? bottom : val;
 
 
+			};
 
 
-	function animate() {
 
 
-		requestAnimationFrame( animate );
 
+			function animate() {
 
 
-        render();
 
-        stats.update();
 
+				requestAnimationFrame( animate );
 
 
-	};
 
+				render();
 
+				stats.update();
 
 
+			};
 
 
-	function cap( val, bottom ) {
 
 
-		return val > bottom ? val : bottom;
 
+			function cap( val, bottom ) {
 
 
-	};
 
+				return val > bottom ? val : bottom;
 
 
-	function render() {
 
+			};
 
 
-		// rotate the planet and clouds
 
+			function render() {
 
 
-		delta = this.getFrametime();
 
+				// rotate the planet and clouds
 
 
-        meshPlanet.rotation.y += rotationSpeed * delta;
 
-		meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
 
+				delta = this.getFrametime();
 
 
-		// slow down as we approach the surface
 
+				meshPlanet.rotation.y += rotationSpeed * delta;
 
+				meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
 
 
-		dPlanet = camera.position.length();
 
+				// slow down as we approach the surface
 
 
-		dMoonVec.sub( camera.position, meshMoon.position );
 
-		dMoon = dMoonVec.length();
 
+				dPlanet = camera.position.length();
 
 
-		if ( dMoon < dPlanet ) {
 
+				dMoonVec.sub( camera.position, meshMoon.position );
 
+				dMoon = dMoonVec.length();
 
 
-			d = ( dMoon - radius * moonScale * 1.01 );
 
+				if ( dMoon < dPlanet ) {
 
 
-		} else {
 
+					d = ( dMoon - radius * moonScale * 1.01 );
 
 
-			d = ( dPlanet - radius * 1.01 );
 
+				} else {
 
 
-		}
 
+					d = ( dPlanet - radius * 1.01 );
 
 
-        camera.movementSpeed = 0.33 * d;
 
+				}
 
 
-		renderer.clear();
 
-		composer.render( delta );
 
+				camera.movementSpeed = 0.33 * d;
 
 
-	};
 
+				renderer.clear();
 
+				composer.render( delta );
 
 
-	function getFrametime() {
 
+			};
 
 
-        var now = new Date().getTime();
 
-        var tdiff = ( now - lastUpdate ) / 1000;
 
-        lastUpdate = now;
 
-        return tdiff;
 
+			function getFrametime() {
 
 
-	};
 
+				var now = new Date().getTime();
 
+				var tdiff = ( now - lastUpdate ) / 1000;
 
+				lastUpdate = now;
 
+				return tdiff;
 
 
-</script>
 
-</body>
 
+			};
 
+
 
+		</script>
 
+	</body>
 
 </html>

+ 3 - 2
examples/webgl_geometries.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometries</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_geometry_blenderexport_colors.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - io blender - vertex colors</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_geometry_colors.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - vertex colors</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #808080;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_geometry_dynamic.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - dynamic</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #61443e;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_geometry_hierarchy.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_geometry_hierarchy2.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_geometry_large_mesh.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_geometry_minecraft.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - minecraft</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #61443e;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_geometry_minecraft_ao.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - minecraft - ao</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #61443e;
 
 				font-family:Monospace;

+ 3 - 3
examples/webgl_geometry_shapes.html
Xem Tập Tin 

@@ -1,10 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js canvas - geometry - shapes</title>
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
-		<style type="text/css">
 
+		<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: #f0f0f0;

+ 3 - 2
examples/webgl_geometry_terrain.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - terrain</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #61443e;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_geometry_terrain_fog.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - terrain + fog</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #61443e;
 
 				font-family:Monospace;

+ 3 - 3
examples/webgl_geometry_text.html
Xem Tập Tin 

@@ -1,10 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - geometry - text</title>
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_hdr.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>

+<!doctype html>

 <html lang="en">

 	<head>

 		<title>three.js webgl - materials - HDR texture</title>

 		<meta charset="utf-8">

-		<style type="text/css">

+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

+		<style>

 		    body {

 			color: #000;

 			font-family:Monospace;

+ 3 - 2
examples/webgl_interactive_cubes.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - interactive cubes</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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: #f0f0f0;

+ 3 - 2
examples/webgl_interactive_draggablecubes.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - draggable cubes</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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: #f0f0f0;

+ 3 - 2
examples/webgl_interactive_voxelpainter.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - interactive - voxel painter</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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: #f0f0f0;

+ 3 - 2
examples/webgl_lights_pointlights.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_lines_colors.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - lines - cubes - colors</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_lines_cubes.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - lines - cubes</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_lines_sphere.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_lines_splines.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - lines - splines</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_lod.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_lod_text.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_materials_cars.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection [cars]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cars_anaglyph.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection [cars]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cars_camaro.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection [camaro]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cars_camaro_crosseyed.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection [camaro]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cubemap.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection / refraction [Walt]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cubemap_balls_reflection.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_cubemap_balls_reflection_anaglyph.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_cubemap_balls_refraction.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_cubemap_balls_refraction_crosseyed.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_cubemap_escher.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube reflection [Escher]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#fff;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_cubemap_refraction.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - cube refraction [Lucy]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_grass.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_normalmap.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_normalmap2.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - normal map [Lee Perry-Smith]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_shaders.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - shaders [Phong, Lambert]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_materials_shaders_fresnel.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_materials_skin.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - skin [Lee Perry-Smith]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#aaa;

+ 3 - 2
examples/webgl_materials_texture_filters.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - texture filtering</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #aaa;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_materials_video.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_morphtargets.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_morphtargets_horse.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - morph targets - horse</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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: #f0f0f0;

+ 3 - 2
examples/webgl_multiple_canvases_complex.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - multiple canvases - complex</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				color: #808080;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_multiple_canvases_grid.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - multiple canvases - grid</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			html, body {
 
 				color: #808080;
 
 				font-family:Monospace;

+ 3 - 2
examples/webgl_objconvert_test.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_panorama_equirectangular.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - equirectangular panorama demo</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_particles_billboards.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - particles - billboards</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_particles_billboards_colors.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - particles - billboards - colors</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_particles_dynamic.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
     <head>
 
         <title>three.js webgl - particles - dynamic - postprocessing</title>
 
         <meta charset="utf-8">
 
-        <style type="text/css">
 
+        <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;

+ 3 - 2
examples/webgl_particles_random.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - particles</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 3
examples/webgl_particles_shapes.html
Xem Tập Tin 

@@ -1,10 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - particles - shapes</title>
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_particles_sprites.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - particles - sprites</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_performance.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_postprocessing.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_postprocessing_dof.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - postprocessing - depth-of-field</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_ribbons.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - ribbons</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_rtt.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - render-to-texture</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_sandbox.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_scene_test.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_scene_test_blender.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - io - scene loader [blender]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
 			body {
 
 				background:#000;
 
 				color:#fff;

+ 3 - 2
examples/webgl_shader.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - shaders [Monjori]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_shader2.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - shaders [custom]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_shader_lava.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - materials - shaders [lava]</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_shadowmap.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - shadow map</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;

+ 3 - 2
examples/webgl_sprites.html
Xem Tập Tin 

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

+ 3 - 2
examples/webgl_test_memory.html
Xem Tập Tin 

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

+ 202 - 202
examples/webgl_trackballcamera_earth.html
Xem Tập Tin 

@@ -1,299 +1,299 @@
 
-<!DOCTYPE html>
 
-<html>
 
-	<title>three.js webgl - trackball camera - earth</title>
 
+<!doctype html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - trackball camera - earth</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;
 
+				color: #EEE;
 
+				padding: 0;
 
+				margin: 0;
 
+				font-weight: bold;
 
+				overflow: hidden;
 
 
-	<style type="text/css">
 
+				font-family: Monospace;
 
+				font-size: 13px;
 
+				text-align: center;
 
+			}
 
 
-		body {
 
-			background: #000;
 
-			color: #EEE;
 
-			padding: 0;
 
-			margin: 0;
 
-			font-weight: bold;
 
-			overflow: hidden;
 
+			#info {
 
+				position: absolute;
 
+				top: 0px;
 
+				width: 100%;
 
+				padding: 5px;
 
+				z-index: 100;
 
+			}
 
 
-			font-family: Monospace;
 
-			font-size: 13px;
 
-			text-align: center;
 
-		}
 
+			a { color: green; }
 
+			b { color: green; }
 
+		</style>
 
 
-		#info {
 
-			position: absolute;
 
-			top: 0px;
 
-			width: 100%;
 
-			padding: 5px;
 
-			z-index: 100;
 
-		}
 
+		<script src="../build/Three.js"></script>
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/RequestAnimationFrame.js"></script>
 
+		<script src="js/Stats.js"></script>
 
 
-		a { color: green; }
 
-		b { color: green; }
 
+	</head>
 
 
-	</style>
 
+	<body>
 
 
-	<script src="../build/Three.js"></script>
 
-	<script src="js/Detector.js"></script>
 
-	<script src="js/RequestAnimationFrame.js"></script>
 
-	<script src="js/Stats.js"></script>
 
+		<div id="info">
 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
 
+			<b>MOVE</b> mouse &amp; press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
 
+		</div>
 
 
-</head>
 
+		<script>
 
 
-<body>
 
+			var radius = 6371,
 
+			tilt = 0.41,
 
+			rotationSpeed = 0.1,
 
 
-<div id="info">
 
-	<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
 
-	<b>MOVE</b> mouse &amp; press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
 
-</div>
 
+			cloudsScale = 1.005,
 
+			moonScale = 0.23,
 
 
-<script>
 
+			height = window.innerHeight,
 
+			width  = window.innerWidth,
 
 
-	var radius = 6371,
 
-	tilt = 0.41,
 
-	rotationSpeed = 0.1,
 
+			container, stats,
 
 
-	cloudsScale = 1.005,
 
-	moonScale = 0.23,
 
+			camera, scene, renderer,
 
+			geometry, meshPlanet, meshClouds, meshMoon,
 
+			dirLight, ambientLight,
 
 
-	height = window.innerHeight,
 
-	width  = window.innerWidth,
 
+			time = new Date().getTime();
 
 
-	container, stats,
 
+			window.onload = function() {
 
 
-	camera, scene, renderer,
 
-	geometry, meshPlanet, meshClouds, meshMoon,
 
-	dirLight, ambientLight,
 
+				if ( !Detector.webgl ) {
 
 
-	time = new Date().getTime();
 
+					Detector.addGetWebGLMessage();
 
+					return;
 
 
-	window.onload = function() {
 
+				}
 
 
-		if ( !Detector.webgl ) {
 
+				init();
 
+				animate();
 
 
-			Detector.addGetWebGLMessage();
 
-			return;
 
+			}
 
 
-		}
 
+			function init() {
 
 
-		init();
 
-		animate();
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
-	}
 
 
-	function init() {
 
+				scene = new THREE.Scene();
 
 
-		container = document.createElement( 'div' );
 
-		document.body.appendChild( container );
 
 
+				renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
 
+				renderer.setSize( width, height );
 
+				renderer.sortObjects = false;
 
+				renderer.autoClear = false;
 
+				container.appendChild( renderer.domElement );
 
 
-		scene = new THREE.Scene();
 
 
+				camera = new THREE.TrackballCamera({
 
 
-		renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
 
-		renderer.setSize( width, height );
 
-		renderer.sortObjects = false;
 
-		renderer.autoClear = false;
 
-		container.appendChild( renderer.domElement );
 
+					fov: 25,
 
+					aspect: width / height,
 
+					near: 50,
 
+					far: 1e7,
 
 
+					rotateSpeed: 1.0,
 
+					zoomSpeed: 1.2,
 
+					panSpeed: 0.2,
 
 
-		camera = new THREE.TrackballCamera({
 
+					noZoom: false,
 
+					noPan: false,
 
 
-			fov: 25,
 
-			aspect: width / height,
 
-			near: 50,
 
-			far: 1e7,
 
+					staticMoving: false,
 
+					dynamicDampingFactor: 0.3,
 
 
-			rotateSpeed: 1.0,
 
-			zoomSpeed: 1.2,
 
-			panSpeed: 0.2,
 
+					minDistance: radius * 1.1,
 
+					maxDistance: radius * 100,
 
 
-			noZoom: false,
 
-			noPan: false,
 
+					keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
 
 
-			staticMoving: false,
 
-			dynamicDampingFactor: 0.3,
 
+					domElement: renderer.domElement,
 
 
-			minDistance: radius * 1.1,
 
-			maxDistance: radius * 100,
 
+				});
 
 
-			keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
 
+				camera.position.z = radius * 7;
 
 
-			domElement: renderer.domElement,
 
 
-		});
 
+				dirLight = new THREE.DirectionalLight( 0xFFFFFF );
 
+				dirLight.position.set( -1, 0, 1 );
 
+				dirLight.position.normalize();
 
+				scene.add( dirLight );
 
 
-		camera.position.z = radius * 7;
 
+				var planetTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" ),
 
+				cloudsTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" ),
 
+				normalTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" ),
 
+				specularTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ),
 
+				moonTexture       = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
 
+				var shader = THREE.ShaderUtils.lib[ "normal" ],
 
+				uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 
-		dirLight = new THREE.DirectionalLight( 0xFFFFFF );
 
-		dirLight.position.set( -1, 0, 1 );
 
-		dirLight.position.normalize();
 
-		scene.add( dirLight );
 
+				uniforms[ "tNormal" ].texture = normalTexture;
 
+				uniforms[ "uNormalScale" ].value = 0.85;
 
 
-		var planetTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" ),
 
-		cloudsTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" ),
 
-		normalTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" ),
 
-		specularTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ),
 
-		moonTexture       = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
+				uniforms[ "tDiffuse" ].texture = planetTexture;
 
+				uniforms[ "tSpecular" ].texture = specularTexture;
 
 
-		var shader = THREE.ShaderUtils.lib[ "normal" ],
 
-		uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+				uniforms[ "enableAO" ].value = false;
 
+				uniforms[ "enableDiffuse" ].value = true;
 
+				uniforms[ "enableSpecular" ].value = true;
 
 
-		uniforms[ "tNormal" ].texture = normalTexture;
 
-		uniforms[ "uNormalScale" ].value = 0.85;
 
+				uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
 
+				uniforms[ "uSpecularColor" ].value.setHex( 0xaaaaaa );
 
+				uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
 
 
-		uniforms[ "tDiffuse" ].texture = planetTexture;
 
-		uniforms[ "tSpecular" ].texture = specularTexture;
 
+				uniforms[ "uShininess" ].value = 30;
 
 
-		uniforms[ "enableAO" ].value = false;
 
-		uniforms[ "enableDiffuse" ].value = true;
 
-		uniforms[ "enableSpecular" ].value = true;
 
+				var materialNormalMap = new THREE.ShaderMaterial({
 
+					fragmentShader: shader.fragmentShader,
 
+					vertexShader: shader.vertexShader,
 
+					uniforms: uniforms,
 
+					lights: true
 
+				});
 
 
-		uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
 
-		uniforms[ "uSpecularColor" ].value.setHex( 0xaaaaaa );
 
-		uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
 
 
-		uniforms[ "uShininess" ].value = 30;
 
+				// planet
 
 
-		var materialNormalMap = new THREE.ShaderMaterial({
 
-			fragmentShader: shader.fragmentShader,
 
-			vertexShader: shader.vertexShader,
 
-			uniforms: uniforms,
 
-			lights: true
 
-		});
 
+				geometry = new THREE.SphereGeometry( radius, 100, 50 );
 
+				geometry.computeTangents();
 
 
+				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 
+				meshPlanet.rotation.y = 1.3;
 
+				meshPlanet.rotation.z = tilt;
 
+				scene.add( meshPlanet );
 
 
-		// planet
 
 
-		geometry = new THREE.SphereGeometry( radius, 100, 50 );
 
-		geometry.computeTangents();
 
+				// clouds
 
 
-		meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 
-		meshPlanet.rotation.y = 1.3;
 
-		meshPlanet.rotation.z = tilt;
 
-		scene.add( meshPlanet );
 
+				var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );
 
 
+				meshClouds = new THREE.Mesh( geometry, materialClouds );
 
+				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 
+				meshClouds.rotation.z = tilt;
 
+				scene.add( meshClouds );
 
 
-		// clouds
 
 
-		var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );
 
+				// moon
 
 
-		meshClouds = new THREE.Mesh( geometry, materialClouds );
 
-		meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 
-		meshClouds.rotation.z = tilt;
 
-		scene.add( meshClouds );
 
+				var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
 
 
+				meshMoon = new THREE.Mesh( geometry, materialMoon );
 
+				meshMoon.position.set( radius * 5, 0, 0 );
 
+				meshMoon.scale.set( moonScale, moonScale, moonScale );
 
+				scene.add( meshMoon );
 
 
-		// moon
 
 
-		var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
 
+				// stars
 
 
-		meshMoon = new THREE.Mesh( geometry, materialMoon );
 
-		meshMoon.position.set( radius * 5, 0, 0 );
 
-		meshMoon.scale.set( moonScale, moonScale, moonScale );
 
-		scene.add( meshMoon );
 
+				var i,
 
+				vector,
 
+				starsGeometry = new THREE.Geometry();
 
 
+				for ( i = 0; i < 1500; i++ ) {
 
 
-		// stars
 
+					vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
+					vector.multiplyScalar( radius );
 
 
-		var i,
 
-		vector,
 
-		starsGeometry = new THREE.Geometry();
 
+					starsGeometry.vertices.push( new THREE.Vertex( vector ) );
 
 
-		for ( i = 0; i < 1500; i++ ) {
 
+				}
 
 
-			vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
-			vector.multiplyScalar( radius );
 
+				var stars,
 
+				starsMaterials = [
 
+					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
 
+					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 
+				];
 
 
-			starsGeometry.vertices.push( new THREE.Vertex( vector ) );
 
+				for ( i = 10; i < 30; i++ ) {
 
 
-		}
 
+					stars = new THREE.ParticleSystem( starsGeometry, starsMaterials[ i % 6 ] );
 
 
-		var stars,
 
-		starsMaterials = [
 
-			new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 
-			new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 
-			new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
 
-			new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
 
-			new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
 
-			new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 
-		];
 
+					stars.rotation.x = Math.random() * 6;
 
+					stars.rotation.y = Math.random() * 6;
 
+					stars.rotation.z = Math.random() * 6;
 
 
-		for ( i = 10; i < 30; i++ ) {
 
+					var s = i * 10;
 
+					stars.scale.set( s, s, s );
 
 
-			stars = new THREE.ParticleSystem( starsGeometry, starsMaterials[ i % 6 ] );
 
+					stars.matrixAutoUpdate = false;
 
+					stars.updateMatrix();
 
 
-			stars.rotation.x = Math.random() * 6;
 
-			stars.rotation.y = Math.random() * 6;
 
-			stars.rotation.z = Math.random() * 6;
 
+					scene.add( stars );
 
 
-			var s = i * 10;
 
-			stars.scale.set( s, s, s );
 
+				}
 
 
-			stars.matrixAutoUpdate = false;
 
-			stars.updateMatrix();
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				stats.domElement.style.zIndex = 100;
 
+				container.appendChild( stats.domElement );
 
 
-			scene.add( stars );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-		}
 
+			};
 
 
-		stats = new Stats();
 
-		stats.domElement.style.position = 'absolute';
 
-		stats.domElement.style.top = '0px';
 
-		stats.domElement.style.zIndex = 100;
 
-		container.appendChild( stats.domElement );
 
+			function onWindowResize( event ) {
 
 
-		window.addEventListener( 'resize', onWindowResize, false );
 
+				width = window.innerWidth;
 
+				height = window.innerHeight;
 
 
-	};
 
+				renderer.setSize( width, height );
 
 
-	function onWindowResize( event ) {
 
+				camera.aspect = width / height;
 
+				camera.updateProjectionMatrix();
 
 
-		width = window.innerWidth;
 
-		height = window.innerHeight;
 
+				camera.screen.width = width;
 
+				camera.screen.height = height;
 
 
-		renderer.setSize( width, height );
 
+				camera.radius = ( width + height ) / 4;
 
 
-		camera.aspect = width / height;
 
-		camera.updateProjectionMatrix();
 
+			};
 
 
-		camera.screen.width = width;
 
-		camera.screen.height = height;
 
+			function animate() {
 
 
-		camera.radius = ( width + height ) / 4;
 
+				requestAnimationFrame( animate );
 
 
-	};
 
+				render();
 
+				stats.update();
 
 
-	function animate() {
 
+			};
 
 
-		requestAnimationFrame( animate );
 
+			function render() {
 
 
-		render();
 
-		stats.update();
 
+				var t = new Date().getTime(),
 
+				dt = ( t - time ) / 1000;
 
+				time = t;
 
 
-	};
 
+				meshPlanet.rotation.y += rotationSpeed * dt;
 
+				meshClouds.rotation.y += 1.25 * rotationSpeed * dt;
 
 
-	function render() {
 
+				var angle = dt * rotationSpeed;
 
 
-		var t = new Date().getTime(),
 
-		dt = ( t - time ) / 1000;
 
-		time = t;
 
+				meshMoon.position = new THREE.Vector3(
 
+					Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
 
+					0,
 
+					Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
 
+				);
 
+				meshMoon.rotation.y -= angle;
 
 
-		meshPlanet.rotation.y += rotationSpeed * dt;
 
-		meshClouds.rotation.y += 1.25 * rotationSpeed * dt;
 
+				renderer.clear();
 
+				renderer.render( scene, camera );
 
 
-		var angle = dt * rotationSpeed;
 
+			};
 
 
-		meshMoon.position = new THREE.Vector3(
 
-			Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
 
-			0,
 
-			Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
 
-		);
 
-		meshMoon.rotation.y -= angle;
 
-
 
-		renderer.clear();
 
-		renderer.render( scene, camera );
 
-
 
-	};
 
-
 
-</script>
 
-</body>
 
+		</script>
 
+	</body>
 
 </html>

+ 3 - 2
examples/webgl_utf8loader.html
Xem Tập Tin 

@@ -1,9 +1,10 @@
 
-<!DOCTYPE HTML>
 
+<!doctype html>
 
 <html lang="en">
 
 	<head>
 
 		<title>three.js webgl - io - UTF8 loader</title>
 
 		<meta charset="utf-8">
 
-		<style type="text/css">
 
+		<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;