Browse Source

Synced with mrdoob's main branch.

alteredq 14 years ago
parent
commit
99dd3a411b
100 changed files with 8302 additions and 3239 deletions
  1. 64 38
      README.md
  2. 302 231
      build/Three.js
  3. 0 231
      build/ThreeDebug.js
  4. 142 0
      build/custom/ThreeCanvas.js
  5. 78 0
      build/custom/ThreeDOM.js
  6. 17 0
      build/custom/ThreeExtras.js
  7. 135 0
      build/custom/ThreeSVG.js
  8. 200 0
      build/custom/ThreeWebGL.js
  9. 18 6
      examples/canvas_camera_orthographic.html
  10. 17 8
      examples/canvas_geometry_birds.html
  11. 15 8
      examples/canvas_geometry_cube.html
  12. 17 9
      examples/canvas_geometry_earth.html
  13. 202 0
      examples/canvas_geometry_hierarchy.html
  14. 8 7
      examples/canvas_geometry_panorama.html
  15. 6 3
      examples/canvas_geometry_panorama_fisheye.html
  16. 34 25
      examples/canvas_geometry_terrain.html
  17. 18 6
      examples/canvas_interactive_cubes.html
  18. 17 5
      examples/canvas_interactive_cubes_tween.html
  19. 17 6
      examples/canvas_interactive_voxelpainter.html
  20. 18 6
      examples/canvas_lights_pointlights.html
  21. 18 6
      examples/canvas_lights_pointlights_smooth.html
  22. 20 17
      examples/canvas_lines.html
  23. 22 19
      examples/canvas_lines_sphere.html
  24. 14 7
      examples/canvas_materials.html
  25. 17 11
      examples/canvas_materials_depth.html
  26. 15 5
      examples/canvas_materials_normal.html
  27. 16 4
      examples/canvas_materials_reflection.html
  28. 55 36
      examples/canvas_materials_video.html
  29. 14 4
      examples/canvas_particles_floor.html
  30. 15 6
      examples/canvas_particles_random.html
  31. 21 8
      examples/canvas_particles_sprites.html
  32. 14 5
      examples/canvas_particles_waves.html
  33. 215 0
      examples/canvas_performance.html
  34. 46 17
      examples/canvas_sandbox.html
  35. 0 216
      examples/hdr.html
  36. 143 0
      examples/js/CameraControl.js
  37. 23 23
      examples/js/Detector.js
  38. 22 0
      examples/js/RequestAnimationFrame.js
  39. 115 0
      examples/js/ShaderExtras.js
  40. 170 0
      examples/js/gui/gui.css
  41. 1051 0
      examples/js/gui/gui.full.js
  42. 34 0
      examples/js/gui/gui.min.js
  43. 22 33
      examples/misc_lights_test.html
  44. 18 16
      examples/misc_materials_multimaterials.html
  45. 275 0
      examples/misc_sound.html
  46. 43 23
      examples/misc_uqbiquity_test.html
  47. 0 281
      examples/render_to_texture.html
  48. BIN
      examples/sounds/358232_j_s_song.mp3
  49. BIN
      examples/sounds/358232_j_s_song.ogg
  50. BIN
      examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3
  51. BIN
      examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg
  52. 8 0
      examples/sounds/readme.txt
  53. 36 26
      examples/webgl_geometry_blenderexport_colors.html
  54. 32 21
      examples/webgl_geometry_colors.html
  55. 35 130
      examples/webgl_geometry_dynamic.html
  56. 203 0
      examples/webgl_geometry_hierarchy.html
  57. 281 0
      examples/webgl_geometry_hierarchy2.html
  58. 64 60
      examples/webgl_geometry_large_mesh.html
  59. 25 116
      examples/webgl_geometry_minecraft.html
  60. 38 135
      examples/webgl_geometry_minecraft_ao.html
  61. 26 77
      examples/webgl_geometry_terrain.html
  62. 25 77
      examples/webgl_geometry_terrain2.html
  63. 29 89
      examples/webgl_geometry_terrain_fog.html
  64. 225 0
      examples/webgl_hdr.html
  65. 52 44
      examples/webgl_interactive_voxelpainter.html
  66. 36 30
      examples/webgl_lights_pointlights.html
  67. 94 91
      examples/webgl_lines_colors.html
  68. 51 49
      examples/webgl_lines_cubes.html
  69. 39 39
      examples/webgl_lines_sphere.html
  70. 32 21
      examples/webgl_materials.html
  71. 25 16
      examples/webgl_materials_cars.html
  72. 58 64
      examples/webgl_materials_cars_camaro.html
  73. 31 25
      examples/webgl_materials_cubemap.html
  74. 24 17
      examples/webgl_materials_cubemap_balls_reflection.html
  75. 22 11
      examples/webgl_materials_cubemap_balls_refraction.html
  76. 22 15
      examples/webgl_materials_cubemap_escher.html
  77. 31 23
      examples/webgl_materials_cubemap_refraction.html
  78. 20 9
      examples/webgl_materials_grass.html
  79. 56 44
      examples/webgl_materials_normalmap.html
  80. 21 9
      examples/webgl_materials_normalmap2.html
  81. 61 63
      examples/webgl_materials_shaders.html
  82. 28 16
      examples/webgl_materials_shaders_fresnel.html
  83. 376 0
      examples/webgl_materials_video.html
  84. 21 18
      examples/webgl_objconvert_test.html
  85. 49 38
      examples/webgl_particles_billboards.html
  86. 47 36
      examples/webgl_particles_billboards_colors.html
  87. 54 42
      examples/webgl_particles_random.html
  88. 53 41
      examples/webgl_particles_sprites.html
  89. 217 0
      examples/webgl_performance.html
  90. 158 149
      examples/webgl_postprocessing.html
  91. 336 0
      examples/webgl_postprocessing_dof.html
  92. 369 0
      examples/webgl_ribbons.html
  93. 286 0
      examples/webgl_rtt.html
  94. 47 31
      examples/webgl_sandbox.html
  95. 138 123
      examples/webgl_scene_test.html
  96. 43 33
      examples/webgl_shader.html
  97. 76 64
      examples/webgl_shader2.html
  98. 297 0
      src/animation/Animation.js
  99. 98 0
      src/animation/AnimationHandler.js
  100. 164 21
      src/cameras/Camera.js

+ 64 - 38
README.md

@@ -14,43 +14,49 @@ More? [#three.js on irc.freenode.net](http://webchat.freenode.net/?channels=thre
 
 
 #### WebGL (Context 3D) ####
 #### WebGL (Context 3D) ####
 
 
-[![shader](http://mrdoob.github.com/three.js/assets/examples/34_shader.png)](http://mrdoob.github.com/three.js/examples/shader.html)
-[![materials_normalmap2](http://mrdoob.github.com/three.js/assets/examples/33_materials_normalmap2.png)](http://mrdoob.github.com/three.js/examples/materials_normalmap2.html)
-[![materials_grass](http://mrdoob.github.com/three.js/assets/examples/32_materials_grass.png)](http://mrdoob.github.com/three.js/examples/materials_grass.html)
-[![materials_normalmap](http://mrdoob.github.com/three.js/assets/examples/31_materials_normalmap.png)](http://mrdoob.github.com/three.js/examples/materials_normalmap.html)
-[![geometry_terrain_gl](http://mrdoob.github.com/three.js/assets/examples/30_geometry_terrain_gl.png)](http://mrdoob.github.com/three.js/examples/geometry_terrain_gl.html)
-[![geometry_minecraft](http://mrdoob.github.com/three.js/assets/examples/29_geometry_minecraft.png)](http://mrdoob.github.com/three.js/examples/geometry_minecraft_ao.html)
-[![materials_shader_fresnel](http://mrdoob.github.com/three.js/assets/examples/28_materials_shaders_fresnel.png)](http://mrdoob.github.com/three.js/examples/materials_shaders_fresnel.html)
-[![materials_cars](http://mrdoob.github.com/three.js/assets/examples/25_materials_cars.png)](http://mrdoob.github.com/three.js/examples/materials_cars.html)
-[![materials_cubemap_refraction](http://mrdoob.github.com/three.js/assets/examples/18_materials_cubemap_refraction.png)](http://mrdoob.github.com/three.js/examples/materials_cubemap_refraction.html)
-[![materials_cubemap_balls_reflection](http://mrdoob.github.com/three.js/assets/examples/15_materials_cubemap_balls_reflection.png)](http://mrdoob.github.com/three.js/examples/materials_cubemap_balls_reflection.html)
-[![materials_cubemap_balls_refraction](http://mrdoob.github.com/three.js/assets/examples/16_materials_cubemap_balls_refraction.png)](http://mrdoob.github.com/three.js/examples/materials_cubemap_balls_refraction.html)
-[![materials_cubemap_escher](http://mrdoob.github.com/three.js/assets/examples/17_materials_cubemap_escher.png)](http://mrdoob.github.com/three.js/examples/materials_cubemap_escher.html)
-[![materials_cubemap](http://mrdoob.github.com/three.js/assets/examples/14_materials_cubemap.png)](http://mrdoob.github.com/three.js/examples/materials_cubemap.html)
-[![materials_gl](http://mrdoob.github.com/three.js/assets/examples/20_materials_gl.png)](http://mrdoob.github.com/three.js/examples/materials_gl.html)
-[![materials_shaders](http://mrdoob.github.com/three.js/assets/examples/23_materials_shaders.png)](http://mrdoob.github.com/three.js/examples/materials_shaders.html)
-[![large_mesh](http://mrdoob.github.com/three.js/assets/examples/12_large_mesh.png)](http://mrdoob.github.com/three.js/examples/geometry_large_mesh.html)
+[![video](http://mrdoob.github.com/three.js/assets/examples/40_video.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_video.html)
+[![dof](http://mrdoob.github.com/three.js/assets/examples/39_dof.png)](http://mrdoob.github.com/three.js/examples/webgl_postprocessing_dof.html)
+[![ribbon](http://mrdoob.github.com/three.js/assets/examples/38_ribbon.png)](http://mrdoob.github.com/three.js/examples/webgl_ribbons.html)
+[![vertexcolors](http://mrdoob.github.com/three.js/assets/examples/37_vertexcolors.png)](http://mrdoob.github.com/three.js/examples/webgl_geometry_colors.html)
+[![particles](http://mrdoob.github.com/three.js/assets/examples/36_particles.png)](http://mrdoob.github.com/three.js/examples/webgl_particles_billboards_colors.html)
+[![lines](http://mrdoob.github.com/three.js/assets/examples/35_lines.png)](http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html)
+[![shader](http://mrdoob.github.com/three.js/assets/examples/34_shader.png)](http://mrdoob.github.com/three.js/examples/webgl_shader.html)
+[![materials_normalmap2](http://mrdoob.github.com/three.js/assets/examples/33_materials_normalmap2.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap2.html)
+[![materials_grass](http://mrdoob.github.com/three.js/assets/examples/32_materials_grass.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_grass.html)
+[![materials_normalmap](http://mrdoob.github.com/three.js/assets/examples/31_materials_normalmap.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap.html)
+[![geometry_terrain_gl](http://mrdoob.github.com/three.js/assets/examples/30_geometry_terrain_gl.png)](http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html)
+[![geometry_minecraft](http://mrdoob.github.com/three.js/assets/examples/29_geometry_minecraft.png)](http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft_ao.html)
+[![materials_shader_fresnel](http://mrdoob.github.com/three.js/assets/examples/28_materials_shaders_fresnel.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_shaders_fresnel.html)
+[![materials_cars](http://mrdoob.github.com/three.js/assets/examples/25_materials_cars.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html)
+[![materials_cubemap_refraction](http://mrdoob.github.com/three.js/assets/examples/18_materials_cubemap_refraction.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_refraction.html)
+[![materials_cubemap_balls_reflection](http://mrdoob.github.com/three.js/assets/examples/15_materials_cubemap_balls_reflection.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_balls_reflection.html)
+[![materials_cubemap_balls_refraction](http://mrdoob.github.com/three.js/assets/examples/16_materials_cubemap_balls_refraction.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_balls_refraction.html)
+[![materials_cubemap_escher](http://mrdoob.github.com/three.js/assets/examples/17_materials_cubemap_escher.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_escher.html)
+[![materials_cubemap](http://mrdoob.github.com/three.js/assets/examples/14_materials_cubemap.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap.html)
+[![materials_gl](http://mrdoob.github.com/three.js/assets/examples/20_materials_gl.png)](http://mrdoob.github.com/three.js/examples/webgl_materials.html)
+[![materials_shaders](http://mrdoob.github.com/three.js/assets/examples/23_materials_shaders.png)](http://mrdoob.github.com/three.js/examples/webgl_materials_shaders.html)
+[![large_mesh](http://mrdoob.github.com/three.js/assets/examples/12_large_mesh.png)](http://mrdoob.github.com/three.js/examples/webgl_geometry_large_mesh.html)
 
 
 
 
 #### Canvas (Context 2D) ####
 #### Canvas (Context 2D) ####
 
 
-[![materials_reflection](http://mrdoob.github.com/three.js/assets/examples/27_materials_reflection.png)](http://mrdoob.github.com/three.js/examples/materials_reflection.html)
-[![materials](http://mrdoob.github.com/three.js/assets/examples/13_materials.png)](http://mrdoob.github.com/three.js/examples/materials.html)
-[![materials_depth](http://mrdoob.github.com/three.js/assets/examples/19_materials_depth.png)](http://mrdoob.github.com/three.js/examples/materials_depth.html)
-[![materials_normal](http://mrdoob.github.com/three.js/assets/examples/22_materials_normal.png)](http://mrdoob.github.com/three.js/examples/materials_normal.html)
-[![lights_pointlights](http://mrdoob.github.com/three.js/assets/examples/09_walthead.png)](http://mrdoob.github.com/three.js/examples/lights_pointlights.html)
-[![interactive_cubes](http://mrdoob.github.com/three.js/assets/examples/11_interactive.png)](http://mrdoob.github.com/three.js/examples/interactive_cubes.html)
-[![camera_ortographic](http://mrdoob.github.com/three.js/assets/examples/10_orthographic.png)](http://mrdoob.github.com/three.js/examples/camera_orthographic.html)
-[![geometry_birds](http://mrdoob.github.com/three.js/assets/examples/08_birds.png)](http://mrdoob.github.com/three.js/examples/geometry_birds.html)
-[![geometry_earth](http://mrdoob.github.com/three.js/assets/examples/07_earth.png)](http://mrdoob.github.com/three.js/examples/geometry_earth.html)
-[![geometry_terrain](http://mrdoob.github.com/three.js/assets/examples/06_terrain.png)](http://mrdoob.github.com/three.js/examples/geometry_terrain.html)
-[![materials_video](http://mrdoob.github.com/three.js/assets/examples/24_materials_video.png)](http://mrdoob.github.com/three.js/examples/materials_video.html)
-[![geometry_panorama](http://mrdoob.github.com/three.js/assets/examples/04_vr.png)](http://mrdoob.github.com/three.js/examples/geometry_panorama.html)
-[![geometry_cube](http://mrdoob.github.com/three.js/assets/examples/03_cube.png)](http://mrdoob.github.com/three.js/examples/geometry_cube.html)
-[![particles_sprites](http://mrdoob.github.com/three.js/assets/examples/26_particles_sprites.png)](http://mrdoob.github.com/three.js/examples/particles_sprites.html)
-[![particles_random](http://mrdoob.github.com/three.js/assets/examples/02_random.png)](http://mrdoob.github.com/three.js/examples/particles_random.html)
-[![particles_wave](http://mrdoob.github.com/three.js/assets/examples/01_waves.png)](http://mrdoob.github.com/three.js/examples/particles_waves.html)
-[![particles_floor](http://mrdoob.github.com/three.js/assets/examples/00_floor.png)](http://mrdoob.github.com/three.js/examples/particles_floor.html)
+[![materials_reflection](http://mrdoob.github.com/three.js/assets/examples/27_materials_reflection.png)](http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html)
+[![materials](http://mrdoob.github.com/three.js/assets/examples/13_materials.png)](http://mrdoob.github.com/three.js/examples/canvas_materials.html)
+[![materials_depth](http://mrdoob.github.com/three.js/assets/examples/19_materials_depth.png)](http://mrdoob.github.com/three.js/examples/canvas_materials_depth.html)
+[![materials_normal](http://mrdoob.github.com/three.js/assets/examples/22_materials_normal.png)](http://mrdoob.github.com/three.js/examples/canvas_materials_normal.html)
+[![lights_pointlights](http://mrdoob.github.com/three.js/assets/examples/09_walthead.png)](http://mrdoob.github.com/three.js/examples/canvas_lights_pointlights.html)
+[![interactive_cubes](http://mrdoob.github.com/three.js/assets/examples/11_interactive.png)](http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html)
+[![camera_ortographic](http://mrdoob.github.com/three.js/assets/examples/10_orthographic.png)](http://mrdoob.github.com/three.js/examples/canvas_camera_orthographic.html)
+[![geometry_birds](http://mrdoob.github.com/three.js/assets/examples/08_birds.png)](http://mrdoob.github.com/three.js/examples/canvas_geometry_birds.html)
+[![geometry_earth](http://mrdoob.github.com/three.js/assets/examples/07_earth.png)](http://mrdoob.github.com/three.js/examples/canvas_geometry_earth.html)
+[![geometry_terrain](http://mrdoob.github.com/three.js/assets/examples/06_terrain.png)](http://mrdoob.github.com/three.js/examples/canvas_geometry_terrain.html)
+[![materials_video](http://mrdoob.github.com/three.js/assets/examples/24_materials_video.png)](http://mrdoob.github.com/three.js/examples/canvas_materials_video.html)
+[![geometry_panorama](http://mrdoob.github.com/three.js/assets/examples/04_vr.png)](http://mrdoob.github.com/three.js/examples/canvas_geometry_panorama.html)
+[![geometry_cube](http://mrdoob.github.com/three.js/assets/examples/03_cube.png)](http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html)
+[![particles_sprites](http://mrdoob.github.com/three.js/assets/examples/26_particles_sprites.png)](http://mrdoob.github.com/three.js/examples/canvas_particles_sprites.html)
+[![particles_random](http://mrdoob.github.com/three.js/assets/examples/02_random.png)](http://mrdoob.github.com/three.js/examples/canvas_particles_random.html)
+[![particles_wave](http://mrdoob.github.com/three.js/assets/examples/01_waves.png)](http://mrdoob.github.com/three.js/examples/canvas_particles_waves.html)
+[![particles_floor](http://mrdoob.github.com/three.js/assets/examples/00_floor.png)](http://mrdoob.github.com/three.js/examples/canvas_particles_floor.html)
 
 
 
 
 ### Featured projects ###
 ### Featured projects ###
@@ -73,16 +79,16 @@ More? [#three.js on irc.freenode.net](http://webchat.freenode.net/?channels=thre
 
 
 Download the [minified library](http://mrdoob.github.com/three.js/build/Three.js) and include it in your html.
 Download the [minified library](http://mrdoob.github.com/three.js/build/Three.js) and include it in your html.
 
 
-	<script type="text/javascript" src="js/Three.js"></script>
+	<script src="js/Three.js"></script>
 
 
 This code creates a camera, then creates a scene object, adds a bunch of random particles in it, creates a &lt;canvas&gt; renderer and adds its viewport in the document.body element.
 This code creates a camera, then creates a scene object, adds a bunch of random particles in it, creates a &lt;canvas&gt; renderer and adds its viewport in the document.body element.
 
 
-	<script type="text/javascript">
+	<script>
 
 
 		var camera, scene, renderer;
 		var camera, scene, renderer;
 
 
 		init();
 		init();
-		setInterval( loop, 1000 / 60 );
+		animate();
 
 
 		function init() {
 		function init() {
 
 
@@ -91,7 +97,7 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 
 			scene = new THREE.Scene();
 			scene = new THREE.Scene();
 
 
-			for (var i = 0; i < 1000; i++) {
+			for ( var i = 0; i < 1000; i ++ ) {
 
 
 				var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0xffffff } ) );
 				var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0xffffff } ) );
 				particle.position.x = Math.random() * 2000 - 1000;
 				particle.position.x = Math.random() * 2000 - 1000;
@@ -109,7 +115,14 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 
 		}
 		}
 
 
-		function loop() {
+		function animate() {
+
+			requestAnimationFrame( animate );
+			render();
+
+		}
+
+		function render() {
 
 
 			renderer.render( scene, camera );
 			renderer.render( scene, camera );
 
 
@@ -120,6 +133,19 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 
 ### Change Log ###
 ### Change Log ###
 
 
+2011 02 26 - **r33** (190.451 KB, gzip: 46.278 KB)
+
+* Added `ParticleSystem` object to `WebGLRenderer` ([alteredq](http://github.com/alteredq))
+* Added `Line` support to `WebGLRenderer` ([alteredq](http://github.com/alteredq))
+* Added vertex colors support to `WebGLRenderer` ([alteredq](http://github.com/alteredq))
+* Added `Ribbon` object. ([alteredq](http://github.com/alteredq))
+* Added updateable textures support to `WebGLRenderer` ([alteredq](http://github.com/alteredq))
+* Added `Sound` object and `SoundRenderer`. ([empaempa](http://github.com/empaempa))
+* `LOD`, `Bone`, `SkinnedMesh` objects and hierarchy being developed. ([empaempa](http://github.com/empaempa))
+* Changed build setup (`Three.js` now includes everything. `Three*.js` inside `build/custom` folder) ([mrdoob](http://github.com/mrdoob))
+* Many internal changes.
+
+
 2010 12 31 - **r32** (89.301 KB, gzip: 21.351 KB)
 2010 12 31 - **r32** (89.301 KB, gzip: 21.351 KB)
 
 
 * `Scene` now supports `Fog` and `FogExp2`. `WebGLRenderer` only right now. ([alteredq](http://github.com/alteredq))
 * `Scene` now supports `Fog` and `FogExp2`. `WebGLRenderer` only right now. ([alteredq](http://github.com/alteredq))

File diff suppressed because it is too large
+ 302 - 231
build/Three.js


+ 0 - 231
build/ThreeDebug.js

@@ -1,231 +0,0 @@
-// ThreeDebug.js r32 - http://github.com/mrdoob/three.js
-var THREE=THREE||{};THREE.Color=function(a){this.autoUpdate=true;this.setHex(a)};
-THREE.Color.prototype={setRGB:function(a,c,d){this.r=a;this.g=c;this.b=d;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},setHSV:function(a,c,d){var f,j,k,q,o,l;if(d==0)f=j=k=0;else{q=Math.floor(a*6);o=a*6-q;a=d*(1-c);l=d*(1-c*o);c=d*(1-c*(1-o));switch(q){case 1:f=l;j=d;k=a;break;case 2:f=a;j=d;k=c;break;case 3:f=a;j=l;k=d;break;case 4:f=c;j=a;k=d;break;case 5:f=d;j=a;k=l;break;case 6:case 0:f=d;j=c;k=a}}this.r=f;this.g=j;this.b=k;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},
-setHex:function(a){this.hex=~~a&16777215;if(this.autoUpdate){this.updateRGBA();this.updateStyleString()}},updateHex:function(){this.hex=~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},updateRGBA:function(){this.r=(this.hex>>16&255)/255;this.g=(this.hex>>8&255)/255;this.b=(this.hex&255)/255},updateStyleString:function(){this.__styleString="rgb("+~~(this.r*255)+","+~~(this.g*255)+","+~~(this.b*255)+")"},clone:function(){return new THREE.Color(this.hex)},toString:function(){return"THREE.Color ( r: "+
-this.r+", g: "+this.g+", b: "+this.b+", hex: "+this.hex+" )"}};THREE.Vector2=function(a,c){this.x=a||0;this.y=c||0};
-THREE.Vector2.prototype={set:function(a,c){this.x=a;this.y=c;return this},copy:function(a){this.x=a.x;this.y=a.y;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;return this},add:function(a,c){this.x=a.x+c.x;this.y=a.y+c.y;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;return this},sub:function(a,c){this.x=a.x-c.x;this.y=a.y-c.y;return this},multiplyScalar:function(a){this.x*=a;this.y*=a;return this},unit:function(){this.multiplyScalar(1/this.length());return this},length:function(){return Math.sqrt(this.x*
-this.x+this.y*this.y)},lengthSq:function(){return this.x*this.x+this.y*this.y},negate:function(){this.x=-this.x;this.y=-this.y;return this},clone:function(){return new THREE.Vector2(this.x,this.y)},toString:function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,c,d){this.x=a||0;this.y=c||0;this.z=d||0};
-THREE.Vector3.prototype={set:function(a,c,d){this.x=a;this.y=c;this.z=d;return this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;return this},add:function(a,c){this.x=a.x+c.x;this.y=a.y+c.y;this.z=a.z+c.z;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;return this},addScalar:function(a){this.x+=a;this.y+=a;this.z+=a;return this},sub:function(a,c){this.x=a.x-c.x;this.y=a.y-c.y;this.z=a.z-c.z;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;return this},
-cross:function(a,c){this.x=a.y*c.z-a.z*c.y;this.y=a.z*c.x-a.x*c.z;this.z=a.x*c.y-a.y*c.x;return this},crossSelf:function(a){var c=this.x,d=this.y,f=this.z;this.x=d*a.z-f*a.y;this.y=f*a.x-c*a.z;this.z=c*a.y-d*a.x;return this},multiply:function(a,c){this.x=a.x*c.x;this.y=a.y*c.y;this.z=a.z*c.z;return this},multiplySelf:function(a){this.x*=a.x;this.y*=a.y;this.z*=a.z;return this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;return this},divideSelf:function(a){this.x/=a.x;this.y/=a.y;this.z/=
-a.z;return this},divideScalar:function(a){this.x/=a;this.y/=a;this.z/=a;return this},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},distanceTo:function(a){var c=this.x-a.x,d=this.y-a.y;a=this.z-a.z;return Math.sqrt(c*c+d*d+a*a)},distanceToSquared:function(a){var c=this.x-a.x,d=this.y-a.y;a=this.z-a.z;return c*c+d*d+a*a},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},negate:function(){this.x=
--this.x;this.y=-this.y;this.z=-this.z;return this},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z);a>0?this.multiplyScalar(1/a):this.set(0,0,0);return this},setLength:function(a){return this.normalize().multiplyScalar(a)},isZero:function(){return Math.abs(this.x)<1.0E-4&&Math.abs(this.y)<1.0E-4&&Math.abs(this.z)<1.0E-4},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},toString:function(){return"THREE.Vector3 ( "+this.x+", "+this.y+", "+this.z+" )"}};
-THREE.Vector4=function(a,c,d,f){this.x=a||0;this.y=c||0;this.z=d||0;this.w=f||1};
-THREE.Vector4.prototype={set:function(a,c,d,f){this.x=a;this.y=c;this.z=d;this.w=f;return this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;this.w=a.w||1;return this},add:function(a,c){this.x=a.x+c.x;this.y=a.y+c.y;this.z=a.z+c.z;this.w=a.w+c.w;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;this.w+=a.w;return this},sub:function(a,c){this.x=a.x-c.x;this.y=a.y-c.y;this.z=a.z-c.z;this.w=a.w-c.w;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;this.w-=a.w;
-return this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;this.w*=a;return this},divideScalar:function(a){this.x/=a;this.y/=a;this.z/=a;this.w/=a;return this},lerpSelf:function(a,c){this.x+=(a.x-this.x)*c;this.y+=(a.y-this.y)*c;this.z+=(a.z-this.z)*c;this.w+=(a.w-this.w)*c},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},toString:function(){return"THREE.Vector4 ("+this.x+", "+this.y+", "+this.z+", "+this.w+")"}};
-THREE.Ray=function(a,c){this.origin=a||new THREE.Vector3;this.direction=c||new THREE.Vector3};
-THREE.Ray.prototype={intersectScene:function(a){var c,d,f=a.objects,j=[];a=0;for(c=f.length;a<c;a++){d=f[a];if(d instanceof THREE.Mesh)j=j.concat(this.intersectObject(d))}j.sort(function(k,q){return k.distance-q.distance});return j},intersectObject:function(a){function c(I,s,O,C){C=C.clone().subSelf(s);O=O.clone().subSelf(s);var b=I.clone().subSelf(s);I=C.dot(C);s=C.dot(O);C=C.dot(b);var R=O.dot(O);O=O.dot(b);b=1/(I*R-s*s);R=(R*C-s*O)*b;I=(I*O-s*C)*b;return R>0&&I>0&&R+I<1}var d,f,j,k,q,o,l,m,z,y,
-v,x=a.geometry,F=x.vertices,H=[];d=0;for(f=x.faces.length;d<f;d++){j=x.faces[d];y=this.origin.clone();v=this.direction.clone();k=a.matrix.multiplyVector3(F[j.a].position.clone());q=a.matrix.multiplyVector3(F[j.b].position.clone());o=a.matrix.multiplyVector3(F[j.c].position.clone());l=j instanceof THREE.Face4?a.matrix.multiplyVector3(F[j.d].position.clone()):null;m=a.rotationMatrix.multiplyVector3(j.normal.clone());z=v.dot(m);if(z<0){m=m.dot((new THREE.Vector3).sub(k,y))/z;y=y.addSelf(v.multiplyScalar(m));
-if(j instanceof THREE.Face3){if(c(y,k,q,o)){j={distance:this.origin.distanceTo(y),point:y,face:j,object:a};H.push(j)}}else if(j instanceof THREE.Face4)if(c(y,k,q,l)||c(y,q,o,l)){j={distance:this.origin.distanceTo(y),point:y,face:j,object:a};H.push(j)}}}return H}};
-THREE.Rectangle=function(){function a(){k=f-c;q=j-d}var c,d,f,j,k,q,o=true;this.getX=function(){return c};this.getY=function(){return d};this.getWidth=function(){return k};this.getHeight=function(){return q};this.getLeft=function(){return c};this.getTop=function(){return d};this.getRight=function(){return f};this.getBottom=function(){return j};this.set=function(l,m,z,y){o=false;c=l;d=m;f=z;j=y;a()};this.addPoint=function(l,m){if(o){o=false;c=l;d=m;f=l;j=m}else{c=c<l?c:l;d=d<m?d:m;f=f>l?f:l;j=j>m?
-j:m}a()};this.add3Points=function(l,m,z,y,v,x){if(o){o=false;c=l<z?l<v?l:v:z<v?z:v;d=m<y?m<x?m:x:y<x?y:x;f=l>z?l>v?l:v:z>v?z:v;j=m>y?m>x?m:x:y>x?y:x}else{c=l<z?l<v?l<c?l:c:v<c?v:c:z<v?z<c?z:c:v<c?v:c;d=m<y?m<x?m<d?m:d:x<d?x:d:y<x?y<d?y:d:x<d?x:d;f=l>z?l>v?l>f?l:f:v>f?v:f:z>v?z>f?z:f:v>f?v:f;j=m>y?m>x?m>j?m:j:x>j?x:j:y>x?y>j?y:j:x>j?x:j}a()};this.addRectangle=function(l){if(o){o=false;c=l.getLeft();d=l.getTop();f=l.getRight();j=l.getBottom()}else{c=c<l.getLeft()?c:l.getLeft();d=d<l.getTop()?d:l.getTop();
-f=f>l.getRight()?f:l.getRight();j=j>l.getBottom()?j:l.getBottom()}a()};this.inflate=function(l){c-=l;d-=l;f+=l;j+=l;a()};this.minSelf=function(l){c=c>l.getLeft()?c:l.getLeft();d=d>l.getTop()?d:l.getTop();f=f<l.getRight()?f:l.getRight();j=j<l.getBottom()?j:l.getBottom();a()};this.instersects=function(l){return Math.min(f,l.getRight())-Math.max(c,l.getLeft())>=0&&Math.min(j,l.getBottom())-Math.max(d,l.getTop())>=0};this.empty=function(){o=true;j=f=d=c=0;a()};this.isEmpty=function(){return o};this.toString=
-function(){return"THREE.Rectangle ( left: "+c+", right: "+f+", top: "+d+", bottom: "+j+", width: "+k+", height: "+q+" )"}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={transpose:function(){var a,c=this.m;a=c[1];c[1]=c[3];c[3]=a;a=c[2];c[2]=c[6];c[6]=a;a=c[5];c[5]=c[7];c[7]=a;return this},transposeIntoArray:function(a){var c=this.m;a[0]=c[0];a[1]=c[3];a[2]=c[6];a[3]=c[1];a[4]=c[4];a[5]=c[7];a[6]=c[2];a[7]=c[5];a[8]=c[8];return this}};
-THREE.Matrix4=function(a,c,d,f,j,k,q,o,l,m,z,y,v,x,F,H){this.n11=a||1;this.n12=c||0;this.n13=d||0;this.n14=f||0;this.n21=j||0;this.n22=k||1;this.n23=q||0;this.n24=o||0;this.n31=l||0;this.n32=m||0;this.n33=z||1;this.n34=y||0;this.n41=v||0;this.n42=x||0;this.n43=F||0;this.n44=H||1;this.flat=Array(16);this.m33=new THREE.Matrix3};
-THREE.Matrix4.prototype={identity:function(){this.n11=1;this.n21=this.n14=this.n13=this.n12=0;this.n22=1;this.n32=this.n31=this.n24=this.n23=0;this.n33=1;this.n43=this.n42=this.n41=this.n34=0;this.n44=1;return this},set:function(a,c,d,f,j,k,q,o,l,m,z,y,v,x,F,H){this.n11=a;this.n12=c;this.n13=d;this.n14=f;this.n21=j;this.n22=k;this.n23=q;this.n24=o;this.n31=l;this.n32=m;this.n33=z;this.n34=y;this.n41=v;this.n42=x;this.n43=F;this.n44=H;return this},copy:function(a){this.n11=a.n11;this.n12=a.n12;this.n13=
-a.n13;this.n14=a.n14;this.n21=a.n21;this.n22=a.n22;this.n23=a.n23;this.n24=a.n24;this.n31=a.n31;this.n32=a.n32;this.n33=a.n33;this.n34=a.n34;this.n41=a.n41;this.n42=a.n42;this.n43=a.n43;this.n44=a.n44;return this},lookAt:function(a,c,d){var f=THREE.Matrix4.__tmpVec1,j=THREE.Matrix4.__tmpVec2,k=THREE.Matrix4.__tmpVec3;k.sub(a,c).normalize();f.cross(d,k).normalize();j.cross(k,f).normalize();this.n11=f.x;this.n12=f.y;this.n13=f.z;this.n14=-f.dot(a);this.n21=j.x;this.n22=j.y;this.n23=j.z;this.n24=-j.dot(a);
-this.n31=k.x;this.n32=k.y;this.n33=k.z;this.n34=-k.dot(a);this.n43=this.n42=this.n41=0;this.n44=1;return this},multiplyVector3:function(a){var c=a.x,d=a.y,f=a.z,j=1/(this.n41*c+this.n42*d+this.n43*f+this.n44);a.x=(this.n11*c+this.n12*d+this.n13*f+this.n14)*j;a.y=(this.n21*c+this.n22*d+this.n23*f+this.n24)*j;a.z=(this.n31*c+this.n32*d+this.n33*f+this.n34)*j;return a},multiplyVector4:function(a){var c=a.x,d=a.y,f=a.z,j=a.w;a.x=this.n11*c+this.n12*d+this.n13*f+this.n14*j;a.y=this.n21*c+this.n22*d+this.n23*
-f+this.n24*j;a.z=this.n31*c+this.n32*d+this.n33*f+this.n34*j;a.w=this.n41*c+this.n42*d+this.n43*f+this.n44*j;return a},crossVector:function(a){var c=new THREE.Vector4;c.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;c.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;c.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;c.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return c},multiply:function(a,c){var d=a.n11,f=a.n12,j=a.n13,k=a.n14,q=a.n21,o=a.n22,l=a.n23,m=a.n24,z=a.n31,
-y=a.n32,v=a.n33,x=a.n34,F=a.n41,H=a.n42,I=a.n43,s=a.n44,O=c.n11,C=c.n12,b=c.n13,R=c.n14,$=c.n21,Q=c.n22,J=c.n23,X=c.n24,G=c.n31,U=c.n32,M=c.n33,D=c.n34,K=c.n41,ca=c.n42,N=c.n43,aa=c.n44;this.n11=d*O+f*$+j*G+k*K;this.n12=d*C+f*Q+j*U+k*ca;this.n13=d*b+f*J+j*M+k*N;this.n14=d*R+f*X+j*D+k*aa;this.n21=q*O+o*$+l*G+m*K;this.n22=q*C+o*Q+l*U+m*ca;this.n23=q*b+o*J+l*M+m*N;this.n24=q*R+o*X+l*D+m*aa;this.n31=z*O+y*$+v*G+x*K;this.n32=z*C+y*Q+v*U+x*ca;this.n33=z*b+y*J+v*M+x*N;this.n34=z*R+y*X+v*D+x*aa;this.n41=
-F*O+H*$+I*G+s*K;this.n42=F*C+H*Q+I*U+s*ca;this.n43=F*b+H*J+I*M+s*N;this.n44=F*R+H*X+I*D+s*aa;return this},multiplyToArray:function(a,c,d){var f=a.n11,j=a.n12,k=a.n13,q=a.n14,o=a.n21,l=a.n22,m=a.n23,z=a.n24,y=a.n31,v=a.n32,x=a.n33,F=a.n34,H=a.n41,I=a.n42,s=a.n43;a=a.n44;var O=c.n11,C=c.n12,b=c.n13,R=c.n14,$=c.n21,Q=c.n22,J=c.n23,X=c.n24,G=c.n31,U=c.n32,M=c.n33,D=c.n34,K=c.n41,ca=c.n42,N=c.n43;c=c.n44;this.n11=f*O+j*$+k*G+q*K;this.n12=f*C+j*Q+k*U+q*ca;this.n13=f*b+j*J+k*M+q*N;this.n14=f*R+j*X+k*D+q*
-c;this.n21=o*O+l*$+m*G+z*K;this.n22=o*C+l*Q+m*U+z*ca;this.n23=o*b+l*J+m*M+z*N;this.n24=o*R+l*X+m*D+z*c;this.n31=y*O+v*$+x*G+F*K;this.n32=y*C+v*Q+x*U+F*ca;this.n33=y*b+v*J+x*M+F*N;this.n34=y*R+v*X+x*D+F*c;this.n41=H*O+I*$+s*G+a*K;this.n42=H*C+I*Q+s*U+a*ca;this.n43=H*b+I*J+s*M+a*N;this.n44=H*R+I*X+s*D+a*c;d[0]=this.n11;d[1]=this.n21;d[2]=this.n31;d[3]=this.n41;d[4]=this.n12;d[5]=this.n22;d[6]=this.n32;d[7]=this.n42;d[8]=this.n13;d[9]=this.n23;d[10]=this.n33;d[11]=this.n43;d[12]=this.n14;d[13]=this.n24;
-d[14]=this.n34;d[15]=this.n44;return this},multiplySelf:function(a){var c=this.n11,d=this.n12,f=this.n13,j=this.n14,k=this.n21,q=this.n22,o=this.n23,l=this.n24,m=this.n31,z=this.n32,y=this.n33,v=this.n34,x=this.n41,F=this.n42,H=this.n43,I=this.n44,s=a.n11,O=a.n21,C=a.n31,b=a.n41,R=a.n12,$=a.n22,Q=a.n32,J=a.n42,X=a.n13,G=a.n23,U=a.n33,M=a.n43,D=a.n14,K=a.n24,ca=a.n34;a=a.n44;this.n11=c*s+d*O+f*C+j*b;this.n12=c*R+d*$+f*Q+j*J;this.n13=c*X+d*G+f*U+j*M;this.n14=c*D+d*K+f*ca+j*a;this.n21=k*s+q*O+o*C+l*
-b;this.n22=k*R+q*$+o*Q+l*J;this.n23=k*X+q*G+o*U+l*M;this.n24=k*D+q*K+o*ca+l*a;this.n31=m*s+z*O+y*C+v*b;this.n32=m*R+z*$+y*Q+v*J;this.n33=m*X+z*G+y*U+v*M;this.n34=m*D+z*K+y*ca+v*a;this.n41=x*s+F*O+H*C+I*b;this.n42=x*R+F*$+H*Q+I*J;this.n43=x*X+F*G+H*U+I*M;this.n44=x*D+F*K+H*ca+I*a;return this},multiplyScalar:function(a){this.n11*=a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=
-a;return this},determinant:function(){var a=this.n11,c=this.n12,d=this.n13,f=this.n14,j=this.n21,k=this.n22,q=this.n23,o=this.n24,l=this.n31,m=this.n32,z=this.n33,y=this.n34,v=this.n41,x=this.n42,F=this.n43,H=this.n44;return f*q*m*v-d*o*m*v-f*k*z*v+c*o*z*v+d*k*y*v-c*q*y*v-f*q*l*x+d*o*l*x+f*j*z*x-a*o*z*x-d*j*y*x+a*q*y*x+f*k*l*F-c*o*l*F-f*j*m*F+a*o*m*F+c*j*y*F-a*k*y*F-d*k*l*H+c*q*l*H+d*j*m*H-a*q*m*H-c*j*z*H+a*k*z*H},transpose:function(){function a(c,d,f){var j=c[d];c[d]=c[f];c[f]=j}a(this,"n21","n12");
-a(this,"n31","n13");a(this,"n32","n23");a(this,"n41","n14");a(this,"n42","n24");a(this,"n43","n34");return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){var a=this.flat;a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;
-a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},setTranslation:function(a,c,d){this.set(1,0,0,a,0,1,0,c,0,0,1,d,
-0,0,0,1);return this},setScale:function(a,c,d){this.set(a,0,0,0,0,c,0,0,0,0,d,0,0,0,0,1);return this},setRotX:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(1,0,0,0,0,c,-a,0,0,a,c,0,0,0,0,1);return this},setRotY:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(c,0,a,0,0,1,0,0,-a,0,c,0,0,0,0,1);return this},setRotZ:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(c,-a,0,0,a,c,0,0,0,0,1,0,0,0,0,1);return this},setRotAxis:function(a,c){var d=Math.cos(c),f=Math.sin(c),j=1-d,k=a.x,q=a.y,
-o=a.z,l=j*k,m=j*q;this.set(l*k+d,l*q-f*o,l*o+f*q,0,l*q+f*o,m*q+d,m*o-f*k,0,l*o-f*q,m*o+f*k,j*o*o+d,0,0,0,0,1);return this},toString:function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};THREE.Matrix4.translationMatrix=function(a,c,d){var f=new THREE.Matrix4;f.setTranslation(a,c,d);return f};
-THREE.Matrix4.scaleMatrix=function(a,c,d){var f=new THREE.Matrix4;f.setScale(a,c,d);return f};THREE.Matrix4.rotationXMatrix=function(a){var c=new THREE.Matrix4;c.setRotX(a);return c};THREE.Matrix4.rotationYMatrix=function(a){var c=new THREE.Matrix4;c.setRotY(a);return c};THREE.Matrix4.rotationZMatrix=function(a){var c=new THREE.Matrix4;c.setRotZ(a);return c};THREE.Matrix4.rotationAxisAngleMatrix=function(a,c){var d=new THREE.Matrix4;d.setRotAxis(a,c);return d};
-THREE.Matrix4.makeInvert=function(a){var c=a.n11,d=a.n12,f=a.n13,j=a.n14,k=a.n21,q=a.n22,o=a.n23,l=a.n24,m=a.n31,z=a.n32,y=a.n33,v=a.n34,x=a.n41,F=a.n42,H=a.n43,I=a.n44,s=new THREE.Matrix4;s.n11=o*v*F-l*y*F+l*z*H-q*v*H-o*z*I+q*y*I;s.n12=j*y*F-f*v*F-j*z*H+d*v*H+f*z*I-d*y*I;s.n13=f*l*F-j*o*F+j*q*H-d*l*H-f*q*I+d*o*I;s.n14=j*o*z-f*l*z-j*q*y+d*l*y+f*q*v-d*o*v;s.n21=l*y*x-o*v*x-l*m*H+k*v*H+o*m*I-k*y*I;s.n22=f*v*x-j*y*x+j*m*H-c*v*H-f*m*I+c*y*I;s.n23=j*o*x-f*l*x-j*k*H+c*l*H+f*k*I-c*o*I;s.n24=f*l*m-j*o*m+
-j*k*y-c*l*y-f*k*v+c*o*v;s.n31=q*v*x-l*z*x+l*m*F-k*v*F-q*m*I+k*z*I;s.n32=j*z*x-d*v*x-j*m*F+c*v*F+d*m*I-c*z*I;s.n33=f*l*x-j*q*x+j*k*F-c*l*F-d*k*I+c*q*I;s.n34=j*q*m-d*l*m-j*k*z+c*l*z+d*k*v-c*q*v;s.n41=o*z*x-q*y*x-o*m*F+k*y*F+q*m*H-k*z*H;s.n42=d*y*x-f*z*x+f*m*F-c*y*F-d*m*H+c*z*H;s.n43=f*q*x-d*o*x-f*k*F+c*o*F+d*k*H-c*q*H;s.n44=d*o*m-f*q*m+f*k*z-c*o*z-d*k*y+c*q*y;s.multiplyScalar(1/a.determinant());return s};
-THREE.Matrix4.makeInvert3x3=function(a){var c=a.m33,d=c.m,f=a.n33*a.n22-a.n32*a.n23,j=-a.n33*a.n21+a.n31*a.n23,k=a.n32*a.n21-a.n31*a.n22,q=-a.n33*a.n12+a.n32*a.n13,o=a.n33*a.n11-a.n31*a.n13,l=-a.n32*a.n11+a.n31*a.n12,m=a.n23*a.n12-a.n22*a.n13,z=-a.n23*a.n11+a.n21*a.n13,y=a.n22*a.n11-a.n21*a.n12;a=a.n11*f+a.n21*q+a.n31*m;if(a==0)throw"matrix not invertible";a=1/a;d[0]=a*f;d[1]=a*j;d[2]=a*k;d[3]=a*q;d[4]=a*o;d[5]=a*l;d[6]=a*m;d[7]=a*z;d[8]=a*y;return c};
-THREE.Matrix4.makeFrustum=function(a,c,d,f,j,k){var q,o,l;q=new THREE.Matrix4;o=2*j/(c-a);l=2*j/(f-d);a=(c+a)/(c-a);d=(f+d)/(f-d);f=-(k+j)/(k-j);j=-2*k*j/(k-j);q.n11=o;q.n12=0;q.n13=a;q.n14=0;q.n21=0;q.n22=l;q.n23=d;q.n24=0;q.n31=0;q.n32=0;q.n33=f;q.n34=j;q.n41=0;q.n42=0;q.n43=-1;q.n44=0;return q};THREE.Matrix4.makePerspective=function(a,c,d,f){var j;a=d*Math.tan(a*Math.PI/360);j=-a;return THREE.Matrix4.makeFrustum(j*c,a*c,j,a,d,f)};
-THREE.Matrix4.makeOrtho=function(a,c,d,f,j,k){var q,o,l,m;q=new THREE.Matrix4;o=c-a;l=d-f;m=k-j;a=(c+a)/o;d=(d+f)/l;j=(k+j)/m;q.n11=2/o;q.n12=0;q.n13=0;q.n14=-a;q.n21=0;q.n22=2/l;q.n23=0;q.n24=-d;q.n31=0;q.n32=0;q.n33=-2/m;q.n34=-j;q.n41=0;q.n42=0;q.n43=0;q.n44=1;return q};THREE.Matrix4.__tmpVec1=new THREE.Vector3;THREE.Matrix4.__tmpVec2=new THREE.Vector3;THREE.Matrix4.__tmpVec3=new THREE.Vector3;
-THREE.Vertex=function(a,c){this.position=a||new THREE.Vector3;this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.normal=c||new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.normalScreen=new THREE.Vector3;this.tangent=new THREE.Vector4;this.__visible=true};THREE.Vertex.prototype={toString:function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};
-THREE.Face3=function(a,c,d,f,j){this.a=a;this.b=c;this.c=d;this.centroid=new THREE.Vector3;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.materials=j instanceof Array?j:[j]};THREE.Face3.prototype={toString:function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};
-THREE.Face4=function(a,c,d,f,j,k){this.a=a;this.b=c;this.c=d;this.d=f;this.centroid=new THREE.Vector3;this.normal=j instanceof THREE.Vector3?j:new THREE.Vector3;this.vertexNormals=j instanceof Array?j:[];this.materials=k instanceof Array?k:[k]};THREE.Face4.prototype={toString:function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.UV=function(a,c){this.u=a||0;this.v=c||0};
-THREE.UV.prototype={copy:function(a){this.u=a.u;this.v=a.v},toString:function(){return"THREE.UV ("+this.u+", "+this.v+")"}};THREE.Geometry=function(){this.vertices=[];this.faces=[];this.uvs=[];this.uvs2=[];this.colors=[];this.boundingSphere=this.boundingBox=null;this.geometryChunks={};this.hasTangents=false};
-THREE.Geometry.prototype={computeCentroids:function(){var a,c,d;a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];d.centroid.set(0,0,0);if(d instanceof THREE.Face3){d.centroid.addSelf(this.vertices[d.a].position);d.centroid.addSelf(this.vertices[d.b].position);d.centroid.addSelf(this.vertices[d.c].position);d.centroid.divideScalar(3)}else if(d instanceof THREE.Face4){d.centroid.addSelf(this.vertices[d.a].position);d.centroid.addSelf(this.vertices[d.b].position);d.centroid.addSelf(this.vertices[d.c].position);
-d.centroid.addSelf(this.vertices[d.d].position);d.centroid.divideScalar(4)}}},computeFaceNormals:function(a){var c,d,f,j,k,q,o=new THREE.Vector3,l=new THREE.Vector3;f=0;for(j=this.vertices.length;f<j;f++){k=this.vertices[f];k.normal.set(0,0,0)}f=0;for(j=this.faces.length;f<j;f++){k=this.faces[f];if(a&&k.vertexNormals.length){o.set(0,0,0);c=0;for(d=k.normal.length;c<d;c++)o.addSelf(k.vertexNormals[c]);o.divideScalar(3)}else{c=this.vertices[k.a];d=this.vertices[k.b];q=this.vertices[k.c];o.sub(q.position,
-d.position);l.sub(c.position,d.position);o.crossSelf(l)}o.isZero()||o.normalize();k.normal.copy(o)}},computeVertexNormals:function(){var a,c,d,f;if(this.__tmpVertices==undefined){f=this.__tmpVertices=Array(this.vertices.length);a=0;for(c=this.vertices.length;a<c;a++)f[a]=new THREE.Vector3;a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];if(d instanceof THREE.Face3)d.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];else if(d instanceof THREE.Face4)d.vertexNormals=[new THREE.Vector3,
-new THREE.Vector3,new THREE.Vector3,new THREE.Vector3]}}else{f=this.__tmpVertices;a=0;for(c=this.vertices.length;a<c;a++)f[a].set(0,0,0)}a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];if(d instanceof THREE.Face3){f[d.a].addSelf(d.normal);f[d.b].addSelf(d.normal);f[d.c].addSelf(d.normal)}else if(d instanceof THREE.Face4){f[d.a].addSelf(d.normal);f[d.b].addSelf(d.normal);f[d.c].addSelf(d.normal);f[d.d].addSelf(d.normal)}}a=0;for(c=this.vertices.length;a<c;a++)f[a].normalize();a=0;for(c=this.faces.length;a<
-c;a++){d=this.faces[a];if(d instanceof THREE.Face3){d.vertexNormals[0].copy(f[d.a]);d.vertexNormals[1].copy(f[d.b]);d.vertexNormals[2].copy(f[d.c])}else if(d instanceof THREE.Face4){d.vertexNormals[0].copy(f[d.a]);d.vertexNormals[1].copy(f[d.b]);d.vertexNormals[2].copy(f[d.c]);d.vertexNormals[3].copy(f[d.d])}}},computeTangents:function(){function a(D,K,ca,N,aa,e,i){k=D.vertices[K].position;q=D.vertices[ca].position;o=D.vertices[N].position;l=j[aa];m=j[e];z=j[i];y=q.x-k.x;v=o.x-k.x;x=q.y-k.y;F=o.y-
-k.y;H=q.z-k.z;I=o.z-k.z;s=m.u-l.u;O=z.u-l.u;C=m.v-l.v;b=z.v-l.v;R=1/(s*b-O*C);J.set((b*y-C*v)*R,(b*x-C*F)*R,(b*H-C*I)*R);X.set((s*v-O*y)*R,(s*F-O*x)*R,(s*I-O*H)*R);$[K].addSelf(J);$[ca].addSelf(J);$[N].addSelf(J);Q[K].addSelf(X);Q[ca].addSelf(X);Q[N].addSelf(X)}var c,d,f,j,k,q,o,l,m,z,y,v,x,F,H,I,s,O,C,b,R,$=[],Q=[],J=new THREE.Vector3,X=new THREE.Vector3,G=new THREE.Vector3,U=new THREE.Vector3,M=new THREE.Vector3;c=0;for(d=this.vertices.length;c<d;c++){$[c]=new THREE.Vector3;Q[c]=new THREE.Vector3}c=
-0;for(d=this.faces.length;c<d;c++){f=this.faces[c];j=this.uvs[c];if(f instanceof THREE.Face3){a(this,f.a,f.b,f.c,0,1,2);this.vertices[f.a].normal.copy(f.vertexNormals[0]);this.vertices[f.b].normal.copy(f.vertexNormals[1]);this.vertices[f.c].normal.copy(f.vertexNormals[2])}else if(f instanceof THREE.Face4){a(this,f.a,f.b,f.c,0,1,2);a(this,f.a,f.b,f.d,0,1,3);this.vertices[f.a].normal.copy(f.vertexNormals[0]);this.vertices[f.b].normal.copy(f.vertexNormals[1]);this.vertices[f.c].normal.copy(f.vertexNormals[2]);
-this.vertices[f.d].normal.copy(f.vertexNormals[3])}}c=0;for(d=this.vertices.length;c<d;c++){M.copy(this.vertices[c].normal);f=$[c];G.copy(f);G.subSelf(M.multiplyScalar(M.dot(f))).normalize();U.cross(this.vertices[c].normal,f);f=U.dot(Q[c]);f=f<0?-1:1;this.vertices[c].tangent.set(G.x,G.y,G.z,f)}this.hasTangents=true},computeBoundingBox:function(){var a;if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this.vertices[0].position.x],y:[this.vertices[0].position.y,this.vertices[0].position.y],
-z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var c=1,d=this.vertices.length;c<d;c++){a=this.vertices[c];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
-this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,c=0,d=this.vertices.length;c<d;c++)a=Math.max(a,this.vertices[c].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(z){var y=[];c=0;for(d=z.length;c<d;c++)z[c]==undefined?y.push("undefined"):y.push(z[c].toString());return y.join("_")}var c,d,f,j,k,q,o,l,m={};f=0;for(j=this.faces.length;f<j;f++){k=this.faces[f];
-q=k.materials;o=a(q);if(m[o]==undefined)m[o]={hash:o,counter:0};l=m[o].hash+"_"+m[o].counter;if(this.geometryChunks[l]==undefined)this.geometryChunks[l]={faces:[],materials:q,vertices:0};k=k instanceof THREE.Face3?3:4;if(this.geometryChunks[l].vertices+k>65535){m[o].counter+=1;l=m[o].hash+"_"+m[o].counter;if(this.geometryChunks[l]==undefined)this.geometryChunks[l]={faces:[],materials:q,vertices:0}}this.geometryChunks[l].faces.push(f);this.geometryChunks[l].vertices+=k}},toString:function(){return"THREE.Geometry ( vertices: "+
-this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};
-THREE.Camera=function(a,c,d,f){this.fov=a;this.aspect=c;this.near=d;this.far=f;this.position=new THREE.Vector3;this.target={position:new THREE.Vector3};this.autoUpdateMatrix=true;this.projectionMatrix=null;this.matrix=new THREE.Matrix4;this.up=new THREE.Vector3(0,1,0);this.tmpVec=new THREE.Vector3;this.translateX=function(j){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);this.tmpVec.crossSelf(this.up);this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};
-this.translateZ=function(j){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateMatrix=function(){this.matrix.lookAt(this.position,this.target.position,this.up)};this.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};this.updateProjectionMatrix()};
-THREE.Camera.prototype={toString:function(){return"THREE.Camera ( "+this.position+", "+this.target.position+" )"}};THREE.Light=function(a){this.color=new THREE.Color(a)};THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=c||1};THREE.DirectionalLight.prototype=new THREE.Light;
-THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3;this.intensity=c||1};THREE.PointLight.prototype=new THREE.Light;THREE.PointLight.prototype.constructor=THREE.PointLight;
-THREE.Object3D=function(){this.id=THREE.Object3DCounter.value++;this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.rotationMatrix=new THREE.Matrix4;this.tmpMatrix=new THREE.Matrix4;this.screen=new THREE.Vector3;this.visible=this.autoUpdateMatrix=true;this.children=[]};
-THREE.Object3D.prototype={addChild:function(a){this.children.indexOf(a)===-1&&this.children.push(a)},removeChild:function(a){a=this.children.indexOf(a);a!==-1&&this.children.splice(a,1)},updateMatrix:function(){var a=this.position,c=this.rotation,d=this.scale,f=this.matrix,j=this.rotationMatrix,k=this.tmpMatrix;f.setTranslation(a.x,a.y,a.z);j.setRotX(c.x);c.y!=0&&j.multiplySelf(k.setRotY(c.y));c.z!=0&&j.multiplySelf(k.setRotZ(c.z));f.multiplySelf(j);if(d.x!=0||d.y!=0||d.z!=0)f.multiplySelf(k.setScale(d.x,
-d.y,d.z))}};THREE.Object3DCounter={value:0};THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a];this.autoUpdateMatrix=false};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;THREE.ParticleSystem=function(a,c){THREE.Object3D.call(this);this.geometry=a;this.materials=c instanceof Array?c:[c];this.sortParticles=false};THREE.ParticleSystem.prototype=new THREE.Object3D;THREE.ParticleSystem.prototype.constructor=THREE.ParticleSystem;
-THREE.Line=function(a,c,d){THREE.Object3D.call(this);this.geometry=a;this.materials=c instanceof Array?c:[c];this.type=d!=undefined?d:THREE.LineStrip};THREE.LineStrip=0;THREE.LinePieces=1;THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;THREE.Mesh=function(a,c){THREE.Object3D.call(this);this.geometry=a;this.materials=c instanceof Array?c:[c];this.overdraw=this.doubleSided=this.flipSided=false;this.geometry.boundingSphere||this.geometry.computeBoundingSphere()};
-THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.FlatShading=0;THREE.SmoothShading=1;THREE.NormalBlending=0;THREE.AdditiveBlending=1;THREE.SubtractiveBlending=2;THREE.BillboardBlending=3;
-THREE.LineBasicMaterial=function(a){this.id=THREE.LineBasicMaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;this.depth_test=true;this.linewidth=1;this.linejoin=this.linecap="round";this.vertex_colors=false;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.linewidth!==undefined)this.linewidth=
-a.linewidth;if(a.linecap!==undefined)this.linecap=a.linecap;if(a.linejoin!==undefined)this.linejoin=a.linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
-THREE.LineBasicMaterial.prototype={toString:function(){return"THREE.LineBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>linewidth: "+this.linewidth+"<br/>linecap: "+this.linecap+"<br/>linejoin: "+this.linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};THREE.LineBasicMaterialCounter={value:0};
-THREE.MeshBasicMaterial=function(a){this.id=THREE.MeshBasicMaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=true;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=false;if(a){a.color!==
-undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
-undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
-THREE.MeshBasicMaterial.prototype={toString:function(){return"THREE.MeshBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+
-"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};THREE.MeshBasicMaterialCounter={value:0};
-THREE.MeshLambertMaterial=function(a){this.id=THREE.MeshLambertMaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=true;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=false;if(a){a.color!==
-undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
-undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
-THREE.MeshLambertMaterial.prototype={toString:function(){return"THREE.MeshLambertMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+
-"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/> )"}};THREE.MeshLambertMaterialCounter={value:0};
-THREE.MeshPhongMaterial=function(a){this.id=THREE.MeshPhongMaterialCounter.value++;this.color=new THREE.Color(16777215);this.ambient=new THREE.Color(328965);this.specular=new THREE.Color(1118481);this.shininess=30;this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=true;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=
-1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=false;if(a){if(a.color!==undefined)this.color=new THREE.Color(a.color);if(a.ambient!==undefined)this.ambient=new THREE.Color(a.ambient);if(a.specular!==undefined)this.specular=new THREE.Color(a.specular);if(a.shininess!==undefined)this.shininess=a.shininess;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.map!==undefined)this.map=a.map;if(a.env_map!==undefined)this.env_map=
-a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=
-a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
-THREE.MeshPhongMaterial.prototype={toString:function(){return"THREE.MeshPhongMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>ambient: "+this.ambient+"<br/>specular: "+this.specular+"<br/>shininess: "+this.shininess+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+
-this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};THREE.MeshPhongMaterialCounter={value:0};
-THREE.MeshDepthMaterial=function(a){this.id=THREE.MeshDepthMaterialCounter.value++;this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
-undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshDepthMaterial.prototype={toString:function(){return"THREE.MeshDepthMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};THREE.MeshDepthMaterialCounter={value:0};
-THREE.MeshNormalMaterial=function(a){this.id=THREE.MeshNormalMaterialCounter.value++;this.opacity=1;this.shading=THREE.FlatShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
-undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshNormalMaterial.prototype={toString:function(){return"THREE.MeshNormalMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};THREE.MeshNormalMaterialCounter={value:0};THREE.MeshFaceMaterial=function(){};THREE.MeshFaceMaterial.prototype={toString:function(){return"THREE.MeshFaceMaterial"}};
-THREE.MeshShaderMaterial=function(a){this.id=THREE.MeshShaderMaterialCounter.value++;this.vertex_shader=this.fragment_shader="void main() {}";this.uniforms={};this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=true;this.wireframe=false;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=false;if(a){if(a.fragment_shader!==undefined)this.fragment_shader=a.fragment_shader;if(a.vertex_shader!==undefined)this.vertex_shader=
-a.vertex_shader;if(a.uniforms!==undefined)this.uniforms=a.uniforms;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==
-undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
-THREE.MeshShaderMaterial.prototype={toString:function(){return"THREE.MeshShaderMaterial (<br/>id: "+this.id+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};THREE.MeshShaderMaterialCounter={value:0};
-THREE.ParticleBasicMaterial=function(a){this.id=THREE.ParticleBasicMaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.map=null;this.size=1;this.blending=THREE.NormalBlending;this.depth_test=true;this.offset=new THREE.Vector2;this.vertex_colors=false;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.size!==undefined)this.size=a.size;if(a.blending!==undefined)this.blending=a.blending;
-if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};THREE.ParticleBasicMaterial.prototype={toString:function(){return"THREE.ParticleBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>size: "+this.size+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};THREE.ParticleBasicMaterialCounter={value:0};
-THREE.ParticleCircleMaterial=function(a){this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending}};THREE.ParticleCircleMaterial.prototype={toString:function(){return"THREE.ParticleCircleMaterial (<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>)"}};
-THREE.ParticleDOMMaterial=function(a){this.domElement=a};THREE.ParticleDOMMaterial.prototype={toString:function(){return"THREE.ParticleDOMMaterial ( domElement: "+this.domElement+" )"}};THREE.Texture=function(a,c,d,f,j,k){this.image=a;this.mapping=c!==undefined?c:new THREE.UVMapping;this.wrap_s=d!==undefined?d:THREE.ClampToEdgeWrapping;this.wrap_t=f!==undefined?f:THREE.ClampToEdgeWrapping;this.mag_filter=j!==undefined?j:THREE.LinearFilter;this.min_filter=k!==undefined?k:THREE.LinearMipMapLinearFilter};
-THREE.Texture.prototype={clone:function(){return new THREE.Texture(this.image,this.mapping,this.wrap_s,this.wrap_t,this.mag_filter,this.min_filter)},toString:function(){return"THREE.Texture (<br/>image: "+this.image+"<br/>wrap_s: "+this.wrap_s+"<br/>wrap_t: "+this.wrap_t+"<br/>mag_filter: "+this.mag_filter+"<br/>min_filter: "+this.min_filter+"<br/>)"}};THREE.MultiplyOperation=0;THREE.MixOperation=1;THREE.RepeatWrapping=0;THREE.ClampToEdgeWrapping=1;THREE.MirroredRepeatWrapping=2;
-THREE.NearestFilter=3;THREE.NearestMipMapNearestFilter=4;THREE.NearestMipMapLinearFilter=5;THREE.LinearFilter=6;THREE.LinearMipMapNearestFilter=7;THREE.LinearMipMapLinearFilter=8;THREE.ByteType=9;THREE.UnsignedByteType=10;THREE.ShortType=11;THREE.UnsignedShortType=12;THREE.IntType=13;THREE.UnsignedIntType=14;THREE.FloatType=15;THREE.AlphaFormat=16;THREE.RGBFormat=17;THREE.RGBAFormat=18;THREE.LuminanceFormat=19;THREE.LuminanceAlphaFormat=20;
-THREE.RenderTarget=function(a,c,d){this.width=a;this.height=c;d=d||{};this.wrap_s=d.wrap_s!==undefined?d.wrap_s:THREE.ClampToEdgeWrapping;this.wrap_t=d.wrap_t!==undefined?d.wrap_t:THREE.ClampToEdgeWrapping;this.mag_filter=d.mag_filter!==undefined?d.mag_filter:THREE.LinearFilter;this.min_filter=d.min_filter!==undefined?d.min_filter:THREE.LinearMipMapLinearFilter;this.format=d.format!==undefined?d.format:THREE.RGBFormat;this.type=d.type!==undefined?d.type:THREE.UnsignedByteType};
-var Uniforms={clone:function(a){var c,d,f,j={};for(c in a){j[c]={};for(d in a[c]){f=a[c][d];j[c][d]=f instanceof THREE.Color||f instanceof THREE.Vector3||f instanceof THREE.Texture?f.clone():f}}return j},merge:function(a){var c,d,f,j={};for(c=0;c<a.length;c++){f=this.clone(a[c]);for(d in f)j[d]=f[d]}return j}};THREE.CubeReflectionMapping=function(){};THREE.CubeRefractionMapping=function(){};THREE.LatitudeReflectionMapping=function(){};THREE.LatitudeRefractionMapping=function(){};
-THREE.SphericalReflectionMapping=function(){};THREE.SphericalRefractionMapping=function(){};THREE.UVMapping=function(){};
-THREE.Scene=function(){this.objects=[];this.lights=[];this.fog=null;this.addObject=function(a){this.objects.indexOf(a)===-1&&this.objects.push(a)};this.removeObject=function(a){a=this.objects.indexOf(a);a!==-1&&this.objects.splice(a,1)};this.addLight=function(a){this.lights.indexOf(a)===-1&&this.lights.push(a)};this.removeLight=function(a){a=this.lights.indexOf(a);a!==-1&&this.lights.splice(a,1)};this.toString=function(){return"THREE.Scene ( "+this.objects+" )"}};
-THREE.Fog=function(a,c,d){this.color=new THREE.Color(a);this.near=c||1;this.far=d||1E3};THREE.FogExp2=function(a,c){this.color=new THREE.Color(a);this.density=c||2.5E-4};
-THREE.Projector=function(){function a(Q,J){return J.z-Q.z}function c(Q,J){var X=0,G=1,U=Q.z+Q.w,M=J.z+J.w,D=-Q.z+Q.w,K=-J.z+J.w;if(U>=0&&M>=0&&D>=0&&K>=0)return true;else if(U<0&&M<0||D<0&&K<0)return false;else{if(U<0)X=Math.max(X,U/(U-M));else if(M<0)G=Math.min(G,U/(U-M));if(D<0)X=Math.max(X,D/(D-K));else if(K<0)G=Math.min(G,D/(D-K));if(G<X)return false;else{Q.lerpSelf(J,X);J.lerpSelf(Q,1-G);return true}}}var d,f,j=[],k,q,o,l=[],m,z,y=[],v,x,F=[],H=new THREE.Vector4,I=new THREE.Vector4,s=new THREE.Matrix4,
-O=new THREE.Matrix4,C=[],b=new THREE.Vector4,R=new THREE.Vector4,$;this.projectObjects=function(Q,J,X){var G=[],U,M;f=0;s.multiply(J.projectionMatrix,J.matrix);C[0]=new THREE.Vector4(s.n41-s.n11,s.n42-s.n12,s.n43-s.n13,s.n44-s.n14);C[1]=new THREE.Vector4(s.n41+s.n11,s.n42+s.n12,s.n43+s.n13,s.n44+s.n14);C[2]=new THREE.Vector4(s.n41+s.n21,s.n42+s.n22,s.n43+s.n23,s.n44+s.n24);C[3]=new THREE.Vector4(s.n41-s.n21,s.n42-s.n22,s.n43-s.n23,s.n44-s.n24);C[4]=new THREE.Vector4(s.n41-s.n31,s.n42-s.n32,s.n43-
-s.n33,s.n44-s.n34);C[5]=new THREE.Vector4(s.n41+s.n31,s.n42+s.n32,s.n43+s.n33,s.n44+s.n34);J=0;for(U=C.length;J<U;J++){M=C[J];M.divideScalar(Math.sqrt(M.x*M.x+M.y*M.y+M.z*M.z))}U=Q.objects;Q=0;for(J=U.length;Q<J;Q++){M=U[Q];var D;if(!(D=!M.visible)){if(D=M instanceof THREE.Mesh){a:{D=void 0;for(var K=M.position,ca=-M.geometry.boundingSphere.radius*Math.max(M.scale.x,Math.max(M.scale.y,M.scale.z)),N=0;N<6;N++){D=C[N].x*K.x+C[N].y*K.y+C[N].z*K.z+C[N].w;if(D<=ca){D=false;break a}}D=true}D=!D}D=D}if(!D){d=
-j[f]=j[f]||new THREE.RenderableObject;H.copy(M.position);s.multiplyVector3(H);d.object=M;d.z=H.z;G.push(d);f++}}X&&G.sort(a);return G};this.projectScene=function(Q,J,X){var G=[],U=J.near,M=J.far,D,K,ca,N,aa,e,i,n,h,g,t,w,u,r,p,B;o=z=x=0;J.autoUpdateMatrix&&J.updateMatrix();s.multiply(J.projectionMatrix,J.matrix);e=this.projectObjects(Q,J,true);Q=0;for(D=e.length;Q<D;Q++){i=e[Q].object;if(i.visible){i.autoUpdateMatrix&&i.updateMatrix();n=i.matrix;h=i.rotationMatrix;g=i.materials;t=i.overdraw;if(i instanceof
-THREE.Mesh){w=i.geometry;u=w.vertices;K=0;for(ca=u.length;K<ca;K++){r=u[K];r.positionWorld.copy(r.position);n.multiplyVector3(r.positionWorld);N=r.positionScreen;N.copy(r.positionWorld);s.multiplyVector4(N);N.x/=N.w;N.y/=N.w;r.__visible=N.z>U&&N.z<M}w=w.faces;K=0;for(ca=w.length;K<ca;K++){r=w[K];if(r instanceof THREE.Face3){N=u[r.a];aa=u[r.b];p=u[r.c];if(N.__visible&&aa.__visible&&p.__visible)if(i.doubleSided||i.flipSided!=(p.positionScreen.x-N.positionScreen.x)*(aa.positionScreen.y-N.positionScreen.y)-
-(p.positionScreen.y-N.positionScreen.y)*(aa.positionScreen.x-N.positionScreen.x)<0){k=l[o]=l[o]||new THREE.RenderableFace3;k.v1.positionWorld.copy(N.positionWorld);k.v2.positionWorld.copy(aa.positionWorld);k.v3.positionWorld.copy(p.positionWorld);k.v1.positionScreen.copy(N.positionScreen);k.v2.positionScreen.copy(aa.positionScreen);k.v3.positionScreen.copy(p.positionScreen);k.normalWorld.copy(r.normal);h.multiplyVector3(k.normalWorld);k.centroidWorld.copy(r.centroid);n.multiplyVector3(k.centroidWorld);
-k.centroidScreen.copy(k.centroidWorld);s.multiplyVector3(k.centroidScreen);p=r.vertexNormals;$=k.vertexNormalsWorld;N=0;for(aa=p.length;N<aa;N++){B=$[N]=$[N]||new THREE.Vector3;B.copy(p[N]);h.multiplyVector3(B)}k.z=k.centroidScreen.z;k.meshMaterials=g;k.faceMaterials=r.materials;k.overdraw=t;if(i.geometry.uvs[K]){k.uvs[0]=i.geometry.uvs[K][0];k.uvs[1]=i.geometry.uvs[K][1];k.uvs[2]=i.geometry.uvs[K][2]}G.push(k);o++}}else if(r instanceof THREE.Face4){N=u[r.a];aa=u[r.b];p=u[r.c];B=u[r.d];if(N.__visible&&
-aa.__visible&&p.__visible&&B.__visible)if(i.doubleSided||i.flipSided!=((B.positionScreen.x-N.positionScreen.x)*(aa.positionScreen.y-N.positionScreen.y)-(B.positionScreen.y-N.positionScreen.y)*(aa.positionScreen.x-N.positionScreen.x)<0||(aa.positionScreen.x-p.positionScreen.x)*(B.positionScreen.y-p.positionScreen.y)-(aa.positionScreen.y-p.positionScreen.y)*(B.positionScreen.x-p.positionScreen.x)<0)){k=l[o]=l[o]||new THREE.RenderableFace3;k.v1.positionWorld.copy(N.positionWorld);k.v2.positionWorld.copy(aa.positionWorld);
-k.v3.positionWorld.copy(B.positionWorld);k.v1.positionScreen.copy(N.positionScreen);k.v2.positionScreen.copy(aa.positionScreen);k.v3.positionScreen.copy(B.positionScreen);k.normalWorld.copy(r.normal);h.multiplyVector3(k.normalWorld);k.centroidWorld.copy(r.centroid);n.multiplyVector3(k.centroidWorld);k.centroidScreen.copy(k.centroidWorld);s.multiplyVector3(k.centroidScreen);k.z=k.centroidScreen.z;k.meshMaterials=g;k.faceMaterials=r.materials;k.overdraw=t;if(i.geometry.uvs[K]){k.uvs[0]=i.geometry.uvs[K][0];
-k.uvs[1]=i.geometry.uvs[K][1];k.uvs[2]=i.geometry.uvs[K][3]}G.push(k);o++;q=l[o]=l[o]||new THREE.RenderableFace3;q.v1.positionWorld.copy(aa.positionWorld);q.v2.positionWorld.copy(p.positionWorld);q.v3.positionWorld.copy(B.positionWorld);q.v1.positionScreen.copy(aa.positionScreen);q.v2.positionScreen.copy(p.positionScreen);q.v3.positionScreen.copy(B.positionScreen);q.normalWorld.copy(k.normalWorld);q.centroidWorld.copy(k.centroidWorld);q.centroidScreen.copy(k.centroidScreen);q.z=q.centroidScreen.z;
-q.meshMaterials=g;q.faceMaterials=r.materials;q.overdraw=t;if(i.geometry.uvs[K]){q.uvs[0]=i.geometry.uvs[K][1];q.uvs[1]=i.geometry.uvs[K][2];q.uvs[2]=i.geometry.uvs[K][3]}G.push(q);o++}}}}else if(i instanceof THREE.Line){O.multiply(s,n);u=i.geometry.vertices;r=u[0];r.positionScreen.copy(r.position);O.multiplyVector4(r.positionScreen);K=1;for(ca=u.length;K<ca;K++){N=u[K];N.positionScreen.copy(N.position);O.multiplyVector4(N.positionScreen);aa=u[K-1];b.copy(N.positionScreen);R.copy(aa.positionScreen);
-if(c(b,R)){b.multiplyScalar(1/b.w);R.multiplyScalar(1/R.w);m=y[z]=y[z]||new THREE.RenderableLine;m.v1.positionScreen.copy(b);m.v2.positionScreen.copy(R);m.z=Math.max(b.z,R.z);m.materials=i.materials;G.push(m);z++}}}else if(i instanceof THREE.Particle){I.set(i.position.x,i.position.y,i.position.z,1);s.multiplyVector4(I);I.z/=I.w;if(I.z>0&&I.z<1){v=F[x]=F[x]||new THREE.RenderableParticle;v.x=I.x/I.w;v.y=I.y/I.w;v.z=I.z;v.rotation=i.rotation.z;v.scale.x=i.scale.x*Math.abs(v.x-(I.x+J.projectionMatrix.n11)/
-(I.w+J.projectionMatrix.n14));v.scale.y=i.scale.y*Math.abs(v.y-(I.y+J.projectionMatrix.n22)/(I.w+J.projectionMatrix.n24));v.materials=i.materials;G.push(v);x++}}}}X&&G.sort(a);return G};this.unprojectVector=function(Q,J){var X=THREE.Matrix4.makeInvert(J.matrix);X.multiplySelf(THREE.Matrix4.makeInvert(J.projectionMatrix));X.multiplyVector3(Q);return Q}};
-THREE.DOMRenderer=function(){THREE.Renderer.call(this);var a=null,c=new THREE.Projector,d,f,j,k;this.domElement=document.createElement("div");this.setSize=function(q,o){d=q;f=o;j=d/2;k=f/2};this.render=function(q,o){var l,m,z,y,v,x,F,H;a=c.projectScene(q,o);l=0;for(m=a.length;l<m;l++){v=a[l];if(v instanceof THREE.RenderableParticle){F=v.x*j+j;H=v.y*k+k;z=0;for(y=v.material.length;z<y;z++){x=v.material[z];if(x instanceof THREE.ParticleDOMMaterial){x=x.domElement;x.style.left=F+"px";x.style.top=H+"px"}}}}}};
-THREE.CanvasRenderer=function(){function a(W){if(v!=W)m.globalAlpha=v=W}function c(W){if(x!=W){switch(W){case THREE.NormalBlending:m.globalCompositeOperation="source-over";break;case THREE.AdditiveBlending:m.globalCompositeOperation="lighter";break;case THREE.SubtractiveBlending:m.globalCompositeOperation="darker"}x=W}}var d=null,f=new THREE.Projector,j=document.createElement("canvas"),k,q,o,l,m=j.getContext("2d"),z=new THREE.Color(0),y=0,v=1,x=0,F=null,H=null,I=1,s,O,C,b,R,$,Q,J,X,G=new THREE.Color,
-U=new THREE.Color,M=new THREE.Color,D=new THREE.Color,K=new THREE.Color,ca,N,aa,e,i,n,h,g,t,w=new THREE.Rectangle,u=new THREE.Rectangle,r=new THREE.Rectangle,p=false,B=new THREE.Color,V=new THREE.Color,da=new THREE.Color,ea=new THREE.Color,ia=Math.PI*2,S=new THREE.Vector3,Y,pa,P,ka,oa,wa,fa=16;Y=document.createElement("canvas");Y.width=Y.height=2;pa=Y.getContext("2d");pa.fillStyle="rgba(0,0,0,1)";pa.fillRect(0,0,2,2);P=pa.getImageData(0,0,2,2);ka=P.data;oa=document.createElement("canvas");oa.width=
-oa.height=fa;wa=oa.getContext("2d");wa.translate(-fa/2,-fa/2);wa.scale(fa,fa);fa--;this.domElement=j;this.sortElements=this.sortObjects=this.autoClear=true;this.setSize=function(W,ba){k=W;q=ba;o=k/2;l=q/2;j.width=k;j.height=q;w.set(-o,-l,o,l);v=1;x=0;H=F=null;I=1};this.setClearColor=function(W,ba){z=W;y=ba;u.set(-o,-l,o,l);m.setTransform(1,0,0,-1,o,l);this.clear()};this.setClearColorHex=function(W,ba){z.setHex(W);y=ba;u.set(-o,-l,o,l);m.setTransform(1,0,0,-1,o,l);this.clear()};this.clear=function(){m.setTransform(1,
-0,0,-1,o,l);if(!u.isEmpty()){u.inflate(1);u.minSelf(w);if(z.hex==0&&y==0)m.clearRect(u.getX(),u.getY(),u.getWidth(),u.getHeight());else{c(THREE.NormalBlending);a(1);m.fillStyle="rgba("+Math.floor(z.r*255)+","+Math.floor(z.g*255)+","+Math.floor(z.b*255)+","+y+")";m.fillRect(u.getX(),u.getY(),u.getWidth(),u.getHeight())}u.empty()}};this.render=function(W,ba){function Ca(A){var Z,T,E,L=A.lights;V.setRGB(0,0,0);da.setRGB(0,0,0);ea.setRGB(0,0,0);A=0;for(Z=L.length;A<Z;A++){T=L[A];E=T.color;if(T instanceof
-THREE.AmbientLight){V.r+=E.r;V.g+=E.g;V.b+=E.b}else if(T instanceof THREE.DirectionalLight){da.r+=E.r;da.g+=E.g;da.b+=E.b}else if(T instanceof THREE.PointLight){ea.r+=E.r;ea.g+=E.g;ea.b+=E.b}}}function qa(A,Z,T,E){var L,ha,ra,xa,za=A.lights;A=0;for(L=za.length;A<L;A++){ha=za[A];ra=ha.color;xa=ha.intensity;if(ha instanceof THREE.DirectionalLight){ha=T.dot(ha.position)*xa;if(ha>0){E.r+=ra.r*ha;E.g+=ra.g*ha;E.b+=ra.b*ha}}else if(ha instanceof THREE.PointLight){S.sub(ha.position,Z);S.normalize();ha=T.dot(S)*
-xa;if(ha>0){E.r+=ra.r*ha;E.g+=ra.g*ha;E.b+=ra.b*ha}}}}function la(A,Z,T){if(T.opacity!=0){a(T.opacity);c(T.blending);var E,L,ha,ra,xa,za;if(T instanceof THREE.ParticleBasicMaterial){if(T.map&&T.map.image.loaded){ra=T.map.image;xa=ra.width>>1;za=ra.height>>1;L=Z.scale.x*o;ha=Z.scale.y*l;T=L*xa;E=ha*za;r.set(A.x-T,A.y-E,A.x+T,A.y+E);if(!w.instersects(r))return;m.save();m.translate(A.x,A.y);m.rotate(-Z.rotation);m.scale(L,-ha);m.translate(-xa,-za);m.drawImage(ra,0,0);m.restore()}m.beginPath();m.moveTo(A.x-
-10,A.y);m.lineTo(A.x+10,A.y);m.moveTo(A.x,A.y-10);m.lineTo(A.x,A.y+10);m.closePath();m.strokeStyle="rgb(255,255,0)";m.stroke()}else if(T instanceof THREE.ParticleCircleMaterial){if(p){B.r=V.r+da.r+ea.r;B.g=V.g+da.g+ea.g;B.b=V.b+da.b+ea.b;G.r=T.color.r*B.r;G.g=T.color.g*B.g;G.b=T.color.b*B.b;G.updateStyleString()}else G.__styleString=T.color.__styleString;T=Z.scale.x*o;E=Z.scale.y*l;r.set(A.x-T,A.y-E,A.x+T,A.y+E);if(w.instersects(r)){L=G.__styleString;if(H!=L)m.fillStyle=H=L;m.save();m.translate(A.x,
-A.y);m.rotate(-Z.rotation);m.scale(T,E);m.beginPath();m.arc(0,0,1,0,ia,true);m.closePath();m.fill();m.restore()}}}}function na(A,Z,T,E){if(E.opacity!=0){a(E.opacity);c(E.blending);m.beginPath();m.moveTo(A.positionScreen.x,A.positionScreen.y);m.lineTo(Z.positionScreen.x,Z.positionScreen.y);m.closePath();if(E instanceof THREE.LineBasicMaterial){G.__styleString=E.color.__styleString;A=E.linewidth;if(I!=A)m.lineWidth=I=A;A=G.__styleString;if(F!=A)m.strokeStyle=F=A;m.stroke();r.inflate(E.linewidth*2)}}}
-function Ja(A,Z,T,E,L,ha){if(L.opacity!=0){a(L.opacity);c(L.blending);b=A.positionScreen.x;R=A.positionScreen.y;$=Z.positionScreen.x;Q=Z.positionScreen.y;J=T.positionScreen.x;X=T.positionScreen.y;m.beginPath();m.moveTo(b,R);m.lineTo($,Q);m.lineTo(J,X);m.lineTo(b,R);m.closePath();if(L instanceof THREE.MeshBasicMaterial)if(L.map)L.map.image.loaded&&L.map.mapping instanceof THREE.UVMapping&&ga(b,R,$,Q,J,X,L.map.image,E.uvs[0].u,E.uvs[0].v,E.uvs[1].u,E.uvs[1].v,E.uvs[2].u,E.uvs[2].v);else if(L.env_map){if(L.env_map.image.loaded)if(L.env_map.mapping instanceof
-THREE.SphericalReflectionMapping){A=ba.matrix;S.copy(E.vertexNormalsWorld[0]);e=(S.x*A.n11+S.y*A.n12+S.z*A.n13)*0.5+0.5;i=-(S.x*A.n21+S.y*A.n22+S.z*A.n23)*0.5+0.5;S.copy(E.vertexNormalsWorld[1]);n=(S.x*A.n11+S.y*A.n12+S.z*A.n13)*0.5+0.5;h=-(S.x*A.n21+S.y*A.n22+S.z*A.n23)*0.5+0.5;S.copy(E.vertexNormalsWorld[2]);g=(S.x*A.n11+S.y*A.n12+S.z*A.n13)*0.5+0.5;t=-(S.x*A.n21+S.y*A.n22+S.z*A.n23)*0.5+0.5;ga(b,R,$,Q,J,X,L.env_map.image,e,i,n,h,g,t)}}else L.wireframe?Da(L.color.__styleString,L.wireframe_linewidth):
-va(L.color.__styleString);else if(L instanceof THREE.MeshLambertMaterial){if(L.map&&!L.wireframe){L.map.mapping instanceof THREE.UVMapping&&ga(b,R,$,Q,J,X,L.map.image,E.uvs[0].u,E.uvs[0].v,E.uvs[1].u,E.uvs[1].v,E.uvs[2].u,E.uvs[2].v);c(THREE.SubtractiveBlending)}if(p)if(!L.wireframe&&L.shading==THREE.SmoothShading&&E.vertexNormalsWorld.length==3){U.r=M.r=D.r=V.r;U.g=M.g=D.g=V.g;U.b=M.b=D.b=V.b;qa(ha,E.v1.positionWorld,E.vertexNormalsWorld[0],U);qa(ha,E.v2.positionWorld,E.vertexNormalsWorld[1],M);
-qa(ha,E.v3.positionWorld,E.vertexNormalsWorld[2],D);K.r=(M.r+D.r)*0.5;K.g=(M.g+D.g)*0.5;K.b=(M.b+D.b)*0.5;aa=ma(U,M,D,K);ga(b,R,$,Q,J,X,aa,0,0,1,0,0,1)}else{B.r=V.r;B.g=V.g;B.b=V.b;qa(ha,E.centroidWorld,E.normalWorld,B);G.r=L.color.r*B.r;G.g=L.color.g*B.g;G.b=L.color.b*B.b;G.updateStyleString();L.wireframe?Da(G.__styleString,L.wireframe_linewidth):va(G.__styleString)}else L.wireframe?Da(L.color.__styleString,L.wireframe_linewidth):va(L.color.__styleString)}else if(L instanceof THREE.MeshDepthMaterial){ca=
-ba.near;N=ba.far;U.r=U.g=U.b=1-Aa(A.positionScreen.z,ca,N);M.r=M.g=M.b=1-Aa(Z.positionScreen.z,ca,N);D.r=D.g=D.b=1-Aa(T.positionScreen.z,ca,N);K.r=(M.r+D.r)*0.5;K.g=(M.g+D.g)*0.5;K.b=(M.b+D.b)*0.5;aa=ma(U,M,D,K);ga(b,R,$,Q,J,X,aa,0,0,1,0,0,1)}else if(L instanceof THREE.MeshNormalMaterial){G.r=ta(E.normalWorld.x);G.g=ta(E.normalWorld.y);G.b=ta(E.normalWorld.z);G.updateStyleString();L.wireframe?Da(G.__styleString,L.wireframe_linewidth):va(G.__styleString)}}}function Da(A,Z){if(F!=A)m.strokeStyle=F=
-A;if(I!=Z)m.lineWidth=I=Z;m.stroke();r.inflate(Z*2)}function va(A){if(H!=A)m.fillStyle=H=A;m.fill()}function ga(A,Z,T,E,L,ha,ra,xa,za,Ga,Ba,Ha,Oa){var Ea,Ia;Ea=ra.width-1;Ia=ra.height-1;xa*=Ea;za*=Ia;Ga*=Ea;Ba*=Ia;Ha*=Ea;Oa*=Ia;T-=A;E-=Z;L-=A;ha-=Z;Ga-=xa;Ba-=za;Ha-=xa;Oa-=za;Ea=Ga*Oa-Ha*Ba;if(Ea!=0){Ia=1/Ea;Ea=(Oa*T-Ba*L)*Ia;Ba=(Oa*E-Ba*ha)*Ia;T=(Ga*L-Ha*T)*Ia;E=(Ga*ha-Ha*E)*Ia;A=A-Ea*xa-T*za;Z=Z-Ba*xa-E*za;m.save();m.transform(Ea,Ba,T,E,A,Z);m.clip();m.drawImage(ra,0,0);m.restore()}}function ma(A,
-Z,T,E){var L=~~(A.r*255),ha=~~(A.g*255);A=~~(A.b*255);var ra=~~(Z.r*255),xa=~~(Z.g*255);Z=~~(Z.b*255);var za=~~(T.r*255),Ga=~~(T.g*255);T=~~(T.b*255);var Ba=~~(E.r*255),Ha=~~(E.g*255);E=~~(E.b*255);ka[0]=L<0?0:L>255?255:L;ka[1]=ha<0?0:ha>255?255:ha;ka[2]=A<0?0:A>255?255:A;ka[4]=ra<0?0:ra>255?255:ra;ka[5]=xa<0?0:xa>255?255:xa;ka[6]=Z<0?0:Z>255?255:Z;ka[8]=za<0?0:za>255?255:za;ka[9]=Ga<0?0:Ga>255?255:Ga;ka[10]=T<0?0:T>255?255:T;ka[12]=Ba<0?0:Ba>255?255:Ba;ka[13]=Ha<0?0:Ha>255?255:Ha;ka[14]=E<0?0:E>
-255?255:E;pa.putImageData(P,0,0);wa.drawImage(Y,0,0);return oa}function Aa(A,Z,T){A=(A-Z)/(T-Z);return A*A*(3-2*A)}function ta(A){A=(A+1)*0.5;return A<0?0:A>1?1:A}function La(A,Z){var T=Z.x-A.x,E=Z.y-A.y,L=1/Math.sqrt(T*T+E*E);T*=L;E*=L;Z.x+=T;Z.y+=E;A.x-=T;A.y-=E}var ua,Ma,ja,ya,Fa,Ka,Na,sa;this.autoClear?this.clear():m.setTransform(1,0,0,-1,o,l);d=f.projectScene(W,ba,this.sortElements);m.fillStyle="rgba( 0, 255, 255, 0.5 )";m.fillRect(w.getX(),w.getY(),w.getWidth(),w.getHeight());(p=W.lights.length>
-0)&&Ca(W);ua=0;for(Ma=d.length;ua<Ma;ua++){ja=d[ua];r.empty();if(ja instanceof THREE.RenderableParticle){s=ja;s.x*=o;s.y*=l;ya=0;for(Fa=ja.materials.length;ya<Fa;ya++)la(s,ja,ja.materials[ya],W)}else if(ja instanceof THREE.RenderableLine){s=ja.v1;O=ja.v2;s.positionScreen.x*=o;s.positionScreen.y*=l;O.positionScreen.x*=o;O.positionScreen.y*=l;r.addPoint(s.positionScreen.x,s.positionScreen.y);r.addPoint(O.positionScreen.x,O.positionScreen.y);if(w.instersects(r)){ya=0;for(Fa=ja.materials.length;ya<Fa;)na(s,
-O,ja,ja.materials[ya++],W)}}else if(ja instanceof THREE.RenderableFace3){s=ja.v1;O=ja.v2;C=ja.v3;s.positionScreen.x*=o;s.positionScreen.y*=l;O.positionScreen.x*=o;O.positionScreen.y*=l;C.positionScreen.x*=o;C.positionScreen.y*=l;if(ja.overdraw){La(s.positionScreen,O.positionScreen);La(O.positionScreen,C.positionScreen);La(C.positionScreen,s.positionScreen)}r.add3Points(s.positionScreen.x,s.positionScreen.y,O.positionScreen.x,O.positionScreen.y,C.positionScreen.x,C.positionScreen.y);if(w.instersects(r)){ya=
-0;for(Fa=ja.meshMaterials.length;ya<Fa;){sa=ja.meshMaterials[ya++];if(sa instanceof THREE.MeshFaceMaterial){Ka=0;for(Na=ja.faceMaterials.length;Ka<Na;)(sa=ja.faceMaterials[Ka++])&&Ja(s,O,C,ja,sa,W)}else Ja(s,O,C,ja,sa,W)}}}u.addRectangle(r)}m.lineWidth=1;m.strokeStyle="rgba( 255, 0, 0, 0.5 )";m.strokeRect(u.getX(),u.getY(),u.getWidth(),u.getHeight());m.setTransform(1,0,0,1,0,0)}};
-THREE.SVGRenderer=function(){function a(e,i,n){var h,g,t,w;h=0;for(g=e.lights.length;h<g;h++){t=e.lights[h];if(t instanceof THREE.DirectionalLight){w=i.normalWorld.dot(t.position)*t.intensity;if(w>0){n.r+=t.color.r*w;n.g+=t.color.g*w;n.b+=t.color.b*w}}else if(t instanceof THREE.PointLight){X.sub(t.position,i.centroidWorld);X.normalize();w=i.normalWorld.dot(X)*t.intensity;if(w>0){n.r+=t.color.r*w;n.g+=t.color.g*w;n.b+=t.color.b*w}}}}function c(e,i,n,h,g,t){D=f(K++);D.setAttribute("d","M "+e.positionScreen.x+
-" "+e.positionScreen.y+" L "+i.positionScreen.x+" "+i.positionScreen.y+" L "+n.positionScreen.x+","+n.positionScreen.y+"z");if(g instanceof THREE.MeshBasicMaterial)C.__styleString=g.color.__styleString;else if(g instanceof THREE.MeshLambertMaterial)if(O){b.r=R.r;b.g=R.g;b.b=R.b;a(t,h,b);C.r=g.color.r*b.r;C.g=g.color.g*b.g;C.b=g.color.b*b.b;C.updateStyleString()}else C.__styleString=g.color.__styleString;else if(g instanceof THREE.MeshDepthMaterial){J=1-g.__2near/(g.__farPlusNear-h.z*g.__farMinusNear);
-C.setRGB(J,J,J)}else g instanceof THREE.MeshNormalMaterial&&C.setRGB(j(h.normalWorld.x),j(h.normalWorld.y),j(h.normalWorld.z));g.wireframe?D.setAttribute("style","fill: none; stroke: "+C.__styleString+"; stroke-width: "+g.wireframe_linewidth+"; stroke-opacity: "+g.opacity+"; stroke-linecap: "+g.wireframe_linecap+"; stroke-linejoin: "+g.wireframe_linejoin):D.setAttribute("style","fill: "+C.__styleString+"; fill-opacity: "+g.opacity);o.appendChild(D)}function d(e,i,n,h,g,t,w){D=f(K++);D.setAttribute("d",
-"M "+e.positionScreen.x+" "+e.positionScreen.y+" L "+i.positionScreen.x+" "+i.positionScreen.y+" L "+n.positionScreen.x+","+n.positionScreen.y+" L "+h.positionScreen.x+","+h.positionScreen.y+"z");if(t instanceof THREE.MeshBasicMaterial)C.__styleString=t.color.__styleString;else if(t instanceof THREE.MeshLambertMaterial)if(O){b.r=R.r;b.g=R.g;b.b=R.b;a(w,g,b);C.r=t.color.r*b.r;C.g=t.color.g*b.g;C.b=t.color.b*b.b;C.updateStyleString()}else C.__styleString=t.color.__styleString;else if(t instanceof THREE.MeshDepthMaterial){J=
-1-t.__2near/(t.__farPlusNear-g.z*t.__farMinusNear);C.setRGB(J,J,J)}else t instanceof THREE.MeshNormalMaterial&&C.setRGB(j(g.normalWorld.x),j(g.normalWorld.y),j(g.normalWorld.z));t.wireframe?D.setAttribute("style","fill: none; stroke: "+C.__styleString+"; stroke-width: "+t.wireframe_linewidth+"; stroke-opacity: "+t.opacity+"; stroke-linecap: "+t.wireframe_linecap+"; stroke-linejoin: "+t.wireframe_linejoin):D.setAttribute("style","fill: "+C.__styleString+"; fill-opacity: "+t.opacity);o.appendChild(D)}
-function f(e){if(G[e]==null){G[e]=document.createElementNS("http://www.w3.org/2000/svg","path");aa==0&&G[e].setAttribute("shape-rendering","crispEdges");return G[e]}return G[e]}function j(e){return e<0?Math.min((1+e)*0.5,0.5):0.5+Math.min(e*0.5,0.5)}var k=null,q=new THREE.Projector,o=document.createElementNS("http://www.w3.org/2000/svg","svg"),l,m,z,y,v,x,F,H,I=new THREE.Rectangle,s=new THREE.Rectangle,O=false,C=new THREE.Color(16777215),b=new THREE.Color(16777215),R=new THREE.Color(0),$=new THREE.Color(0),
-Q=new THREE.Color(0),J,X=new THREE.Vector3,G=[],U=[],M=[],D,K,ca,N,aa=1;this.domElement=o;this.sortElements=this.sortObjects=this.autoClear=true;this.setQuality=function(e){switch(e){case "high":aa=1;break;case "low":aa=0}};this.setSize=function(e,i){l=e;m=i;z=l/2;y=m/2;o.setAttribute("viewBox",-z+" "+-y+" "+l+" "+m);o.setAttribute("width",l);o.setAttribute("height",m);I.set(-z,-y,z,y)};this.clear=function(){for(;o.childNodes.length>0;)o.removeChild(o.childNodes[0])};this.render=function(e,i){var n,
-h,g,t,w,u,r,p;this.autoClear&&this.clear();k=q.projectScene(e,i,this.sortElements);N=ca=K=0;if(O=e.lights.length>0){r=e.lights;R.setRGB(0,0,0);$.setRGB(0,0,0);Q.setRGB(0,0,0);n=0;for(h=r.length;n<h;n++){g=r[n];t=g.color;if(g instanceof THREE.AmbientLight){R.r+=t.r;R.g+=t.g;R.b+=t.b}else if(g instanceof THREE.DirectionalLight){$.r+=t.r;$.g+=t.g;$.b+=t.b}else if(g instanceof THREE.PointLight){Q.r+=t.r;Q.g+=t.g;Q.b+=t.b}}}n=0;for(h=k.length;n<h;n++){r=k[n];s.empty();if(r instanceof THREE.RenderableParticle){v=
-r;v.x*=z;v.y*=-y;g=0;for(t=r.materials.length;g<t;g++)if(p=r.materials[g]){w=v;u=r;p=p;var B=ca++;if(U[B]==null){U[B]=document.createElementNS("http://www.w3.org/2000/svg","circle");aa==0&&U[B].setAttribute("shape-rendering","crispEdges")}D=U[B];D.setAttribute("cx",w.x);D.setAttribute("cy",w.y);D.setAttribute("r",u.scale.x*z);if(p instanceof THREE.ParticleCircleMaterial){if(O){b.r=R.r+$.r+Q.r;b.g=R.g+$.g+Q.g;b.b=R.b+$.b+Q.b;C.r=p.color.r*b.r;C.g=p.color.g*b.g;C.b=p.color.b*b.b;C.updateStyleString()}else C=
-p.color;D.setAttribute("style","fill: "+C.__styleString)}o.appendChild(D)}}else if(r instanceof THREE.RenderableLine){v=r.v1;x=r.v2;v.positionScreen.x*=z;v.positionScreen.y*=-y;x.positionScreen.x*=z;x.positionScreen.y*=-y;s.addPoint(v.positionScreen.x,v.positionScreen.y);s.addPoint(x.positionScreen.x,x.positionScreen.y);if(I.instersects(s)){g=0;for(t=r.materials.length;g<t;)if(p=r.materials[g++]){w=v;u=x;p=p;B=N++;if(M[B]==null){M[B]=document.createElementNS("http://www.w3.org/2000/svg","line");aa==
-0&&M[B].setAttribute("shape-rendering","crispEdges")}D=M[B];D.setAttribute("x1",w.positionScreen.x);D.setAttribute("y1",w.positionScreen.y);D.setAttribute("x2",u.positionScreen.x);D.setAttribute("y2",u.positionScreen.y);if(p instanceof THREE.LineBasicMaterial){C.__styleString=p.color.__styleString;D.setAttribute("style","fill: none; stroke: "+C.__styleString+"; stroke-width: "+p.linewidth+"; stroke-opacity: "+p.opacity+"; stroke-linecap: "+p.linecap+"; stroke-linejoin: "+p.linejoin);o.appendChild(D)}}}}else if(r instanceof
-THREE.RenderableFace3){v=r.v1;x=r.v2;F=r.v3;v.positionScreen.x*=z;v.positionScreen.y*=-y;x.positionScreen.x*=z;x.positionScreen.y*=-y;F.positionScreen.x*=z;F.positionScreen.y*=-y;s.addPoint(v.positionScreen.x,v.positionScreen.y);s.addPoint(x.positionScreen.x,x.positionScreen.y);s.addPoint(F.positionScreen.x,F.positionScreen.y);if(I.instersects(s)){g=0;for(t=r.meshMaterials.length;g<t;){p=r.meshMaterials[g++];if(p instanceof THREE.MeshFaceMaterial){w=0;for(u=r.faceMaterials.length;w<u;)(p=r.faceMaterials[w++])&&
-c(v,x,F,r,p,e)}else p&&c(v,x,F,r,p,e)}}}else if(r instanceof THREE.RenderableFace4){v=r.v1;x=r.v2;F=r.v3;H=r.v4;v.positionScreen.x*=z;v.positionScreen.y*=-y;x.positionScreen.x*=z;x.positionScreen.y*=-y;F.positionScreen.x*=z;F.positionScreen.y*=-y;H.positionScreen.x*=z;H.positionScreen.y*=-y;s.addPoint(v.positionScreen.x,v.positionScreen.y);s.addPoint(x.positionScreen.x,x.positionScreen.y);s.addPoint(F.positionScreen.x,F.positionScreen.y);s.addPoint(H.positionScreen.x,H.positionScreen.y);if(I.instersects(s)){g=
-0;for(t=r.meshMaterials.length;g<t;){p=r.meshMaterials[g++];if(p instanceof THREE.MeshFaceMaterial){w=0;for(u=r.faceMaterials.length;w<u;)(p=r.faceMaterials[w++])&&d(v,x,F,H,r,p,e)}else p&&d(v,x,F,H,r,p,e)}}}}}};
-THREE.WebGLRenderer=function(a){function c(e,i,n){var h,g,t,w=e.vertices,u=w.length,r=e.colors,p=r.length,B=e.__vertexArray,V=e.__colorArray,da=e.__sortArray,ea=e.__dirtyVertices,ia=e.__dirtyColors;if(n.sortParticles){U.multiplySelf(n.matrixWorld);for(h=0;h<u;h++){g=w[h].position;K.copy(g);U.multiplyVector3(K);da[h]=[K.z,h]}da.sort(function(S,Y){return Y[0]-S[0]});for(h=0;h<u;h++){g=w[da[h][1]].position;t=h*3;B[t]=g.x;B[t+1]=g.y;B[t+2]=g.z}for(h=0;h<p;h++){t=h*3;color=r[da[h][1]];V[t]=color.r;V[t+
-1]=color.g;V[t+2]=color.b}}else{if(ea)for(h=0;h<u;h++){g=w[h].position;t=h*3;B[t]=g.x;B[t+1]=g.y;B[t+2]=g.z}if(ia)for(h=0;h<p;h++){color=r[h];t=h*3;V[t]=color.r;V[t+1]=color.g;V[t+2]=color.b}}if(ea||n.sortParticles){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,B,i)}if(ia||n.sortParticles){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,V,i)}}function d(e,i){e.fragment_shader=i.fragment_shader;e.vertex_shader=i.vertex_shader;e.uniforms=
-Uniforms.clone(i.uniforms)}function f(e,i){if(!e.__webGLVertexBuffer)e.__webGLVertexBuffer=b.createBuffer();if(!e.__webGLNormalBuffer)e.__webGLNormalBuffer=b.createBuffer();if(e.hasPos){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,e.positionArray,b.DYNAMIC_DRAW);b.enableVertexAttribArray(i.attributes.position);b.vertexAttribPointer(i.attributes.position,3,b.FLOAT,false,0,0)}if(e.hasNormal){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLNormalBuffer);b.bufferData(b.ARRAY_BUFFER,
-e.normalArray,b.DYNAMIC_DRAW);b.enableVertexAttribArray(i.attributes.normal);b.vertexAttribPointer(i.attributes.normal,3,b.FLOAT,false,0,0)}b.drawArrays(b.TRIANGLES,0,e.count);e.count=0}function j(e){if(Q!=e.doubleSided){e.doubleSided?b.disable(b.CULL_FACE):b.enable(b.CULL_FACE);Q=e.doubleSided}if(J!=e.flipSided){e.flipSided?b.frontFace(b.CW):b.frontFace(b.CCW);J=e.flipSided}}function k(e){G[0].set(e.n41-e.n11,e.n42-e.n12,e.n43-e.n13,e.n44-e.n14);G[1].set(e.n41+e.n11,e.n42+e.n12,e.n43+e.n13,e.n44+
-e.n14);G[2].set(e.n41+e.n21,e.n42+e.n22,e.n43+e.n23,e.n44+e.n24);G[3].set(e.n41-e.n21,e.n42-e.n22,e.n43-e.n23,e.n44-e.n24);G[4].set(e.n41-e.n31,e.n42-e.n32,e.n43-e.n33,e.n44-e.n34);G[5].set(e.n41+e.n31,e.n42+e.n32,e.n43+e.n33,e.n44+e.n34);var i;for(e=0;e<5;e++){i=G[e];i.divideScalar(Math.sqrt(i.x*i.x+i.y*i.y+i.z*i.z))}}function q(e){for(var i=e.matrix,n=-e.geometry.boundingSphere.radius*Math.max(e.scale.x,Math.max(e.scale.y,e.scale.z)),h=0;h<6;h++){e=G[h].x*i.n14+G[h].y*i.n24+G[h].z*i.n34+G[h].w;
-if(e<=n)return false}return true}function o(e,i){e.list[e.count]=i;e.count+=1}function l(e){var i,n,h=e.object,g=e.opaque,t=e.transparent;t.count=0;e=g.count=0;for(i=h.materials.length;e<i;e++){n=h.materials[e];n.opacity&&n.opacity<1||n.blending!=THREE.NormalBlending?o(t,n):o(g,n)}}function m(e){var i,n,h,g,t=e.object,w=e.buffer,u=e.opaque,r=e.transparent;r.count=0;e=u.count=0;for(h=t.materials.length;e<h;e++){i=t.materials[e];if(i instanceof THREE.MeshFaceMaterial){i=0;for(n=w.materials.length;i<
-n;i++)if(g=w.materials[i])g.opacity&&g.opacity<1||g.blending!=THREE.NormalBlending?o(r,g):o(u,g)}else{g=i;g.opacity&&g.opacity<1||g.blending!=THREE.NormalBlending?o(r,g):o(u,g)}}}function z(e){var i,n,h,g=e.children;i=0;for(n=g.length;i<n;i++){h=g[i];h.autoUpdateMatrix&&h.updateMatrix();h.matrixWorld.multiply(e.matrixWorld,h.matrix);z(h)}}function y(e,i){var n,h,g=i.children;n=0;for(h=g.length;n<h;n++){child=g[n];v(e,child,false);y(e,child)}}function v(e,i,n){var h,g,t;g=i.geometry;if(e.__webGLObjectsMap[i.id]==
-undefined){e.__webGLObjectsMap[i.id]={};i._modelViewMatrix=new THREE.Matrix4;i._normalMatrixArray=new Float32Array(9);i._modelViewMatrixArray=new Float32Array(16);i._objectMatrixArray=new Float32Array(16);i.matrix.flattenToArray(i._objectMatrixArray)}t=e.__webGLObjectsMap[i.id];objlist=e.__webGLObjects;if(i instanceof THREE.Mesh){for(h in g.geometryChunks){e=g.geometryChunks[h];if(!e.__webGLVertexBuffer){var w=e;w.__webGLVertexBuffer=b.createBuffer();w.__webGLNormalBuffer=b.createBuffer();w.__webGLTangentBuffer=
-b.createBuffer();w.__webGLColorBuffer=b.createBuffer();w.__webGLUVBuffer=b.createBuffer();w.__webGLUV2Buffer=b.createBuffer();w.__webGLFaceBuffer=b.createBuffer();w.__webGLLineBuffer=b.createBuffer();w=e;var u=i,r=void 0,p=void 0,B=0,V=0,da=0,ea=u.geometry.faces,ia=w.faces;r=0;for(p=ia.length;r<p;r++){fi=ia[r];face=ea[fi];if(face instanceof THREE.Face3){B+=3;V+=1;da+=3}else if(face instanceof THREE.Face4){B+=4;V+=2;da+=4}}w.__vertexArray=new Float32Array(B*3);w.__normalArray=new Float32Array(B*3);
-w.__tangentArray=new Float32Array(B*4);w.__colorArray=new Float32Array(B*3);w.__uvArray=new Float32Array(B*2);w.__uv2Array=new Float32Array(B*2);w.__faceArray=new Uint16Array(V*3);w.__lineArray=new Uint16Array(da*2);p=r=w;u=u;B=void 0;ea=void 0;var S=void 0,Y=void 0;S=void 0;ia=false;B=0;for(ea=u.materials.length;B<ea;B++){S=u.materials[B];if(S instanceof THREE.MeshFaceMaterial){S=0;for(Y=p.materials.length;S<Y;S++)if(p.materials[S]&&p.materials[S].shading!=undefined&&p.materials[S].shading==THREE.SmoothShading){ia=
-true;break}}else if(S&&S.shading!=undefined&&S.shading==THREE.SmoothShading){ia=true;break}if(ia)break}r.__needsSmoothNormals=ia;w.__webGLFaceCount=V*3;w.__webGLLineCount=da*2;g.__dirtyVertices=true;g.__dirtyElements=true;g.__dirtyUvs=true;g.__dirtyNormals=true;g.__dirtyTangents=true;g.__dirtyColors=true}if(g.__dirtyVertices||g.__dirtyElements||g.__dirtyUvs||g.__dirtyNormals||g.__dirtyColors||g.__dirtyTangents){w=e;V=b.DYNAMIC_DRAW;da=void 0;r=void 0;var pa=void 0,P=void 0,ka=void 0,oa=void 0,wa=
-void 0;pa=void 0;var fa=void 0,W=void 0,ba=void 0,Ca=void 0;fa=void 0;W=void 0;ba=void 0;P=void 0;fa=void 0;W=void 0;ba=void 0;Ca=void 0;P=void 0;oa=void 0;ka=void 0;wa=void 0;var qa=Y=S=ia=ea=B=u=p=0,la=0,na=w.__vertexArray,Ja=w.__uvArray,Da=w.__uv2Array,va=w.__normalArray,ga=w.__tangentArray,ma=w.__colorArray,Aa=w.__faceArray,ta=w.__lineArray,La=w.__needsSmoothNormals,ua=i.geometry,Ma=ua.__dirtyVertices,ja=ua.__dirtyElements,ya=ua.__dirtyUvs,Fa=ua.__dirtyNormals,Ka=ua.__dirtyTangents,Na=ua.__dirtyColors,
-sa=ua.vertices,A=w.faces,Z=ua.faces,T=ua.uvs,E=ua.uvs2,L=ua.colors;da=0;for(r=A.length;da<r;da++){pa=A[da];P=Z[pa];wa=T[pa];pa=E[pa];ka=P.vertexNormals;oa=P.normal;if(P instanceof THREE.Face3){if(Ma){fa=sa[P.a].position;W=sa[P.b].position;ba=sa[P.c].position;na[u]=fa.x;na[u+1]=fa.y;na[u+2]=fa.z;na[u+3]=W.x;na[u+4]=W.y;na[u+5]=W.z;na[u+6]=ba.x;na[u+7]=ba.y;na[u+8]=ba.z;u+=9}if(Na&&L.length){fa=L[P.a];W=L[P.b];ba=L[P.c];ma[la]=fa.r;ma[la+1]=fa.g;ma[la+2]=fa.b;ma[la+3]=W.r;ma[la+4]=W.g;ma[la+5]=W.b;
-ma[la+6]=ba.r;ma[la+7]=ba.g;ma[la+8]=ba.b;la+=9}if(Ka&&ua.hasTangents){fa=sa[P.a].tangent;W=sa[P.b].tangent;ba=sa[P.c].tangent;ga[Y]=fa.x;ga[Y+1]=fa.y;ga[Y+2]=fa.z;ga[Y+3]=fa.w;ga[Y+4]=W.x;ga[Y+5]=W.y;ga[Y+6]=W.z;ga[Y+7]=W.w;ga[Y+8]=ba.x;ga[Y+9]=ba.y;ga[Y+10]=ba.z;ga[Y+11]=ba.w;Y+=12}if(Fa)if(ka.length==3&&La)for(P=0;P<3;P++){oa=ka[P];va[S]=oa.x;va[S+1]=oa.y;va[S+2]=oa.z;S+=3}else for(P=0;P<3;P++){va[S]=oa.x;va[S+1]=oa.y;va[S+2]=oa.z;S+=3}if(ya&&wa)for(P=0;P<3;P++){ka=wa[P];Ja[B]=ka.u;Ja[B+1]=ka.v;
-B+=2}if(ya&&pa)for(P=0;P<3;P++){wa=pa[P];Da[ea]=wa.u;Da[ea+1]=wa.v;ea+=2}if(ja){Aa[ia]=p;Aa[ia+1]=p+1;Aa[ia+2]=p+2;ia+=3;ta[qa]=p;ta[qa+1]=p+1;ta[qa+2]=p;ta[qa+3]=p+2;ta[qa+4]=p+1;ta[qa+5]=p+2;qa+=6;p+=3}}else if(P instanceof THREE.Face4){if(Ma){fa=sa[P.a].position;W=sa[P.b].position;ba=sa[P.c].position;Ca=sa[P.d].position;na[u]=fa.x;na[u+1]=fa.y;na[u+2]=fa.z;na[u+3]=W.x;na[u+4]=W.y;na[u+5]=W.z;na[u+6]=ba.x;na[u+7]=ba.y;na[u+8]=ba.z;na[u+9]=Ca.x;na[u+10]=Ca.y;na[u+11]=Ca.z;u+=12}if(Na&&L.length){fa=
-L[P.a];W=L[P.b];ba=L[P.c];Ca=L[P.d];ma[la]=fa.r;ma[la+1]=fa.g;ma[la+2]=fa.b;ma[la+3]=W.r;ma[la+4]=W.g;ma[la+5]=W.b;ma[la+6]=ba.r;ma[la+7]=ba.g;ma[la+8]=ba.b;ma[la+9]=Ca.r;ma[la+10]=Ca.g;ma[la+11]=Ca.b;la+=12}if(Ka&&ua.hasTangents){fa=sa[P.a].tangent;W=sa[P.b].tangent;ba=sa[P.c].tangent;P=sa[P.d].tangent;ga[Y]=fa.x;ga[Y+1]=fa.y;ga[Y+2]=fa.z;ga[Y+3]=fa.w;ga[Y+4]=W.x;ga[Y+5]=W.y;ga[Y+6]=W.z;ga[Y+7]=W.w;ga[Y+8]=ba.x;ga[Y+9]=ba.y;ga[Y+10]=ba.z;ga[Y+11]=ba.w;ga[Y+12]=P.x;ga[Y+13]=P.y;ga[Y+14]=P.z;ga[Y+
-15]=P.w;Y+=16}if(Fa)if(ka.length==4&&La)for(P=0;P<4;P++){oa=ka[P];va[S]=oa.x;va[S+1]=oa.y;va[S+2]=oa.z;S+=3}else for(P=0;P<4;P++){va[S]=oa.x;va[S+1]=oa.y;va[S+2]=oa.z;S+=3}if(ya&&wa)for(P=0;P<4;P++){ka=wa[P];Ja[B]=ka.u;Ja[B+1]=ka.v;B+=2}if(ya&&pa)for(P=0;P<4;P++){wa=pa[P];Da[ea]=wa.u;Da[ea+1]=wa.v;ea+=2}if(ja){Aa[ia]=p;Aa[ia+1]=p+1;Aa[ia+2]=p+2;Aa[ia+3]=p;Aa[ia+4]=p+2;Aa[ia+5]=p+3;ia+=6;ta[qa]=p;ta[qa+1]=p+1;ta[qa+2]=p;ta[qa+3]=p+3;ta[qa+4]=p+1;ta[qa+5]=p+2;ta[qa+6]=p+2;ta[qa+7]=p+3;qa+=8;p+=4}}}if(Ma){b.bindBuffer(b.ARRAY_BUFFER,
-w.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,na,V)}if(Na&&L.length){b.bindBuffer(b.ARRAY_BUFFER,w.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,ma,V)}if(Fa){b.bindBuffer(b.ARRAY_BUFFER,w.__webGLNormalBuffer);b.bufferData(b.ARRAY_BUFFER,va,V)}if(Ka&&ua.hasTangents){b.bindBuffer(b.ARRAY_BUFFER,w.__webGLTangentBuffer);b.bufferData(b.ARRAY_BUFFER,ga,V)}if(ya&&B>0){b.bindBuffer(b.ARRAY_BUFFER,w.__webGLUVBuffer);b.bufferData(b.ARRAY_BUFFER,Ja,V)}if(ya&&ea>0){b.bindBuffer(b.ARRAY_BUFFER,w.__webGLUV2Buffer);
-b.bufferData(b.ARRAY_BUFFER,Da,V)}if(ja){b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,w.__webGLFaceBuffer);b.bufferData(b.ELEMENT_ARRAY_BUFFER,Aa,V);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,w.__webGLLineBuffer);b.bufferData(b.ELEMENT_ARRAY_BUFFER,ta,V)}}x(objlist,t,h,e,i,n)}g.__dirtyVertices=false;g.__dirtyElements=false;g.__dirtyUvs=false;g.__dirtyNormals=false;g.__dirtyTangents=false;g.__dirtyColors=false}else if(i instanceof THREE.Line){if(!g.__webGLVertexBuffer){g.__webGLVertexBuffer=b.createBuffer();g.__webGLColorBuffer=
-b.createBuffer();h=g.vertices.length;g.__vertexArray=new Float32Array(h*3);g.__colorArray=new Float32Array(h*3);g.__webGLLineCount=h;g.__dirtyVertices=true;g.__dirtyColors=true}if(g.__dirtyVertices||g.__dirtyColors){h=b.DYNAMIC_DRAW;u=g.vertices;w=g.colors;B=u.length;V=w.length;ea=g.__vertexArray;da=g.__colorArray;ia=g.__dirtyColors;if(g.__dirtyVertices){for(r=0;r<B;r++){p=u[r].position;e=r*3;ea[e]=p.x;ea[e+1]=p.y;ea[e+2]=p.z}b.bindBuffer(b.ARRAY_BUFFER,g.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,
-ea,h)}if(ia){for(r=0;r<V;r++){color=w[r];e=r*3;da[e]=color.r;da[e+1]=color.g;da[e+2]=color.b}b.bindBuffer(b.ARRAY_BUFFER,g.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,da,h)}}x(objlist,t,0,g,i,n);g.__dirtyVertices=false;g.__dirtyColors=false}else if(i instanceof THREE.ParticleSystem){if(!g.__webGLVertexBuffer){g.__webGLVertexBuffer=b.createBuffer();g.__webGLColorBuffer=b.createBuffer();h=g.vertices.length;g.__vertexArray=new Float32Array(h*3);g.__colorArray=new Float32Array(h*3);g.__sortArray=
-[];g.__webGLParticleCount=h;g.__dirtyVertices=true;g.__dirtyColors=true}if(g.__dirtyVertices||g.__dirtyColors||i.sortParticles)c(g,b.DYNAMIC_DRAW,i,camera);x(objlist,t,0,g,i,n);g.__dirtyVertices=false;g.__dirtyColors=false}else if(i instanceof THREE.MarchingCubes)if(t[0]==undefined){e.__webGLObjectsImmediate.push({object:i,opaque:{list:[],count:0},transparent:{list:[],count:0},root:n});t[0]=1}}function x(e,i,n,h,g,t){if(i[n]==undefined){e.push({buffer:h,object:g,opaque:{list:[],count:0},transparent:{list:[],
-count:0},root:t});i[n]=1}}function F(e,i){e._modelViewMatrix.multiplyToArray(i.matrix,e.matrixWorld,e._modelViewMatrixArray);e._normalMatrix=THREE.Matrix4.makeInvert3x3(e._modelViewMatrix).transposeIntoArray(e._normalMatrixArray)}function H(e){if(e!=X){switch(e){case THREE.AdditiveBlending:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.ONE,b.ONE);break;case THREE.SubtractiveBlending:b.blendFunc(b.DST_COLOR,b.ZERO);break;case THREE.BillboardBlending:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.SRC_ALPHA,b.ONE_MINUS_SRC_ALPHA);
-break;default:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA)}X=e}}function I(e,i){if(e&&!e.__webGLFramebuffer){e.__webGLFramebuffer=b.createFramebuffer();e.__webGLRenderbuffer=b.createRenderbuffer();e.__webGLTexture=b.createTexture();b.bindRenderbuffer(b.RENDERBUFFER,e.__webGLRenderbuffer);b.renderbufferStorage(b.RENDERBUFFER,b.DEPTH_COMPONENT16,e.width,e.height);b.bindTexture(b.TEXTURE_2D,e.__webGLTexture);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,O(e.wrap_s));b.texParameteri(b.TEXTURE_2D,
-b.TEXTURE_WRAP_T,O(e.wrap_t));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,O(e.mag_filter));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,O(e.min_filter));b.texImage2D(b.TEXTURE_2D,0,O(e.format),e.width,e.height,0,O(e.format),O(e.type),null);b.bindFramebuffer(b.FRAMEBUFFER,e.__webGLFramebuffer);b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,e.__webGLTexture,0);b.framebufferRenderbuffer(b.FRAMEBUFFER,b.DEPTH_ATTACHMENT,b.RENDERBUFFER,e.__webGLRenderbuffer);b.bindTexture(b.TEXTURE_2D,
-null);b.bindRenderbuffer(b.RENDERBUFFER,null);b.bindFramebuffer(b.FRAMEBUFFER,null)}var n,h,g;if(e){n=e.__webGLFramebuffer;h=e.width;g=e.height}else{n=null;h=C.width;g=C.height}if(n!=$){b.bindFramebuffer(b.FRAMEBUFFER,n);b.viewport(0,0,h,g);i&&b.clear(b.COLOR_BUFFER_BIT|b.DEPTH_BUFFER_BIT);$=n}}function s(e,i){var n;if(e=="fragment")n=b.createShader(b.FRAGMENT_SHADER);else if(e=="vertex")n=b.createShader(b.VERTEX_SHADER);b.shaderSource(n,i);b.compileShader(n);if(!b.getShaderParameter(n,b.COMPILE_STATUS)){alert(b.getShaderInfoLog(n));
-return null}return n}function O(e){switch(e){case THREE.RepeatWrapping:return b.REPEAT;case THREE.ClampToEdgeWrapping:return b.CLAMP_TO_EDGE;case THREE.MirroredRepeatWrapping:return b.MIRRORED_REPEAT;case THREE.NearestFilter:return b.NEAREST;case THREE.NearestMipMapNearestFilter:return b.NEAREST_MIPMAP_NEAREST;case THREE.NearestMipMapLinearFilter:return b.NEAREST_MIPMAP_LINEAR;case THREE.LinearFilter:return b.LINEAR;case THREE.LinearMipMapNearestFilter:return b.LINEAR_MIPMAP_NEAREST;case THREE.LinearMipMapLinearFilter:return b.LINEAR_MIPMAP_LINEAR;
-case THREE.ByteType:return b.BYTE;case THREE.UnsignedByteType:return b.UNSIGNED_BYTE;case THREE.ShortType:return b.SHORT;case THREE.UnsignedShortType:return b.UNSIGNED_SHORT;case THREE.IntType:return b.INT;case THREE.UnsignedShortType:return b.UNSIGNED_INT;case THREE.FloatType:return b.FLOAT;case THREE.AlphaFormat:return b.ALPHA;case THREE.RGBFormat:return b.RGB;case THREE.RGBAFormat:return b.RGBA;case THREE.LuminanceFormat:return b.LUMINANCE;case THREE.LuminanceAlphaFormat:return b.LUMINANCE_ALPHA}return 0}
-var C=document.createElement("canvas"),b,R=null,$=null,Q=null,J=null,X=null,G=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],U=new THREE.Matrix4,M=new Float32Array(16),D=new Float32Array(16),K=new THREE.Vector4,ca=true,N=new THREE.Color(0),aa=0;if(a){if(a.antialias!==undefined)ca=a.antialias;a.clearColor!==undefined&&N.setHex(a.clearColor);if(a.clearAlpha!==undefined)aa=a.clearAlpha}this.domElement=C;this.autoClear=true;(function(e,i,
-n){try{b=C.getContext("experimental-webgl",{antialias:e})}catch(h){console.log(h)}if(!b){alert("WebGL not supported");throw"cannot create webgl context";}b.clearColor(0,0,0,1);b.clearDepth(1);b.enable(b.DEPTH_TEST);b.depthFunc(b.LEQUAL);b.frontFace(b.CCW);b.cullFace(b.BACK);b.enable(b.CULL_FACE);b.enable(b.BLEND);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA);b.clearColor(i.r,i.g,i.b,n);_cullEnabled=true})(ca,N,aa);this.context=b;this.lights={ambient:[0,0,0],directional:{length:0,colors:[],positions:[]},
-point:{length:0,colors:[],positions:[]}};this.setSize=function(e,i){C.width=e;C.height=i;b.viewport(0,0,C.width,C.height)};this.setClearColorHex=function(e,i){var n=new THREE.Color(e);b.clearColor(n.r,n.g,n.b,i)};this.setClearColor=function(e,i){b.clearColor(e.r,e.g,e.b,i)};this.clear=function(){b.clear(b.COLOR_BUFFER_BIT|b.DEPTH_BUFFER_BIT)};this.setupLights=function(e,i){var n,h,g,t=0,w=0,u=0,r,p,B,V=this.lights,da=V.directional.colors,ea=V.directional.positions,ia=V.point.colors,S=V.point.positions,
-Y=0,pa=0;n=g=g=0;for(h=i.length;n<h;n++){g=i[n];r=g.color;p=g.position;B=g.intensity;if(g instanceof THREE.AmbientLight){t+=r.r;w+=r.g;u+=r.b}else if(g instanceof THREE.DirectionalLight){g=Y*3;da[g]=r.r*B;da[g+1]=r.g*B;da[g+2]=r.b*B;ea[g]=p.x;ea[g+1]=p.y;ea[g+2]=p.z;Y+=1}else if(g instanceof THREE.PointLight){g=pa*3;ia[g]=r.r*B;ia[g+1]=r.g*B;ia[g+2]=r.b*B;S[g]=p.x;S[g+1]=p.y;S[g+2]=p.z;pa+=1}}for(n=Y*3;n<da.length;n++)da[n]=0;for(n=pa*3;n<ia.length;n++)ia[n]=0;V.point.length=pa;V.directional.length=
-Y;V.ambient[0]=t;V.ambient[1]=w;V.ambient[2]=u};this.initMaterial=function(e,i,n){var h,g;if(e instanceof THREE.MeshDepthMaterial)d(e,THREE.ShaderLib.depth);else if(e instanceof THREE.MeshNormalMaterial)d(e,THREE.ShaderLib.normal);else if(e instanceof THREE.MeshBasicMaterial)d(e,THREE.ShaderLib.basic);else if(e instanceof THREE.MeshLambertMaterial)d(e,THREE.ShaderLib.lambert);else if(e instanceof THREE.MeshPhongMaterial)d(e,THREE.ShaderLib.phong);else if(e instanceof THREE.LineBasicMaterial)d(e,THREE.ShaderLib.basic);
-else e instanceof THREE.ParticleBasicMaterial&&d(e,THREE.ShaderLib.particle_basic);var t,w,u,r;g=u=r=0;for(t=i.length;g<t;g++){w=i[g];w instanceof THREE.DirectionalLight&&u++;w instanceof THREE.PointLight&&r++}if(r+u<=4){i=u;r=r}else{i=Math.ceil(4*u/(r+u));r=4-i}g={directional:i,point:r};r=e.fragment_shader;i=e.vertex_shader;t={fog:n,map:e.map,env_map:e.env_map,light_map:e.light_map,vertex_colors:e.vertex_colors,maxDirLights:g.directional,maxPointLights:g.point};n=b.createProgram();g=["#ifdef GL_ES\nprecision highp float;\n#endif",
-"#define MAX_DIR_LIGHTS "+t.maxDirLights,"#define MAX_POINT_LIGHTS "+t.maxPointLights,t.fog?"#define USE_FOG":"",t.fog instanceof THREE.FogExp2?"#define FOG_EXP2":"",t.map?"#define USE_MAP":"",t.env_map?"#define USE_ENVMAP":"",t.light_map?"#define USE_LIGHTMAP":"",t.vertex_colors?"#define USE_COLOR":"","uniform mat4 viewMatrix;\nuniform vec3 cameraPosition;\n"].join("\n");t=[b.getParameter(b.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>0?"#define VERTEX_TEXTURES":"","#define MAX_DIR_LIGHTS "+t.maxDirLights,"#define MAX_POINT_LIGHTS "+
-t.maxPointLights,t.map?"#define USE_MAP":"",t.env_map?"#define USE_ENVMAP":"",t.light_map?"#define USE_LIGHTMAP":"",t.vertex_colors?"#define USE_COLOR":"","uniform mat4 objectMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec3 color;\nattribute vec2 uv;\nattribute vec2 uv2;\n"].join("\n");b.attachShader(n,s("fragment",g+r));b.attachShader(n,
-s("vertex",t+i));b.linkProgram(n);b.getProgramParameter(n,b.LINK_STATUS)||alert("Could not initialise shaders\nVALIDATE_STATUS: "+b.getProgramParameter(n,b.VALIDATE_STATUS)+", gl error ["+b.getError()+"]");n.uniforms={};n.attributes={};e.program=n;n=["viewMatrix","modelViewMatrix","projectionMatrix","normalMatrix","objectMatrix","cameraPosition"];for(h in e.uniforms)n.push(h);h=e.program;r=0;for(i=n.length;r<i;r++){g=n[r];h.uniforms[g]=b.getUniformLocation(h,g)}e=e.program;h=["position","normal",
-"uv","uv2","tangent","color"];n=0;for(r=h.length;n<r;n++){i=h[n];e.attributes[i]=b.getAttribLocation(e,i)}};this.setProgram=function(e,i,n,h,g){h.program||this.initMaterial(h,i,n);var t=h.program,w=t.uniforms,u=h.uniforms;if(t!=R){b.useProgram(t);R=t;b.uniformMatrix4fv(w.projectionMatrix,false,M)}if(n&&(h instanceof THREE.MeshBasicMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshPhongMaterial||h instanceof THREE.LineBasicMaterial||h instanceof THREE.ParticleBasicMaterial)){u.fogColor.value.setHex(n.color.hex);
-if(n instanceof THREE.Fog){u.fogNear.value=n.near;u.fogFar.value=n.far}else if(n instanceof THREE.FogExp2)u.fogDensity.value=n.density}if(h instanceof THREE.MeshPhongMaterial||h instanceof THREE.MeshLambertMaterial){this.setupLights(t,i);i=this.lights;u.enableLighting.value=i.directional.length+i.point.length;u.ambientLightColor.value=i.ambient;u.directionalLightColor.value=i.directional.colors;u.directionalLightDirection.value=i.directional.positions;u.pointLightColor.value=i.point.colors;u.pointLightPosition.value=
-i.point.positions}if(h instanceof THREE.MeshBasicMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshPhongMaterial){u.diffuse.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);u.opacity.value=h.opacity;u.map.texture=h.map;u.light_map.texture=h.light_map;u.env_map.texture=h.env_map;u.reflectivity.value=h.reflectivity;u.refraction_ratio.value=h.refraction_ratio;u.combine.value=h.combine;u.useRefract.value=h.env_map&&h.env_map.mapping instanceof THREE.CubeRefractionMapping}if(h instanceof
-THREE.LineBasicMaterial){u.diffuse.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);u.opacity.value=h.opacity}else if(h instanceof THREE.ParticleBasicMaterial){u.psColor.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);u.opacity.value=h.opacity;u.size.value=h.size;u.map.texture=h.map}else if(h instanceof THREE.MeshPhongMaterial){u.ambient.value.setRGB(h.ambient.r,h.ambient.g,h.ambient.b);u.specular.value.setRGB(h.specular.r,h.specular.g,h.specular.b);
-u.shininess.value=h.shininess}else if(h instanceof THREE.MeshDepthMaterial){u.mNear.value=e.near;u.mFar.value=e.far;u.opacity.value=h.opacity}else if(h instanceof THREE.MeshNormalMaterial)u.opacity.value=h.opacity;var r,p,B;for(r in u)if(B=t.uniforms[r]){n=u[r];p=n.type;i=n.value;if(p=="i")b.uniform1i(B,i);else if(p=="f")b.uniform1f(B,i);else if(p=="fv1")b.uniform1fv(B,i);else if(p=="fv")b.uniform3fv(B,i);else if(p=="v2")b.uniform2f(B,i.x,i.y);else if(p=="v3")b.uniform3f(B,i.x,i.y,i.z);else if(p==
-"c")b.uniform3f(B,i.r,i.g,i.b);else if(p=="t"){b.uniform1i(B,i);if(n=n.texture)if(n.image instanceof Array&&n.image.length==6){n=n;i=i;if(n.image.length==6){if(!n.image.__webGLTextureCube&&!n.image.__cubeMapInitialized&&n.image.loadCount==6){n.image.__webGLTextureCube=b.createTexture();b.bindTexture(b.TEXTURE_CUBE_MAP,n.image.__webGLTextureCube);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE);b.texParameteri(b.TEXTURE_CUBE_MAP,
-b.TEXTURE_MAG_FILTER,b.LINEAR);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_MIN_FILTER,b.LINEAR_MIPMAP_LINEAR);for(p=0;p<6;++p)b.texImage2D(b.TEXTURE_CUBE_MAP_POSITIVE_X+p,0,b.RGBA,b.RGBA,b.UNSIGNED_BYTE,n.image[p]);b.generateMipmap(b.TEXTURE_CUBE_MAP);b.bindTexture(b.TEXTURE_CUBE_MAP,null);n.image.__cubeMapInitialized=true}b.activeTexture(b.TEXTURE0+i);b.bindTexture(b.TEXTURE_CUBE_MAP,n.image.__webGLTextureCube)}}else{n=n;i=i;if(!n.__webGLTexture&&n.image.loaded){n.__webGLTexture=b.createTexture();
-b.bindTexture(b.TEXTURE_2D,n.__webGLTexture);b.texImage2D(b.TEXTURE_2D,0,b.RGBA,b.RGBA,b.UNSIGNED_BYTE,n.image);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,O(n.wrap_s));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,O(n.wrap_t));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,O(n.mag_filter));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,O(n.min_filter));b.generateMipmap(b.TEXTURE_2D);b.bindTexture(b.TEXTURE_2D,null)}b.activeTexture(b.TEXTURE0+i);b.bindTexture(b.TEXTURE_2D,n.__webGLTexture)}}}b.uniformMatrix4fv(w.modelViewMatrix,
-false,g._modelViewMatrixArray);b.uniformMatrix3fv(w.normalMatrix,false,g._normalMatrixArray);if(h instanceof THREE.MeshShaderMaterial||h instanceof THREE.MeshPhongMaterial||h.env_map)b.uniform3f(w.cameraPosition,e.position.x,e.position.y,e.position.z);if(h instanceof THREE.MeshShaderMaterial||h.env_map)b.uniformMatrix4fv(w.objectMatrix,false,g._objectMatrixArray);if(h instanceof THREE.MeshPhongMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshShaderMaterial)b.uniformMatrix4fv(w.viewMatrix,
-false,D);return t};this.renderBuffer=function(e,i,n,h,g,t){e=this.setProgram(e,i,n,h,t).attributes;b.bindBuffer(b.ARRAY_BUFFER,g.__webGLVertexBuffer);b.vertexAttribPointer(e.position,3,b.FLOAT,false,0,0);b.enableVertexAttribArray(e.position);if(e.color>=0){b.bindBuffer(b.ARRAY_BUFFER,g.__webGLColorBuffer);b.vertexAttribPointer(e.color,3,b.FLOAT,false,0,0);b.enableVertexAttribArray(e.color)}if(e.normal>=0){b.bindBuffer(b.ARRAY_BUFFER,g.__webGLNormalBuffer);b.vertexAttribPointer(e.normal,3,b.FLOAT,
-false,0,0);b.enableVertexAttribArray(e.normal)}if(e.tangent>=0){b.bindBuffer(b.ARRAY_BUFFER,g.__webGLTangentBuffer);b.vertexAttribPointer(e.tangent,4,b.FLOAT,false,0,0);b.enableVertexAttribArray(e.tangent)}if(e.uv>=0)if(g.__webGLUVBuffer){b.bindBuffer(b.ARRAY_BUFFER,g.__webGLUVBuffer);b.vertexAttribPointer(e.uv,2,b.FLOAT,false,0,0);b.enableVertexAttribArray(e.uv)}else b.disableVertexAttribArray(e.uv);if(e.uv2>=0)if(g.__webGLUV2Buffer){b.bindBuffer(b.ARRAY_BUFFER,g.__webGLUV2Buffer);b.vertexAttribPointer(e.uv2,
-2,b.FLOAT,false,0,0);b.enableVertexAttribArray(e.uv2)}else b.disableVertexAttribArray(e.uv2);if(t instanceof THREE.Mesh)if(h.wireframe){b.lineWidth(h.wireframe_linewidth);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,g.__webGLLineBuffer);b.drawElements(b.LINES,g.__webGLLineCount,b.UNSIGNED_SHORT,0)}else{b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,g.__webGLFaceBuffer);b.drawElements(b.TRIANGLES,g.__webGLFaceCount,b.UNSIGNED_SHORT,0)}else if(t instanceof THREE.Line){t=t.type==THREE.LineStrip?b.LINE_STRIP:b.LINES;b.lineWidth(h.linewidth);
-b.drawArrays(t,0,g.__webGLLineCount)}else t instanceof THREE.ParticleSystem&&b.drawArrays(b.POINTS,0,g.__webGLParticleCount)};this.render=function(e,i,n,h){var g,t,w,u,r,p,B,V=e.lights,da=e.fog;i.autoUpdateMatrix&&i.updateMatrix();i.matrix.flattenToArray(D);i.projectionMatrix.flattenToArray(M);U.multiply(i.projectionMatrix,i.matrix);k(U);this.initWebGLObjects(e,i);I(n,h!==undefined?h:true);this.autoClear&&this.clear();u=e.__webGLObjects.length;for(h=0;h<u;h++){g=e.__webGLObjects[h];p=g.object;if(p.visible){if(g.root){p.autoUpdateMatrix&&
-p.updateMatrix();p.matrixWorld.copy(p.matrix);z(p)}if(!(p instanceof THREE.Mesh)||q(p)){p.matrixWorld.flattenToArray(p._objectMatrixArray);F(p,i);m(g);g.render=true}else g.render=false}else g.render=false}r=e.__webGLObjectsImmediate.length;for(h=0;h<r;h++){g=e.__webGLObjectsImmediate[h];p=g.object;if(p.visible){if(p.autoUpdateMatrix){p.updateMatrix();p.matrixWorld.copy(p.matrix);p.matrixWorld.flattenToArray(p._objectMatrixArray)}F(p,i);l(g)}}H(THREE.NormalBlending);for(h=0;h<u;h++){g=e.__webGLObjects[h];
-if(g.render){p=g.object;B=g.buffer;w=g.opaque;j(p);for(g=0;g<w.count;g++){material=w.list[g];this.setDepthTest(material.depth_test);this.renderBuffer(i,V,da,material,B,p)}}}for(h=0;h<r;h++){g=e.__webGLObjectsImmediate[h];p=g.object;if(p.visible){w=g.opaque;j(p);for(g=0;g<w.count;g++){material=w.list[g];this.setDepthTest(material.depth_test);t=this.setProgram(i,V,da,material,p);p.render(function(ea){f(ea,t)})}}}for(h=0;h<u;h++){g=e.__webGLObjects[h];if(g.render){p=g.object;B=g.buffer;w=g.transparent;
-j(p);for(g=0;g<w.count;g++){material=w.list[g];H(material.blending);this.setDepthTest(material.depth_test);this.renderBuffer(i,V,da,material,B,p)}}}for(h=0;h<r;h++){g=e.__webGLObjectsImmediate[h];p=g.object;if(p.visible){w=g.transparent;j(p);for(g=0;g<w.count;g++){material=w.list[g];H(material.blending);this.setDepthTest(material.depth_test);t=this.setProgram(i,V,da,material,p);p.render(function(ea){f(ea,t)})}}}if(n&&n.min_filter!==THREE.NearestFilter&&n.min_filter!==THREE.LinearFilter){b.bindTexture(b.TEXTURE_2D,
-n.__webGLTexture);b.generateMipmap(b.TEXTURE_2D);b.bindTexture(b.TEXTURE_2D,null)}};this.initWebGLObjects=function(e){var i,n,h;if(!e.__webGLObjects){e.__webGLObjects=[];e.__webGLObjectsMap={};e.__webGLObjectsImmediate=[]}i=0;for(n=e.objects.length;i<n;i++){h=e.objects[i];v(e,h,true);y(e,h)}};this.removeObject=function(e,i){var n,h;for(n=e.__webGLObjects.length-1;n>=0;n--){h=e.__webGLObjects[n].object;i==h&&e.__webGLObjects.splice(n,1)}};this.setDepthTest=function(e){e?b.enable(b.DEPTH_TEST):b.disable(b.DEPTH_TEST)};
-this.setFaceCulling=function(e,i){if(e){!i||i=="ccw"?b.frontFace(b.CCW):b.frontFace(b.CW);if(e=="back")b.cullFace(b.BACK);else e=="front"?b.cullFace(b.FRONT):b.cullFace(b.FRONT_AND_BACK);b.enable(b.CULL_FACE)}else b.disable(b.CULL_FACE)};this.supportsVertexTextures=function(){return b.getParameter(b.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>0}};
-THREE.Snippets={fog_pars_fragment:"#ifdef USE_FOG\nuniform vec3 fogColor;\n#ifdef FOG_EXP2\nuniform float fogDensity;\n#else\nuniform float fogNear;\nuniform float fogFar;\n#endif\n#endif",fog_fragment:"#ifdef USE_FOG\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\n#ifdef FOG_EXP2\nconst float LOG2 = 1.442695;\nfloat fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );\nfogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );\n#else\nfloat fogFactor = smoothstep( fogNear, fogFar, depth );\n#endif\ngl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );\n#endif",
-envmap_pars_fragment:"#ifdef USE_ENVMAP\nvarying vec3 vReflect;\nuniform float reflectivity;\nuniform samplerCube env_map;\nuniform int combine;\n#endif",envmap_fragment:"#ifdef USE_ENVMAP\nvec4 cubeColor = textureCube( env_map, vec3( -vReflect.x, vReflect.yz ) );\nif ( combine == 1 ) {\ngl_FragColor = vec4( mix( gl_FragColor.xyz, cubeColor.xyz, reflectivity ), opacity );\n} else {\ngl_FragColor = gl_FragColor * cubeColor;\n}\n#endif",envmap_pars_vertex:"#ifdef USE_ENVMAP\nvarying vec3 vReflect;\nuniform float refraction_ratio;\nuniform bool useRefract;\n#endif",
-envmap_vertex:"#ifdef USE_ENVMAP\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvec3 nWorld = mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal;\nif ( useRefract ) {\nvReflect = refract( normalize( mPosition.xyz - cameraPosition ), normalize( nWorld.xyz ), refraction_ratio );\n} else {\nvReflect = reflect( normalize( mPosition.xyz - cameraPosition ), normalize( nWorld.xyz ) );\n}\n#endif",map_particle_pars_fragment:"#ifdef USE_MAP\nuniform sampler2D map;\n#endif",
-map_particle_fragment:"#ifdef USE_MAP\ngl_FragColor = gl_FragColor * texture2D( map, gl_PointCoord );\n#endif",map_pars_fragment:"#ifdef USE_MAP\nvarying vec2 vUv;\nuniform sampler2D map;\n#endif",map_pars_vertex:"#ifdef USE_MAP\nvarying vec2 vUv;\n#endif",map_fragment:"#ifdef USE_MAP\ngl_FragColor = gl_FragColor * texture2D( map, vUv );\n#endif",map_vertex:"#ifdef USE_MAP\nvUv = uv;\n#endif",lightmap_pars_fragment:"#ifdef USE_LIGHTMAP\nvarying vec2 vUv2;\nuniform sampler2D light_map;\n#endif",lightmap_pars_vertex:"#ifdef USE_LIGHTMAP\nvarying vec2 vUv2;\n#endif",
-lightmap_fragment:"#ifdef USE_LIGHTMAP\ngl_FragColor = gl_FragColor * texture2D( light_map, vUv2 );\n#endif",lightmap_vertex:"#ifdef USE_LIGHTMAP\nvUv2 = uv2;\n#endif",lights_pars_vertex:"uniform bool enableLighting;\nuniform vec3 ambientLightColor;\n#if MAX_DIR_LIGHTS > 0\nuniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];\nuniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];\n#endif\n#if MAX_POINT_LIGHTS > 0\nuniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];\nuniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];\n#ifdef PHONG\nvarying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];\n#endif\n#endif",
-lights_vertex:"if ( !enableLighting ) {\nvLightWeighting = vec3( 1.0 );\n} else {\nvLightWeighting = ambientLightColor;\n#if MAX_DIR_LIGHTS > 0\nfor( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {\nvec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );\nfloat directionalLightWeighting = max( dot( transformedNormal, normalize( lDirection.xyz ) ), 0.0 );\nvLightWeighting += directionalLightColor[ i ] * directionalLightWeighting;\n}\n#endif\n#if MAX_POINT_LIGHTS > 0\nfor( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {\nvec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );\nvec3 pointLightVector = normalize( lPosition.xyz - mvPosition.xyz );\nfloat pointLightWeighting = max( dot( transformedNormal, pointLightVector ), 0.0 );\nvLightWeighting += pointLightColor[ i ] * pointLightWeighting;\n#ifdef PHONG\nvPointLightVector[ i ] = pointLightVector;\n#endif\n}\n#endif\n}",
-lights_pars_fragment:"#if MAX_DIR_LIGHTS > 0\nuniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];\n#endif\n#if MAX_POINT_LIGHTS > 0\nvarying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];\n#endif\nvarying vec3 vViewPosition;\nvarying vec3 vNormal;",lights_fragment:"vec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );\nvec4 mColor = vec4( diffuse, opacity );\nvec4 mSpecular = vec4( specular, opacity );\n#if MAX_POINT_LIGHTS > 0\nvec4 pointDiffuse  = vec4( 0.0 );\nvec4 pointSpecular = vec4( 0.0 );\nfor( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {\nvec3 pointVector = normalize( vPointLightVector[ i ] );\nvec3 pointHalfVector = normalize( vPointLightVector[ i ] + vViewPosition );\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = pow( pointDotNormalHalf, shininess );\npointDiffuse  += mColor * pointDiffuseWeight;\npointSpecular += mSpecular * pointSpecularWeight;\n}\n#endif\n#if MAX_DIR_LIGHTS > 0\nvec4 dirDiffuse  = vec4( 0.0 );\nvec4 dirSpecular = vec4( 0.0 );\nfor( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {\nvec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = pow( dirDotNormalHalf, shininess );\ndirDiffuse  += mColor * dirDiffuseWeight;\ndirSpecular += mSpecular * dirSpecularWeight;\n}\n#endif\nvec4 totalLight = vec4( ambient, opacity );\n#if MAX_DIR_LIGHTS > 0\ntotalLight += dirDiffuse + dirSpecular;\n#endif\n#if MAX_POINT_LIGHTS > 0\ntotalLight += pointDiffuse + pointSpecular;\n#endif\ngl_FragColor = gl_FragColor * totalLight;",
-color_pars_fragment:"#ifdef USE_COLOR\nvarying vec3 vColor;\n#endif",color_fragment:"#ifdef USE_COLOR\ngl_FragColor = gl_FragColor * vec4( vColor, opacity );\n#endif",color_pars_vertex:"#ifdef USE_COLOR\nvarying vec3 vColor;\n#endif",color_vertex:"#ifdef USE_COLOR\nvColor = color;\n#endif"};
-THREE.UniformsLib={common:{diffuse:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},map:{type:"t",value:0,texture:null},light_map:{type:"t",value:2,texture:null},env_map:{type:"t",value:1,texture:null},useRefract:{type:"i",value:0},reflectivity:{type:"f",value:1},refraction_ratio:{type:"f",value:0.98},combine:{type:"i",value:0},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}},lights:{enableLighting:{type:"i",
-value:1},ambientLightColor:{type:"fv",value:[]},directionalLightDirection:{type:"fv",value:[]},directionalLightColor:{type:"fv",value:[]},pointLightPosition:{type:"fv",value:[]},pointLightColor:{type:"fv",value:[]}},particle:{psColor:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},size:{type:"f",value:1},map:{type:"t",value:0,texture:null},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}}};
-THREE.ShaderLib={depth:{uniforms:{mNear:{type:"f",value:1},mFar:{type:"f",value:2E3},opacity:{type:"f",value:1}},fragment_shader:"uniform float mNear;\nuniform float mFar;\nuniform float opacity;\nvoid main() {\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\nfloat color = 1.0 - smoothstep( mNear, mFar, depth );\ngl_FragColor = vec4( vec3( color ), opacity );\n}",vertex_shader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}"},normal:{uniforms:{opacity:{type:"f",
-value:1}},fragment_shader:"uniform float opacity;\nvarying vec3 vNormal;\nvoid main() {\ngl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );\n}",vertex_shader:"varying vec3 vNormal;\nvoid main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\ngl_Position = projectionMatrix * mvPosition;\n}"},basic:{uniforms:THREE.UniformsLib.common,fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;",THREE.Snippets.color_pars_fragment,
-THREE.Snippets.map_pars_fragment,THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( diffuse, opacity );",THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:[THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,THREE.Snippets.envmap_pars_vertex,THREE.Snippets.color_pars_vertex,
-"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,"gl_Position = projectionMatrix * mvPosition;\n}"].join("\n")},lambert:{uniforms:Uniforms.merge([THREE.UniformsLib.common,THREE.UniformsLib.lights]),fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;\nvarying vec3 vLightWeighting;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_pars_fragment,
-THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( diffuse, opacity );\ngl_FragColor = gl_FragColor * vec4( vLightWeighting, 1.0 );",THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["varying vec3 vLightWeighting;",THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,
-THREE.Snippets.envmap_pars_vertex,THREE.Snippets.lights_pars_vertex,THREE.Snippets.color_pars_vertex,"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,"vec3 transformedNormal = normalize( normalMatrix * normal );",THREE.Snippets.lights_vertex,"gl_Position = projectionMatrix * mvPosition;\n}"].join("\n")},phong:{uniforms:Uniforms.merge([THREE.UniformsLib.common,
-THREE.UniformsLib.lights,{ambient:{type:"c",value:new THREE.Color(328965)},specular:{type:"c",value:new THREE.Color(1118481)},shininess:{type:"f",value:30}}]),fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;\nuniform vec3 ambient;\nuniform vec3 specular;\nuniform float shininess;\nvarying vec3 vLightWeighting;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_pars_fragment,THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,
-THREE.Snippets.lights_pars_fragment,"void main() {\ngl_FragColor = vec4( vLightWeighting, 1.0 );",THREE.Snippets.lights_fragment,THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["#define PHONG\nvarying vec3 vLightWeighting;\nvarying vec3 vViewPosition;\nvarying vec3 vNormal;",THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,THREE.Snippets.envmap_pars_vertex,
-THREE.Snippets.lights_pars_vertex,THREE.Snippets.color_pars_vertex,"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,"#ifndef USE_ENVMAP\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\n#endif\nvViewPosition = cameraPosition - mPosition.xyz;\nvec3 transformedNormal = normalize( normalMatrix * normal );\nvNormal = transformedNormal;",THREE.Snippets.lights_vertex,
-"gl_Position = projectionMatrix * mvPosition;\n}"].join("\n")},particle_basic:{uniforms:THREE.UniformsLib.particle,fragment_shader:["uniform vec3 psColor;\nuniform float opacity;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_particle_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( psColor, opacity );",THREE.Snippets.map_particle_fragment,THREE.Snippets.color_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["uniform float size;",THREE.Snippets.color_pars_vertex,
-"void main() {",THREE.Snippets.color_vertex,"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\ngl_Position = projectionMatrix * mvPosition;\ngl_PointSize = size;\n}"].join("\n")}};THREE.RenderableObject=function(){this.z=this.object=null};
-THREE.RenderableFace3=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.v3=new THREE.Vertex;this.centroidWorld=new THREE.Vector3;this.centroidScreen=new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.vertexNormalsWorld=[];this.faceMaterials=this.meshMaterials=null;this.overdraw=false;this.uvs=[null,null,null]};THREE.RenderableParticle=function(){this.rotation=this.z=this.y=this.x=null;this.scale=new THREE.Vector2;this.materials=null};
-THREE.RenderableLine=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.materials=null};

+ 142 - 0
build/custom/ThreeCanvas.js

@@ -0,0 +1,142 @@
+// ThreeCanvas.js r33 - http://github.com/mrdoob/three.js
+var THREE=THREE||{};THREE.Color=function(a){this.setHex(a)};
+THREE.Color.prototype={autoUpdate:!0,setRGB:function(a,b,c){this.r=a;this.g=b;this.b=c;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},setHSV:function(a,b,c){var d,f,e,h,j,g;if(c==0)d=f=e=0;else{h=Math.floor(a*6);j=a*6-h;a=c*(1-b);g=c*(1-b*j);b=c*(1-b*(1-j));switch(h){case 1:d=g;f=c;e=a;break;case 2:d=a;f=c;e=b;break;case 3:d=a;f=g;e=c;break;case 4:d=b;f=a;e=c;break;case 5:d=c;f=a;e=g;break;case 6:case 0:d=c;f=b;e=a}}this.r=d;this.g=f;this.b=e;if(this.autoUpdate){this.updateHex();
+this.updateStyleString()}},setHex:function(a){this.hex=~~a&16777215;if(this.autoUpdate){this.updateRGBA();this.updateStyleString()}},updateHex:function(){this.hex=~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},updateRGBA:function(){this.r=(this.hex>>16&255)/255;this.g=(this.hex>>8&255)/255;this.b=(this.hex&255)/255},updateStyleString:function(){this.__styleString="rgb("+~~(this.r*255)+","+~~(this.g*255)+","+~~(this.b*255)+")"},clone:function(){return new THREE.Color(this.hex)},toString:function(){return"THREE.Color ( r: "+
+this.r+", g: "+this.g+", b: "+this.b+", hex: "+this.hex+" )"}};THREE.Vector2=function(a,b){this.set(a||0,b||0)};
+THREE.Vector2.prototype={set:function(a,b){this.x=a;this.y=b;return this},copy:function(a){this.set(a.x,a.y);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a);return this},negate:function(){this.set(-this.x,-this.y);return this},unit:function(){this.multiplyScalar(1/
+this.length());return this},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y},clone:function(){return new THREE.Vector2(this.x,this.y)},toString:function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,b,c){this.set(a||0,b||0,c||0)};
+THREE.Vector3.prototype={set:function(a,b,c){this.x=a;this.y=b;this.z=c;return this},copy:function(a){this.set(a.x,a.y,a.z);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z);return this},addScalar:function(a){this.set(this.x+a,this.y+a,this.z+a);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z);return this},cross:function(a,
+b){this.set(a.y*b.z-a.z*b.y,a.z*b.x-a.x*b.z,a.x*b.y-a.y*b.x);return this},crossSelf:function(a){var b=this.x,c=this.y,d=this.z;this.set(c*a.z-d*a.y,d*a.x-b*a.z,b*a.y-c*a.x);return this},multiply:function(a,b){this.set(a.x*b.x,a.y*b.y,a.z*b.z);return this},multiplySelf:function(a){this.set(this.x*a.x,this.y*a.y,this.z*a.z);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a,this.z*a);return this},divideSelf:function(a){this.set(this.x/a.x,this.y/a.y,this.z/a.z);return this},divideScalar:function(a){this.set(this.x/
+a,this.y/a,this.z/a);return this},negate:function(){this.set(-this.x,-this.y,-this.z);return this},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var b=this.x-a.x,c=this.y-a.y;a=this.z-a.z;return b*b+c*c+a*a},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},lengthManhattan:function(){return this.x+this.y+this.z},normalize:function(){var a=
+this.length();a>0?this.multiplyScalar(1/a):this.set(0,0,0);return this},setLength:function(a){return this.normalize().multiplyScalar(a)},isZero:function(){return Math.abs(this.x)<1.0E-4&&Math.abs(this.y)<1.0E-4&&Math.abs(this.z)<1.0E-4},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},toString:function(){return"THREE.Vector3 ( "+this.x+", "+this.y+", "+this.z+" )"}};THREE.Vector4=function(a,b,c,d){this.set(a||0,b||0,c||0,d||1)};
+THREE.Vector4.prototype={set:function(a,b,c,d){this.x=a;this.y=b;this.z=c;this.w=d;return this},copy:function(a){this.set(a.x,a.y,a.z,a.w||1);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z,a.w+b.w);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z,this.w+a.w);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z,a.w-b.w);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z,this.w-a.w);return this},multiplyScalar:function(a){this.set(this.x*
+a,this.y*a,this.z*a,this.w*a);return this},divideScalar:function(a){this.set(this.x/a,this.y/a,this.z/a,this.w/a);return this},lerpSelf:function(a,b){this.set(this.x+(a.x-this.x)*b,this.y+(a.y-this.y)*b,this.z+(a.z-this.z)*b,this.w+(a.w-this.w)*b)},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},toString:function(){return"THREE.Vector4 ("+this.x+", "+this.y+", "+this.z+", "+this.w+")"}};THREE.Ray=function(a,b){this.origin=a||new THREE.Vector3;this.direction=b||new THREE.Vector3};
+THREE.Ray.prototype={intersectScene:function(a){var b,c,d=a.objects,f=[];a=0;for(b=d.length;a<b;a++){c=d[a];c instanceof THREE.Mesh&&(f=f.concat(this.intersectObject(c)))}f.sort(function(e,h){return e.distance-h.distance});return f},intersectObject:function(a){function b(r,k,D,C){C=C.clone().subSelf(k);D=D.clone().subSelf(k);var I=r.clone().subSelf(k);r=C.dot(C);k=C.dot(D);C=C.dot(I);var F=D.dot(D);D=D.dot(I);I=1/(r*F-k*k);F=(F*C-k*D)*I;r=(r*D-k*C)*I;return F>0&&r>0&&F+r<1}var c,d,f,e,h,j,g,i,m,n,
+o,q=a.geometry,s=q.vertices,t=[];c=0;for(d=q.faces.length;c<d;c++){f=q.faces[c];n=this.origin.clone();o=this.direction.clone();g=a.matrixWorld;e=g.multiplyVector3(s[f.a].position.clone());h=g.multiplyVector3(s[f.b].position.clone());j=g.multiplyVector3(s[f.c].position.clone());g=f instanceof THREE.Face4?g.multiplyVector3(s[f.d].position.clone()):null;i=a.matrixRotation.multiplyVector3(f.normal.clone());m=o.dot(i);if(m<0){i=i.dot((new THREE.Vector3).sub(e,n))/m;n=n.addSelf(o.multiplyScalar(i));if(f instanceof
+THREE.Face3){if(b(n,e,h,j)){f={distance:this.origin.distanceTo(n),point:n,face:f,object:a};t.push(f)}}else if(f instanceof THREE.Face4&&(b(n,e,h,g)||b(n,h,j,g))){f={distance:this.origin.distanceTo(n),point:n,face:f,object:a};t.push(f)}}}return t}};
+THREE.Rectangle=function(){function a(){e=d-b;h=f-c}var b,c,d,f,e,h,j=!0;this.getX=function(){return b};this.getY=function(){return c};this.getWidth=function(){return e};this.getHeight=function(){return h};this.getLeft=function(){return b};this.getTop=function(){return c};this.getRight=function(){return d};this.getBottom=function(){return f};this.set=function(g,i,m,n){j=!1;b=g;c=i;d=m;f=n;a()};this.addPoint=function(g,i){if(j){j=!1;b=g;c=i;d=g;f=i}else{b=b<g?b:g;c=c<i?c:i;d=d>g?d:g;f=f>i?f:i}a()};
+this.add3Points=function(g,i,m,n,o,q){if(j){j=!1;b=g<m?g<o?g:o:m<o?m:o;c=i<n?i<q?i:q:n<q?n:q;d=g>m?g>o?g:o:m>o?m:o;f=i>n?i>q?i:q:n>q?n:q}else{b=g<m?g<o?g<b?g:b:o<b?o:b:m<o?m<b?m:b:o<b?o:b;c=i<n?i<q?i<c?i:c:q<c?q:c:n<q?n<c?n:c:q<c?q:c;d=g>m?g>o?g>d?g:d:o>d?o:d:m>o?m>d?m:d:o>d?o:d;f=i>n?i>q?i>f?i:f:q>f?q:f:n>q?n>f?n:f:q>f?q:f}a()};this.addRectangle=function(g){if(j){j=!1;b=g.getLeft();c=g.getTop();d=g.getRight();f=g.getBottom()}else{b=b<g.getLeft()?b:g.getLeft();c=c<g.getTop()?c:g.getTop();d=d>g.getRight()?
+d:g.getRight();f=f>g.getBottom()?f:g.getBottom()}a()};this.inflate=function(g){b-=g;c-=g;d+=g;f+=g;a()};this.minSelf=function(g){b=b>g.getLeft()?b:g.getLeft();c=c>g.getTop()?c:g.getTop();d=d<g.getRight()?d:g.getRight();f=f<g.getBottom()?f:g.getBottom();a()};this.instersects=function(g){return Math.min(d,g.getRight())-Math.max(b,g.getLeft())>=0&&Math.min(f,g.getBottom())-Math.max(c,g.getTop())>=0};this.empty=function(){j=!0;f=d=c=b=0;a()};this.isEmpty=function(){return j};this.toString=function(){return"THREE.Rectangle ( left: "+
+b+", right: "+d+", top: "+c+", bottom: "+f+", width: "+e+", height: "+h+" )"}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={transpose:function(){var a,b=this.m;a=b[1];b[1]=b[3];b[3]=a;a=b[2];b[2]=b[6];b[6]=a;a=b[5];b[5]=b[7];b[7]=a;return this},transposeIntoArray:function(a){var b=this.m;a[0]=b[0];a[1]=b[3];a[2]=b[6];a[3]=b[1];a[4]=b[4];a[5]=b[7];a[6]=b[2];a[7]=b[5];a[8]=b[8];return this}};
+THREE.Matrix4=function(a,b,c,d,f,e,h,j,g,i,m,n,o,q,s,t){this.set(a||1,b||0,c||0,d||0,f||0,e||1,h||0,j||0,g||0,i||0,m||1,n||0,o||0,q||0,s||0,t||1);this.flat=Array(16);this.m33=new THREE.Matrix3};
+THREE.Matrix4.prototype={set:function(a,b,c,d,f,e,h,j,g,i,m,n,o,q,s,t){this.n11=a;this.n12=b;this.n13=c;this.n14=d;this.n21=f;this.n22=e;this.n23=h;this.n24=j;this.n31=g;this.n32=i;this.n33=m;this.n34=n;this.n41=o;this.n42=q;this.n43=s;this.n44=t;return this},identity:function(){this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);return this},copy:function(a){this.set(a.n11,a.n12,a.n13,a.n14,a.n21,a.n22,a.n23,a.n24,a.n31,a.n32,a.n33,a.n34,a.n41,a.n42,a.n43,a.n44);return this},lookAt:function(a,b,c){var d=THREE.Matrix4.__tmpVec1,
+f=THREE.Matrix4.__tmpVec2,e=THREE.Matrix4.__tmpVec3;e.sub(a,b).normalize();d.cross(c,e).normalize();f.cross(e,d).normalize();this.n11=d.x;this.n12=d.y;this.n13=d.z;this.n14=-d.dot(a);this.n21=f.x;this.n22=f.y;this.n23=f.z;this.n24=-f.dot(a);this.n31=e.x;this.n32=e.y;this.n33=e.z;this.n34=-e.dot(a);this.n43=this.n42=this.n41=0;this.n44=1;return this},multiplyVector3:function(a){var b=a.x,c=a.y,d=a.z,f=1/(this.n41*b+this.n42*c+this.n43*d+this.n44);a.x=(this.n11*b+this.n12*c+this.n13*d+this.n14)*f;a.y=
+(this.n21*b+this.n22*c+this.n23*d+this.n24)*f;a.z=(this.n31*b+this.n32*c+this.n33*d+this.n34)*f;return a},multiplyVector3OnlyZ:function(a){var b=a.x,c=a.y;a=a.z;return(this.n31*b+this.n32*c+this.n33*a+this.n34)*(1/(this.n41*b+this.n42*c+this.n43*a+this.n44))},multiplyVector4:function(a){var b=a.x,c=a.y,d=a.z,f=a.w;a.x=this.n11*b+this.n12*c+this.n13*d+this.n14*f;a.y=this.n21*b+this.n22*c+this.n23*d+this.n24*f;a.z=this.n31*b+this.n32*c+this.n33*d+this.n34*f;a.w=this.n41*b+this.n42*c+this.n43*d+this.n44*
+f;return a},crossVector:function(a){var b=new THREE.Vector4;b.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;b.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;b.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;b.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return b},multiply:function(a,b){var c=a.n11,d=a.n12,f=a.n13,e=a.n14,h=a.n21,j=a.n22,g=a.n23,i=a.n24,m=a.n31,n=a.n32,o=a.n33,q=a.n34,s=a.n41,t=a.n42,r=a.n43,k=a.n44,D=b.n11,C=b.n12,I=b.n13,F=b.n14,N=b.n21,A=b.n22,
+w=b.n23,K=b.n24,u=b.n31,L=b.n32,E=b.n33,y=b.n34;this.n11=c*D+d*N+f*u;this.n12=c*C+d*A+f*L;this.n13=c*I+d*w+f*E;this.n14=c*F+d*K+f*y+e;this.n21=h*D+j*N+g*u;this.n22=h*C+j*A+g*L;this.n23=h*I+j*w+g*E;this.n24=h*F+j*K+g*y+i;this.n31=m*D+n*N+o*u;this.n32=m*C+n*A+o*L;this.n33=m*I+n*w+o*E;this.n34=m*F+n*K+o*y+q;this.n41=s*D+t*N+r*u;this.n42=s*C+t*A+r*L;this.n43=s*I+t*w+r*E;this.n44=s*F+t*K+r*y+k;return this},multiplyToArray:function(a,b,c){var d=a.n11,f=a.n12,e=a.n13,h=a.n14,j=a.n21,g=a.n22,i=a.n23,m=a.n24,
+n=a.n31,o=a.n32,q=a.n33,s=a.n34,t=a.n41,r=a.n42,k=a.n43;a=a.n44;var D=b.n11,C=b.n12,I=b.n13,F=b.n14,N=b.n21,A=b.n22,w=b.n23,K=b.n24,u=b.n31,L=b.n32,E=b.n33,y=b.n34,B=b.n41,T=b.n42,x=b.n43;b=b.n44;this.n11=d*D+f*N+e*u+h*B;this.n12=d*C+f*A+e*L+h*T;this.n13=d*I+f*w+e*E+h*x;this.n14=d*F+f*K+e*y+h*b;this.n21=j*D+g*N+i*u+m*B;this.n22=j*C+g*A+i*L+m*T;this.n23=j*I+g*w+i*E+m*x;this.n24=j*F+g*K+i*y+m*b;this.n31=n*D+o*N+q*u+s*B;this.n32=n*C+o*A+q*L+s*T;this.n33=n*I+o*w+q*E+s*x;this.n34=n*F+o*K+q*y+s*b;this.n41=
+t*D+r*N+k*u+a*B;this.n42=t*C+r*A+k*L+a*T;this.n43=t*I+r*w+k*E+a*x;this.n44=t*F+r*K+k*y+a*b;c[0]=this.n11;c[1]=this.n21;c[2]=this.n31;c[3]=this.n41;c[4]=this.n12;c[5]=this.n22;c[6]=this.n32;c[7]=this.n42;c[8]=this.n13;c[9]=this.n23;c[10]=this.n33;c[11]=this.n43;c[12]=this.n14;c[13]=this.n24;c[14]=this.n34;c[15]=this.n44;return this},multiplySelf:function(a){var b=this.n11,c=this.n12,d=this.n13,f=this.n14,e=this.n21,h=this.n22,j=this.n23,g=this.n24,i=this.n31,m=this.n32,n=this.n33,o=this.n34,q=this.n41,
+s=this.n42,t=this.n43,r=this.n44,k=a.n11,D=a.n21,C=a.n31,I=a.n12,F=a.n22,N=a.n32,A=a.n13,w=a.n23,K=a.n33,u=a.n14,L=a.n24;a=a.n34;this.n11=b*k+c*D+d*C;this.n12=b*I+c*F+d*N;this.n13=b*A+c*w+d*K;this.n14=b*u+c*L+d*a+f;this.n21=e*k+h*D+j*C;this.n22=e*I+h*F+j*N;this.n23=e*A+h*w+j*K;this.n24=e*u+h*L+j*a+g;this.n31=i*k+m*D+n*C;this.n32=i*I+m*F+n*N;this.n33=i*A+m*w+n*K;this.n34=i*u+m*L+n*a+o;this.n41=q*k+s*D+t*C;this.n42=q*I+s*F+t*N;this.n43=q*A+s*w+t*K;this.n44=q*u+s*L+t*a+r;return this},multiplyScalar:function(a){this.n11*=
+a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=a;return this},determinant:function(){var a=this.n11,b=this.n12,c=this.n13,d=this.n14,f=this.n21,e=this.n22,h=this.n23,j=this.n24,g=this.n31,i=this.n32,m=this.n33,n=this.n34,o=this.n41,q=this.n42,s=this.n43,t=this.n44;return d*h*i*o-c*j*i*o-d*e*m*o+b*j*m*o+c*e*n*o-b*h*n*o-d*h*g*q+c*j*g*q+d*f*m*q-a*j*m*q-c*f*n*q+a*h*n*q+
+d*e*g*s-b*j*g*s-d*f*i*s+a*j*i*s+b*f*n*s-a*e*n*s-c*e*g*t+b*h*g*t+c*f*i*t-a*h*i*t-b*f*m*t+a*e*m*t},transpose:function(){function a(b,c,d){var f=b[c];b[c]=b[d];b[d]=f}a(this,"n21","n12");a(this,"n31","n13");a(this,"n32","n23");a(this,"n41","n14");a(this,"n42","n24");a(this,"n43","n34");return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;
+a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){this.flattenToArray(this.flat);return this.flat},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},flattenToArrayOffset:function(a,b){a[b]=this.n11;a[b+1]=this.n21;a[b+2]=this.n31;
+a[b+3]=this.n41;a[b+4]=this.n12;a[b+5]=this.n22;a[b+6]=this.n32;a[b+7]=this.n42;a[b+8]=this.n13;a[b+9]=this.n23;a[b+10]=this.n33;a[b+11]=this.n43;a[b+12]=this.n14;a[b+13]=this.n24;a[b+14]=this.n34;a[b+15]=this.n44;return a},setTranslation:function(a,b,c){this.set(1,0,0,a,0,1,0,b,0,0,1,c,0,0,0,1);return this},setScale:function(a,b,c){this.set(a,0,0,0,0,b,0,0,0,0,c,0,0,0,0,1);return this},setRotX:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(1,0,0,0,0,b,-a,0,0,a,b,0,0,0,0,1);return this},setRotY:function(a){var b=
+Math.cos(a);a=Math.sin(a);this.set(b,0,a,0,0,1,0,0,-a,0,b,0,0,0,0,1);return this},setRotZ:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(b,-a,0,0,a,b,0,0,0,0,1,0,0,0,0,1);return this},setRotAxis:function(a,b){var c=Math.cos(b),d=Math.sin(b),f=1-c,e=a.x,h=a.y,j=a.z,g=f*e,i=f*h;this.set(g*e+c,g*h-d*j,g*j+d*h,0,g*h+d*j,i*h+c,i*j-d*e,0,g*j-d*h,i*j+d*e,f*j*j+c,0,0,0,0,1);return this},setPosition:function(a){this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},setRotationFromEuler:function(a){var b=
+a.x,c=a.y,d=a.z;a=Math.cos(b);b=Math.sin(b);var f=Math.cos(c);c=Math.sin(c);var e=Math.cos(d);d=Math.sin(d);var h=a*c,j=b*c;this.n11=f*e;this.n12=-f*d;this.n13=c;this.n21=j*e+a*d;this.n22=-j*d+a*e;this.n23=-b*f;this.n31=-h*e+b*d;this.n32=h*d+b*e;this.n33=a*f},setRotationFromQuaternion:function(a){var b=a.x,c=a.y,d=a.z,f=a.w,e=b+b,h=c+c,j=d+d;a=b*e;var g=b*h;b*=j;var i=c*h;c*=j;d*=j;e*=f;h*=f;f*=j;this.n11=1-(i+d);this.n12=g-f;this.n13=b+h;this.n21=g+f;this.n22=1-(a+d);this.n23=c-e;this.n31=b-h;this.n32=
+c+e;this.n33=1-(a+i)},scale:function(a){var b=a.x,c=a.y;a=a.z;this.n11*=b;this.n12*=c;this.n13*=a;this.n21*=b;this.n22*=c;this.n23*=a;this.n31*=b;this.n32*=c;this.n33*=a;this.n41*=b;this.n42*=c;this.n43*=a;return this},toString:function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};
+THREE.Matrix4.translationMatrix=function(a,b,c){var d=new THREE.Matrix4;d.setTranslation(a,b,c);return d};THREE.Matrix4.scaleMatrix=function(a,b,c){var d=new THREE.Matrix4;d.setScale(a,b,c);return d};THREE.Matrix4.rotationXMatrix=function(a){var b=new THREE.Matrix4;b.setRotX(a);return b};THREE.Matrix4.rotationYMatrix=function(a){var b=new THREE.Matrix4;b.setRotY(a);return b};THREE.Matrix4.rotationZMatrix=function(a){var b=new THREE.Matrix4;b.setRotZ(a);return b};
+THREE.Matrix4.rotationAxisAngleMatrix=function(a,b){var c=new THREE.Matrix4;c.setRotAxis(a,b);return c};
+THREE.Matrix4.makeInvert=function(a,b){var c=a.n11,d=a.n12,f=a.n13,e=a.n14,h=a.n21,j=a.n22,g=a.n23,i=a.n24,m=a.n31,n=a.n32,o=a.n33,q=a.n34,s=a.n41,t=a.n42,r=a.n43,k=a.n44;b===undefined&&(b=new THREE.Matrix4);b.n11=g*q*t-i*o*t+i*n*r-j*q*r-g*n*k+j*o*k;b.n12=e*o*t-f*q*t-e*n*r+d*q*r+f*n*k-d*o*k;b.n13=f*i*t-e*g*t+e*j*r-d*i*r-f*j*k+d*g*k;b.n14=e*g*n-f*i*n-e*j*o+d*i*o+f*j*q-d*g*q;b.n21=i*o*s-g*q*s-i*m*r+h*q*r+g*m*k-h*o*k;b.n22=f*q*s-e*o*s+e*m*r-c*q*r-f*m*k+c*o*k;b.n23=e*g*s-f*i*s-e*h*r+c*i*r+f*h*k-c*g*k;
+b.n24=f*i*m-e*g*m+e*h*o-c*i*o-f*h*q+c*g*q;b.n31=j*q*s-i*n*s+i*m*t-h*q*t-j*m*k+h*n*k;b.n32=e*n*s-d*q*s-e*m*t+c*q*t+d*m*k-c*n*k;b.n33=f*i*s-e*j*s+e*h*t-c*i*t-d*h*k+c*j*k;b.n34=e*j*m-d*i*m-e*h*n+c*i*n+d*h*q-c*j*q;b.n41=g*n*s-j*o*s-g*m*t+h*o*t+j*m*r-h*n*r;b.n42=d*o*s-f*n*s+f*m*t-c*o*t-d*m*r+c*n*r;b.n43=f*j*s-d*g*s-f*h*t+c*g*t+d*h*r-c*j*r;b.n44=d*g*m-f*j*m+f*h*n-c*g*n-d*h*o+c*j*o;b.multiplyScalar(1/a.determinant());return b};
+THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,d=a.n33*a.n22-a.n32*a.n23,f=-a.n33*a.n21+a.n31*a.n23,e=a.n32*a.n21-a.n31*a.n22,h=-a.n33*a.n12+a.n32*a.n13,j=a.n33*a.n11-a.n31*a.n13,g=-a.n32*a.n11+a.n31*a.n12,i=a.n23*a.n12-a.n22*a.n13,m=-a.n23*a.n11+a.n21*a.n13,n=a.n22*a.n11-a.n21*a.n12;a=a.n11*d+a.n21*h+a.n31*i;if(a==0)throw"matrix not invertible";a=1/a;c[0]=a*d;c[1]=a*f;c[2]=a*e;c[3]=a*h;c[4]=a*j;c[5]=a*g;c[6]=a*i;c[7]=a*m;c[8]=a*n;return b};
+THREE.Matrix4.makeFrustum=function(a,b,c,d,f,e){var h;h=new THREE.Matrix4;h.n11=2*f/(b-a);h.n12=0;h.n13=(b+a)/(b-a);h.n14=0;h.n21=0;h.n22=2*f/(d-c);h.n23=(d+c)/(d-c);h.n24=0;h.n31=0;h.n32=0;h.n33=-(e+f)/(e-f);h.n34=-2*e*f/(e-f);h.n41=0;h.n42=0;h.n43=-1;h.n44=0;return h};THREE.Matrix4.makePerspective=function(a,b,c,d){var f;a=c*Math.tan(a*Math.PI/360);f=-a;return THREE.Matrix4.makeFrustum(f*b,a*b,f,a,c,d)};
+THREE.Matrix4.makeOrtho=function(a,b,c,d,f,e){var h,j,g,i;h=new THREE.Matrix4;j=b-a;g=c-d;i=e-f;h.n11=2/j;h.n12=0;h.n13=0;h.n14=-((b+a)/j);h.n21=0;h.n22=2/g;h.n23=0;h.n24=-((c+d)/g);h.n31=0;h.n32=0;h.n33=-2/i;h.n34=-((e+f)/i);h.n41=0;h.n42=0;h.n43=0;h.n44=1;return h};THREE.Matrix4.__tmpVec1=new THREE.Vector3;THREE.Matrix4.__tmpVec2=new THREE.Vector3;THREE.Matrix4.__tmpVec3=new THREE.Vector3;
+THREE.Object3D=function(){this.id=THREE.Object3DCounter.value++;this.parent=undefined;this.children=[];this.position=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotation=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixNeedsUpdate=!0;this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
+0;this.boundRadiusScale=1;this.visible=!0};
+THREE.Object3D.prototype={addChild:function(a){if(this.children.indexOf(a)===-1){a.parent!==undefined&&a.parent.removeChild(a);a.parent=this;this.children.push(a)}},removeChild:function(a){var b=this.children.indexOf(a);if(b!==-1){a.parent=undefined;this.children.splice(b,1)}},updateMatrix:function(){this.matrix.setPosition(this.position);this.useQuaternion?this.matrixRotation.setRotationFromQuaternion(this.quaternion):this.matrixRotation.setRotationFromEuler(this.rotation);this.matrix.n11=this.matrixRotation.n11;
+this.matrix.n12=this.matrixRotation.n12;this.matrix.n13=this.matrixRotation.n13;this.matrix.n21=this.matrixRotation.n21;this.matrix.n22=this.matrixRotation.n22;this.matrix.n23=this.matrixRotation.n23;this.matrix.n31=this.matrixRotation.n31;this.matrix.n32=this.matrixRotation.n32;this.matrix.n33=this.matrixRotation.n33;if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1){this.matrix.scale(this.scale);this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z))}return!0},update:function(a,
+b,c){if(this.visible){this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0}a=0;for(var d=this.children.length;a<d;a++)this.children[a].update(this.matrixWorld,b,c)}}};THREE.Object3DCounter={value:0};
+THREE.Vertex=function(a,b){this.position=a||new THREE.Vector3;this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.normal=b||new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.normalScreen=new THREE.Vector3;this.tangent=new THREE.Vector4;this.__visible=!0};THREE.Vertex.prototype={toString:function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};
+THREE.Face3=function(a,b,c,d,f){this.a=a;this.b=b;this.c=c;this.centroid=new THREE.Vector3;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.materials=f instanceof Array?f:[f]};THREE.Face3.prototype={toString:function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};
+THREE.Face4=function(a,b,c,d,f,e){this.a=a;this.b=b;this.c=c;this.d=d;this.centroid=new THREE.Vector3;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.materials=e instanceof Array?e:[e]};THREE.Face4.prototype={toString:function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.UV=function(a,b){this.set(a||0,b||0)};
+THREE.UV.prototype={set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.set(a.u,a.v);return this},toString:function(){return"THREE.UV ("+this.u+", "+this.v+")"}};THREE.Geometry=function(){this.id="Geometry"+THREE.GeometryIdCounter++;this.vertices=[];this.faces=[];this.uvs=[];this.uvs2=[];this.colors=[];this.skinWeights=[];this.skinIndices=[];this.boundingSphere=this.boundingBox=null;this.geometryChunks={};this.hasTangents=!1};
+THREE.Geometry.prototype={computeCentroids:function(){var a,b,c;a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];c.centroid.set(0,0,0);if(c instanceof THREE.Face3){c.centroid.addSelf(this.vertices[c.a].position);c.centroid.addSelf(this.vertices[c.b].position);c.centroid.addSelf(this.vertices[c.c].position);c.centroid.divideScalar(3)}else if(c instanceof THREE.Face4){c.centroid.addSelf(this.vertices[c.a].position);c.centroid.addSelf(this.vertices[c.b].position);c.centroid.addSelf(this.vertices[c.c].position);
+c.centroid.addSelf(this.vertices[c.d].position);c.centroid.divideScalar(4)}}},computeFaceNormals:function(a){var b,c,d,f,e,h,j=new THREE.Vector3,g=new THREE.Vector3;d=0;for(f=this.vertices.length;d<f;d++){e=this.vertices[d];e.normal.set(0,0,0)}d=0;for(f=this.faces.length;d<f;d++){e=this.faces[d];if(a&&e.vertexNormals.length){j.set(0,0,0);b=0;for(c=e.normal.length;b<c;b++)j.addSelf(e.vertexNormals[b]);j.divideScalar(3)}else{b=this.vertices[e.a];c=this.vertices[e.b];h=this.vertices[e.c];j.sub(h.position,
+c.position);g.sub(b.position,c.position);j.crossSelf(g)}j.isZero()||j.normalize();e.normal.copy(j)}},computeVertexNormals:function(){var a,b,c,d;if(this.__tmpVertices==undefined){d=this.__tmpVertices=Array(this.vertices.length);a=0;for(b=this.vertices.length;a<b;a++)d[a]=new THREE.Vector3;a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];if(c instanceof THREE.Face3)c.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];else if(c instanceof THREE.Face4)c.vertexNormals=[new THREE.Vector3,
+new THREE.Vector3,new THREE.Vector3,new THREE.Vector3]}}else{d=this.__tmpVertices;a=0;for(b=this.vertices.length;a<b;a++)d[a].set(0,0,0)}a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];if(c instanceof THREE.Face3){d[c.a].addSelf(c.normal);d[c.b].addSelf(c.normal);d[c.c].addSelf(c.normal)}else if(c instanceof THREE.Face4){d[c.a].addSelf(c.normal);d[c.b].addSelf(c.normal);d[c.c].addSelf(c.normal);d[c.d].addSelf(c.normal)}}a=0;for(b=this.vertices.length;a<b;a++)d[a].normalize();a=0;for(b=this.faces.length;a<
+b;a++){c=this.faces[a];if(c instanceof THREE.Face3){c.vertexNormals[0].copy(d[c.a]);c.vertexNormals[1].copy(d[c.b]);c.vertexNormals[2].copy(d[c.c])}else if(c instanceof THREE.Face4){c.vertexNormals[0].copy(d[c.a]);c.vertexNormals[1].copy(d[c.b]);c.vertexNormals[2].copy(d[c.c]);c.vertexNormals[3].copy(d[c.d])}}},computeTangents:function(){function a(y,B,T,x,P,Y,J){e=y.vertices[B].position;h=y.vertices[T].position;j=y.vertices[x].position;g=f[P];i=f[Y];m=f[J];n=h.x-e.x;o=j.x-e.x;q=h.y-e.y;s=j.y-e.y;
+t=h.z-e.z;r=j.z-e.z;k=i.u-g.u;D=m.u-g.u;C=i.v-g.v;I=m.v-g.v;F=1/(k*I-D*C);w.set((I*n-C*o)*F,(I*q-C*s)*F,(I*t-C*r)*F);K.set((k*o-D*n)*F,(k*s-D*q)*F,(k*r-D*t)*F);N[B].addSelf(w);N[T].addSelf(w);N[x].addSelf(w);A[B].addSelf(K);A[T].addSelf(K);A[x].addSelf(K)}var b,c,d,f,e,h,j,g,i,m,n,o,q,s,t,r,k,D,C,I,F,N=[],A=[],w=new THREE.Vector3,K=new THREE.Vector3,u=new THREE.Vector3,L=new THREE.Vector3,E=new THREE.Vector3;b=0;for(c=this.vertices.length;b<c;b++){N[b]=new THREE.Vector3;A[b]=new THREE.Vector3}b=0;
+for(c=this.faces.length;b<c;b++){d=this.faces[b];f=this.uvs[b];if(d instanceof THREE.Face3){a(this,d.a,d.b,d.c,0,1,2);this.vertices[d.a].normal.copy(d.vertexNormals[0]);this.vertices[d.b].normal.copy(d.vertexNormals[1]);this.vertices[d.c].normal.copy(d.vertexNormals[2])}else if(d instanceof THREE.Face4){a(this,d.a,d.b,d.c,0,1,2);a(this,d.a,d.b,d.d,0,1,3);this.vertices[d.a].normal.copy(d.vertexNormals[0]);this.vertices[d.b].normal.copy(d.vertexNormals[1]);this.vertices[d.c].normal.copy(d.vertexNormals[2]);
+this.vertices[d.d].normal.copy(d.vertexNormals[3])}}b=0;for(c=this.vertices.length;b<c;b++){E.copy(this.vertices[b].normal);d=N[b];u.copy(d);u.subSelf(E.multiplyScalar(E.dot(d))).normalize();L.cross(this.vertices[b].normal,d);d=L.dot(A[b]);d=d<0?-1:1;this.vertices[b].tangent.set(u.x,u.y,u.z,d)}this.hasTangents=!0},computeBoundingBox:function(){var a;if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this.vertices[0].position.x],y:[this.vertices[0].position.y,this.vertices[0].position.y],
+z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var b=1,c=this.vertices.length;b<c;b++){a=this.vertices[b];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
+this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,b=0,c=this.vertices.length;b<c;b++)a=Math.max(a,this.vertices[b].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(m){var n=[];b=0;for(c=m.length;b<c;b++)m[b]==undefined?n.push("undefined"):n.push(m[b].id);return n.join("_")}var b,c,d,f,e,h,j,g,i={};d=0;for(f=this.faces.length;d<f;d++){e=this.faces[d];
+h=e.materials;j=a(h);i[j]==undefined&&(i[j]={hash:j,counter:0});g=i[j].hash+"_"+i[j].counter;this.geometryChunks[g]==undefined&&(this.geometryChunks[g]={faces:[],materials:h,vertices:0});e=e instanceof THREE.Face3?3:4;if(this.geometryChunks[g].vertices+e>65535){i[j].counter+=1;g=i[j].hash+"_"+i[j].counter;this.geometryChunks[g]==undefined&&(this.geometryChunks[g]={faces:[],materials:h,vertices:0})}this.geometryChunks[g].faces.push(d);this.geometryChunks[g].vertices+=e}},toString:function(){return"THREE.Geometry ( vertices: "+
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.GeometryIdCounter=0;
+THREE.Camera=function(a,b,c,d,f){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c||0.1;this.far=d||2E3;this.screenCenterY=this.screenCenterX=0;this.target=f||new THREE.Object3D;this.useTarget=!0;this.up=new THREE.Vector3(0,1,0);this.inverseMatrix=new THREE.Matrix4;this.projectionMatrix=null;this.tmpVec=new THREE.Vector3;this.translateX=function(e,h){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(e);this.tmpVec.crossSelf(this.up);if(h)this.tmpVec.y=
+0;this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};this.translateZ=function(e,h){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(e);if(h)this.tmpVec.y=0;this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;THREE.Camera.prototype.supr=THREE.Object3D.prototype;
+THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
+THREE.Camera.prototype.update=function(a,b,c){if(this.useTarget){this.matrix.lookAt(this.position,this.target.position,this.up);a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);THREE.Matrix4.makeInvert(this.matrixWorld,this.inverseMatrix);b=!0}else{this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0;THREE.Matrix4.makeInvert(this.matrixWorld,
+this.inverseMatrix)}}for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,b,c)};
+THREE.Camera.prototype.frustumContains=function(a){var b=a.matrixWorld.n14,c=a.matrixWorld.n24,d=a.matrixWorld.n34,f=this.inverseMatrix,e=a.boundRadius*a.boundRadiusScale,h=f.n31*b+f.n32*c+f.n33*d+f.n34;if(h-e>-this.near)return!1;if(h+e<-this.far)return!1;h-=e;var j=this.projectionMatrix,g=1/(j.n43*h),i=g*this.screenCenterX,m=(f.n11*b+f.n12*c+f.n13*d+f.n14)*j.n11*i;e=j.n11*e*i;if(m+e<-this.screenCenterX)return!1;if(m-e>this.screenCenterX)return!1;b=(f.n21*b+f.n22*c+f.n23*d+f.n24)*j.n22*g*this.screenCenterY;
+if(b+e<-this.screenCenterY)return!1;if(b-e>this.screenCenterY)return!1;a.positionScreen.set(m,b,h,e);return!0};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=new THREE.Object3D;THREE.Light.prototype.constructor=THREE.Light;THREE.Light.prototype.supr=THREE.Object3D.prototype;THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;
+THREE.DirectionalLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=b||1};THREE.DirectionalLight.prototype=new THREE.Light;THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3;this.intensity=b||1};THREE.PointLight.prototype=new THREE.Light;THREE.PointLight.prototype.constructor=THREE.PointLight;THREE.FlatShading=0;THREE.SmoothShading=1;
+THREE.NormalBlending=0;THREE.AdditiveBlending=1;THREE.SubtractiveBlending=2;THREE.BillboardBlending=3;THREE.ReverseSubtractiveBlending=4;THREE.MaterialCounter={value:0};THREE.CubeReflectionMapping=function(){};THREE.CubeRefractionMapping=function(){};THREE.LatitudeReflectionMapping=function(){};THREE.LatitudeRefractionMapping=function(){};THREE.SphericalReflectionMapping=function(){};THREE.SphericalRefractionMapping=function(){};THREE.UVMapping=function(){};
+THREE.LineBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.linewidth=1;this.linejoin=this.linecap="round";this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.linewidth!==undefined)this.linewidth=
+a.linewidth;if(a.linecap!==undefined)this.linecap=a.linecap;if(a.linejoin!==undefined)this.linejoin=a.linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
+THREE.LineBasicMaterial.prototype={toString:function(){return"THREE.LineBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>linewidth: "+this.linewidth+"<br/>linecap: "+this.linecap+"<br/>linejoin: "+this.linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.MeshBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshBasicMaterial.prototype={toString:function(){return"THREE.MeshBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+
+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshLambertMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshLambertMaterial.prototype={toString:function(){return"THREE.MeshLambertMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+
+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/> )"}};
+THREE.MeshPhongMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.ambient=new THREE.Color(328965);this.specular=new THREE.Color(1118481);this.shininess=30;this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=
+this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){if(a.color!==undefined)this.color=new THREE.Color(a.color);if(a.ambient!==undefined)this.ambient=new THREE.Color(a.ambient);if(a.specular!==undefined)this.specular=new THREE.Color(a.specular);if(a.shininess!==undefined)this.shininess=a.shininess;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.map!==undefined)this.map=a.map;if(a.env_map!==undefined)this.env_map=a.env_map;
+if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;
+if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshPhongMaterial.prototype={toString:function(){return"THREE.MeshPhongMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>ambient: "+this.ambient+"<br/>specular: "+this.specular+"<br/>shininess: "+this.shininess+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+
+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshDepthMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshDepthMaterial.prototype={toString:function(){return"THREE.MeshDepthMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};
+THREE.MeshNormalMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.FlatShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshNormalMaterial.prototype={toString:function(){return"THREE.MeshNormalMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};THREE.MeshFaceMaterial=function(){};THREE.MeshFaceMaterial.prototype={toString:function(){return"THREE.MeshFaceMaterial"}};
+THREE.ParticleBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.map=null;this.size=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.offset=new THREE.Vector2;this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.size!==undefined)this.size=a.size;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==
+undefined)this.depth_test=a.depth_test;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};THREE.ParticleBasicMaterial.prototype={toString:function(){return"THREE.ParticleBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>size: "+this.size+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.ParticleCircleMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending}};
+THREE.ParticleCircleMaterial.prototype={toString:function(){return"THREE.ParticleCircleMaterial (<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>)"}};
+THREE.Texture=function(a,b,c,d,f,e){this.image=a;this.mapping=b!==undefined?b:new THREE.UVMapping;this.wrap_s=c!==undefined?c:THREE.ClampToEdgeWrapping;this.wrap_t=d!==undefined?d:THREE.ClampToEdgeWrapping;this.mag_filter=f!==undefined?f:THREE.LinearFilter;this.min_filter=e!==undefined?e:THREE.LinearMipMapLinearFilter;this.needsUpdate=!1};
+THREE.Texture.prototype={clone:function(){return new THREE.Texture(this.image,this.mapping,this.wrap_s,this.wrap_t,this.mag_filter,this.min_filter)},toString:function(){return"THREE.Texture (<br/>image: "+this.image+"<br/>wrap_s: "+this.wrap_s+"<br/>wrap_t: "+this.wrap_t+"<br/>mag_filter: "+this.mag_filter+"<br/>min_filter: "+this.min_filter+"<br/>)"}};THREE.MultiplyOperation=0;THREE.MixOperation=1;THREE.RepeatWrapping=0;THREE.ClampToEdgeWrapping=1;THREE.MirroredRepeatWrapping=2;
+THREE.NearestFilter=3;THREE.NearestMipMapNearestFilter=4;THREE.NearestMipMapLinearFilter=5;THREE.LinearFilter=6;THREE.LinearMipMapNearestFilter=7;THREE.LinearMipMapLinearFilter=8;THREE.ByteType=9;THREE.UnsignedByteType=10;THREE.ShortType=11;THREE.UnsignedShortType=12;THREE.IntType=13;THREE.UnsignedIntType=14;THREE.FloatType=15;THREE.AlphaFormat=16;THREE.RGBFormat=17;THREE.RGBAFormat=18;THREE.LuminanceFormat=19;THREE.LuminanceAlphaFormat=20;
+THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a];this.matrixAutoUpdate=!1};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;THREE.Line=function(a,b,c){THREE.Object3D.call(this);this.geometry=a;this.materials=b instanceof Array?b:[b];this.type=c!=undefined?c:THREE.LineStrip};THREE.LineStrip=0;THREE.LinePieces=1;THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;
+THREE.Mesh=function(a,b){THREE.Object3D.call(this);this.geometry=a;this.materials=b&&b.length?b:[b];this.flipSided=!1;this.doubleSided=!1;this.overdraw=!1;if(this.geometry){this.geometry.boundingSphere||this.geometry.computeBoundingSphere();this.boundRadius=a.boundingSphere.radius}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;
+THREE.Scene=function(){THREE.Object3D.call(this);this.objects=[];this.lights=[];this.sounds=[];this.fog=null;this.matrixAutoUpdate=!1};THREE.Scene.prototype=new THREE.Object3D;THREE.Scene.prototype.constructor=THREE.Scene;THREE.Scene.prototype.supr=THREE.Object3D.prototype;THREE.Scene.prototype.addChild=function(a){this.supr.addChild.call(this,a);this.addChildRecurse(a)};
+THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else a instanceof THREE.Camera||a instanceof THREE.Bone||this.objects.indexOf(a)===-1&&this.objects.push(a);for(var b=0;b<a.children.length;b++)this.addChildRecurse(a.children[b])};THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};
+THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else if(a instanceof THREE.Sound){b=this.sounds.indexOf(a);b!==-1&&this.sounds.splice(b,1)}else if(!(a instanceof THREE.Camera)){b=this.objects.indexOf(a);b!==-1&&this.objects.splice(b,1)}for(b=0;b<a.children.length;b++)this.removeChildRecurse(a.children[b])};THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;
+THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;
+THREE.Projector=function(){function a(A,w){return w.z-A.z}function b(A,w){var K=0,u=1,L=A.z+A.w,E=w.z+w.w,y=-A.z+A.w,B=-w.z+w.w;if(L>=0&&E>=0&&y>=0&&B>=0)return!0;else if(L<0&&E<0||y<0&&B<0)return!1;else{if(L<0)K=Math.max(K,L/(L-E));else E<0&&(u=Math.min(u,L/(L-E)));if(y<0)K=Math.max(K,y/(y-B));else B<0&&(u=Math.min(u,y/(y-B)));if(u<K)return!1;else{A.lerpSelf(w,K);w.lerpSelf(A,1-u);return!0}}}var c,d,f=[],e,h,j,g=[],i,m,n=[],o,q,s=[],t=new THREE.Vector4,r=new THREE.Vector4,k=new THREE.Matrix4,D=new THREE.Matrix4,
+C=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],I=new THREE.Vector4,F=new THREE.Vector4,N;this.projectObjects=function(A,w,K){w=[];var u,L,E;d=0;L=A.objects;A=0;for(u=L.length;A<u;A++){E=L[A];var y;if(!(y=!E.visible))if(y=E instanceof THREE.Mesh){a:{y=void 0;for(var B=E.matrixWorld,T=-E.geometry.boundingSphere.radius*Math.max(E.scale.x,Math.max(E.scale.y,E.scale.z)),x=0;x<6;x++){y=C[x].x*B.n14+C[x].y*B.n24+C[x].z*B.n34+C[x].w;if(y<=T){y=
+!1;break a}}y=!0}y=!y}if(!y){c=f[d]=f[d]||new THREE.RenderableObject;t.copy(E.position);k.multiplyVector3(t);c.object=E;c.z=t.z;w.push(c);d++}}K&&w.sort(a);return w};this.projectScene=function(A,w,K){var u=[],L=w.near,E=w.far,y,B,T,x,P,Y,J,ja,ka,la,ma,$,O,H,U,Q;j=m=q=0;w.matrixAutoUpdate&&w.update();k.multiply(w.projectionMatrix,w.matrixWorld);C[0].set(k.n41-k.n11,k.n42-k.n12,k.n43-k.n13,k.n44-k.n14);C[1].set(k.n41+k.n11,k.n42+k.n12,k.n43+k.n13,k.n44+k.n14);C[2].set(k.n41+k.n21,k.n42+k.n22,k.n43+
+k.n23,k.n44+k.n24);C[3].set(k.n41-k.n21,k.n42-k.n22,k.n43-k.n23,k.n44-k.n24);C[4].set(k.n41-k.n31,k.n42-k.n32,k.n43-k.n33,k.n44-k.n34);C[5].set(k.n41+k.n31,k.n42+k.n32,k.n43+k.n33,k.n44+k.n34);for(y=0;y<6;y++){Y=C[y];Y.divideScalar(Math.sqrt(Y.x*Y.x+Y.y*Y.y+Y.z*Y.z))}A.update(undefined,!1,w);Y=this.projectObjects(A,w,!0);A=0;for(y=Y.length;A<y;A++){J=Y[A].object;if(J.visible){J.matrixAutoUpdate&&J.updateMatrix();ja=J.matrixWorld;ma=J.matrixRotation;ka=J.materials;la=J.overdraw;if(J instanceof THREE.Mesh){$=
+J.geometry;O=$.vertices;B=0;for(T=O.length;B<T;B++){H=O[B];H.positionWorld.copy(H.position);ja.multiplyVector3(H.positionWorld);x=H.positionScreen;x.copy(H.positionWorld);k.multiplyVector4(x);x.x/=x.w;x.y/=x.w;H.__visible=x.z>L&&x.z<E}$=$.faces;B=0;for(T=$.length;B<T;B++){H=$[B];if(H instanceof THREE.Face3){x=O[H.a];P=O[H.b];U=O[H.c];if(x.__visible&&P.__visible&&U.__visible&&(J.doubleSided||J.flipSided!=(U.positionScreen.x-x.positionScreen.x)*(P.positionScreen.y-x.positionScreen.y)-(U.positionScreen.y-
+x.positionScreen.y)*(P.positionScreen.x-x.positionScreen.x)<0)){e=g[j]=g[j]||new THREE.RenderableFace3;e.v1.positionWorld.copy(x.positionWorld);e.v2.positionWorld.copy(P.positionWorld);e.v3.positionWorld.copy(U.positionWorld);e.v1.positionScreen.copy(x.positionScreen);e.v2.positionScreen.copy(P.positionScreen);e.v3.positionScreen.copy(U.positionScreen);e.normalWorld.copy(H.normal);ma.multiplyVector3(e.normalWorld);e.centroidWorld.copy(H.centroid);ja.multiplyVector3(e.centroidWorld);e.centroidScreen.copy(e.centroidWorld);
+k.multiplyVector3(e.centroidScreen);U=H.vertexNormals;N=e.vertexNormalsWorld;x=0;for(P=U.length;x<P;x++){Q=N[x]=N[x]||new THREE.Vector3;Q.copy(U[x]);ma.multiplyVector3(Q)}e.z=e.centroidScreen.z;e.meshMaterials=ka;e.faceMaterials=H.materials;e.overdraw=la;if(J.geometry.uvs[B]){e.uvs[0]=J.geometry.uvs[B][0];e.uvs[1]=J.geometry.uvs[B][1];e.uvs[2]=J.geometry.uvs[B][2]}u.push(e);j++}}else if(H instanceof THREE.Face4){x=O[H.a];P=O[H.b];U=O[H.c];Q=O[H.d];if(x.__visible&&P.__visible&&U.__visible&&Q.__visible&&
+(J.doubleSided||J.flipSided!=((Q.positionScreen.x-x.positionScreen.x)*(P.positionScreen.y-x.positionScreen.y)-(Q.positionScreen.y-x.positionScreen.y)*(P.positionScreen.x-x.positionScreen.x)<0||(P.positionScreen.x-U.positionScreen.x)*(Q.positionScreen.y-U.positionScreen.y)-(P.positionScreen.y-U.positionScreen.y)*(Q.positionScreen.x-U.positionScreen.x)<0))){e=g[j]=g[j]||new THREE.RenderableFace3;e.v1.positionWorld.copy(x.positionWorld);e.v2.positionWorld.copy(P.positionWorld);e.v3.positionWorld.copy(Q.positionWorld);
+e.v1.positionScreen.copy(x.positionScreen);e.v2.positionScreen.copy(P.positionScreen);e.v3.positionScreen.copy(Q.positionScreen);e.normalWorld.copy(H.normal);ma.multiplyVector3(e.normalWorld);e.centroidWorld.copy(H.centroid);ja.multiplyVector3(e.centroidWorld);e.centroidScreen.copy(e.centroidWorld);k.multiplyVector3(e.centroidScreen);e.z=e.centroidScreen.z;e.meshMaterials=ka;e.faceMaterials=H.materials;e.overdraw=la;if(J.geometry.uvs[B]){e.uvs[0]=J.geometry.uvs[B][0];e.uvs[1]=J.geometry.uvs[B][1];
+e.uvs[2]=J.geometry.uvs[B][3]}u.push(e);j++;h=g[j]=g[j]||new THREE.RenderableFace3;h.v1.positionWorld.copy(P.positionWorld);h.v2.positionWorld.copy(U.positionWorld);h.v3.positionWorld.copy(Q.positionWorld);h.v1.positionScreen.copy(P.positionScreen);h.v2.positionScreen.copy(U.positionScreen);h.v3.positionScreen.copy(Q.positionScreen);h.normalWorld.copy(e.normalWorld);h.centroidWorld.copy(e.centroidWorld);h.centroidScreen.copy(e.centroidScreen);h.z=h.centroidScreen.z;h.meshMaterials=ka;h.faceMaterials=
+H.materials;h.overdraw=la;if(J.geometry.uvs[B]){h.uvs[0]=J.geometry.uvs[B][1];h.uvs[1]=J.geometry.uvs[B][2];h.uvs[2]=J.geometry.uvs[B][3]}u.push(h);j++}}}}else if(J instanceof THREE.Line){D.multiply(k,ja);O=J.geometry.vertices;H=O[0];H.positionScreen.copy(H.position);D.multiplyVector4(H.positionScreen);B=1;for(T=O.length;B<T;B++){x=O[B];x.positionScreen.copy(x.position);D.multiplyVector4(x.positionScreen);P=O[B-1];I.copy(x.positionScreen);F.copy(P.positionScreen);if(b(I,F)){I.multiplyScalar(1/I.w);
+F.multiplyScalar(1/F.w);i=n[m]=n[m]||new THREE.RenderableLine;i.v1.positionScreen.copy(I);i.v2.positionScreen.copy(F);i.z=Math.max(I.z,F.z);i.materials=J.materials;u.push(i);m++}}}else if(J instanceof THREE.Particle){r.set(J.position.x,J.position.y,J.position.z,1);k.multiplyVector4(r);r.z/=r.w;if(r.z>0&&r.z<1){o=s[q]=s[q]||new THREE.RenderableParticle;o.x=r.x/r.w;o.y=r.y/r.w;o.z=r.z;o.rotation=J.rotation.z;o.scale.x=J.scale.x*Math.abs(o.x-(r.x+w.projectionMatrix.n11)/(r.w+w.projectionMatrix.n14));
+o.scale.y=J.scale.y*Math.abs(o.y-(r.y+w.projectionMatrix.n22)/(r.w+w.projectionMatrix.n24));o.materials=J.materials;u.push(o);q++}}}}K&&u.sort(a);return u};this.unprojectVector=function(A,w){var K=THREE.Matrix4.makeInvert(w.matrixWorld);K.multiplySelf(THREE.Matrix4.makeInvert(w.projectionMatrix));K.multiplyVector3(A);return A}};
+THREE.CanvasRenderer=function(){function a(V){if(o!=V)i.globalAlpha=o=V}function b(V){if(q!=V){switch(V){case THREE.NormalBlending:i.globalCompositeOperation="source-over";break;case THREE.AdditiveBlending:i.globalCompositeOperation="lighter";break;case THREE.SubtractiveBlending:i.globalCompositeOperation="darker"}q=V}}var c=null,d=new THREE.Projector,f=document.createElement("canvas"),e,h,j,g,i=f.getContext("2d"),m=new THREE.Color(0),n=0,o=1,q=0,s=null,t=null,r=1,k,D,C,I,F,N,A,w,K,u=new THREE.Color,
+L=new THREE.Color,E=new THREE.Color,y=new THREE.Color,B=new THREE.Color,T,x,P,Y,J,ja,ka,la,ma,$=new THREE.Rectangle,O=new THREE.Rectangle,H=new THREE.Rectangle,U=!1,Q=new THREE.Color,aa=new THREE.Color,na=new THREE.Color,oa=new THREE.Color,La=Math.PI*2,R=new THREE.Vector3,ra,sa,Ca,ba,ta,xa,pa=16;ra=document.createElement("canvas");ra.width=ra.height=2;sa=ra.getContext("2d");sa.fillStyle="rgba(0,0,0,1)";sa.fillRect(0,0,2,2);Ca=sa.getImageData(0,0,2,2);ba=Ca.data;ta=document.createElement("canvas");
+ta.width=ta.height=pa;xa=ta.getContext("2d");xa.translate(-pa/2,-pa/2);xa.scale(pa,pa);pa--;this.domElement=f;this.autoClear=!0;this.sortObjects=!0;this.sortElements=!0;this.setSize=function(V,da){e=V;h=da;j=e/2;g=h/2;f.width=e;f.height=h;$.set(-j,-g,j,g);o=1;q=0;t=s=null;r=1};this.setClearColor=function(V,da){m=V;n=da;O.set(-j,-g,j,g);i.setTransform(1,0,0,-1,j,g);this.clear()};this.setClearColorHex=function(V,da){m.setHex(V);n=da;O.set(-j,-g,j,g);i.setTransform(1,0,0,-1,j,g);this.clear()};this.clear=
+function(){i.setTransform(1,0,0,-1,j,g);if(!O.isEmpty()){O.inflate(1);O.minSelf($);if(m.hex==0&&n==0)i.clearRect(O.getX(),O.getY(),O.getWidth(),O.getHeight());else{b(THREE.NormalBlending);a(1);i.fillStyle="rgba("+Math.floor(m.r*255)+","+Math.floor(m.g*255)+","+Math.floor(m.b*255)+","+n+")";i.fillRect(O.getX(),O.getY(),O.getWidth(),O.getHeight())}O.empty()}};this.render=function(V,da){function Ma(l){var G,z,p,v=l.lights;aa.setRGB(0,0,0);na.setRGB(0,0,0);oa.setRGB(0,0,0);l=0;for(G=v.length;l<G;l++){z=
+v[l];p=z.color;if(z instanceof THREE.AmbientLight){aa.r+=p.r;aa.g+=p.g;aa.b+=p.b}else if(z instanceof THREE.DirectionalLight){na.r+=p.r;na.g+=p.g;na.b+=p.b}else if(z instanceof THREE.PointLight){oa.r+=p.r;oa.g+=p.g;oa.b+=p.b}}}function ya(l,G,z,p){var v,M,W,X,Z=l.lights;l=0;for(v=Z.length;l<v;l++){M=Z[l];W=M.color;X=M.intensity;if(M instanceof THREE.DirectionalLight){M=z.dot(M.position)*X;if(M>0){p.r+=W.r*M;p.g+=W.g*M;p.b+=W.b*M}}else if(M instanceof THREE.PointLight){R.sub(M.position,G);R.normalize();
+M=z.dot(R)*X;if(M>0){p.r+=W.r*M;p.g+=W.g*M;p.b+=W.b*M}}}}function Na(l,G,z){if(z.opacity!=0){a(z.opacity);b(z.blending);var p,v,M,W,X,Z;if(z instanceof THREE.ParticleBasicMaterial){if(z.map){W=z.map.image;X=W.width>>1;Z=W.height>>1;v=G.scale.x*j;M=G.scale.y*g;z=v*X;p=M*Z;H.set(l.x-z,l.y-p,l.x+z,l.y+p);if($.instersects(H)){i.save();i.translate(l.x,l.y);i.rotate(-G.rotation);i.scale(v,-M);i.translate(-X,-Z);i.drawImage(W,0,0);i.restore()}}}else if(z instanceof THREE.ParticleCircleMaterial){if(U){Q.r=
+aa.r+na.r+oa.r;Q.g=aa.g+na.g+oa.g;Q.b=aa.b+na.b+oa.b;u.r=z.color.r*Q.r;u.g=z.color.g*Q.g;u.b=z.color.b*Q.b;u.updateStyleString()}else u.__styleString=z.color.__styleString;z=G.scale.x*j;p=G.scale.y*g;H.set(l.x-z,l.y-p,l.x+z,l.y+p);if($.instersects(H)){v=u.__styleString;if(t!=v)i.fillStyle=t=v;i.save();i.translate(l.x,l.y);i.rotate(-G.rotation);i.scale(z,p);i.beginPath();i.arc(0,0,1,0,La,!0);i.closePath();i.fill();i.restore()}}}}function Oa(l,G,z,p){if(p.opacity!=0){a(p.opacity);b(p.blending);i.beginPath();
+i.moveTo(l.positionScreen.x,l.positionScreen.y);i.lineTo(G.positionScreen.x,G.positionScreen.y);i.closePath();if(p instanceof THREE.LineBasicMaterial){u.__styleString=p.color.__styleString;l=p.linewidth;if(r!=l)i.lineWidth=r=l;l=u.__styleString;if(s!=l)i.strokeStyle=s=l;i.stroke();H.inflate(p.linewidth*2)}}}function Ha(l,G,z,p,v,M){if(v.opacity!=0){a(v.opacity);b(v.blending);I=l.positionScreen.x;F=l.positionScreen.y;N=G.positionScreen.x;A=G.positionScreen.y;w=z.positionScreen.x;K=z.positionScreen.y;
+i.beginPath();i.moveTo(I,F);i.lineTo(N,A);i.lineTo(w,K);i.lineTo(I,F);i.closePath();if(v instanceof THREE.MeshBasicMaterial)if(v.map)v.map.mapping instanceof THREE.UVMapping&&ua(I,F,N,A,w,K,v.map.image,p.uvs[0].u,p.uvs[0].v,p.uvs[1].u,p.uvs[1].v,p.uvs[2].u,p.uvs[2].v);else if(v.env_map){if(v.env_map.mapping instanceof THREE.SphericalReflectionMapping){l=da.matrixWorld;R.copy(p.vertexNormalsWorld[0]);Y=(R.x*l.n11+R.y*l.n12+R.z*l.n13)*0.5+0.5;J=-(R.x*l.n21+R.y*l.n22+R.z*l.n23)*0.5+0.5;R.copy(p.vertexNormalsWorld[1]);
+ja=(R.x*l.n11+R.y*l.n12+R.z*l.n13)*0.5+0.5;ka=-(R.x*l.n21+R.y*l.n22+R.z*l.n23)*0.5+0.5;R.copy(p.vertexNormalsWorld[2]);la=(R.x*l.n11+R.y*l.n12+R.z*l.n13)*0.5+0.5;ma=-(R.x*l.n21+R.y*l.n22+R.z*l.n23)*0.5+0.5;ua(I,F,N,A,w,K,v.env_map.image,Y,J,ja,ka,la,ma)}}else v.wireframe?za(v.color.__styleString,v.wireframe_linewidth):Aa(v.color.__styleString);else if(v instanceof THREE.MeshLambertMaterial){if(v.map&&!v.wireframe){v.map.mapping instanceof THREE.UVMapping&&ua(I,F,N,A,w,K,v.map.image,p.uvs[0].u,p.uvs[0].v,
+p.uvs[1].u,p.uvs[1].v,p.uvs[2].u,p.uvs[2].v);b(THREE.SubtractiveBlending)}if(U)if(!v.wireframe&&v.shading==THREE.SmoothShading&&p.vertexNormalsWorld.length==3){L.r=E.r=y.r=aa.r;L.g=E.g=y.g=aa.g;L.b=E.b=y.b=aa.b;ya(M,p.v1.positionWorld,p.vertexNormalsWorld[0],L);ya(M,p.v2.positionWorld,p.vertexNormalsWorld[1],E);ya(M,p.v3.positionWorld,p.vertexNormalsWorld[2],y);B.r=(E.r+y.r)*0.5;B.g=(E.g+y.g)*0.5;B.b=(E.b+y.b)*0.5;P=Ia(L,E,y,B);ua(I,F,N,A,w,K,P,0,0,1,0,0,1)}else{Q.r=aa.r;Q.g=aa.g;Q.b=aa.b;ya(M,p.centroidWorld,
+p.normalWorld,Q);u.r=v.color.r*Q.r;u.g=v.color.g*Q.g;u.b=v.color.b*Q.b;u.updateStyleString();v.wireframe?za(u.__styleString,v.wireframe_linewidth):Aa(u.__styleString)}else v.wireframe?za(v.color.__styleString,v.wireframe_linewidth):Aa(v.color.__styleString)}else if(v instanceof THREE.MeshDepthMaterial){T=da.near;x=da.far;L.r=L.g=L.b=1-Da(l.positionScreen.z,T,x);E.r=E.g=E.b=1-Da(G.positionScreen.z,T,x);y.r=y.g=y.b=1-Da(z.positionScreen.z,T,x);B.r=(E.r+y.r)*0.5;B.g=(E.g+y.g)*0.5;B.b=(E.b+y.b)*0.5;P=
+Ia(L,E,y,B);ua(I,F,N,A,w,K,P,0,0,1,0,0,1)}else if(v instanceof THREE.MeshNormalMaterial){u.r=Ea(p.normalWorld.x);u.g=Ea(p.normalWorld.y);u.b=Ea(p.normalWorld.z);u.updateStyleString();v.wireframe?za(u.__styleString,v.wireframe_linewidth):Aa(u.__styleString)}}}function za(l,G){if(s!=l)i.strokeStyle=s=l;if(r!=G)i.lineWidth=r=G;i.stroke();H.inflate(G*2)}function Aa(l){if(t!=l)i.fillStyle=t=l;i.fill()}function ua(l,G,z,p,v,M,W,X,Z,ga,ca,ha,va){var ea,ia;ea=W.width-1;ia=W.height-1;X*=ea;Z*=ia;ga*=ea;ca*=
+ia;ha*=ea;va*=ia;z-=l;p-=G;v-=l;M-=G;ga-=X;ca-=Z;ha-=X;va-=Z;ea=ga*va-ha*ca;if(ea!=0){ia=1/ea;ea=(va*z-ca*v)*ia;ca=(va*p-ca*M)*ia;z=(ga*v-ha*z)*ia;p=(ga*M-ha*p)*ia;l=l-ea*X-z*Z;G=G-ca*X-p*Z;i.save();i.transform(ea,ca,z,p,l,G);i.clip();i.drawImage(W,0,0);i.restore()}}function Ia(l,G,z,p){var v=~~(l.r*255),M=~~(l.g*255);l=~~(l.b*255);var W=~~(G.r*255),X=~~(G.g*255);G=~~(G.b*255);var Z=~~(z.r*255),ga=~~(z.g*255);z=~~(z.b*255);var ca=~~(p.r*255),ha=~~(p.g*255);p=~~(p.b*255);ba[0]=v<0?0:v>255?255:v;ba[1]=
+M<0?0:M>255?255:M;ba[2]=l<0?0:l>255?255:l;ba[4]=W<0?0:W>255?255:W;ba[5]=X<0?0:X>255?255:X;ba[6]=G<0?0:G>255?255:G;ba[8]=Z<0?0:Z>255?255:Z;ba[9]=ga<0?0:ga>255?255:ga;ba[10]=z<0?0:z>255?255:z;ba[12]=ca<0?0:ca>255?255:ca;ba[13]=ha<0?0:ha>255?255:ha;ba[14]=p<0?0:p>255?255:p;sa.putImageData(Ca,0,0);xa.drawImage(ra,0,0);return ta}function Da(l,G,z){l=(l-G)/(z-G);return l*l*(3-2*l)}function Ea(l){l=(l+1)*0.5;return l<0?0:l>1?1:l}function Fa(l,G){var z=G.x-l.x,p=G.y-l.y,v=1/Math.sqrt(z*z+p*p);z*=v;p*=v;G.x+=
+z;G.y+=p;l.x-=z;l.y-=p}var Ba,Ja,S,fa,qa,Ga,Ka,wa;this.autoClear?this.clear():i.setTransform(1,0,0,-1,j,g);c=d.projectScene(V,da,this.sortElements);(U=V.lights.length>0)&&Ma(V);Ba=0;for(Ja=c.length;Ba<Ja;Ba++){S=c[Ba];H.empty();if(S instanceof THREE.RenderableParticle){k=S;k.x*=j;k.y*=g;fa=0;for(qa=S.materials.length;fa<qa;fa++)Na(k,S,S.materials[fa],V)}else if(S instanceof THREE.RenderableLine){k=S.v1;D=S.v2;k.positionScreen.x*=j;k.positionScreen.y*=g;D.positionScreen.x*=j;D.positionScreen.y*=g;
+H.addPoint(k.positionScreen.x,k.positionScreen.y);H.addPoint(D.positionScreen.x,D.positionScreen.y);if($.instersects(H)){fa=0;for(qa=S.materials.length;fa<qa;)Oa(k,D,S,S.materials[fa++],V)}}else if(S instanceof THREE.RenderableFace3){k=S.v1;D=S.v2;C=S.v3;k.positionScreen.x*=j;k.positionScreen.y*=g;D.positionScreen.x*=j;D.positionScreen.y*=g;C.positionScreen.x*=j;C.positionScreen.y*=g;if(S.overdraw){Fa(k.positionScreen,D.positionScreen);Fa(D.positionScreen,C.positionScreen);Fa(C.positionScreen,k.positionScreen)}H.add3Points(k.positionScreen.x,
+k.positionScreen.y,D.positionScreen.x,D.positionScreen.y,C.positionScreen.x,C.positionScreen.y);if($.instersects(H)){fa=0;for(qa=S.meshMaterials.length;fa<qa;){wa=S.meshMaterials[fa++];if(wa instanceof THREE.MeshFaceMaterial){Ga=0;for(Ka=S.faceMaterials.length;Ga<Ka;)(wa=S.faceMaterials[Ga++])&&Ha(k,D,C,S,wa,V)}else Ha(k,D,C,S,wa,V)}}}O.addRectangle(H)}i.setTransform(1,0,0,1,0,0)}};THREE.RenderableObject=function(){this.z=this.object=null};
+THREE.RenderableFace3=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.v3=new THREE.Vertex;this.centroidWorld=new THREE.Vector3;this.centroidScreen=new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.vertexNormalsWorld=[];this.faceMaterials=this.meshMaterials=null;this.overdraw=!1;this.uvs=[null,null,null]};THREE.RenderableParticle=function(){this.rotation=this.z=this.y=this.x=null;this.scale=new THREE.Vector2;this.materials=null};
+THREE.RenderableLine=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.materials=null};

+ 78 - 0
build/custom/ThreeDOM.js

@@ -0,0 +1,78 @@
+// ThreeDOM.js r33 - http://github.com/mrdoob/three.js
+var THREE=THREE||{};THREE.Color=function(a){this.setHex(a)};
+THREE.Color.prototype={autoUpdate:!0,setRGB:function(a,b,c){this.r=a;this.g=b;this.b=c;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},setHSV:function(a,b,c){var e,d,f,g,i,h;if(c==0)e=d=f=0;else{g=Math.floor(a*6);i=a*6-g;a=c*(1-b);h=c*(1-b*i);b=c*(1-b*(1-i));switch(g){case 1:e=h;d=c;f=a;break;case 2:e=a;d=c;f=b;break;case 3:e=a;d=h;f=c;break;case 4:e=b;d=a;f=c;break;case 5:e=c;d=a;f=h;break;case 6:case 0:e=c;d=b;f=a}}this.r=e;this.g=d;this.b=f;if(this.autoUpdate){this.updateHex();
+this.updateStyleString()}},setHex:function(a){this.hex=~~a&16777215;if(this.autoUpdate){this.updateRGBA();this.updateStyleString()}},updateHex:function(){this.hex=~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},updateRGBA:function(){this.r=(this.hex>>16&255)/255;this.g=(this.hex>>8&255)/255;this.b=(this.hex&255)/255},updateStyleString:function(){this.__styleString="rgb("+~~(this.r*255)+","+~~(this.g*255)+","+~~(this.b*255)+")"},clone:function(){return new THREE.Color(this.hex)},toString:function(){return"THREE.Color ( r: "+
+this.r+", g: "+this.g+", b: "+this.b+", hex: "+this.hex+" )"}};THREE.Vector2=function(a,b){this.set(a||0,b||0)};
+THREE.Vector2.prototype={set:function(a,b){this.x=a;this.y=b;return this},copy:function(a){this.set(a.x,a.y);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a);return this},negate:function(){this.set(-this.x,-this.y);return this},unit:function(){this.multiplyScalar(1/
+this.length());return this},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y},clone:function(){return new THREE.Vector2(this.x,this.y)},toString:function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,b,c){this.set(a||0,b||0,c||0)};
+THREE.Vector3.prototype={set:function(a,b,c){this.x=a;this.y=b;this.z=c;return this},copy:function(a){this.set(a.x,a.y,a.z);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z);return this},addScalar:function(a){this.set(this.x+a,this.y+a,this.z+a);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z);return this},cross:function(a,
+b){this.set(a.y*b.z-a.z*b.y,a.z*b.x-a.x*b.z,a.x*b.y-a.y*b.x);return this},crossSelf:function(a){var b=this.x,c=this.y,e=this.z;this.set(c*a.z-e*a.y,e*a.x-b*a.z,b*a.y-c*a.x);return this},multiply:function(a,b){this.set(a.x*b.x,a.y*b.y,a.z*b.z);return this},multiplySelf:function(a){this.set(this.x*a.x,this.y*a.y,this.z*a.z);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a,this.z*a);return this},divideSelf:function(a){this.set(this.x/a.x,this.y/a.y,this.z/a.z);return this},divideScalar:function(a){this.set(this.x/
+a,this.y/a,this.z/a);return this},negate:function(){this.set(-this.x,-this.y,-this.z);return this},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var b=this.x-a.x,c=this.y-a.y;a=this.z-a.z;return b*b+c*c+a*a},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},lengthManhattan:function(){return this.x+this.y+this.z},normalize:function(){var a=
+this.length();a>0?this.multiplyScalar(1/a):this.set(0,0,0);return this},setLength:function(a){return this.normalize().multiplyScalar(a)},isZero:function(){return Math.abs(this.x)<1.0E-4&&Math.abs(this.y)<1.0E-4&&Math.abs(this.z)<1.0E-4},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},toString:function(){return"THREE.Vector3 ( "+this.x+", "+this.y+", "+this.z+" )"}};THREE.Vector4=function(a,b,c,e){this.set(a||0,b||0,c||0,e||1)};
+THREE.Vector4.prototype={set:function(a,b,c,e){this.x=a;this.y=b;this.z=c;this.w=e;return this},copy:function(a){this.set(a.x,a.y,a.z,a.w||1);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z,a.w+b.w);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z,this.w+a.w);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z,a.w-b.w);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z,this.w-a.w);return this},multiplyScalar:function(a){this.set(this.x*
+a,this.y*a,this.z*a,this.w*a);return this},divideScalar:function(a){this.set(this.x/a,this.y/a,this.z/a,this.w/a);return this},lerpSelf:function(a,b){this.set(this.x+(a.x-this.x)*b,this.y+(a.y-this.y)*b,this.z+(a.z-this.z)*b,this.w+(a.w-this.w)*b)},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},toString:function(){return"THREE.Vector4 ("+this.x+", "+this.y+", "+this.z+", "+this.w+")"}};THREE.Ray=function(a,b){this.origin=a||new THREE.Vector3;this.direction=b||new THREE.Vector3};
+THREE.Ray.prototype={intersectScene:function(a){var b,c,e=a.objects,d=[];a=0;for(b=e.length;a<b;a++){c=e[a];c instanceof THREE.Mesh&&(d=d.concat(this.intersectObject(c)))}d.sort(function(f,g){return f.distance-g.distance});return d},intersectObject:function(a){function b(r,k,B,x){x=x.clone().subSelf(k);B=B.clone().subSelf(k);var F=r.clone().subSelf(k);r=x.dot(x);k=x.dot(B);x=x.dot(F);var G=B.dot(B);B=B.dot(F);F=1/(r*G-k*k);G=(G*x-k*B)*F;r=(r*B-k*x)*F;return G>0&&r>0&&G+r<1}var c,e,d,f,g,i,h,j,m,n,
+l,o=a.geometry,p=o.vertices,q=[];c=0;for(e=o.faces.length;c<e;c++){d=o.faces[c];n=this.origin.clone();l=this.direction.clone();h=a.matrixWorld;f=h.multiplyVector3(p[d.a].position.clone());g=h.multiplyVector3(p[d.b].position.clone());i=h.multiplyVector3(p[d.c].position.clone());h=d instanceof THREE.Face4?h.multiplyVector3(p[d.d].position.clone()):null;j=a.matrixRotation.multiplyVector3(d.normal.clone());m=l.dot(j);if(m<0){j=j.dot((new THREE.Vector3).sub(f,n))/m;n=n.addSelf(l.multiplyScalar(j));if(d instanceof
+THREE.Face3){if(b(n,f,g,i)){d={distance:this.origin.distanceTo(n),point:n,face:d,object:a};q.push(d)}}else if(d instanceof THREE.Face4&&(b(n,f,g,h)||b(n,g,i,h))){d={distance:this.origin.distanceTo(n),point:n,face:d,object:a};q.push(d)}}}return q}};
+THREE.Rectangle=function(){function a(){f=e-b;g=d-c}var b,c,e,d,f,g,i=!0;this.getX=function(){return b};this.getY=function(){return c};this.getWidth=function(){return f};this.getHeight=function(){return g};this.getLeft=function(){return b};this.getTop=function(){return c};this.getRight=function(){return e};this.getBottom=function(){return d};this.set=function(h,j,m,n){i=!1;b=h;c=j;e=m;d=n;a()};this.addPoint=function(h,j){if(i){i=!1;b=h;c=j;e=h;d=j}else{b=b<h?b:h;c=c<j?c:j;e=e>h?e:h;d=d>j?d:j}a()};
+this.add3Points=function(h,j,m,n,l,o){if(i){i=!1;b=h<m?h<l?h:l:m<l?m:l;c=j<n?j<o?j:o:n<o?n:o;e=h>m?h>l?h:l:m>l?m:l;d=j>n?j>o?j:o:n>o?n:o}else{b=h<m?h<l?h<b?h:b:l<b?l:b:m<l?m<b?m:b:l<b?l:b;c=j<n?j<o?j<c?j:c:o<c?o:c:n<o?n<c?n:c:o<c?o:c;e=h>m?h>l?h>e?h:e:l>e?l:e:m>l?m>e?m:e:l>e?l:e;d=j>n?j>o?j>d?j:d:o>d?o:d:n>o?n>d?n:d:o>d?o:d}a()};this.addRectangle=function(h){if(i){i=!1;b=h.getLeft();c=h.getTop();e=h.getRight();d=h.getBottom()}else{b=b<h.getLeft()?b:h.getLeft();c=c<h.getTop()?c:h.getTop();e=e>h.getRight()?
+e:h.getRight();d=d>h.getBottom()?d:h.getBottom()}a()};this.inflate=function(h){b-=h;c-=h;e+=h;d+=h;a()};this.minSelf=function(h){b=b>h.getLeft()?b:h.getLeft();c=c>h.getTop()?c:h.getTop();e=e<h.getRight()?e:h.getRight();d=d<h.getBottom()?d:h.getBottom();a()};this.instersects=function(h){return Math.min(e,h.getRight())-Math.max(b,h.getLeft())>=0&&Math.min(d,h.getBottom())-Math.max(c,h.getTop())>=0};this.empty=function(){i=!0;d=e=c=b=0;a()};this.isEmpty=function(){return i};this.toString=function(){return"THREE.Rectangle ( left: "+
+b+", right: "+e+", top: "+c+", bottom: "+d+", width: "+f+", height: "+g+" )"}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={transpose:function(){var a,b=this.m;a=b[1];b[1]=b[3];b[3]=a;a=b[2];b[2]=b[6];b[6]=a;a=b[5];b[5]=b[7];b[7]=a;return this},transposeIntoArray:function(a){var b=this.m;a[0]=b[0];a[1]=b[3];a[2]=b[6];a[3]=b[1];a[4]=b[4];a[5]=b[7];a[6]=b[2];a[7]=b[5];a[8]=b[8];return this}};
+THREE.Matrix4=function(a,b,c,e,d,f,g,i,h,j,m,n,l,o,p,q){this.set(a||1,b||0,c||0,e||0,d||0,f||1,g||0,i||0,h||0,j||0,m||1,n||0,l||0,o||0,p||0,q||1);this.flat=Array(16);this.m33=new THREE.Matrix3};
+THREE.Matrix4.prototype={set:function(a,b,c,e,d,f,g,i,h,j,m,n,l,o,p,q){this.n11=a;this.n12=b;this.n13=c;this.n14=e;this.n21=d;this.n22=f;this.n23=g;this.n24=i;this.n31=h;this.n32=j;this.n33=m;this.n34=n;this.n41=l;this.n42=o;this.n43=p;this.n44=q;return this},identity:function(){this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);return this},copy:function(a){this.set(a.n11,a.n12,a.n13,a.n14,a.n21,a.n22,a.n23,a.n24,a.n31,a.n32,a.n33,a.n34,a.n41,a.n42,a.n43,a.n44);return this},lookAt:function(a,b,c){var e=THREE.Matrix4.__tmpVec1,
+d=THREE.Matrix4.__tmpVec2,f=THREE.Matrix4.__tmpVec3;f.sub(a,b).normalize();e.cross(c,f).normalize();d.cross(f,e).normalize();this.n11=e.x;this.n12=e.y;this.n13=e.z;this.n14=-e.dot(a);this.n21=d.x;this.n22=d.y;this.n23=d.z;this.n24=-d.dot(a);this.n31=f.x;this.n32=f.y;this.n33=f.z;this.n34=-f.dot(a);this.n43=this.n42=this.n41=0;this.n44=1;return this},multiplyVector3:function(a){var b=a.x,c=a.y,e=a.z,d=1/(this.n41*b+this.n42*c+this.n43*e+this.n44);a.x=(this.n11*b+this.n12*c+this.n13*e+this.n14)*d;a.y=
+(this.n21*b+this.n22*c+this.n23*e+this.n24)*d;a.z=(this.n31*b+this.n32*c+this.n33*e+this.n34)*d;return a},multiplyVector3OnlyZ:function(a){var b=a.x,c=a.y;a=a.z;return(this.n31*b+this.n32*c+this.n33*a+this.n34)*(1/(this.n41*b+this.n42*c+this.n43*a+this.n44))},multiplyVector4:function(a){var b=a.x,c=a.y,e=a.z,d=a.w;a.x=this.n11*b+this.n12*c+this.n13*e+this.n14*d;a.y=this.n21*b+this.n22*c+this.n23*e+this.n24*d;a.z=this.n31*b+this.n32*c+this.n33*e+this.n34*d;a.w=this.n41*b+this.n42*c+this.n43*e+this.n44*
+d;return a},crossVector:function(a){var b=new THREE.Vector4;b.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;b.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;b.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;b.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return b},multiply:function(a,b){var c=a.n11,e=a.n12,d=a.n13,f=a.n14,g=a.n21,i=a.n22,h=a.n23,j=a.n24,m=a.n31,n=a.n32,l=a.n33,o=a.n34,p=a.n41,q=a.n42,r=a.n43,k=a.n44,B=b.n11,x=b.n12,F=b.n13,G=b.n14,I=b.n21,v=b.n22,
+t=b.n23,C=b.n24,z=b.n31,D=b.n32,E=b.n33,y=b.n34;this.n11=c*B+e*I+d*z;this.n12=c*x+e*v+d*D;this.n13=c*F+e*t+d*E;this.n14=c*G+e*C+d*y+f;this.n21=g*B+i*I+h*z;this.n22=g*x+i*v+h*D;this.n23=g*F+i*t+h*E;this.n24=g*G+i*C+h*y+j;this.n31=m*B+n*I+l*z;this.n32=m*x+n*v+l*D;this.n33=m*F+n*t+l*E;this.n34=m*G+n*C+l*y+o;this.n41=p*B+q*I+r*z;this.n42=p*x+q*v+r*D;this.n43=p*F+q*t+r*E;this.n44=p*G+q*C+r*y+k;return this},multiplyToArray:function(a,b,c){var e=a.n11,d=a.n12,f=a.n13,g=a.n14,i=a.n21,h=a.n22,j=a.n23,m=a.n24,
+n=a.n31,l=a.n32,o=a.n33,p=a.n34,q=a.n41,r=a.n42,k=a.n43;a=a.n44;var B=b.n11,x=b.n12,F=b.n13,G=b.n14,I=b.n21,v=b.n22,t=b.n23,C=b.n24,z=b.n31,D=b.n32,E=b.n33,y=b.n34,u=b.n41,L=b.n42,s=b.n43;b=b.n44;this.n11=e*B+d*I+f*z+g*u;this.n12=e*x+d*v+f*D+g*L;this.n13=e*F+d*t+f*E+g*s;this.n14=e*G+d*C+f*y+g*b;this.n21=i*B+h*I+j*z+m*u;this.n22=i*x+h*v+j*D+m*L;this.n23=i*F+h*t+j*E+m*s;this.n24=i*G+h*C+j*y+m*b;this.n31=n*B+l*I+o*z+p*u;this.n32=n*x+l*v+o*D+p*L;this.n33=n*F+l*t+o*E+p*s;this.n34=n*G+l*C+o*y+p*b;this.n41=
+q*B+r*I+k*z+a*u;this.n42=q*x+r*v+k*D+a*L;this.n43=q*F+r*t+k*E+a*s;this.n44=q*G+r*C+k*y+a*b;c[0]=this.n11;c[1]=this.n21;c[2]=this.n31;c[3]=this.n41;c[4]=this.n12;c[5]=this.n22;c[6]=this.n32;c[7]=this.n42;c[8]=this.n13;c[9]=this.n23;c[10]=this.n33;c[11]=this.n43;c[12]=this.n14;c[13]=this.n24;c[14]=this.n34;c[15]=this.n44;return this},multiplySelf:function(a){var b=this.n11,c=this.n12,e=this.n13,d=this.n14,f=this.n21,g=this.n22,i=this.n23,h=this.n24,j=this.n31,m=this.n32,n=this.n33,l=this.n34,o=this.n41,
+p=this.n42,q=this.n43,r=this.n44,k=a.n11,B=a.n21,x=a.n31,F=a.n12,G=a.n22,I=a.n32,v=a.n13,t=a.n23,C=a.n33,z=a.n14,D=a.n24;a=a.n34;this.n11=b*k+c*B+e*x;this.n12=b*F+c*G+e*I;this.n13=b*v+c*t+e*C;this.n14=b*z+c*D+e*a+d;this.n21=f*k+g*B+i*x;this.n22=f*F+g*G+i*I;this.n23=f*v+g*t+i*C;this.n24=f*z+g*D+i*a+h;this.n31=j*k+m*B+n*x;this.n32=j*F+m*G+n*I;this.n33=j*v+m*t+n*C;this.n34=j*z+m*D+n*a+l;this.n41=o*k+p*B+q*x;this.n42=o*F+p*G+q*I;this.n43=o*v+p*t+q*C;this.n44=o*z+p*D+q*a+r;return this},multiplyScalar:function(a){this.n11*=
+a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=a;return this},determinant:function(){var a=this.n11,b=this.n12,c=this.n13,e=this.n14,d=this.n21,f=this.n22,g=this.n23,i=this.n24,h=this.n31,j=this.n32,m=this.n33,n=this.n34,l=this.n41,o=this.n42,p=this.n43,q=this.n44;return e*g*j*l-c*i*j*l-e*f*m*l+b*i*m*l+c*f*n*l-b*g*n*l-e*g*h*o+c*i*h*o+e*d*m*o-a*i*m*o-c*d*n*o+a*g*n*o+
+e*f*h*p-b*i*h*p-e*d*j*p+a*i*j*p+b*d*n*p-a*f*n*p-c*f*h*q+b*g*h*q+c*d*j*q-a*g*j*q-b*d*m*q+a*f*m*q},transpose:function(){function a(b,c,e){var d=b[c];b[c]=b[e];b[e]=d}a(this,"n21","n12");a(this,"n31","n13");a(this,"n32","n23");a(this,"n41","n14");a(this,"n42","n24");a(this,"n43","n34");return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;
+a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){this.flattenToArray(this.flat);return this.flat},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},flattenToArrayOffset:function(a,b){a[b]=this.n11;a[b+1]=this.n21;a[b+2]=this.n31;
+a[b+3]=this.n41;a[b+4]=this.n12;a[b+5]=this.n22;a[b+6]=this.n32;a[b+7]=this.n42;a[b+8]=this.n13;a[b+9]=this.n23;a[b+10]=this.n33;a[b+11]=this.n43;a[b+12]=this.n14;a[b+13]=this.n24;a[b+14]=this.n34;a[b+15]=this.n44;return a},setTranslation:function(a,b,c){this.set(1,0,0,a,0,1,0,b,0,0,1,c,0,0,0,1);return this},setScale:function(a,b,c){this.set(a,0,0,0,0,b,0,0,0,0,c,0,0,0,0,1);return this},setRotX:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(1,0,0,0,0,b,-a,0,0,a,b,0,0,0,0,1);return this},setRotY:function(a){var b=
+Math.cos(a);a=Math.sin(a);this.set(b,0,a,0,0,1,0,0,-a,0,b,0,0,0,0,1);return this},setRotZ:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(b,-a,0,0,a,b,0,0,0,0,1,0,0,0,0,1);return this},setRotAxis:function(a,b){var c=Math.cos(b),e=Math.sin(b),d=1-c,f=a.x,g=a.y,i=a.z,h=d*f,j=d*g;this.set(h*f+c,h*g-e*i,h*i+e*g,0,h*g+e*i,j*g+c,j*i-e*f,0,h*i-e*g,j*i+e*f,d*i*i+c,0,0,0,0,1);return this},setPosition:function(a){this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},setRotationFromEuler:function(a){var b=
+a.x,c=a.y,e=a.z;a=Math.cos(b);b=Math.sin(b);var d=Math.cos(c);c=Math.sin(c);var f=Math.cos(e);e=Math.sin(e);var g=a*c,i=b*c;this.n11=d*f;this.n12=-d*e;this.n13=c;this.n21=i*f+a*e;this.n22=-i*e+a*f;this.n23=-b*d;this.n31=-g*f+b*e;this.n32=g*e+b*f;this.n33=a*d},setRotationFromQuaternion:function(a){var b=a.x,c=a.y,e=a.z,d=a.w,f=b+b,g=c+c,i=e+e;a=b*f;var h=b*g;b*=i;var j=c*g;c*=i;e*=i;f*=d;g*=d;d*=i;this.n11=1-(j+e);this.n12=h-d;this.n13=b+g;this.n21=h+d;this.n22=1-(a+e);this.n23=c-f;this.n31=b-g;this.n32=
+c+f;this.n33=1-(a+j)},scale:function(a){var b=a.x,c=a.y;a=a.z;this.n11*=b;this.n12*=c;this.n13*=a;this.n21*=b;this.n22*=c;this.n23*=a;this.n31*=b;this.n32*=c;this.n33*=a;this.n41*=b;this.n42*=c;this.n43*=a;return this},toString:function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};
+THREE.Matrix4.translationMatrix=function(a,b,c){var e=new THREE.Matrix4;e.setTranslation(a,b,c);return e};THREE.Matrix4.scaleMatrix=function(a,b,c){var e=new THREE.Matrix4;e.setScale(a,b,c);return e};THREE.Matrix4.rotationXMatrix=function(a){var b=new THREE.Matrix4;b.setRotX(a);return b};THREE.Matrix4.rotationYMatrix=function(a){var b=new THREE.Matrix4;b.setRotY(a);return b};THREE.Matrix4.rotationZMatrix=function(a){var b=new THREE.Matrix4;b.setRotZ(a);return b};
+THREE.Matrix4.rotationAxisAngleMatrix=function(a,b){var c=new THREE.Matrix4;c.setRotAxis(a,b);return c};
+THREE.Matrix4.makeInvert=function(a,b){var c=a.n11,e=a.n12,d=a.n13,f=a.n14,g=a.n21,i=a.n22,h=a.n23,j=a.n24,m=a.n31,n=a.n32,l=a.n33,o=a.n34,p=a.n41,q=a.n42,r=a.n43,k=a.n44;b===undefined&&(b=new THREE.Matrix4);b.n11=h*o*q-j*l*q+j*n*r-i*o*r-h*n*k+i*l*k;b.n12=f*l*q-d*o*q-f*n*r+e*o*r+d*n*k-e*l*k;b.n13=d*j*q-f*h*q+f*i*r-e*j*r-d*i*k+e*h*k;b.n14=f*h*n-d*j*n-f*i*l+e*j*l+d*i*o-e*h*o;b.n21=j*l*p-h*o*p-j*m*r+g*o*r+h*m*k-g*l*k;b.n22=d*o*p-f*l*p+f*m*r-c*o*r-d*m*k+c*l*k;b.n23=f*h*p-d*j*p-f*g*r+c*j*r+d*g*k-c*h*k;
+b.n24=d*j*m-f*h*m+f*g*l-c*j*l-d*g*o+c*h*o;b.n31=i*o*p-j*n*p+j*m*q-g*o*q-i*m*k+g*n*k;b.n32=f*n*p-e*o*p-f*m*q+c*o*q+e*m*k-c*n*k;b.n33=d*j*p-f*i*p+f*g*q-c*j*q-e*g*k+c*i*k;b.n34=f*i*m-e*j*m-f*g*n+c*j*n+e*g*o-c*i*o;b.n41=h*n*p-i*l*p-h*m*q+g*l*q+i*m*r-g*n*r;b.n42=e*l*p-d*n*p+d*m*q-c*l*q-e*m*r+c*n*r;b.n43=d*i*p-e*h*p-d*g*q+c*h*q+e*g*r-c*i*r;b.n44=e*h*m-d*i*m+d*g*n-c*h*n-e*g*l+c*i*l;b.multiplyScalar(1/a.determinant());return b};
+THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,e=a.n33*a.n22-a.n32*a.n23,d=-a.n33*a.n21+a.n31*a.n23,f=a.n32*a.n21-a.n31*a.n22,g=-a.n33*a.n12+a.n32*a.n13,i=a.n33*a.n11-a.n31*a.n13,h=-a.n32*a.n11+a.n31*a.n12,j=a.n23*a.n12-a.n22*a.n13,m=-a.n23*a.n11+a.n21*a.n13,n=a.n22*a.n11-a.n21*a.n12;a=a.n11*e+a.n21*g+a.n31*j;if(a==0)throw"matrix not invertible";a=1/a;c[0]=a*e;c[1]=a*d;c[2]=a*f;c[3]=a*g;c[4]=a*i;c[5]=a*h;c[6]=a*j;c[7]=a*m;c[8]=a*n;return b};
+THREE.Matrix4.makeFrustum=function(a,b,c,e,d,f){var g;g=new THREE.Matrix4;g.n11=2*d/(b-a);g.n12=0;g.n13=(b+a)/(b-a);g.n14=0;g.n21=0;g.n22=2*d/(e-c);g.n23=(e+c)/(e-c);g.n24=0;g.n31=0;g.n32=0;g.n33=-(f+d)/(f-d);g.n34=-2*f*d/(f-d);g.n41=0;g.n42=0;g.n43=-1;g.n44=0;return g};THREE.Matrix4.makePerspective=function(a,b,c,e){var d;a=c*Math.tan(a*Math.PI/360);d=-a;return THREE.Matrix4.makeFrustum(d*b,a*b,d,a,c,e)};
+THREE.Matrix4.makeOrtho=function(a,b,c,e,d,f){var g,i,h,j;g=new THREE.Matrix4;i=b-a;h=c-e;j=f-d;g.n11=2/i;g.n12=0;g.n13=0;g.n14=-((b+a)/i);g.n21=0;g.n22=2/h;g.n23=0;g.n24=-((c+e)/h);g.n31=0;g.n32=0;g.n33=-2/j;g.n34=-((f+d)/j);g.n41=0;g.n42=0;g.n43=0;g.n44=1;return g};THREE.Matrix4.__tmpVec1=new THREE.Vector3;THREE.Matrix4.__tmpVec2=new THREE.Vector3;THREE.Matrix4.__tmpVec3=new THREE.Vector3;
+THREE.Object3D=function(){this.id=THREE.Object3DCounter.value++;this.parent=undefined;this.children=[];this.position=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotation=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixNeedsUpdate=!0;this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
+0;this.boundRadiusScale=1;this.visible=!0};
+THREE.Object3D.prototype={addChild:function(a){if(this.children.indexOf(a)===-1){a.parent!==undefined&&a.parent.removeChild(a);a.parent=this;this.children.push(a)}},removeChild:function(a){var b=this.children.indexOf(a);if(b!==-1){a.parent=undefined;this.children.splice(b,1)}},updateMatrix:function(){this.matrix.setPosition(this.position);this.useQuaternion?this.matrixRotation.setRotationFromQuaternion(this.quaternion):this.matrixRotation.setRotationFromEuler(this.rotation);this.matrix.n11=this.matrixRotation.n11;
+this.matrix.n12=this.matrixRotation.n12;this.matrix.n13=this.matrixRotation.n13;this.matrix.n21=this.matrixRotation.n21;this.matrix.n22=this.matrixRotation.n22;this.matrix.n23=this.matrixRotation.n23;this.matrix.n31=this.matrixRotation.n31;this.matrix.n32=this.matrixRotation.n32;this.matrix.n33=this.matrixRotation.n33;if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1){this.matrix.scale(this.scale);this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z))}return!0},update:function(a,
+b,c){if(this.visible){this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0}a=0;for(var e=this.children.length;a<e;a++)this.children[a].update(this.matrixWorld,b,c)}}};THREE.Object3DCounter={value:0};
+THREE.Vertex=function(a,b){this.position=a||new THREE.Vector3;this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.normal=b||new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.normalScreen=new THREE.Vector3;this.tangent=new THREE.Vector4;this.__visible=!0};THREE.Vertex.prototype={toString:function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};
+THREE.Face3=function(a,b,c,e,d){this.a=a;this.b=b;this.c=c;this.centroid=new THREE.Vector3;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.materials=d instanceof Array?d:[d]};THREE.Face3.prototype={toString:function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};
+THREE.Face4=function(a,b,c,e,d,f){this.a=a;this.b=b;this.c=c;this.d=e;this.centroid=new THREE.Vector3;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.materials=f instanceof Array?f:[f]};THREE.Face4.prototype={toString:function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.UV=function(a,b){this.set(a||0,b||0)};
+THREE.UV.prototype={set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.set(a.u,a.v);return this},toString:function(){return"THREE.UV ("+this.u+", "+this.v+")"}};
+THREE.Camera=function(a,b,c,e,d){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c||0.1;this.far=e||2E3;this.screenCenterY=this.screenCenterX=0;this.target=d||new THREE.Object3D;this.useTarget=!0;this.up=new THREE.Vector3(0,1,0);this.inverseMatrix=new THREE.Matrix4;this.projectionMatrix=null;this.tmpVec=new THREE.Vector3;this.translateX=function(f,g){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(f);this.tmpVec.crossSelf(this.up);if(g)this.tmpVec.y=
+0;this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};this.translateZ=function(f,g){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(f);if(g)this.tmpVec.y=0;this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;THREE.Camera.prototype.supr=THREE.Object3D.prototype;
+THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
+THREE.Camera.prototype.update=function(a,b,c){if(this.useTarget){this.matrix.lookAt(this.position,this.target.position,this.up);a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);THREE.Matrix4.makeInvert(this.matrixWorld,this.inverseMatrix);b=!0}else{this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0;THREE.Matrix4.makeInvert(this.matrixWorld,
+this.inverseMatrix)}}for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,b,c)};
+THREE.Camera.prototype.frustumContains=function(a){var b=a.matrixWorld.n14,c=a.matrixWorld.n24,e=a.matrixWorld.n34,d=this.inverseMatrix,f=a.boundRadius*a.boundRadiusScale,g=d.n31*b+d.n32*c+d.n33*e+d.n34;if(g-f>-this.near)return!1;if(g+f<-this.far)return!1;g-=f;var i=this.projectionMatrix,h=1/(i.n43*g),j=h*this.screenCenterX,m=(d.n11*b+d.n12*c+d.n13*e+d.n14)*i.n11*j;f=i.n11*f*j;if(m+f<-this.screenCenterX)return!1;if(m-f>this.screenCenterX)return!1;b=(d.n21*b+d.n22*c+d.n23*e+d.n24)*i.n22*h*this.screenCenterY;
+if(b+f<-this.screenCenterY)return!1;if(b-f>this.screenCenterY)return!1;a.positionScreen.set(m,b,g,f);return!0};THREE.ParticleDOMMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.domElement=a};THREE.ParticleDOMMaterial.prototype={toString:function(){return"THREE.ParticleDOMMaterial ( domElement: "+this.domElement+" )"}};THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a];this.matrixAutoUpdate=!1};THREE.Particle.prototype=new THREE.Object3D;
+THREE.Particle.prototype.constructor=THREE.Particle;THREE.Scene=function(){THREE.Object3D.call(this);this.objects=[];this.lights=[];this.sounds=[];this.fog=null;this.matrixAutoUpdate=!1};THREE.Scene.prototype=new THREE.Object3D;THREE.Scene.prototype.constructor=THREE.Scene;THREE.Scene.prototype.supr=THREE.Object3D.prototype;THREE.Scene.prototype.addChild=function(a){this.supr.addChild.call(this,a);this.addChildRecurse(a)};
+THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else a instanceof THREE.Camera||a instanceof THREE.Bone||this.objects.indexOf(a)===-1&&this.objects.push(a);for(var b=0;b<a.children.length;b++)this.addChildRecurse(a.children[b])};THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};
+THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else if(a instanceof THREE.Sound){b=this.sounds.indexOf(a);b!==-1&&this.sounds.splice(b,1)}else if(!(a instanceof THREE.Camera)){b=this.objects.indexOf(a);b!==-1&&this.objects.splice(b,1)}for(b=0;b<a.children.length;b++)this.removeChildRecurse(a.children[b])};THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;
+THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;
+THREE.Projector=function(){function a(v,t){return t.z-v.z}function b(v,t){var C=0,z=1,D=v.z+v.w,E=t.z+t.w,y=-v.z+v.w,u=-t.z+t.w;if(D>=0&&E>=0&&y>=0&&u>=0)return!0;else if(D<0&&E<0||y<0&&u<0)return!1;else{if(D<0)C=Math.max(C,D/(D-E));else E<0&&(z=Math.min(z,D/(D-E)));if(y<0)C=Math.max(C,y/(y-u));else u<0&&(z=Math.min(z,y/(y-u)));if(z<C)return!1;else{v.lerpSelf(t,C);t.lerpSelf(v,1-z);return!0}}}var c,e,d=[],f,g,i,h=[],j,m,n=[],l,o,p=[],q=new THREE.Vector4,r=new THREE.Vector4,k=new THREE.Matrix4,B=new THREE.Matrix4,
+x=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],F=new THREE.Vector4,G=new THREE.Vector4,I;this.projectObjects=function(v,t,C){t=[];var z,D,E;e=0;D=v.objects;v=0;for(z=D.length;v<z;v++){E=D[v];var y;if(!(y=!E.visible))if(y=E instanceof THREE.Mesh){a:{y=void 0;for(var u=E.matrixWorld,L=-E.geometry.boundingSphere.radius*Math.max(E.scale.x,Math.max(E.scale.y,E.scale.z)),s=0;s<6;s++){y=x[s].x*u.n14+x[s].y*u.n24+x[s].z*u.n34+x[s].w;if(y<=L){y=
+!1;break a}}y=!0}y=!y}if(!y){c=d[e]=d[e]||new THREE.RenderableObject;q.copy(E.position);k.multiplyVector3(q);c.object=E;c.z=q.z;t.push(c);e++}}C&&t.sort(a);return t};this.projectScene=function(v,t,C){var z=[],D=t.near,E=t.far,y,u,L,s,H,N,w,P,Q,R,S,O,K,A,J,M;i=m=o=0;t.matrixAutoUpdate&&t.update();k.multiply(t.projectionMatrix,t.matrixWorld);x[0].set(k.n41-k.n11,k.n42-k.n12,k.n43-k.n13,k.n44-k.n14);x[1].set(k.n41+k.n11,k.n42+k.n12,k.n43+k.n13,k.n44+k.n14);x[2].set(k.n41+k.n21,k.n42+k.n22,k.n43+k.n23,
+k.n44+k.n24);x[3].set(k.n41-k.n21,k.n42-k.n22,k.n43-k.n23,k.n44-k.n24);x[4].set(k.n41-k.n31,k.n42-k.n32,k.n43-k.n33,k.n44-k.n34);x[5].set(k.n41+k.n31,k.n42+k.n32,k.n43+k.n33,k.n44+k.n34);for(y=0;y<6;y++){N=x[y];N.divideScalar(Math.sqrt(N.x*N.x+N.y*N.y+N.z*N.z))}v.update(undefined,!1,t);N=this.projectObjects(v,t,!0);v=0;for(y=N.length;v<y;v++){w=N[v].object;if(w.visible){w.matrixAutoUpdate&&w.updateMatrix();P=w.matrixWorld;S=w.matrixRotation;Q=w.materials;R=w.overdraw;if(w instanceof THREE.Mesh){O=
+w.geometry;K=O.vertices;u=0;for(L=K.length;u<L;u++){A=K[u];A.positionWorld.copy(A.position);P.multiplyVector3(A.positionWorld);s=A.positionScreen;s.copy(A.positionWorld);k.multiplyVector4(s);s.x/=s.w;s.y/=s.w;A.__visible=s.z>D&&s.z<E}O=O.faces;u=0;for(L=O.length;u<L;u++){A=O[u];if(A instanceof THREE.Face3){s=K[A.a];H=K[A.b];J=K[A.c];if(s.__visible&&H.__visible&&J.__visible&&(w.doubleSided||w.flipSided!=(J.positionScreen.x-s.positionScreen.x)*(H.positionScreen.y-s.positionScreen.y)-(J.positionScreen.y-
+s.positionScreen.y)*(H.positionScreen.x-s.positionScreen.x)<0)){f=h[i]=h[i]||new THREE.RenderableFace3;f.v1.positionWorld.copy(s.positionWorld);f.v2.positionWorld.copy(H.positionWorld);f.v3.positionWorld.copy(J.positionWorld);f.v1.positionScreen.copy(s.positionScreen);f.v2.positionScreen.copy(H.positionScreen);f.v3.positionScreen.copy(J.positionScreen);f.normalWorld.copy(A.normal);S.multiplyVector3(f.normalWorld);f.centroidWorld.copy(A.centroid);P.multiplyVector3(f.centroidWorld);f.centroidScreen.copy(f.centroidWorld);
+k.multiplyVector3(f.centroidScreen);J=A.vertexNormals;I=f.vertexNormalsWorld;s=0;for(H=J.length;s<H;s++){M=I[s]=I[s]||new THREE.Vector3;M.copy(J[s]);S.multiplyVector3(M)}f.z=f.centroidScreen.z;f.meshMaterials=Q;f.faceMaterials=A.materials;f.overdraw=R;if(w.geometry.uvs[u]){f.uvs[0]=w.geometry.uvs[u][0];f.uvs[1]=w.geometry.uvs[u][1];f.uvs[2]=w.geometry.uvs[u][2]}z.push(f);i++}}else if(A instanceof THREE.Face4){s=K[A.a];H=K[A.b];J=K[A.c];M=K[A.d];if(s.__visible&&H.__visible&&J.__visible&&M.__visible&&
+(w.doubleSided||w.flipSided!=((M.positionScreen.x-s.positionScreen.x)*(H.positionScreen.y-s.positionScreen.y)-(M.positionScreen.y-s.positionScreen.y)*(H.positionScreen.x-s.positionScreen.x)<0||(H.positionScreen.x-J.positionScreen.x)*(M.positionScreen.y-J.positionScreen.y)-(H.positionScreen.y-J.positionScreen.y)*(M.positionScreen.x-J.positionScreen.x)<0))){f=h[i]=h[i]||new THREE.RenderableFace3;f.v1.positionWorld.copy(s.positionWorld);f.v2.positionWorld.copy(H.positionWorld);f.v3.positionWorld.copy(M.positionWorld);
+f.v1.positionScreen.copy(s.positionScreen);f.v2.positionScreen.copy(H.positionScreen);f.v3.positionScreen.copy(M.positionScreen);f.normalWorld.copy(A.normal);S.multiplyVector3(f.normalWorld);f.centroidWorld.copy(A.centroid);P.multiplyVector3(f.centroidWorld);f.centroidScreen.copy(f.centroidWorld);k.multiplyVector3(f.centroidScreen);f.z=f.centroidScreen.z;f.meshMaterials=Q;f.faceMaterials=A.materials;f.overdraw=R;if(w.geometry.uvs[u]){f.uvs[0]=w.geometry.uvs[u][0];f.uvs[1]=w.geometry.uvs[u][1];f.uvs[2]=
+w.geometry.uvs[u][3]}z.push(f);i++;g=h[i]=h[i]||new THREE.RenderableFace3;g.v1.positionWorld.copy(H.positionWorld);g.v2.positionWorld.copy(J.positionWorld);g.v3.positionWorld.copy(M.positionWorld);g.v1.positionScreen.copy(H.positionScreen);g.v2.positionScreen.copy(J.positionScreen);g.v3.positionScreen.copy(M.positionScreen);g.normalWorld.copy(f.normalWorld);g.centroidWorld.copy(f.centroidWorld);g.centroidScreen.copy(f.centroidScreen);g.z=g.centroidScreen.z;g.meshMaterials=Q;g.faceMaterials=A.materials;
+g.overdraw=R;if(w.geometry.uvs[u]){g.uvs[0]=w.geometry.uvs[u][1];g.uvs[1]=w.geometry.uvs[u][2];g.uvs[2]=w.geometry.uvs[u][3]}z.push(g);i++}}}}else if(w instanceof THREE.Line){B.multiply(k,P);K=w.geometry.vertices;A=K[0];A.positionScreen.copy(A.position);B.multiplyVector4(A.positionScreen);u=1;for(L=K.length;u<L;u++){s=K[u];s.positionScreen.copy(s.position);B.multiplyVector4(s.positionScreen);H=K[u-1];F.copy(s.positionScreen);G.copy(H.positionScreen);if(b(F,G)){F.multiplyScalar(1/F.w);G.multiplyScalar(1/
+G.w);j=n[m]=n[m]||new THREE.RenderableLine;j.v1.positionScreen.copy(F);j.v2.positionScreen.copy(G);j.z=Math.max(F.z,G.z);j.materials=w.materials;z.push(j);m++}}}else if(w instanceof THREE.Particle){r.set(w.position.x,w.position.y,w.position.z,1);k.multiplyVector4(r);r.z/=r.w;if(r.z>0&&r.z<1){l=p[o]=p[o]||new THREE.RenderableParticle;l.x=r.x/r.w;l.y=r.y/r.w;l.z=r.z;l.rotation=w.rotation.z;l.scale.x=w.scale.x*Math.abs(l.x-(r.x+t.projectionMatrix.n11)/(r.w+t.projectionMatrix.n14));l.scale.y=w.scale.y*
+Math.abs(l.y-(r.y+t.projectionMatrix.n22)/(r.w+t.projectionMatrix.n24));l.materials=w.materials;z.push(l);o++}}}}C&&z.sort(a);return z};this.unprojectVector=function(v,t){var C=THREE.Matrix4.makeInvert(t.matrixWorld);C.multiplySelf(THREE.Matrix4.makeInvert(t.projectionMatrix));C.multiplyVector3(v);return v}};
+THREE.DOMRenderer=function(){THREE.Renderer.call(this);var a=null,b=new THREE.Projector,c,e,d,f;this.domElement=document.createElement("div");this.setSize=function(g,i){c=g;e=i;d=c/2;f=e/2};this.render=function(g,i){var h,j,m,n,l,o,p,q;a=b.projectScene(g,i);h=0;for(j=a.length;h<j;h++){l=a[h];if(l instanceof THREE.RenderableParticle){p=l.x*d+d;q=l.y*f+f;m=0;for(n=l.material.length;m<n;m++){o=l.material[m];if(o instanceof THREE.ParticleDOMMaterial){o=o.domElement;o.style.left=p+"px";o.style.top=q+"px"}}}}}};
+THREE.RenderableParticle=function(){this.rotation=this.z=this.y=this.x=null;this.scale=new THREE.Vector2;this.materials=null};

File diff suppressed because it is too large
+ 17 - 0
build/custom/ThreeExtras.js


+ 135 - 0
build/custom/ThreeSVG.js

@@ -0,0 +1,135 @@
+// ThreeSVG.js r33 - http://github.com/mrdoob/three.js
+var THREE=THREE||{};THREE.Color=function(a){this.setHex(a)};
+THREE.Color.prototype={autoUpdate:!0,setRGB:function(a,b,c){this.r=a;this.g=b;this.b=c;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},setHSV:function(a,b,c){var d,e,f,g,i,h;if(c==0)d=e=f=0;else{g=Math.floor(a*6);i=a*6-g;a=c*(1-b);h=c*(1-b*i);b=c*(1-b*(1-i));switch(g){case 1:d=h;e=c;f=a;break;case 2:d=a;e=c;f=b;break;case 3:d=a;e=h;f=c;break;case 4:d=b;e=a;f=c;break;case 5:d=c;e=a;f=h;break;case 6:case 0:d=c;e=b;f=a}}this.r=d;this.g=e;this.b=f;if(this.autoUpdate){this.updateHex();
+this.updateStyleString()}},setHex:function(a){this.hex=~~a&16777215;if(this.autoUpdate){this.updateRGBA();this.updateStyleString()}},updateHex:function(){this.hex=~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},updateRGBA:function(){this.r=(this.hex>>16&255)/255;this.g=(this.hex>>8&255)/255;this.b=(this.hex&255)/255},updateStyleString:function(){this.__styleString="rgb("+~~(this.r*255)+","+~~(this.g*255)+","+~~(this.b*255)+")"},clone:function(){return new THREE.Color(this.hex)},toString:function(){return"THREE.Color ( r: "+
+this.r+", g: "+this.g+", b: "+this.b+", hex: "+this.hex+" )"}};THREE.Vector2=function(a,b){this.set(a||0,b||0)};
+THREE.Vector2.prototype={set:function(a,b){this.x=a;this.y=b;return this},copy:function(a){this.set(a.x,a.y);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a);return this},negate:function(){this.set(-this.x,-this.y);return this},unit:function(){this.multiplyScalar(1/
+this.length());return this},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y},clone:function(){return new THREE.Vector2(this.x,this.y)},toString:function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,b,c){this.set(a||0,b||0,c||0)};
+THREE.Vector3.prototype={set:function(a,b,c){this.x=a;this.y=b;this.z=c;return this},copy:function(a){this.set(a.x,a.y,a.z);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z);return this},addScalar:function(a){this.set(this.x+a,this.y+a,this.z+a);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z);return this},cross:function(a,
+b){this.set(a.y*b.z-a.z*b.y,a.z*b.x-a.x*b.z,a.x*b.y-a.y*b.x);return this},crossSelf:function(a){var b=this.x,c=this.y,d=this.z;this.set(c*a.z-d*a.y,d*a.x-b*a.z,b*a.y-c*a.x);return this},multiply:function(a,b){this.set(a.x*b.x,a.y*b.y,a.z*b.z);return this},multiplySelf:function(a){this.set(this.x*a.x,this.y*a.y,this.z*a.z);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a,this.z*a);return this},divideSelf:function(a){this.set(this.x/a.x,this.y/a.y,this.z/a.z);return this},divideScalar:function(a){this.set(this.x/
+a,this.y/a,this.z/a);return this},negate:function(){this.set(-this.x,-this.y,-this.z);return this},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var b=this.x-a.x,c=this.y-a.y;a=this.z-a.z;return b*b+c*c+a*a},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},lengthManhattan:function(){return this.x+this.y+this.z},normalize:function(){var a=
+this.length();a>0?this.multiplyScalar(1/a):this.set(0,0,0);return this},setLength:function(a){return this.normalize().multiplyScalar(a)},isZero:function(){return Math.abs(this.x)<1.0E-4&&Math.abs(this.y)<1.0E-4&&Math.abs(this.z)<1.0E-4},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},toString:function(){return"THREE.Vector3 ( "+this.x+", "+this.y+", "+this.z+" )"}};THREE.Vector4=function(a,b,c,d){this.set(a||0,b||0,c||0,d||1)};
+THREE.Vector4.prototype={set:function(a,b,c,d){this.x=a;this.y=b;this.z=c;this.w=d;return this},copy:function(a){this.set(a.x,a.y,a.z,a.w||1);return this},add:function(a,b){this.set(a.x+b.x,a.y+b.y,a.z+b.z,a.w+b.w);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z,this.w+a.w);return this},sub:function(a,b){this.set(a.x-b.x,a.y-b.y,a.z-b.z,a.w-b.w);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z,this.w-a.w);return this},multiplyScalar:function(a){this.set(this.x*
+a,this.y*a,this.z*a,this.w*a);return this},divideScalar:function(a){this.set(this.x/a,this.y/a,this.z/a,this.w/a);return this},lerpSelf:function(a,b){this.set(this.x+(a.x-this.x)*b,this.y+(a.y-this.y)*b,this.z+(a.z-this.z)*b,this.w+(a.w-this.w)*b)},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},toString:function(){return"THREE.Vector4 ("+this.x+", "+this.y+", "+this.z+", "+this.w+")"}};THREE.Ray=function(a,b){this.origin=a||new THREE.Vector3;this.direction=b||new THREE.Vector3};
+THREE.Ray.prototype={intersectScene:function(a){var b,c,d=a.objects,e=[];a=0;for(b=d.length;a<b;a++){c=d[a];c instanceof THREE.Mesh&&(e=e.concat(this.intersectObject(c)))}e.sort(function(f,g){return f.distance-g.distance});return e},intersectObject:function(a){function b(t,j,H,p){p=p.clone().subSelf(j);H=H.clone().subSelf(j);var y=t.clone().subSelf(j);t=p.dot(p);j=p.dot(H);p=p.dot(y);var C=H.dot(H);H=H.dot(y);y=1/(t*C-j*j);C=(C*p-j*H)*y;t=(t*H-j*p)*y;return C>0&&t>0&&C+t<1}var c,d,e,f,g,i,h,k,n,m,
+l,o=a.geometry,q=o.vertices,s=[];c=0;for(d=o.faces.length;c<d;c++){e=o.faces[c];m=this.origin.clone();l=this.direction.clone();h=a.matrixWorld;f=h.multiplyVector3(q[e.a].position.clone());g=h.multiplyVector3(q[e.b].position.clone());i=h.multiplyVector3(q[e.c].position.clone());h=e instanceof THREE.Face4?h.multiplyVector3(q[e.d].position.clone()):null;k=a.matrixRotation.multiplyVector3(e.normal.clone());n=l.dot(k);if(n<0){k=k.dot((new THREE.Vector3).sub(f,m))/n;m=m.addSelf(l.multiplyScalar(k));if(e instanceof
+THREE.Face3){if(b(m,f,g,i)){e={distance:this.origin.distanceTo(m),point:m,face:e,object:a};s.push(e)}}else if(e instanceof THREE.Face4&&(b(m,f,g,h)||b(m,g,i,h))){e={distance:this.origin.distanceTo(m),point:m,face:e,object:a};s.push(e)}}}return s}};
+THREE.Rectangle=function(){function a(){f=d-b;g=e-c}var b,c,d,e,f,g,i=!0;this.getX=function(){return b};this.getY=function(){return c};this.getWidth=function(){return f};this.getHeight=function(){return g};this.getLeft=function(){return b};this.getTop=function(){return c};this.getRight=function(){return d};this.getBottom=function(){return e};this.set=function(h,k,n,m){i=!1;b=h;c=k;d=n;e=m;a()};this.addPoint=function(h,k){if(i){i=!1;b=h;c=k;d=h;e=k}else{b=b<h?b:h;c=c<k?c:k;d=d>h?d:h;e=e>k?e:k}a()};
+this.add3Points=function(h,k,n,m,l,o){if(i){i=!1;b=h<n?h<l?h:l:n<l?n:l;c=k<m?k<o?k:o:m<o?m:o;d=h>n?h>l?h:l:n>l?n:l;e=k>m?k>o?k:o:m>o?m:o}else{b=h<n?h<l?h<b?h:b:l<b?l:b:n<l?n<b?n:b:l<b?l:b;c=k<m?k<o?k<c?k:c:o<c?o:c:m<o?m<c?m:c:o<c?o:c;d=h>n?h>l?h>d?h:d:l>d?l:d:n>l?n>d?n:d:l>d?l:d;e=k>m?k>o?k>e?k:e:o>e?o:e:m>o?m>e?m:e:o>e?o:e}a()};this.addRectangle=function(h){if(i){i=!1;b=h.getLeft();c=h.getTop();d=h.getRight();e=h.getBottom()}else{b=b<h.getLeft()?b:h.getLeft();c=c<h.getTop()?c:h.getTop();d=d>h.getRight()?
+d:h.getRight();e=e>h.getBottom()?e:h.getBottom()}a()};this.inflate=function(h){b-=h;c-=h;d+=h;e+=h;a()};this.minSelf=function(h){b=b>h.getLeft()?b:h.getLeft();c=c>h.getTop()?c:h.getTop();d=d<h.getRight()?d:h.getRight();e=e<h.getBottom()?e:h.getBottom();a()};this.instersects=function(h){return Math.min(d,h.getRight())-Math.max(b,h.getLeft())>=0&&Math.min(e,h.getBottom())-Math.max(c,h.getTop())>=0};this.empty=function(){i=!0;e=d=c=b=0;a()};this.isEmpty=function(){return i};this.toString=function(){return"THREE.Rectangle ( left: "+
+b+", right: "+d+", top: "+c+", bottom: "+e+", width: "+f+", height: "+g+" )"}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={transpose:function(){var a,b=this.m;a=b[1];b[1]=b[3];b[3]=a;a=b[2];b[2]=b[6];b[6]=a;a=b[5];b[5]=b[7];b[7]=a;return this},transposeIntoArray:function(a){var b=this.m;a[0]=b[0];a[1]=b[3];a[2]=b[6];a[3]=b[1];a[4]=b[4];a[5]=b[7];a[6]=b[2];a[7]=b[5];a[8]=b[8];return this}};
+THREE.Matrix4=function(a,b,c,d,e,f,g,i,h,k,n,m,l,o,q,s){this.set(a||1,b||0,c||0,d||0,e||0,f||1,g||0,i||0,h||0,k||0,n||1,m||0,l||0,o||0,q||0,s||1);this.flat=Array(16);this.m33=new THREE.Matrix3};
+THREE.Matrix4.prototype={set:function(a,b,c,d,e,f,g,i,h,k,n,m,l,o,q,s){this.n11=a;this.n12=b;this.n13=c;this.n14=d;this.n21=e;this.n22=f;this.n23=g;this.n24=i;this.n31=h;this.n32=k;this.n33=n;this.n34=m;this.n41=l;this.n42=o;this.n43=q;this.n44=s;return this},identity:function(){this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);return this},copy:function(a){this.set(a.n11,a.n12,a.n13,a.n14,a.n21,a.n22,a.n23,a.n24,a.n31,a.n32,a.n33,a.n34,a.n41,a.n42,a.n43,a.n44);return this},lookAt:function(a,b,c){var d=THREE.Matrix4.__tmpVec1,
+e=THREE.Matrix4.__tmpVec2,f=THREE.Matrix4.__tmpVec3;f.sub(a,b).normalize();d.cross(c,f).normalize();e.cross(f,d).normalize();this.n11=d.x;this.n12=d.y;this.n13=d.z;this.n14=-d.dot(a);this.n21=e.x;this.n22=e.y;this.n23=e.z;this.n24=-e.dot(a);this.n31=f.x;this.n32=f.y;this.n33=f.z;this.n34=-f.dot(a);this.n43=this.n42=this.n41=0;this.n44=1;return this},multiplyVector3:function(a){var b=a.x,c=a.y,d=a.z,e=1/(this.n41*b+this.n42*c+this.n43*d+this.n44);a.x=(this.n11*b+this.n12*c+this.n13*d+this.n14)*e;a.y=
+(this.n21*b+this.n22*c+this.n23*d+this.n24)*e;a.z=(this.n31*b+this.n32*c+this.n33*d+this.n34)*e;return a},multiplyVector3OnlyZ:function(a){var b=a.x,c=a.y;a=a.z;return(this.n31*b+this.n32*c+this.n33*a+this.n34)*(1/(this.n41*b+this.n42*c+this.n43*a+this.n44))},multiplyVector4:function(a){var b=a.x,c=a.y,d=a.z,e=a.w;a.x=this.n11*b+this.n12*c+this.n13*d+this.n14*e;a.y=this.n21*b+this.n22*c+this.n23*d+this.n24*e;a.z=this.n31*b+this.n32*c+this.n33*d+this.n34*e;a.w=this.n41*b+this.n42*c+this.n43*d+this.n44*
+e;return a},crossVector:function(a){var b=new THREE.Vector4;b.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;b.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;b.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;b.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return b},multiply:function(a,b){var c=a.n11,d=a.n12,e=a.n13,f=a.n14,g=a.n21,i=a.n22,h=a.n23,k=a.n24,n=a.n31,m=a.n32,l=a.n33,o=a.n34,q=a.n41,s=a.n42,t=a.n43,j=a.n44,H=b.n11,p=b.n12,y=b.n13,C=b.n14,L=b.n21,z=b.n22,
+v=b.n23,I=b.n24,E=b.n31,K=b.n32,J=b.n33,u=b.n34;this.n11=c*H+d*L+e*E;this.n12=c*p+d*z+e*K;this.n13=c*y+d*v+e*J;this.n14=c*C+d*I+e*u+f;this.n21=g*H+i*L+h*E;this.n22=g*p+i*z+h*K;this.n23=g*y+i*v+h*J;this.n24=g*C+i*I+h*u+k;this.n31=n*H+m*L+l*E;this.n32=n*p+m*z+l*K;this.n33=n*y+m*v+l*J;this.n34=n*C+m*I+l*u+o;this.n41=q*H+s*L+t*E;this.n42=q*p+s*z+t*K;this.n43=q*y+s*v+t*J;this.n44=q*C+s*I+t*u+j;return this},multiplyToArray:function(a,b,c){var d=a.n11,e=a.n12,f=a.n13,g=a.n14,i=a.n21,h=a.n22,k=a.n23,n=a.n24,
+m=a.n31,l=a.n32,o=a.n33,q=a.n34,s=a.n41,t=a.n42,j=a.n43;a=a.n44;var H=b.n11,p=b.n12,y=b.n13,C=b.n14,L=b.n21,z=b.n22,v=b.n23,I=b.n24,E=b.n31,K=b.n32,J=b.n33,u=b.n34,D=b.n41,S=b.n42,x=b.n43;b=b.n44;this.n11=d*H+e*L+f*E+g*D;this.n12=d*p+e*z+f*K+g*S;this.n13=d*y+e*v+f*J+g*x;this.n14=d*C+e*I+f*u+g*b;this.n21=i*H+h*L+k*E+n*D;this.n22=i*p+h*z+k*K+n*S;this.n23=i*y+h*v+k*J+n*x;this.n24=i*C+h*I+k*u+n*b;this.n31=m*H+l*L+o*E+q*D;this.n32=m*p+l*z+o*K+q*S;this.n33=m*y+l*v+o*J+q*x;this.n34=m*C+l*I+o*u+q*b;this.n41=
+s*H+t*L+j*E+a*D;this.n42=s*p+t*z+j*K+a*S;this.n43=s*y+t*v+j*J+a*x;this.n44=s*C+t*I+j*u+a*b;c[0]=this.n11;c[1]=this.n21;c[2]=this.n31;c[3]=this.n41;c[4]=this.n12;c[5]=this.n22;c[6]=this.n32;c[7]=this.n42;c[8]=this.n13;c[9]=this.n23;c[10]=this.n33;c[11]=this.n43;c[12]=this.n14;c[13]=this.n24;c[14]=this.n34;c[15]=this.n44;return this},multiplySelf:function(a){var b=this.n11,c=this.n12,d=this.n13,e=this.n14,f=this.n21,g=this.n22,i=this.n23,h=this.n24,k=this.n31,n=this.n32,m=this.n33,l=this.n34,o=this.n41,
+q=this.n42,s=this.n43,t=this.n44,j=a.n11,H=a.n21,p=a.n31,y=a.n12,C=a.n22,L=a.n32,z=a.n13,v=a.n23,I=a.n33,E=a.n14,K=a.n24;a=a.n34;this.n11=b*j+c*H+d*p;this.n12=b*y+c*C+d*L;this.n13=b*z+c*v+d*I;this.n14=b*E+c*K+d*a+e;this.n21=f*j+g*H+i*p;this.n22=f*y+g*C+i*L;this.n23=f*z+g*v+i*I;this.n24=f*E+g*K+i*a+h;this.n31=k*j+n*H+m*p;this.n32=k*y+n*C+m*L;this.n33=k*z+n*v+m*I;this.n34=k*E+n*K+m*a+l;this.n41=o*j+q*H+s*p;this.n42=o*y+q*C+s*L;this.n43=o*z+q*v+s*I;this.n44=o*E+q*K+s*a+t;return this},multiplyScalar:function(a){this.n11*=
+a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=a;return this},determinant:function(){var a=this.n11,b=this.n12,c=this.n13,d=this.n14,e=this.n21,f=this.n22,g=this.n23,i=this.n24,h=this.n31,k=this.n32,n=this.n33,m=this.n34,l=this.n41,o=this.n42,q=this.n43,s=this.n44;return d*g*k*l-c*i*k*l-d*f*n*l+b*i*n*l+c*f*m*l-b*g*m*l-d*g*h*o+c*i*h*o+d*e*n*o-a*i*n*o-c*e*m*o+a*g*m*o+
+d*f*h*q-b*i*h*q-d*e*k*q+a*i*k*q+b*e*m*q-a*f*m*q-c*f*h*s+b*g*h*s+c*e*k*s-a*g*k*s-b*e*n*s+a*f*n*s},transpose:function(){function a(b,c,d){var e=b[c];b[c]=b[d];b[d]=e}a(this,"n21","n12");a(this,"n31","n13");a(this,"n32","n23");a(this,"n41","n14");a(this,"n42","n24");a(this,"n43","n34");return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;
+a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){this.flattenToArray(this.flat);return this.flat},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},flattenToArrayOffset:function(a,b){a[b]=this.n11;a[b+1]=this.n21;a[b+2]=this.n31;
+a[b+3]=this.n41;a[b+4]=this.n12;a[b+5]=this.n22;a[b+6]=this.n32;a[b+7]=this.n42;a[b+8]=this.n13;a[b+9]=this.n23;a[b+10]=this.n33;a[b+11]=this.n43;a[b+12]=this.n14;a[b+13]=this.n24;a[b+14]=this.n34;a[b+15]=this.n44;return a},setTranslation:function(a,b,c){this.set(1,0,0,a,0,1,0,b,0,0,1,c,0,0,0,1);return this},setScale:function(a,b,c){this.set(a,0,0,0,0,b,0,0,0,0,c,0,0,0,0,1);return this},setRotX:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(1,0,0,0,0,b,-a,0,0,a,b,0,0,0,0,1);return this},setRotY:function(a){var b=
+Math.cos(a);a=Math.sin(a);this.set(b,0,a,0,0,1,0,0,-a,0,b,0,0,0,0,1);return this},setRotZ:function(a){var b=Math.cos(a);a=Math.sin(a);this.set(b,-a,0,0,a,b,0,0,0,0,1,0,0,0,0,1);return this},setRotAxis:function(a,b){var c=Math.cos(b),d=Math.sin(b),e=1-c,f=a.x,g=a.y,i=a.z,h=e*f,k=e*g;this.set(h*f+c,h*g-d*i,h*i+d*g,0,h*g+d*i,k*g+c,k*i-d*f,0,h*i-d*g,k*i+d*f,e*i*i+c,0,0,0,0,1);return this},setPosition:function(a){this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},setRotationFromEuler:function(a){var b=
+a.x,c=a.y,d=a.z;a=Math.cos(b);b=Math.sin(b);var e=Math.cos(c);c=Math.sin(c);var f=Math.cos(d);d=Math.sin(d);var g=a*c,i=b*c;this.n11=e*f;this.n12=-e*d;this.n13=c;this.n21=i*f+a*d;this.n22=-i*d+a*f;this.n23=-b*e;this.n31=-g*f+b*d;this.n32=g*d+b*f;this.n33=a*e},setRotationFromQuaternion:function(a){var b=a.x,c=a.y,d=a.z,e=a.w,f=b+b,g=c+c,i=d+d;a=b*f;var h=b*g;b*=i;var k=c*g;c*=i;d*=i;f*=e;g*=e;e*=i;this.n11=1-(k+d);this.n12=h-e;this.n13=b+g;this.n21=h+e;this.n22=1-(a+d);this.n23=c-f;this.n31=b-g;this.n32=
+c+f;this.n33=1-(a+k)},scale:function(a){var b=a.x,c=a.y;a=a.z;this.n11*=b;this.n12*=c;this.n13*=a;this.n21*=b;this.n22*=c;this.n23*=a;this.n31*=b;this.n32*=c;this.n33*=a;this.n41*=b;this.n42*=c;this.n43*=a;return this},toString:function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};
+THREE.Matrix4.translationMatrix=function(a,b,c){var d=new THREE.Matrix4;d.setTranslation(a,b,c);return d};THREE.Matrix4.scaleMatrix=function(a,b,c){var d=new THREE.Matrix4;d.setScale(a,b,c);return d};THREE.Matrix4.rotationXMatrix=function(a){var b=new THREE.Matrix4;b.setRotX(a);return b};THREE.Matrix4.rotationYMatrix=function(a){var b=new THREE.Matrix4;b.setRotY(a);return b};THREE.Matrix4.rotationZMatrix=function(a){var b=new THREE.Matrix4;b.setRotZ(a);return b};
+THREE.Matrix4.rotationAxisAngleMatrix=function(a,b){var c=new THREE.Matrix4;c.setRotAxis(a,b);return c};
+THREE.Matrix4.makeInvert=function(a,b){var c=a.n11,d=a.n12,e=a.n13,f=a.n14,g=a.n21,i=a.n22,h=a.n23,k=a.n24,n=a.n31,m=a.n32,l=a.n33,o=a.n34,q=a.n41,s=a.n42,t=a.n43,j=a.n44;b===undefined&&(b=new THREE.Matrix4);b.n11=h*o*s-k*l*s+k*m*t-i*o*t-h*m*j+i*l*j;b.n12=f*l*s-e*o*s-f*m*t+d*o*t+e*m*j-d*l*j;b.n13=e*k*s-f*h*s+f*i*t-d*k*t-e*i*j+d*h*j;b.n14=f*h*m-e*k*m-f*i*l+d*k*l+e*i*o-d*h*o;b.n21=k*l*q-h*o*q-k*n*t+g*o*t+h*n*j-g*l*j;b.n22=e*o*q-f*l*q+f*n*t-c*o*t-e*n*j+c*l*j;b.n23=f*h*q-e*k*q-f*g*t+c*k*t+e*g*j-c*h*j;
+b.n24=e*k*n-f*h*n+f*g*l-c*k*l-e*g*o+c*h*o;b.n31=i*o*q-k*m*q+k*n*s-g*o*s-i*n*j+g*m*j;b.n32=f*m*q-d*o*q-f*n*s+c*o*s+d*n*j-c*m*j;b.n33=e*k*q-f*i*q+f*g*s-c*k*s-d*g*j+c*i*j;b.n34=f*i*n-d*k*n-f*g*m+c*k*m+d*g*o-c*i*o;b.n41=h*m*q-i*l*q-h*n*s+g*l*s+i*n*t-g*m*t;b.n42=d*l*q-e*m*q+e*n*s-c*l*s-d*n*t+c*m*t;b.n43=e*i*q-d*h*q-e*g*s+c*h*s+d*g*t-c*i*t;b.n44=d*h*n-e*i*n+e*g*m-c*h*m-d*g*l+c*i*l;b.multiplyScalar(1/a.determinant());return b};
+THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,d=a.n33*a.n22-a.n32*a.n23,e=-a.n33*a.n21+a.n31*a.n23,f=a.n32*a.n21-a.n31*a.n22,g=-a.n33*a.n12+a.n32*a.n13,i=a.n33*a.n11-a.n31*a.n13,h=-a.n32*a.n11+a.n31*a.n12,k=a.n23*a.n12-a.n22*a.n13,n=-a.n23*a.n11+a.n21*a.n13,m=a.n22*a.n11-a.n21*a.n12;a=a.n11*d+a.n21*g+a.n31*k;if(a==0)throw"matrix not invertible";a=1/a;c[0]=a*d;c[1]=a*e;c[2]=a*f;c[3]=a*g;c[4]=a*i;c[5]=a*h;c[6]=a*k;c[7]=a*n;c[8]=a*m;return b};
+THREE.Matrix4.makeFrustum=function(a,b,c,d,e,f){var g;g=new THREE.Matrix4;g.n11=2*e/(b-a);g.n12=0;g.n13=(b+a)/(b-a);g.n14=0;g.n21=0;g.n22=2*e/(d-c);g.n23=(d+c)/(d-c);g.n24=0;g.n31=0;g.n32=0;g.n33=-(f+e)/(f-e);g.n34=-2*f*e/(f-e);g.n41=0;g.n42=0;g.n43=-1;g.n44=0;return g};THREE.Matrix4.makePerspective=function(a,b,c,d){var e;a=c*Math.tan(a*Math.PI/360);e=-a;return THREE.Matrix4.makeFrustum(e*b,a*b,e,a,c,d)};
+THREE.Matrix4.makeOrtho=function(a,b,c,d,e,f){var g,i,h,k;g=new THREE.Matrix4;i=b-a;h=c-d;k=f-e;g.n11=2/i;g.n12=0;g.n13=0;g.n14=-((b+a)/i);g.n21=0;g.n22=2/h;g.n23=0;g.n24=-((c+d)/h);g.n31=0;g.n32=0;g.n33=-2/k;g.n34=-((f+e)/k);g.n41=0;g.n42=0;g.n43=0;g.n44=1;return g};THREE.Matrix4.__tmpVec1=new THREE.Vector3;THREE.Matrix4.__tmpVec2=new THREE.Vector3;THREE.Matrix4.__tmpVec3=new THREE.Vector3;
+THREE.Object3D=function(){this.id=THREE.Object3DCounter.value++;this.parent=undefined;this.children=[];this.position=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotation=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixNeedsUpdate=!0;this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
+0;this.boundRadiusScale=1;this.visible=!0};
+THREE.Object3D.prototype={addChild:function(a){if(this.children.indexOf(a)===-1){a.parent!==undefined&&a.parent.removeChild(a);a.parent=this;this.children.push(a)}},removeChild:function(a){var b=this.children.indexOf(a);if(b!==-1){a.parent=undefined;this.children.splice(b,1)}},updateMatrix:function(){this.matrix.setPosition(this.position);this.useQuaternion?this.matrixRotation.setRotationFromQuaternion(this.quaternion):this.matrixRotation.setRotationFromEuler(this.rotation);this.matrix.n11=this.matrixRotation.n11;
+this.matrix.n12=this.matrixRotation.n12;this.matrix.n13=this.matrixRotation.n13;this.matrix.n21=this.matrixRotation.n21;this.matrix.n22=this.matrixRotation.n22;this.matrix.n23=this.matrixRotation.n23;this.matrix.n31=this.matrixRotation.n31;this.matrix.n32=this.matrixRotation.n32;this.matrix.n33=this.matrixRotation.n33;if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1){this.matrix.scale(this.scale);this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z))}return!0},update:function(a,
+b,c){if(this.visible){this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0}a=0;for(var d=this.children.length;a<d;a++)this.children[a].update(this.matrixWorld,b,c)}}};THREE.Object3DCounter={value:0};
+THREE.Vertex=function(a,b){this.position=a||new THREE.Vector3;this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.normal=b||new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.normalScreen=new THREE.Vector3;this.tangent=new THREE.Vector4;this.__visible=!0};THREE.Vertex.prototype={toString:function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};
+THREE.Face3=function(a,b,c,d,e){this.a=a;this.b=b;this.c=c;this.centroid=new THREE.Vector3;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.materials=e instanceof Array?e:[e]};THREE.Face3.prototype={toString:function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};
+THREE.Face4=function(a,b,c,d,e,f){this.a=a;this.b=b;this.c=c;this.d=d;this.centroid=new THREE.Vector3;this.normal=e instanceof THREE.Vector3?e:new THREE.Vector3;this.vertexNormals=e instanceof Array?e:[];this.materials=f instanceof Array?f:[f]};THREE.Face4.prototype={toString:function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.UV=function(a,b){this.set(a||0,b||0)};
+THREE.UV.prototype={set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.set(a.u,a.v);return this},toString:function(){return"THREE.UV ("+this.u+", "+this.v+")"}};THREE.Geometry=function(){this.id="Geometry"+THREE.GeometryIdCounter++;this.vertices=[];this.faces=[];this.uvs=[];this.uvs2=[];this.colors=[];this.skinWeights=[];this.skinIndices=[];this.boundingSphere=this.boundingBox=null;this.geometryChunks={};this.hasTangents=!1};
+THREE.Geometry.prototype={computeCentroids:function(){var a,b,c;a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];c.centroid.set(0,0,0);if(c instanceof THREE.Face3){c.centroid.addSelf(this.vertices[c.a].position);c.centroid.addSelf(this.vertices[c.b].position);c.centroid.addSelf(this.vertices[c.c].position);c.centroid.divideScalar(3)}else if(c instanceof THREE.Face4){c.centroid.addSelf(this.vertices[c.a].position);c.centroid.addSelf(this.vertices[c.b].position);c.centroid.addSelf(this.vertices[c.c].position);
+c.centroid.addSelf(this.vertices[c.d].position);c.centroid.divideScalar(4)}}},computeFaceNormals:function(a){var b,c,d,e,f,g,i=new THREE.Vector3,h=new THREE.Vector3;d=0;for(e=this.vertices.length;d<e;d++){f=this.vertices[d];f.normal.set(0,0,0)}d=0;for(e=this.faces.length;d<e;d++){f=this.faces[d];if(a&&f.vertexNormals.length){i.set(0,0,0);b=0;for(c=f.normal.length;b<c;b++)i.addSelf(f.vertexNormals[b]);i.divideScalar(3)}else{b=this.vertices[f.a];c=this.vertices[f.b];g=this.vertices[f.c];i.sub(g.position,
+c.position);h.sub(b.position,c.position);i.crossSelf(h)}i.isZero()||i.normalize();f.normal.copy(i)}},computeVertexNormals:function(){var a,b,c,d;if(this.__tmpVertices==undefined){d=this.__tmpVertices=Array(this.vertices.length);a=0;for(b=this.vertices.length;a<b;a++)d[a]=new THREE.Vector3;a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];if(c instanceof THREE.Face3)c.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];else if(c instanceof THREE.Face4)c.vertexNormals=[new THREE.Vector3,
+new THREE.Vector3,new THREE.Vector3,new THREE.Vector3]}}else{d=this.__tmpVertices;a=0;for(b=this.vertices.length;a<b;a++)d[a].set(0,0,0)}a=0;for(b=this.faces.length;a<b;a++){c=this.faces[a];if(c instanceof THREE.Face3){d[c.a].addSelf(c.normal);d[c.b].addSelf(c.normal);d[c.c].addSelf(c.normal)}else if(c instanceof THREE.Face4){d[c.a].addSelf(c.normal);d[c.b].addSelf(c.normal);d[c.c].addSelf(c.normal);d[c.d].addSelf(c.normal)}}a=0;for(b=this.vertices.length;a<b;a++)d[a].normalize();a=0;for(b=this.faces.length;a<
+b;a++){c=this.faces[a];if(c instanceof THREE.Face3){c.vertexNormals[0].copy(d[c.a]);c.vertexNormals[1].copy(d[c.b]);c.vertexNormals[2].copy(d[c.c])}else if(c instanceof THREE.Face4){c.vertexNormals[0].copy(d[c.a]);c.vertexNormals[1].copy(d[c.b]);c.vertexNormals[2].copy(d[c.c]);c.vertexNormals[3].copy(d[c.d])}}},computeTangents:function(){function a(u,D,S,x,N,F,A){f=u.vertices[D].position;g=u.vertices[S].position;i=u.vertices[x].position;h=e[N];k=e[F];n=e[A];m=g.x-f.x;l=i.x-f.x;o=g.y-f.y;q=i.y-f.y;
+s=g.z-f.z;t=i.z-f.z;j=k.u-h.u;H=n.u-h.u;p=k.v-h.v;y=n.v-h.v;C=1/(j*y-H*p);v.set((y*m-p*l)*C,(y*o-p*q)*C,(y*s-p*t)*C);I.set((j*l-H*m)*C,(j*q-H*o)*C,(j*t-H*s)*C);L[D].addSelf(v);L[S].addSelf(v);L[x].addSelf(v);z[D].addSelf(I);z[S].addSelf(I);z[x].addSelf(I)}var b,c,d,e,f,g,i,h,k,n,m,l,o,q,s,t,j,H,p,y,C,L=[],z=[],v=new THREE.Vector3,I=new THREE.Vector3,E=new THREE.Vector3,K=new THREE.Vector3,J=new THREE.Vector3;b=0;for(c=this.vertices.length;b<c;b++){L[b]=new THREE.Vector3;z[b]=new THREE.Vector3}b=0;
+for(c=this.faces.length;b<c;b++){d=this.faces[b];e=this.uvs[b];if(d instanceof THREE.Face3){a(this,d.a,d.b,d.c,0,1,2);this.vertices[d.a].normal.copy(d.vertexNormals[0]);this.vertices[d.b].normal.copy(d.vertexNormals[1]);this.vertices[d.c].normal.copy(d.vertexNormals[2])}else if(d instanceof THREE.Face4){a(this,d.a,d.b,d.c,0,1,2);a(this,d.a,d.b,d.d,0,1,3);this.vertices[d.a].normal.copy(d.vertexNormals[0]);this.vertices[d.b].normal.copy(d.vertexNormals[1]);this.vertices[d.c].normal.copy(d.vertexNormals[2]);
+this.vertices[d.d].normal.copy(d.vertexNormals[3])}}b=0;for(c=this.vertices.length;b<c;b++){J.copy(this.vertices[b].normal);d=L[b];E.copy(d);E.subSelf(J.multiplyScalar(J.dot(d))).normalize();K.cross(this.vertices[b].normal,d);d=K.dot(z[b]);d=d<0?-1:1;this.vertices[b].tangent.set(E.x,E.y,E.z,d)}this.hasTangents=!0},computeBoundingBox:function(){var a;if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this.vertices[0].position.x],y:[this.vertices[0].position.y,this.vertices[0].position.y],
+z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var b=1,c=this.vertices.length;b<c;b++){a=this.vertices[b];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
+this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,b=0,c=this.vertices.length;b<c;b++)a=Math.max(a,this.vertices[b].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(n){var m=[];b=0;for(c=n.length;b<c;b++)n[b]==undefined?m.push("undefined"):m.push(n[b].id);return m.join("_")}var b,c,d,e,f,g,i,h,k={};d=0;for(e=this.faces.length;d<e;d++){f=this.faces[d];
+g=f.materials;i=a(g);k[i]==undefined&&(k[i]={hash:i,counter:0});h=k[i].hash+"_"+k[i].counter;this.geometryChunks[h]==undefined&&(this.geometryChunks[h]={faces:[],materials:g,vertices:0});f=f instanceof THREE.Face3?3:4;if(this.geometryChunks[h].vertices+f>65535){k[i].counter+=1;h=k[i].hash+"_"+k[i].counter;this.geometryChunks[h]==undefined&&(this.geometryChunks[h]={faces:[],materials:g,vertices:0})}this.geometryChunks[h].faces.push(d);this.geometryChunks[h].vertices+=f}},toString:function(){return"THREE.Geometry ( vertices: "+
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.GeometryIdCounter=0;
+THREE.Camera=function(a,b,c,d,e){THREE.Object3D.call(this);this.fov=a||50;this.aspect=b||1;this.near=c||0.1;this.far=d||2E3;this.screenCenterY=this.screenCenterX=0;this.target=e||new THREE.Object3D;this.useTarget=!0;this.up=new THREE.Vector3(0,1,0);this.inverseMatrix=new THREE.Matrix4;this.projectionMatrix=null;this.tmpVec=new THREE.Vector3;this.translateX=function(f,g){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(f);this.tmpVec.crossSelf(this.up);if(g)this.tmpVec.y=
+0;this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};this.translateZ=function(f,g){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(f);if(g)this.tmpVec.y=0;this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;THREE.Camera.prototype.supr=THREE.Object3D.prototype;
+THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
+THREE.Camera.prototype.update=function(a,b,c){if(this.useTarget){this.matrix.lookAt(this.position,this.target.position,this.up);a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);THREE.Matrix4.makeInvert(this.matrixWorld,this.inverseMatrix);b=!0}else{this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;b=!0;THREE.Matrix4.makeInvert(this.matrixWorld,
+this.inverseMatrix)}}for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,b,c)};
+THREE.Camera.prototype.frustumContains=function(a){var b=a.matrixWorld.n14,c=a.matrixWorld.n24,d=a.matrixWorld.n34,e=this.inverseMatrix,f=a.boundRadius*a.boundRadiusScale,g=e.n31*b+e.n32*c+e.n33*d+e.n34;if(g-f>-this.near)return!1;if(g+f<-this.far)return!1;g-=f;var i=this.projectionMatrix,h=1/(i.n43*g),k=h*this.screenCenterX,n=(e.n11*b+e.n12*c+e.n13*d+e.n14)*i.n11*k;f=i.n11*f*k;if(n+f<-this.screenCenterX)return!1;if(n-f>this.screenCenterX)return!1;b=(e.n21*b+e.n22*c+e.n23*d+e.n24)*i.n22*h*this.screenCenterY;
+if(b+f<-this.screenCenterY)return!1;if(b-f>this.screenCenterY)return!1;a.positionScreen.set(n,b,g,f);return!0};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=new THREE.Object3D;THREE.Light.prototype.constructor=THREE.Light;THREE.Light.prototype.supr=THREE.Object3D.prototype;THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;
+THREE.DirectionalLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=b||1};THREE.DirectionalLight.prototype=new THREE.Light;THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3;this.intensity=b||1};THREE.PointLight.prototype=new THREE.Light;THREE.PointLight.prototype.constructor=THREE.PointLight;THREE.FlatShading=0;THREE.SmoothShading=1;
+THREE.NormalBlending=0;THREE.AdditiveBlending=1;THREE.SubtractiveBlending=2;THREE.BillboardBlending=3;THREE.ReverseSubtractiveBlending=4;THREE.MaterialCounter={value:0};
+THREE.LineBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.linewidth=1;this.linejoin=this.linecap="round";this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.linewidth!==undefined)this.linewidth=
+a.linewidth;if(a.linecap!==undefined)this.linecap=a.linecap;if(a.linejoin!==undefined)this.linejoin=a.linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
+THREE.LineBasicMaterial.prototype={toString:function(){return"THREE.LineBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>linewidth: "+this.linewidth+"<br/>linecap: "+this.linecap+"<br/>linejoin: "+this.linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.MeshBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshBasicMaterial.prototype={toString:function(){return"THREE.MeshBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+
+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshLambertMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshLambertMaterial.prototype={toString:function(){return"THREE.MeshLambertMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+
+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/> )"}};
+THREE.MeshPhongMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.ambient=new THREE.Color(328965);this.specular=new THREE.Color(1118481);this.shininess=30;this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=
+this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){if(a.color!==undefined)this.color=new THREE.Color(a.color);if(a.ambient!==undefined)this.ambient=new THREE.Color(a.ambient);if(a.specular!==undefined)this.specular=new THREE.Color(a.specular);if(a.shininess!==undefined)this.shininess=a.shininess;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.map!==undefined)this.map=a.map;if(a.env_map!==undefined)this.env_map=a.env_map;
+if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;
+if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshPhongMaterial.prototype={toString:function(){return"THREE.MeshPhongMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>ambient: "+this.ambient+"<br/>specular: "+this.specular+"<br/>shininess: "+this.shininess+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+
+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshDepthMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshDepthMaterial.prototype={toString:function(){return"THREE.MeshDepthMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};
+THREE.MeshNormalMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.FlatShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshNormalMaterial.prototype={toString:function(){return"THREE.MeshNormalMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};THREE.MeshFaceMaterial=function(){};THREE.MeshFaceMaterial.prototype={toString:function(){return"THREE.MeshFaceMaterial"}};
+THREE.ParticleBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.map=null;this.size=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.offset=new THREE.Vector2;this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.size!==undefined)this.size=a.size;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==
+undefined)this.depth_test=a.depth_test;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};THREE.ParticleBasicMaterial.prototype={toString:function(){return"THREE.ParticleBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>size: "+this.size+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.ParticleCircleMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending}};
+THREE.ParticleCircleMaterial.prototype={toString:function(){return"THREE.ParticleCircleMaterial (<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>)"}};THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a];this.matrixAutoUpdate=!1};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;
+THREE.Line=function(a,b,c){THREE.Object3D.call(this);this.geometry=a;this.materials=b instanceof Array?b:[b];this.type=c!=undefined?c:THREE.LineStrip};THREE.LineStrip=0;THREE.LinePieces=1;THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;
+THREE.Mesh=function(a,b){THREE.Object3D.call(this);this.geometry=a;this.materials=b&&b.length?b:[b];this.flipSided=!1;this.doubleSided=!1;this.overdraw=!1;if(this.geometry){this.geometry.boundingSphere||this.geometry.computeBoundingSphere();this.boundRadius=a.boundingSphere.radius}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;
+THREE.Scene=function(){THREE.Object3D.call(this);this.objects=[];this.lights=[];this.sounds=[];this.fog=null;this.matrixAutoUpdate=!1};THREE.Scene.prototype=new THREE.Object3D;THREE.Scene.prototype.constructor=THREE.Scene;THREE.Scene.prototype.supr=THREE.Object3D.prototype;THREE.Scene.prototype.addChild=function(a){this.supr.addChild.call(this,a);this.addChildRecurse(a)};
+THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else a instanceof THREE.Camera||a instanceof THREE.Bone||this.objects.indexOf(a)===-1&&this.objects.push(a);for(var b=0;b<a.children.length;b++)this.addChildRecurse(a.children[b])};THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};
+THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else if(a instanceof THREE.Sound){b=this.sounds.indexOf(a);b!==-1&&this.sounds.splice(b,1)}else if(!(a instanceof THREE.Camera)){b=this.objects.indexOf(a);b!==-1&&this.objects.splice(b,1)}for(b=0;b<a.children.length;b++)this.removeChildRecurse(a.children[b])};THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;
+THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;
+THREE.Projector=function(){function a(z,v){return v.z-z.z}function b(z,v){var I=0,E=1,K=z.z+z.w,J=v.z+v.w,u=-z.z+z.w,D=-v.z+v.w;if(K>=0&&J>=0&&u>=0&&D>=0)return!0;else if(K<0&&J<0||u<0&&D<0)return!1;else{if(K<0)I=Math.max(I,K/(K-J));else J<0&&(E=Math.min(E,K/(K-J)));if(u<0)I=Math.max(I,u/(u-D));else D<0&&(E=Math.min(E,u/(u-D)));if(E<I)return!1;else{z.lerpSelf(v,I);v.lerpSelf(z,1-E);return!0}}}var c,d,e=[],f,g,i,h=[],k,n,m=[],l,o,q=[],s=new THREE.Vector4,t=new THREE.Vector4,j=new THREE.Matrix4,H=new THREE.Matrix4,
+p=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],y=new THREE.Vector4,C=new THREE.Vector4,L;this.projectObjects=function(z,v,I){v=[];var E,K,J;d=0;K=z.objects;z=0;for(E=K.length;z<E;z++){J=K[z];var u;if(!(u=!J.visible))if(u=J instanceof THREE.Mesh){a:{u=void 0;for(var D=J.matrixWorld,S=-J.geometry.boundingSphere.radius*Math.max(J.scale.x,Math.max(J.scale.y,J.scale.z)),x=0;x<6;x++){u=p[x].x*D.n14+p[x].y*D.n24+p[x].z*D.n34+p[x].w;if(u<=S){u=
+!1;break a}}u=!0}u=!u}if(!u){c=e[d]=e[d]||new THREE.RenderableObject;s.copy(J.position);j.multiplyVector3(s);c.object=J;c.z=s.z;v.push(c);d++}}I&&v.sort(a);return v};this.projectScene=function(z,v,I){var E=[],K=v.near,J=v.far,u,D,S,x,N,F,A,O,Q,B,w,M,P,r,G,R;i=n=o=0;v.matrixAutoUpdate&&v.update();j.multiply(v.projectionMatrix,v.matrixWorld);p[0].set(j.n41-j.n11,j.n42-j.n12,j.n43-j.n13,j.n44-j.n14);p[1].set(j.n41+j.n11,j.n42+j.n12,j.n43+j.n13,j.n44+j.n14);p[2].set(j.n41+j.n21,j.n42+j.n22,j.n43+j.n23,
+j.n44+j.n24);p[3].set(j.n41-j.n21,j.n42-j.n22,j.n43-j.n23,j.n44-j.n24);p[4].set(j.n41-j.n31,j.n42-j.n32,j.n43-j.n33,j.n44-j.n34);p[5].set(j.n41+j.n31,j.n42+j.n32,j.n43+j.n33,j.n44+j.n34);for(u=0;u<6;u++){F=p[u];F.divideScalar(Math.sqrt(F.x*F.x+F.y*F.y+F.z*F.z))}z.update(undefined,!1,v);F=this.projectObjects(z,v,!0);z=0;for(u=F.length;z<u;z++){A=F[z].object;if(A.visible){A.matrixAutoUpdate&&A.updateMatrix();O=A.matrixWorld;w=A.matrixRotation;Q=A.materials;B=A.overdraw;if(A instanceof THREE.Mesh){M=
+A.geometry;P=M.vertices;D=0;for(S=P.length;D<S;D++){r=P[D];r.positionWorld.copy(r.position);O.multiplyVector3(r.positionWorld);x=r.positionScreen;x.copy(r.positionWorld);j.multiplyVector4(x);x.x/=x.w;x.y/=x.w;r.__visible=x.z>K&&x.z<J}M=M.faces;D=0;for(S=M.length;D<S;D++){r=M[D];if(r instanceof THREE.Face3){x=P[r.a];N=P[r.b];G=P[r.c];if(x.__visible&&N.__visible&&G.__visible&&(A.doubleSided||A.flipSided!=(G.positionScreen.x-x.positionScreen.x)*(N.positionScreen.y-x.positionScreen.y)-(G.positionScreen.y-
+x.positionScreen.y)*(N.positionScreen.x-x.positionScreen.x)<0)){f=h[i]=h[i]||new THREE.RenderableFace3;f.v1.positionWorld.copy(x.positionWorld);f.v2.positionWorld.copy(N.positionWorld);f.v3.positionWorld.copy(G.positionWorld);f.v1.positionScreen.copy(x.positionScreen);f.v2.positionScreen.copy(N.positionScreen);f.v3.positionScreen.copy(G.positionScreen);f.normalWorld.copy(r.normal);w.multiplyVector3(f.normalWorld);f.centroidWorld.copy(r.centroid);O.multiplyVector3(f.centroidWorld);f.centroidScreen.copy(f.centroidWorld);
+j.multiplyVector3(f.centroidScreen);G=r.vertexNormals;L=f.vertexNormalsWorld;x=0;for(N=G.length;x<N;x++){R=L[x]=L[x]||new THREE.Vector3;R.copy(G[x]);w.multiplyVector3(R)}f.z=f.centroidScreen.z;f.meshMaterials=Q;f.faceMaterials=r.materials;f.overdraw=B;if(A.geometry.uvs[D]){f.uvs[0]=A.geometry.uvs[D][0];f.uvs[1]=A.geometry.uvs[D][1];f.uvs[2]=A.geometry.uvs[D][2]}E.push(f);i++}}else if(r instanceof THREE.Face4){x=P[r.a];N=P[r.b];G=P[r.c];R=P[r.d];if(x.__visible&&N.__visible&&G.__visible&&R.__visible&&
+(A.doubleSided||A.flipSided!=((R.positionScreen.x-x.positionScreen.x)*(N.positionScreen.y-x.positionScreen.y)-(R.positionScreen.y-x.positionScreen.y)*(N.positionScreen.x-x.positionScreen.x)<0||(N.positionScreen.x-G.positionScreen.x)*(R.positionScreen.y-G.positionScreen.y)-(N.positionScreen.y-G.positionScreen.y)*(R.positionScreen.x-G.positionScreen.x)<0))){f=h[i]=h[i]||new THREE.RenderableFace3;f.v1.positionWorld.copy(x.positionWorld);f.v2.positionWorld.copy(N.positionWorld);f.v3.positionWorld.copy(R.positionWorld);
+f.v1.positionScreen.copy(x.positionScreen);f.v2.positionScreen.copy(N.positionScreen);f.v3.positionScreen.copy(R.positionScreen);f.normalWorld.copy(r.normal);w.multiplyVector3(f.normalWorld);f.centroidWorld.copy(r.centroid);O.multiplyVector3(f.centroidWorld);f.centroidScreen.copy(f.centroidWorld);j.multiplyVector3(f.centroidScreen);f.z=f.centroidScreen.z;f.meshMaterials=Q;f.faceMaterials=r.materials;f.overdraw=B;if(A.geometry.uvs[D]){f.uvs[0]=A.geometry.uvs[D][0];f.uvs[1]=A.geometry.uvs[D][1];f.uvs[2]=
+A.geometry.uvs[D][3]}E.push(f);i++;g=h[i]=h[i]||new THREE.RenderableFace3;g.v1.positionWorld.copy(N.positionWorld);g.v2.positionWorld.copy(G.positionWorld);g.v3.positionWorld.copy(R.positionWorld);g.v1.positionScreen.copy(N.positionScreen);g.v2.positionScreen.copy(G.positionScreen);g.v3.positionScreen.copy(R.positionScreen);g.normalWorld.copy(f.normalWorld);g.centroidWorld.copy(f.centroidWorld);g.centroidScreen.copy(f.centroidScreen);g.z=g.centroidScreen.z;g.meshMaterials=Q;g.faceMaterials=r.materials;
+g.overdraw=B;if(A.geometry.uvs[D]){g.uvs[0]=A.geometry.uvs[D][1];g.uvs[1]=A.geometry.uvs[D][2];g.uvs[2]=A.geometry.uvs[D][3]}E.push(g);i++}}}}else if(A instanceof THREE.Line){H.multiply(j,O);P=A.geometry.vertices;r=P[0];r.positionScreen.copy(r.position);H.multiplyVector4(r.positionScreen);D=1;for(S=P.length;D<S;D++){x=P[D];x.positionScreen.copy(x.position);H.multiplyVector4(x.positionScreen);N=P[D-1];y.copy(x.positionScreen);C.copy(N.positionScreen);if(b(y,C)){y.multiplyScalar(1/y.w);C.multiplyScalar(1/
+C.w);k=m[n]=m[n]||new THREE.RenderableLine;k.v1.positionScreen.copy(y);k.v2.positionScreen.copy(C);k.z=Math.max(y.z,C.z);k.materials=A.materials;E.push(k);n++}}}else if(A instanceof THREE.Particle){t.set(A.position.x,A.position.y,A.position.z,1);j.multiplyVector4(t);t.z/=t.w;if(t.z>0&&t.z<1){l=q[o]=q[o]||new THREE.RenderableParticle;l.x=t.x/t.w;l.y=t.y/t.w;l.z=t.z;l.rotation=A.rotation.z;l.scale.x=A.scale.x*Math.abs(l.x-(t.x+v.projectionMatrix.n11)/(t.w+v.projectionMatrix.n14));l.scale.y=A.scale.y*
+Math.abs(l.y-(t.y+v.projectionMatrix.n22)/(t.w+v.projectionMatrix.n24));l.materials=A.materials;E.push(l);o++}}}}I&&E.sort(a);return E};this.unprojectVector=function(z,v){var I=THREE.Matrix4.makeInvert(v.matrixWorld);I.multiplySelf(THREE.Matrix4.makeInvert(v.projectionMatrix));I.multiplyVector3(z);return z}};
+THREE.SVGRenderer=function(){function a(F,A,O){var Q,B,w,M;Q=0;for(B=F.lights.length;Q<B;Q++){w=F.lights[Q];if(w instanceof THREE.DirectionalLight){M=A.normalWorld.dot(w.position)*w.intensity;if(M>0){O.r+=w.color.r*M;O.g+=w.color.g*M;O.b+=w.color.b*M}}else if(w instanceof THREE.PointLight){I.sub(w.position,A.centroidWorld);I.normalize();M=A.normalWorld.dot(I)*w.intensity;if(M>0){O.r+=w.color.r*M;O.g+=w.color.g*M;O.b+=w.color.b*M}}}}function b(F,A,O,Q,B,w){u=d(D++);u.setAttribute("d","M "+F.positionScreen.x+
+" "+F.positionScreen.y+" L "+A.positionScreen.x+" "+A.positionScreen.y+" L "+O.positionScreen.x+","+O.positionScreen.y+"z");if(B instanceof THREE.MeshBasicMaterial)p.__styleString=B.color.__styleString;else if(B instanceof THREE.MeshLambertMaterial)if(H){y.r=C.r;y.g=C.g;y.b=C.b;a(w,Q,y);p.r=B.color.r*y.r;p.g=B.color.g*y.g;p.b=B.color.b*y.b;p.updateStyleString()}else p.__styleString=B.color.__styleString;else if(B instanceof THREE.MeshDepthMaterial){v=1-B.__2near/(B.__farPlusNear-Q.z*B.__farMinusNear);
+p.setRGB(v,v,v)}else B instanceof THREE.MeshNormalMaterial&&p.setRGB(e(Q.normalWorld.x),e(Q.normalWorld.y),e(Q.normalWorld.z));B.wireframe?u.setAttribute("style","fill: none; stroke: "+p.__styleString+"; stroke-width: "+B.wireframe_linewidth+"; stroke-opacity: "+B.opacity+"; stroke-linecap: "+B.wireframe_linecap+"; stroke-linejoin: "+B.wireframe_linejoin):u.setAttribute("style","fill: "+p.__styleString+"; fill-opacity: "+B.opacity);i.appendChild(u)}function c(F,A,O,Q,B,w,M){u=d(D++);u.setAttribute("d",
+"M "+F.positionScreen.x+" "+F.positionScreen.y+" L "+A.positionScreen.x+" "+A.positionScreen.y+" L "+O.positionScreen.x+","+O.positionScreen.y+" L "+Q.positionScreen.x+","+Q.positionScreen.y+"z");if(w instanceof THREE.MeshBasicMaterial)p.__styleString=w.color.__styleString;else if(w instanceof THREE.MeshLambertMaterial)if(H){y.r=C.r;y.g=C.g;y.b=C.b;a(M,B,y);p.r=w.color.r*y.r;p.g=w.color.g*y.g;p.b=w.color.b*y.b;p.updateStyleString()}else p.__styleString=w.color.__styleString;else if(w instanceof THREE.MeshDepthMaterial){v=
+1-w.__2near/(w.__farPlusNear-B.z*w.__farMinusNear);p.setRGB(v,v,v)}else w instanceof THREE.MeshNormalMaterial&&p.setRGB(e(B.normalWorld.x),e(B.normalWorld.y),e(B.normalWorld.z));w.wireframe?u.setAttribute("style","fill: none; stroke: "+p.__styleString+"; stroke-width: "+w.wireframe_linewidth+"; stroke-opacity: "+w.opacity+"; stroke-linecap: "+w.wireframe_linecap+"; stroke-linejoin: "+w.wireframe_linejoin):u.setAttribute("style","fill: "+p.__styleString+"; fill-opacity: "+w.opacity);i.appendChild(u)}
+function d(F){if(E[F]==null){E[F]=document.createElementNS("http://www.w3.org/2000/svg","path");N==0&&E[F].setAttribute("shape-rendering","crispEdges")}return E[F]}function e(F){return F<0?Math.min((1+F)*0.5,0.5):0.5+Math.min(F*0.5,0.5)}var f=null,g=new THREE.Projector,i=document.createElementNS("http://www.w3.org/2000/svg","svg"),h,k,n,m,l,o,q,s,t=new THREE.Rectangle,j=new THREE.Rectangle,H=!1,p=new THREE.Color(16777215),y=new THREE.Color(16777215),C=new THREE.Color(0),L=new THREE.Color(0),z=new THREE.Color(0),
+v,I=new THREE.Vector3,E=[],K=[],J=[],u,D,S,x,N=1;this.domElement=i;this.autoClear=!0;this.sortObjects=!0;this.sortElements=!0;this.setQuality=function(F){switch(F){case "high":N=1;break;case "low":N=0}};this.setSize=function(F,A){h=F;k=A;n=h/2;m=k/2;i.setAttribute("viewBox",-n+" "+-m+" "+h+" "+k);i.setAttribute("width",h);i.setAttribute("height",k);t.set(-n,-m,n,m)};this.clear=function(){for(;i.childNodes.length>0;)i.removeChild(i.childNodes[0])};this.render=function(F,A){var O,Q,B,w,M,P,r,G;this.autoClear&&
+this.clear();f=g.projectScene(F,A,this.sortElements);x=S=D=0;if(H=F.lights.length>0){r=F.lights;C.setRGB(0,0,0);L.setRGB(0,0,0);z.setRGB(0,0,0);O=0;for(Q=r.length;O<Q;O++){B=r[O];w=B.color;if(B instanceof THREE.AmbientLight){C.r+=w.r;C.g+=w.g;C.b+=w.b}else if(B instanceof THREE.DirectionalLight){L.r+=w.r;L.g+=w.g;L.b+=w.b}else if(B instanceof THREE.PointLight){z.r+=w.r;z.g+=w.g;z.b+=w.b}}}O=0;for(Q=f.length;O<Q;O++){r=f[O];j.empty();if(r instanceof THREE.RenderableParticle){l=r;l.x*=n;l.y*=-m;B=0;
+for(w=r.materials.length;B<w;B++)if(G=r.materials[B]){M=l;P=r;var R=S++;if(K[R]==null){K[R]=document.createElementNS("http://www.w3.org/2000/svg","circle");N==0&&K[R].setAttribute("shape-rendering","crispEdges")}u=K[R];u.setAttribute("cx",M.x);u.setAttribute("cy",M.y);u.setAttribute("r",P.scale.x*n);if(G instanceof THREE.ParticleCircleMaterial){if(H){y.r=C.r+L.r+z.r;y.g=C.g+L.g+z.g;y.b=C.b+L.b+z.b;p.r=G.color.r*y.r;p.g=G.color.g*y.g;p.b=G.color.b*y.b;p.updateStyleString()}else p=G.color;u.setAttribute("style",
+"fill: "+p.__styleString)}i.appendChild(u)}}else if(r instanceof THREE.RenderableLine){l=r.v1;o=r.v2;l.positionScreen.x*=n;l.positionScreen.y*=-m;o.positionScreen.x*=n;o.positionScreen.y*=-m;j.addPoint(l.positionScreen.x,l.positionScreen.y);j.addPoint(o.positionScreen.x,o.positionScreen.y);if(t.instersects(j)){B=0;for(w=r.materials.length;B<w;)if(G=r.materials[B++]){M=l;P=o;R=x++;if(J[R]==null){J[R]=document.createElementNS("http://www.w3.org/2000/svg","line");N==0&&J[R].setAttribute("shape-rendering",
+"crispEdges")}u=J[R];u.setAttribute("x1",M.positionScreen.x);u.setAttribute("y1",M.positionScreen.y);u.setAttribute("x2",P.positionScreen.x);u.setAttribute("y2",P.positionScreen.y);if(G instanceof THREE.LineBasicMaterial){p.__styleString=G.color.__styleString;u.setAttribute("style","fill: none; stroke: "+p.__styleString+"; stroke-width: "+G.linewidth+"; stroke-opacity: "+G.opacity+"; stroke-linecap: "+G.linecap+"; stroke-linejoin: "+G.linejoin);i.appendChild(u)}}}}else if(r instanceof THREE.RenderableFace3){l=
+r.v1;o=r.v2;q=r.v3;l.positionScreen.x*=n;l.positionScreen.y*=-m;o.positionScreen.x*=n;o.positionScreen.y*=-m;q.positionScreen.x*=n;q.positionScreen.y*=-m;j.addPoint(l.positionScreen.x,l.positionScreen.y);j.addPoint(o.positionScreen.x,o.positionScreen.y);j.addPoint(q.positionScreen.x,q.positionScreen.y);if(t.instersects(j)){B=0;for(w=r.meshMaterials.length;B<w;){G=r.meshMaterials[B++];if(G instanceof THREE.MeshFaceMaterial){M=0;for(P=r.faceMaterials.length;M<P;)(G=r.faceMaterials[M++])&&b(l,o,q,r,
+G,F)}else G&&b(l,o,q,r,G,F)}}}else if(r instanceof THREE.RenderableFace4){l=r.v1;o=r.v2;q=r.v3;s=r.v4;l.positionScreen.x*=n;l.positionScreen.y*=-m;o.positionScreen.x*=n;o.positionScreen.y*=-m;q.positionScreen.x*=n;q.positionScreen.y*=-m;s.positionScreen.x*=n;s.positionScreen.y*=-m;j.addPoint(l.positionScreen.x,l.positionScreen.y);j.addPoint(o.positionScreen.x,o.positionScreen.y);j.addPoint(q.positionScreen.x,q.positionScreen.y);j.addPoint(s.positionScreen.x,s.positionScreen.y);if(t.instersects(j)){B=
+0;for(w=r.meshMaterials.length;B<w;){G=r.meshMaterials[B++];if(G instanceof THREE.MeshFaceMaterial){M=0;for(P=r.faceMaterials.length;M<P;)(G=r.faceMaterials[M++])&&c(l,o,q,s,r,G,F)}else G&&c(l,o,q,s,r,G,F)}}}}}};THREE.RenderableObject=function(){this.z=this.object=null};
+THREE.RenderableFace3=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.v3=new THREE.Vertex;this.centroidWorld=new THREE.Vector3;this.centroidScreen=new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.vertexNormalsWorld=[];this.faceMaterials=this.meshMaterials=null;this.overdraw=!1;this.uvs=[null,null,null]};THREE.RenderableParticle=function(){this.rotation=this.z=this.y=this.x=null;this.scale=new THREE.Vector2;this.materials=null};
+THREE.RenderableLine=function(){this.z=null;this.v1=new THREE.Vertex;this.v2=new THREE.Vertex;this.materials=null};

+ 200 - 0
build/custom/ThreeWebGL.js

@@ -0,0 +1,200 @@
+// ThreeWebGL.js r33 - http://github.com/mrdoob/three.js
+var THREE=THREE||{};THREE.Color=function(a){this.setHex(a)};
+THREE.Color.prototype={autoUpdate:!0,setRGB:function(a,c,d){this.r=a;this.g=c;this.b=d;if(this.autoUpdate){this.updateHex();this.updateStyleString()}},setHSV:function(a,c,d){var f,g,j,k,o,i;if(d==0)f=g=j=0;else{k=Math.floor(a*6);o=a*6-k;a=d*(1-c);i=d*(1-c*o);c=d*(1-c*(1-o));switch(k){case 1:f=i;g=d;j=a;break;case 2:f=a;g=d;j=c;break;case 3:f=a;g=i;j=d;break;case 4:f=c;g=a;j=d;break;case 5:f=d;g=a;j=i;break;case 6:case 0:f=d;g=c;j=a}}this.r=f;this.g=g;this.b=j;if(this.autoUpdate){this.updateHex();
+this.updateStyleString()}},setHex:function(a){this.hex=~~a&16777215;if(this.autoUpdate){this.updateRGBA();this.updateStyleString()}},updateHex:function(){this.hex=~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},updateRGBA:function(){this.r=(this.hex>>16&255)/255;this.g=(this.hex>>8&255)/255;this.b=(this.hex&255)/255},updateStyleString:function(){this.__styleString="rgb("+~~(this.r*255)+","+~~(this.g*255)+","+~~(this.b*255)+")"},clone:function(){return new THREE.Color(this.hex)},toString:function(){return"THREE.Color ( r: "+
+this.r+", g: "+this.g+", b: "+this.b+", hex: "+this.hex+" )"}};THREE.Vector2=function(a,c){this.set(a||0,c||0)};
+THREE.Vector2.prototype={set:function(a,c){this.x=a;this.y=c;return this},copy:function(a){this.set(a.x,a.y);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y);return this},add:function(a,c){this.set(a.x+c.x,a.y+c.y);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y);return this},sub:function(a,c){this.set(a.x-c.x,a.y-c.y);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a);return this},negate:function(){this.set(-this.x,-this.y);return this},unit:function(){this.multiplyScalar(1/
+this.length());return this},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y},clone:function(){return new THREE.Vector2(this.x,this.y)},toString:function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,c,d){this.set(a||0,c||0,d||0)};
+THREE.Vector3.prototype={set:function(a,c,d){this.x=a;this.y=c;this.z=d;return this},copy:function(a){this.set(a.x,a.y,a.z);return this},add:function(a,c){this.set(a.x+c.x,a.y+c.y,a.z+c.z);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z);return this},addScalar:function(a){this.set(this.x+a,this.y+a,this.z+a);return this},sub:function(a,c){this.set(a.x-c.x,a.y-c.y,a.z-c.z);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z);return this},cross:function(a,
+c){this.set(a.y*c.z-a.z*c.y,a.z*c.x-a.x*c.z,a.x*c.y-a.y*c.x);return this},crossSelf:function(a){var c=this.x,d=this.y,f=this.z;this.set(d*a.z-f*a.y,f*a.x-c*a.z,c*a.y-d*a.x);return this},multiply:function(a,c){this.set(a.x*c.x,a.y*c.y,a.z*c.z);return this},multiplySelf:function(a){this.set(this.x*a.x,this.y*a.y,this.z*a.z);return this},multiplyScalar:function(a){this.set(this.x*a,this.y*a,this.z*a);return this},divideSelf:function(a){this.set(this.x/a.x,this.y/a.y,this.z/a.z);return this},divideScalar:function(a){this.set(this.x/
+a,this.y/a,this.z/a);return this},negate:function(){this.set(-this.x,-this.y,-this.z);return this},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var c=this.x-a.x,d=this.y-a.y;a=this.z-a.z;return c*c+d*d+a*a},length:function(){return Math.sqrt(this.lengthSq())},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},lengthManhattan:function(){return this.x+this.y+this.z},normalize:function(){var a=
+this.length();a>0?this.multiplyScalar(1/a):this.set(0,0,0);return this},setLength:function(a){return this.normalize().multiplyScalar(a)},isZero:function(){return Math.abs(this.x)<1.0E-4&&Math.abs(this.y)<1.0E-4&&Math.abs(this.z)<1.0E-4},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},toString:function(){return"THREE.Vector3 ( "+this.x+", "+this.y+", "+this.z+" )"}};THREE.Vector4=function(a,c,d,f){this.set(a||0,c||0,d||0,f||1)};
+THREE.Vector4.prototype={set:function(a,c,d,f){this.x=a;this.y=c;this.z=d;this.w=f;return this},copy:function(a){this.set(a.x,a.y,a.z,a.w||1);return this},add:function(a,c){this.set(a.x+c.x,a.y+c.y,a.z+c.z,a.w+c.w);return this},addSelf:function(a){this.set(this.x+a.x,this.y+a.y,this.z+a.z,this.w+a.w);return this},sub:function(a,c){this.set(a.x-c.x,a.y-c.y,a.z-c.z,a.w-c.w);return this},subSelf:function(a){this.set(this.x-a.x,this.y-a.y,this.z-a.z,this.w-a.w);return this},multiplyScalar:function(a){this.set(this.x*
+a,this.y*a,this.z*a,this.w*a);return this},divideScalar:function(a){this.set(this.x/a,this.y/a,this.z/a,this.w/a);return this},lerpSelf:function(a,c){this.set(this.x+(a.x-this.x)*c,this.y+(a.y-this.y)*c,this.z+(a.z-this.z)*c,this.w+(a.w-this.w)*c)},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},toString:function(){return"THREE.Vector4 ("+this.x+", "+this.y+", "+this.z+", "+this.w+")"}};THREE.Ray=function(a,c){this.origin=a||new THREE.Vector3;this.direction=c||new THREE.Vector3};
+THREE.Ray.prototype={intersectScene:function(a){var c,d,f=a.objects,g=[];a=0;for(c=f.length;a<c;a++){d=f[a];d instanceof THREE.Mesh&&(g=g.concat(this.intersectObject(d)))}g.sort(function(j,k){return j.distance-k.distance});return g},intersectObject:function(a){function c(K,J,R,L){L=L.clone().subSelf(J);R=R.clone().subSelf(J);var P=K.clone().subSelf(J);K=L.dot(L);J=L.dot(R);L=L.dot(P);var b=R.dot(R);R=R.dot(P);P=1/(K*b-J*J);b=(b*L-J*R)*P;K=(K*R-J*L)*P;return b>0&&K>0&&b+K<1}var d,f,g,j,k,o,i,t,w,x,
+z,A=a.geometry,E=A.vertices,H=[];d=0;for(f=A.faces.length;d<f;d++){g=A.faces[d];x=this.origin.clone();z=this.direction.clone();i=a.matrixWorld;j=i.multiplyVector3(E[g.a].position.clone());k=i.multiplyVector3(E[g.b].position.clone());o=i.multiplyVector3(E[g.c].position.clone());i=g instanceof THREE.Face4?i.multiplyVector3(E[g.d].position.clone()):null;t=a.matrixRotation.multiplyVector3(g.normal.clone());w=z.dot(t);if(w<0){t=t.dot((new THREE.Vector3).sub(j,x))/w;x=x.addSelf(z.multiplyScalar(t));if(g instanceof
+THREE.Face3){if(c(x,j,k,o)){g={distance:this.origin.distanceTo(x),point:x,face:g,object:a};H.push(g)}}else if(g instanceof THREE.Face4&&(c(x,j,k,i)||c(x,k,o,i))){g={distance:this.origin.distanceTo(x),point:x,face:g,object:a};H.push(g)}}}return H}};
+THREE.Rectangle=function(){function a(){j=f-c;k=g-d}var c,d,f,g,j,k,o=!0;this.getX=function(){return c};this.getY=function(){return d};this.getWidth=function(){return j};this.getHeight=function(){return k};this.getLeft=function(){return c};this.getTop=function(){return d};this.getRight=function(){return f};this.getBottom=function(){return g};this.set=function(i,t,w,x){o=!1;c=i;d=t;f=w;g=x;a()};this.addPoint=function(i,t){if(o){o=!1;c=i;d=t;f=i;g=t}else{c=c<i?c:i;d=d<t?d:t;f=f>i?f:i;g=g>t?g:t}a()};
+this.add3Points=function(i,t,w,x,z,A){if(o){o=!1;c=i<w?i<z?i:z:w<z?w:z;d=t<x?t<A?t:A:x<A?x:A;f=i>w?i>z?i:z:w>z?w:z;g=t>x?t>A?t:A:x>A?x:A}else{c=i<w?i<z?i<c?i:c:z<c?z:c:w<z?w<c?w:c:z<c?z:c;d=t<x?t<A?t<d?t:d:A<d?A:d:x<A?x<d?x:d:A<d?A:d;f=i>w?i>z?i>f?i:f:z>f?z:f:w>z?w>f?w:f:z>f?z:f;g=t>x?t>A?t>g?t:g:A>g?A:g:x>A?x>g?x:g:A>g?A:g}a()};this.addRectangle=function(i){if(o){o=!1;c=i.getLeft();d=i.getTop();f=i.getRight();g=i.getBottom()}else{c=c<i.getLeft()?c:i.getLeft();d=d<i.getTop()?d:i.getTop();f=f>i.getRight()?
+f:i.getRight();g=g>i.getBottom()?g:i.getBottom()}a()};this.inflate=function(i){c-=i;d-=i;f+=i;g+=i;a()};this.minSelf=function(i){c=c>i.getLeft()?c:i.getLeft();d=d>i.getTop()?d:i.getTop();f=f<i.getRight()?f:i.getRight();g=g<i.getBottom()?g:i.getBottom();a()};this.instersects=function(i){return Math.min(f,i.getRight())-Math.max(c,i.getLeft())>=0&&Math.min(g,i.getBottom())-Math.max(d,i.getTop())>=0};this.empty=function(){o=!0;g=f=d=c=0;a()};this.isEmpty=function(){return o};this.toString=function(){return"THREE.Rectangle ( left: "+
+c+", right: "+f+", top: "+d+", bottom: "+g+", width: "+j+", height: "+k+" )"}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={transpose:function(){var a,c=this.m;a=c[1];c[1]=c[3];c[3]=a;a=c[2];c[2]=c[6];c[6]=a;a=c[5];c[5]=c[7];c[7]=a;return this},transposeIntoArray:function(a){var c=this.m;a[0]=c[0];a[1]=c[3];a[2]=c[6];a[3]=c[1];a[4]=c[4];a[5]=c[7];a[6]=c[2];a[7]=c[5];a[8]=c[8];return this}};
+THREE.Matrix4=function(a,c,d,f,g,j,k,o,i,t,w,x,z,A,E,H){this.set(a||1,c||0,d||0,f||0,g||0,j||1,k||0,o||0,i||0,t||0,w||1,x||0,z||0,A||0,E||0,H||1);this.flat=Array(16);this.m33=new THREE.Matrix3};
+THREE.Matrix4.prototype={set:function(a,c,d,f,g,j,k,o,i,t,w,x,z,A,E,H){this.n11=a;this.n12=c;this.n13=d;this.n14=f;this.n21=g;this.n22=j;this.n23=k;this.n24=o;this.n31=i;this.n32=t;this.n33=w;this.n34=x;this.n41=z;this.n42=A;this.n43=E;this.n44=H;return this},identity:function(){this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);return this},copy:function(a){this.set(a.n11,a.n12,a.n13,a.n14,a.n21,a.n22,a.n23,a.n24,a.n31,a.n32,a.n33,a.n34,a.n41,a.n42,a.n43,a.n44);return this},lookAt:function(a,c,d){var f=THREE.Matrix4.__tmpVec1,
+g=THREE.Matrix4.__tmpVec2,j=THREE.Matrix4.__tmpVec3;j.sub(a,c).normalize();f.cross(d,j).normalize();g.cross(j,f).normalize();this.n11=f.x;this.n12=f.y;this.n13=f.z;this.n14=-f.dot(a);this.n21=g.x;this.n22=g.y;this.n23=g.z;this.n24=-g.dot(a);this.n31=j.x;this.n32=j.y;this.n33=j.z;this.n34=-j.dot(a);this.n43=this.n42=this.n41=0;this.n44=1;return this},multiplyVector3:function(a){var c=a.x,d=a.y,f=a.z,g=1/(this.n41*c+this.n42*d+this.n43*f+this.n44);a.x=(this.n11*c+this.n12*d+this.n13*f+this.n14)*g;a.y=
+(this.n21*c+this.n22*d+this.n23*f+this.n24)*g;a.z=(this.n31*c+this.n32*d+this.n33*f+this.n34)*g;return a},multiplyVector3OnlyZ:function(a){var c=a.x,d=a.y;a=a.z;return(this.n31*c+this.n32*d+this.n33*a+this.n34)*(1/(this.n41*c+this.n42*d+this.n43*a+this.n44))},multiplyVector4:function(a){var c=a.x,d=a.y,f=a.z,g=a.w;a.x=this.n11*c+this.n12*d+this.n13*f+this.n14*g;a.y=this.n21*c+this.n22*d+this.n23*f+this.n24*g;a.z=this.n31*c+this.n32*d+this.n33*f+this.n34*g;a.w=this.n41*c+this.n42*d+this.n43*f+this.n44*
+g;return a},crossVector:function(a){var c=new THREE.Vector4;c.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;c.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;c.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;c.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return c},multiply:function(a,c){var d=a.n11,f=a.n12,g=a.n13,j=a.n14,k=a.n21,o=a.n22,i=a.n23,t=a.n24,w=a.n31,x=a.n32,z=a.n33,A=a.n34,E=a.n41,H=a.n42,K=a.n43,J=a.n44,R=c.n11,L=c.n12,P=c.n13,b=c.n14,aa=c.n21,ba=c.n22,
+ca=c.n23,ga=c.n24,da=c.n31,ja=c.n32,na=c.n33,$=c.n34;this.n11=d*R+f*aa+g*da;this.n12=d*L+f*ba+g*ja;this.n13=d*P+f*ca+g*na;this.n14=d*b+f*ga+g*$+j;this.n21=k*R+o*aa+i*da;this.n22=k*L+o*ba+i*ja;this.n23=k*P+o*ca+i*na;this.n24=k*b+o*ga+i*$+t;this.n31=w*R+x*aa+z*da;this.n32=w*L+x*ba+z*ja;this.n33=w*P+x*ca+z*na;this.n34=w*b+x*ga+z*$+A;this.n41=E*R+H*aa+K*da;this.n42=E*L+H*ba+K*ja;this.n43=E*P+H*ca+K*na;this.n44=E*b+H*ga+K*$+J;return this},multiplyToArray:function(a,c,d){var f=a.n11,g=a.n12,j=a.n13,k=a.n14,
+o=a.n21,i=a.n22,t=a.n23,w=a.n24,x=a.n31,z=a.n32,A=a.n33,E=a.n34,H=a.n41,K=a.n42,J=a.n43;a=a.n44;var R=c.n11,L=c.n12,P=c.n13,b=c.n14,aa=c.n21,ba=c.n22,ca=c.n23,ga=c.n24,da=c.n31,ja=c.n32,na=c.n33,$=c.n34,qa=c.n41,va=c.n42,wa=c.n43;c=c.n44;this.n11=f*R+g*aa+j*da+k*qa;this.n12=f*L+g*ba+j*ja+k*va;this.n13=f*P+g*ca+j*na+k*wa;this.n14=f*b+g*ga+j*$+k*c;this.n21=o*R+i*aa+t*da+w*qa;this.n22=o*L+i*ba+t*ja+w*va;this.n23=o*P+i*ca+t*na+w*wa;this.n24=o*b+i*ga+t*$+w*c;this.n31=x*R+z*aa+A*da+E*qa;this.n32=x*L+z*
+ba+A*ja+E*va;this.n33=x*P+z*ca+A*na+E*wa;this.n34=x*b+z*ga+A*$+E*c;this.n41=H*R+K*aa+J*da+a*qa;this.n42=H*L+K*ba+J*ja+a*va;this.n43=H*P+K*ca+J*na+a*wa;this.n44=H*b+K*ga+J*$+a*c;d[0]=this.n11;d[1]=this.n21;d[2]=this.n31;d[3]=this.n41;d[4]=this.n12;d[5]=this.n22;d[6]=this.n32;d[7]=this.n42;d[8]=this.n13;d[9]=this.n23;d[10]=this.n33;d[11]=this.n43;d[12]=this.n14;d[13]=this.n24;d[14]=this.n34;d[15]=this.n44;return this},multiplySelf:function(a){var c=this.n11,d=this.n12,f=this.n13,g=this.n14,j=this.n21,
+k=this.n22,o=this.n23,i=this.n24,t=this.n31,w=this.n32,x=this.n33,z=this.n34,A=this.n41,E=this.n42,H=this.n43,K=this.n44,J=a.n11,R=a.n21,L=a.n31,P=a.n12,b=a.n22,aa=a.n32,ba=a.n13,ca=a.n23,ga=a.n33,da=a.n14,ja=a.n24;a=a.n34;this.n11=c*J+d*R+f*L;this.n12=c*P+d*b+f*aa;this.n13=c*ba+d*ca+f*ga;this.n14=c*da+d*ja+f*a+g;this.n21=j*J+k*R+o*L;this.n22=j*P+k*b+o*aa;this.n23=j*ba+k*ca+o*ga;this.n24=j*da+k*ja+o*a+i;this.n31=t*J+w*R+x*L;this.n32=t*P+w*b+x*aa;this.n33=t*ba+w*ca+x*ga;this.n34=t*da+w*ja+x*a+z;this.n41=
+A*J+E*R+H*L;this.n42=A*P+E*b+H*aa;this.n43=A*ba+E*ca+H*ga;this.n44=A*da+E*ja+H*a+K;return this},multiplyScalar:function(a){this.n11*=a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=a;return this},determinant:function(){var a=this.n11,c=this.n12,d=this.n13,f=this.n14,g=this.n21,j=this.n22,k=this.n23,o=this.n24,i=this.n31,t=this.n32,w=this.n33,x=this.n34,z=this.n41,A=this.n42,
+E=this.n43,H=this.n44;return f*k*t*z-d*o*t*z-f*j*w*z+c*o*w*z+d*j*x*z-c*k*x*z-f*k*i*A+d*o*i*A+f*g*w*A-a*o*w*A-d*g*x*A+a*k*x*A+f*j*i*E-c*o*i*E-f*g*t*E+a*o*t*E+c*g*x*E-a*j*x*E-d*j*i*H+c*k*i*H+d*g*t*H-a*k*t*H-c*g*w*H+a*j*w*H},transpose:function(){function a(c,d,f){var g=c[d];c[d]=c[f];c[f]=g}a(this,"n21","n12");a(this,"n31","n13");a(this,"n32","n23");a(this,"n41","n14");a(this,"n42","n24");a(this,"n43","n34");return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;
+a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){this.flattenToArray(this.flat);return this.flat},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=
+this.n34;a[15]=this.n44;return a},flattenToArrayOffset:function(a,c){a[c]=this.n11;a[c+1]=this.n21;a[c+2]=this.n31;a[c+3]=this.n41;a[c+4]=this.n12;a[c+5]=this.n22;a[c+6]=this.n32;a[c+7]=this.n42;a[c+8]=this.n13;a[c+9]=this.n23;a[c+10]=this.n33;a[c+11]=this.n43;a[c+12]=this.n14;a[c+13]=this.n24;a[c+14]=this.n34;a[c+15]=this.n44;return a},setTranslation:function(a,c,d){this.set(1,0,0,a,0,1,0,c,0,0,1,d,0,0,0,1);return this},setScale:function(a,c,d){this.set(a,0,0,0,0,c,0,0,0,0,d,0,0,0,0,1);return this},
+setRotX:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(1,0,0,0,0,c,-a,0,0,a,c,0,0,0,0,1);return this},setRotY:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(c,0,a,0,0,1,0,0,-a,0,c,0,0,0,0,1);return this},setRotZ:function(a){var c=Math.cos(a);a=Math.sin(a);this.set(c,-a,0,0,a,c,0,0,0,0,1,0,0,0,0,1);return this},setRotAxis:function(a,c){var d=Math.cos(c),f=Math.sin(c),g=1-d,j=a.x,k=a.y,o=a.z,i=g*j,t=g*k;this.set(i*j+d,i*k-f*o,i*o+f*k,0,i*k+f*o,t*k+d,t*o-f*j,0,i*o-f*k,t*o+f*j,g*o*o+d,0,0,
+0,0,1);return this},setPosition:function(a){this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},setRotationFromEuler:function(a){var c=a.x,d=a.y,f=a.z;a=Math.cos(c);c=Math.sin(c);var g=Math.cos(d);d=Math.sin(d);var j=Math.cos(f);f=Math.sin(f);var k=a*d,o=c*d;this.n11=g*j;this.n12=-g*f;this.n13=d;this.n21=o*j+a*f;this.n22=-o*f+a*j;this.n23=-c*g;this.n31=-k*j+c*f;this.n32=k*f+c*j;this.n33=a*g},setRotationFromQuaternion:function(a){var c=a.x,d=a.y,f=a.z,g=a.w,j=c+c,k=d+d,o=f+f;a=c*j;var i=c*k;c*=o;var t=
+d*k;d*=o;f*=o;j*=g;k*=g;g*=o;this.n11=1-(t+f);this.n12=i-g;this.n13=c+k;this.n21=i+g;this.n22=1-(a+f);this.n23=d-j;this.n31=c-k;this.n32=d+j;this.n33=1-(a+t)},scale:function(a){var c=a.x,d=a.y;a=a.z;this.n11*=c;this.n12*=d;this.n13*=a;this.n21*=c;this.n22*=d;this.n23*=a;this.n31*=c;this.n32*=d;this.n33*=a;this.n41*=c;this.n42*=d;this.n43*=a;return this},toString:function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+
+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};THREE.Matrix4.translationMatrix=function(a,c,d){var f=new THREE.Matrix4;f.setTranslation(a,c,d);return f};THREE.Matrix4.scaleMatrix=function(a,c,d){var f=new THREE.Matrix4;f.setScale(a,c,d);return f};THREE.Matrix4.rotationXMatrix=function(a){var c=new THREE.Matrix4;c.setRotX(a);return c};THREE.Matrix4.rotationYMatrix=function(a){var c=new THREE.Matrix4;c.setRotY(a);return c};
+THREE.Matrix4.rotationZMatrix=function(a){var c=new THREE.Matrix4;c.setRotZ(a);return c};THREE.Matrix4.rotationAxisAngleMatrix=function(a,c){var d=new THREE.Matrix4;d.setRotAxis(a,c);return d};
+THREE.Matrix4.makeInvert=function(a,c){var d=a.n11,f=a.n12,g=a.n13,j=a.n14,k=a.n21,o=a.n22,i=a.n23,t=a.n24,w=a.n31,x=a.n32,z=a.n33,A=a.n34,E=a.n41,H=a.n42,K=a.n43,J=a.n44;c===undefined&&(c=new THREE.Matrix4);c.n11=i*A*H-t*z*H+t*x*K-o*A*K-i*x*J+o*z*J;c.n12=j*z*H-g*A*H-j*x*K+f*A*K+g*x*J-f*z*J;c.n13=g*t*H-j*i*H+j*o*K-f*t*K-g*o*J+f*i*J;c.n14=j*i*x-g*t*x-j*o*z+f*t*z+g*o*A-f*i*A;c.n21=t*z*E-i*A*E-t*w*K+k*A*K+i*w*J-k*z*J;c.n22=g*A*E-j*z*E+j*w*K-d*A*K-g*w*J+d*z*J;c.n23=j*i*E-g*t*E-j*k*K+d*t*K+g*k*J-d*i*J;
+c.n24=g*t*w-j*i*w+j*k*z-d*t*z-g*k*A+d*i*A;c.n31=o*A*E-t*x*E+t*w*H-k*A*H-o*w*J+k*x*J;c.n32=j*x*E-f*A*E-j*w*H+d*A*H+f*w*J-d*x*J;c.n33=g*t*E-j*o*E+j*k*H-d*t*H-f*k*J+d*o*J;c.n34=j*o*w-f*t*w-j*k*x+d*t*x+f*k*A-d*o*A;c.n41=i*x*E-o*z*E-i*w*H+k*z*H+o*w*K-k*x*K;c.n42=f*z*E-g*x*E+g*w*H-d*z*H-f*w*K+d*x*K;c.n43=g*o*E-f*i*E-g*k*H+d*i*H+f*k*K-d*o*K;c.n44=f*i*w-g*o*w+g*k*x-d*i*x-f*k*z+d*o*z;c.multiplyScalar(1/a.determinant());return c};
+THREE.Matrix4.makeInvert3x3=function(a){var c=a.m33,d=c.m,f=a.n33*a.n22-a.n32*a.n23,g=-a.n33*a.n21+a.n31*a.n23,j=a.n32*a.n21-a.n31*a.n22,k=-a.n33*a.n12+a.n32*a.n13,o=a.n33*a.n11-a.n31*a.n13,i=-a.n32*a.n11+a.n31*a.n12,t=a.n23*a.n12-a.n22*a.n13,w=-a.n23*a.n11+a.n21*a.n13,x=a.n22*a.n11-a.n21*a.n12;a=a.n11*f+a.n21*k+a.n31*t;if(a==0)throw"matrix not invertible";a=1/a;d[0]=a*f;d[1]=a*g;d[2]=a*j;d[3]=a*k;d[4]=a*o;d[5]=a*i;d[6]=a*t;d[7]=a*w;d[8]=a*x;return c};
+THREE.Matrix4.makeFrustum=function(a,c,d,f,g,j){var k;k=new THREE.Matrix4;k.n11=2*g/(c-a);k.n12=0;k.n13=(c+a)/(c-a);k.n14=0;k.n21=0;k.n22=2*g/(f-d);k.n23=(f+d)/(f-d);k.n24=0;k.n31=0;k.n32=0;k.n33=-(j+g)/(j-g);k.n34=-2*j*g/(j-g);k.n41=0;k.n42=0;k.n43=-1;k.n44=0;return k};THREE.Matrix4.makePerspective=function(a,c,d,f){var g;a=d*Math.tan(a*Math.PI/360);g=-a;return THREE.Matrix4.makeFrustum(g*c,a*c,g,a,d,f)};
+THREE.Matrix4.makeOrtho=function(a,c,d,f,g,j){var k,o,i,t;k=new THREE.Matrix4;o=c-a;i=d-f;t=j-g;k.n11=2/o;k.n12=0;k.n13=0;k.n14=-((c+a)/o);k.n21=0;k.n22=2/i;k.n23=0;k.n24=-((d+f)/i);k.n31=0;k.n32=0;k.n33=-2/t;k.n34=-((j+g)/t);k.n41=0;k.n42=0;k.n43=0;k.n44=1;return k};THREE.Matrix4.__tmpVec1=new THREE.Vector3;THREE.Matrix4.__tmpVec2=new THREE.Vector3;THREE.Matrix4.__tmpVec3=new THREE.Vector3;
+THREE.Object3D=function(){this.id=THREE.Object3DCounter.value++;this.parent=undefined;this.children=[];this.position=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.rotation=new THREE.Vector3;this.scale=new THREE.Vector3(1,1,1);this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotation=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixNeedsUpdate=!0;this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=
+0;this.boundRadiusScale=1;this.visible=!0};
+THREE.Object3D.prototype={addChild:function(a){if(this.children.indexOf(a)===-1){a.parent!==undefined&&a.parent.removeChild(a);a.parent=this;this.children.push(a)}},removeChild:function(a){var c=this.children.indexOf(a);if(c!==-1){a.parent=undefined;this.children.splice(c,1)}},updateMatrix:function(){this.matrix.setPosition(this.position);this.useQuaternion?this.matrixRotation.setRotationFromQuaternion(this.quaternion):this.matrixRotation.setRotationFromEuler(this.rotation);this.matrix.n11=this.matrixRotation.n11;
+this.matrix.n12=this.matrixRotation.n12;this.matrix.n13=this.matrixRotation.n13;this.matrix.n21=this.matrixRotation.n21;this.matrix.n22=this.matrixRotation.n22;this.matrix.n23=this.matrixRotation.n23;this.matrix.n31=this.matrixRotation.n31;this.matrix.n32=this.matrixRotation.n32;this.matrix.n33=this.matrixRotation.n33;if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1){this.matrix.scale(this.scale);this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z))}return!0},update:function(a,
+c,d){if(this.visible){this.matrixAutoUpdate&&(c|=this.updateMatrix());if(c||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;c=!0}a=0;for(var f=this.children.length;a<f;a++)this.children[a].update(this.matrixWorld,c,d)}}};THREE.Object3DCounter={value:0};
+THREE.Vertex=function(a,c){this.position=a||new THREE.Vector3;this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.normal=c||new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.normalScreen=new THREE.Vector3;this.tangent=new THREE.Vector4;this.__visible=!0};THREE.Vertex.prototype={toString:function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};
+THREE.Face3=function(a,c,d,f,g){this.a=a;this.b=c;this.c=d;this.centroid=new THREE.Vector3;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.materials=g instanceof Array?g:[g]};THREE.Face3.prototype={toString:function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};
+THREE.Face4=function(a,c,d,f,g,j){this.a=a;this.b=c;this.c=d;this.d=f;this.centroid=new THREE.Vector3;this.normal=g instanceof THREE.Vector3?g:new THREE.Vector3;this.vertexNormals=g instanceof Array?g:[];this.materials=j instanceof Array?j:[j]};THREE.Face4.prototype={toString:function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.UV=function(a,c){this.set(a||0,c||0)};
+THREE.UV.prototype={set:function(a,c){this.u=a;this.v=c;return this},copy:function(a){this.set(a.u,a.v);return this},toString:function(){return"THREE.UV ("+this.u+", "+this.v+")"}};THREE.Geometry=function(){this.id="Geometry"+THREE.GeometryIdCounter++;this.vertices=[];this.faces=[];this.uvs=[];this.uvs2=[];this.colors=[];this.skinWeights=[];this.skinIndices=[];this.boundingSphere=this.boundingBox=null;this.geometryChunks={};this.hasTangents=!1};
+THREE.Geometry.prototype={computeCentroids:function(){var a,c,d;a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];d.centroid.set(0,0,0);if(d instanceof THREE.Face3){d.centroid.addSelf(this.vertices[d.a].position);d.centroid.addSelf(this.vertices[d.b].position);d.centroid.addSelf(this.vertices[d.c].position);d.centroid.divideScalar(3)}else if(d instanceof THREE.Face4){d.centroid.addSelf(this.vertices[d.a].position);d.centroid.addSelf(this.vertices[d.b].position);d.centroid.addSelf(this.vertices[d.c].position);
+d.centroid.addSelf(this.vertices[d.d].position);d.centroid.divideScalar(4)}}},computeFaceNormals:function(a){var c,d,f,g,j,k,o=new THREE.Vector3,i=new THREE.Vector3;f=0;for(g=this.vertices.length;f<g;f++){j=this.vertices[f];j.normal.set(0,0,0)}f=0;for(g=this.faces.length;f<g;f++){j=this.faces[f];if(a&&j.vertexNormals.length){o.set(0,0,0);c=0;for(d=j.normal.length;c<d;c++)o.addSelf(j.vertexNormals[c]);o.divideScalar(3)}else{c=this.vertices[j.a];d=this.vertices[j.b];k=this.vertices[j.c];o.sub(k.position,
+d.position);i.sub(c.position,d.position);o.crossSelf(i)}o.isZero()||o.normalize();j.normal.copy(o)}},computeVertexNormals:function(){var a,c,d,f;if(this.__tmpVertices==undefined){f=this.__tmpVertices=Array(this.vertices.length);a=0;for(c=this.vertices.length;a<c;a++)f[a]=new THREE.Vector3;a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];if(d instanceof THREE.Face3)d.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];else if(d instanceof THREE.Face4)d.vertexNormals=[new THREE.Vector3,
+new THREE.Vector3,new THREE.Vector3,new THREE.Vector3]}}else{f=this.__tmpVertices;a=0;for(c=this.vertices.length;a<c;a++)f[a].set(0,0,0)}a=0;for(c=this.faces.length;a<c;a++){d=this.faces[a];if(d instanceof THREE.Face3){f[d.a].addSelf(d.normal);f[d.b].addSelf(d.normal);f[d.c].addSelf(d.normal)}else if(d instanceof THREE.Face4){f[d.a].addSelf(d.normal);f[d.b].addSelf(d.normal);f[d.c].addSelf(d.normal);f[d.d].addSelf(d.normal)}}a=0;for(c=this.vertices.length;a<c;a++)f[a].normalize();a=0;for(c=this.faces.length;a<
+c;a++){d=this.faces[a];if(d instanceof THREE.Face3){d.vertexNormals[0].copy(f[d.a]);d.vertexNormals[1].copy(f[d.b]);d.vertexNormals[2].copy(f[d.c])}else if(d instanceof THREE.Face4){d.vertexNormals[0].copy(f[d.a]);d.vertexNormals[1].copy(f[d.b]);d.vertexNormals[2].copy(f[d.c]);d.vertexNormals[3].copy(f[d.d])}}},computeTangents:function(){function a($,qa,va,wa,Ha,Aa,Ia){j=$.vertices[qa].position;k=$.vertices[va].position;o=$.vertices[wa].position;i=g[Ha];t=g[Aa];w=g[Ia];x=k.x-j.x;z=o.x-j.x;A=k.y-j.y;
+E=o.y-j.y;H=k.z-j.z;K=o.z-j.z;J=t.u-i.u;R=w.u-i.u;L=t.v-i.v;P=w.v-i.v;b=1/(J*P-R*L);ca.set((P*x-L*z)*b,(P*A-L*E)*b,(P*H-L*K)*b);ga.set((J*z-R*x)*b,(J*E-R*A)*b,(J*K-R*H)*b);aa[qa].addSelf(ca);aa[va].addSelf(ca);aa[wa].addSelf(ca);ba[qa].addSelf(ga);ba[va].addSelf(ga);ba[wa].addSelf(ga)}var c,d,f,g,j,k,o,i,t,w,x,z,A,E,H,K,J,R,L,P,b,aa=[],ba=[],ca=new THREE.Vector3,ga=new THREE.Vector3,da=new THREE.Vector3,ja=new THREE.Vector3,na=new THREE.Vector3;c=0;for(d=this.vertices.length;c<d;c++){aa[c]=new THREE.Vector3;
+ba[c]=new THREE.Vector3}c=0;for(d=this.faces.length;c<d;c++){f=this.faces[c];g=this.uvs[c];if(f instanceof THREE.Face3){a(this,f.a,f.b,f.c,0,1,2);this.vertices[f.a].normal.copy(f.vertexNormals[0]);this.vertices[f.b].normal.copy(f.vertexNormals[1]);this.vertices[f.c].normal.copy(f.vertexNormals[2])}else if(f instanceof THREE.Face4){a(this,f.a,f.b,f.c,0,1,2);a(this,f.a,f.b,f.d,0,1,3);this.vertices[f.a].normal.copy(f.vertexNormals[0]);this.vertices[f.b].normal.copy(f.vertexNormals[1]);this.vertices[f.c].normal.copy(f.vertexNormals[2]);
+this.vertices[f.d].normal.copy(f.vertexNormals[3])}}c=0;for(d=this.vertices.length;c<d;c++){na.copy(this.vertices[c].normal);f=aa[c];da.copy(f);da.subSelf(na.multiplyScalar(na.dot(f))).normalize();ja.cross(this.vertices[c].normal,f);f=ja.dot(ba[c]);f=f<0?-1:1;this.vertices[c].tangent.set(da.x,da.y,da.z,f)}this.hasTangents=!0},computeBoundingBox:function(){var a;if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this.vertices[0].position.x],y:[this.vertices[0].position.y,this.vertices[0].position.y],
+z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var c=1,d=this.vertices.length;c<d;c++){a=this.vertices[c];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>
+this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=this.boundingSphere===null?0:this.boundingSphere.radius,c=0,d=this.vertices.length;c<d;c++)a=Math.max(a,this.vertices[c].position.length());this.boundingSphere={radius:a}},sortFacesByMaterial:function(){function a(w){var x=[];c=0;for(d=w.length;c<d;c++)w[c]==undefined?x.push("undefined"):x.push(w[c].id);return x.join("_")}var c,d,f,g,j,k,o,i,t={};f=0;for(g=this.faces.length;f<g;f++){j=this.faces[f];
+k=j.materials;o=a(k);t[o]==undefined&&(t[o]={hash:o,counter:0});i=t[o].hash+"_"+t[o].counter;this.geometryChunks[i]==undefined&&(this.geometryChunks[i]={faces:[],materials:k,vertices:0});j=j instanceof THREE.Face3?3:4;if(this.geometryChunks[i].vertices+j>65535){t[o].counter+=1;i=t[o].hash+"_"+t[o].counter;this.geometryChunks[i]==undefined&&(this.geometryChunks[i]={faces:[],materials:k,vertices:0})}this.geometryChunks[i].faces.push(f);this.geometryChunks[i].vertices+=j}},toString:function(){return"THREE.Geometry ( vertices: "+
+this.vertices+", faces: "+this.faces+", uvs: "+this.uvs+" )"}};THREE.GeometryIdCounter=0;
+THREE.Camera=function(a,c,d,f,g){THREE.Object3D.call(this);this.fov=a||50;this.aspect=c||1;this.near=d||0.1;this.far=f||2E3;this.screenCenterY=this.screenCenterX=0;this.target=g||new THREE.Object3D;this.useTarget=!0;this.up=new THREE.Vector3(0,1,0);this.inverseMatrix=new THREE.Matrix4;this.projectionMatrix=null;this.tmpVec=new THREE.Vector3;this.translateX=function(j,k){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);this.tmpVec.crossSelf(this.up);if(k)this.tmpVec.y=
+0;this.position.addSelf(this.tmpVec);this.target.position.addSelf(this.tmpVec)};this.translateZ=function(j,k){this.tmpVec.sub(this.target.position,this.position).normalize().multiplyScalar(j);if(k)this.tmpVec.y=0;this.position.subSelf(this.tmpVec);this.target.position.subSelf(this.tmpVec)};this.updateProjectionMatrix()};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;THREE.Camera.prototype.supr=THREE.Object3D.prototype;
+THREE.Camera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};
+THREE.Camera.prototype.update=function(a,c,d){if(this.useTarget){this.matrix.lookAt(this.position,this.target.position,this.up);a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);THREE.Matrix4.makeInvert(this.matrixWorld,this.inverseMatrix);c=!0}else{this.matrixAutoUpdate&&(c|=this.updateMatrix());if(c||this.matrixNeedsUpdate){a?this.matrixWorld.multiply(a,this.matrix):this.matrixWorld.copy(this.matrix);this.matrixNeedsUpdate=!1;c=!0;THREE.Matrix4.makeInvert(this.matrixWorld,
+this.inverseMatrix)}}for(a=0;a<this.children.length;a++)this.children[a].update(this.matrixWorld,c,d)};
+THREE.Camera.prototype.frustumContains=function(a){var c=a.matrixWorld.n14,d=a.matrixWorld.n24,f=a.matrixWorld.n34,g=this.inverseMatrix,j=a.boundRadius*a.boundRadiusScale,k=g.n31*c+g.n32*d+g.n33*f+g.n34;if(k-j>-this.near)return!1;if(k+j<-this.far)return!1;k-=j;var o=this.projectionMatrix,i=1/(o.n43*k),t=i*this.screenCenterX,w=(g.n11*c+g.n12*d+g.n13*f+g.n14)*o.n11*t;j=o.n11*j*t;if(w+j<-this.screenCenterX)return!1;if(w-j>this.screenCenterX)return!1;c=(g.n21*c+g.n22*d+g.n23*f+g.n24)*o.n22*i*this.screenCenterY;
+if(c+j<-this.screenCenterY)return!1;if(c-j>this.screenCenterY)return!1;a.positionScreen.set(w,c,k,j);return!0};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=new THREE.Object3D;THREE.Light.prototype.constructor=THREE.Light;THREE.Light.prototype.supr=THREE.Object3D.prototype;THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;
+THREE.DirectionalLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=c||1};THREE.DirectionalLight.prototype=new THREE.Light;THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,c){THREE.Light.call(this,a);this.position=new THREE.Vector3;this.intensity=c||1};THREE.PointLight.prototype=new THREE.Light;THREE.PointLight.prototype.constructor=THREE.PointLight;THREE.FlatShading=0;THREE.SmoothShading=1;
+THREE.NormalBlending=0;THREE.AdditiveBlending=1;THREE.SubtractiveBlending=2;THREE.BillboardBlending=3;THREE.ReverseSubtractiveBlending=4;THREE.MaterialCounter={value:0};THREE.CubeReflectionMapping=function(){};THREE.CubeRefractionMapping=function(){};THREE.LatitudeReflectionMapping=function(){};THREE.LatitudeRefractionMapping=function(){};THREE.SphericalReflectionMapping=function(){};THREE.SphericalRefractionMapping=function(){};THREE.UVMapping=function(){};
+THREE.LineBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.linewidth=1;this.linejoin=this.linecap="round";this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.linewidth!==undefined)this.linewidth=
+a.linewidth;if(a.linecap!==undefined)this.linecap=a.linecap;if(a.linejoin!==undefined)this.linejoin=a.linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};
+THREE.LineBasicMaterial.prototype={toString:function(){return"THREE.LineBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>linewidth: "+this.linewidth+"<br/>linecap: "+this.linecap+"<br/>linejoin: "+this.linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.MeshBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshBasicMaterial.prototype={toString:function(){return"THREE.MeshBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+
+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshLambertMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){a.color!==
+undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.env_map!==undefined)this.env_map=a.env_map;if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==
+undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshLambertMaterial.prototype={toString:function(){return"THREE.MeshLambertMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>light_map: "+this.light_map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+
+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/> )"}};
+THREE.MeshPhongMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.ambient=new THREE.Color(328965);this.specular=new THREE.Color(1118481);this.shininess=30;this.opacity=1;this.env_map=this.light_map=this.map=null;this.combine=THREE.MultiplyOperation;this.reflectivity=1;this.refraction_ratio=0.98;this.fog=!0;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=
+this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){if(a.color!==undefined)this.color=new THREE.Color(a.color);if(a.ambient!==undefined)this.ambient=new THREE.Color(a.ambient);if(a.specular!==undefined)this.specular=new THREE.Color(a.specular);if(a.shininess!==undefined)this.shininess=a.shininess;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.light_map!==undefined)this.light_map=a.light_map;if(a.map!==undefined)this.map=a.map;if(a.env_map!==undefined)this.env_map=a.env_map;
+if(a.combine!==undefined)this.combine=a.combine;if(a.reflectivity!==undefined)this.reflectivity=a.reflectivity;if(a.refraction_ratio!==undefined)this.refraction_ratio=a.refraction_ratio;if(a.fog!==undefined)this.fog=a.fog;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;
+if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshPhongMaterial.prototype={toString:function(){return"THREE.MeshPhongMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>ambient: "+this.ambient+"<br/>specular: "+this.specular+"<br/>shininess: "+this.shininess+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>env_map: "+this.env_map+"<br/>combine: "+this.combine+"<br/>reflectivity: "+this.reflectivity+"<br/>refraction_ratio: "+this.refraction_ratio+"<br/>shading: "+this.shading+"<br/>blending: "+this.blending+"<br/>depth_test: "+
+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.MeshDepthMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshDepthMaterial.prototype={toString:function(){return"THREE.MeshDepthMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};
+THREE.MeshNormalMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.opacity=1;this.shading=THREE.FlatShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;if(a){if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==
+undefined)this.wireframe_linewidth=a.wireframe_linewidth}};THREE.MeshNormalMaterial.prototype={toString:function(){return"THREE.MeshNormalMaterial (<br/>id: "+this.id+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>)"}};THREE.MeshFaceMaterial=function(){};THREE.MeshFaceMaterial.prototype={toString:function(){return"THREE.MeshFaceMaterial"}};
+THREE.MeshShaderMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.vertex_shader=this.fragment_shader="void main() {}";this.uniforms={};this.opacity=1;this.shading=THREE.SmoothShading;this.blending=THREE.NormalBlending;this.depth_test=!0;this.wireframe=!1;this.wireframe_linewidth=1;this.wireframe_linejoin=this.wireframe_linecap="round";this.vertex_colors=!1;this.skinning=!1;if(a){if(a.fragment_shader!==undefined)this.fragment_shader=a.fragment_shader;if(a.vertex_shader!==undefined)this.vertex_shader=
+a.vertex_shader;if(a.uniforms!==undefined)this.uniforms=a.uniforms;if(a.opacity!==undefined)this.opacity=a.opacity;if(a.shading!==undefined)this.shading=a.shading;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==undefined)this.depth_test=a.depth_test;if(a.wireframe!==undefined)this.wireframe=a.wireframe;if(a.wireframe_linewidth!==undefined)this.wireframe_linewidth=a.wireframe_linewidth;if(a.wireframe_linecap!==undefined)this.wireframe_linecap=a.wireframe_linecap;if(a.wireframe_linejoin!==
+undefined)this.wireframe_linejoin=a.wireframe_linejoin;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors;if(a.skinning!==undefined)this.skinning=a.skinning}};
+THREE.MeshShaderMaterial.prototype={toString:function(){return"THREE.MeshShaderMaterial (<br/>id: "+this.id+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>wireframe: "+this.wireframe+"<br/>wireframe_linewidth: "+this.wireframe_linewidth+"<br/>wireframe_linecap: "+this.wireframe_linecap+"<br/>wireframe_linejoin: "+this.wireframe_linejoin+"<br/>vertex_colors: "+this.vertex_colors+"<br/>skinning: "+this.skinning+"<br/>)"}};
+THREE.ParticleBasicMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.map=null;this.size=1;this.blending=THREE.NormalBlending;this.depth_test=!0;this.offset=new THREE.Vector2;this.vertex_colors=!1;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.map!==undefined)this.map=a.map;if(a.size!==undefined)this.size=a.size;if(a.blending!==undefined)this.blending=a.blending;if(a.depth_test!==
+undefined)this.depth_test=a.depth_test;if(a.vertex_colors!==undefined)this.vertex_colors=a.vertex_colors}};THREE.ParticleBasicMaterial.prototype={toString:function(){return"THREE.ParticleBasicMaterial (<br/>id: "+this.id+"<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>map: "+this.map+"<br/>size: "+this.size+"<br/>blending: "+this.blending+"<br/>depth_test: "+this.depth_test+"<br/>vertex_colors: "+this.vertex_colors+"<br/>)"}};
+THREE.ParticleCircleMaterial=function(a){this.id=THREE.MaterialCounter.value++;this.color=new THREE.Color(16777215);this.opacity=1;this.blending=THREE.NormalBlending;if(a){a.color!==undefined&&this.color.setHex(a.color);if(a.opacity!==undefined)this.opacity=a.opacity;if(a.blending!==undefined)this.blending=a.blending}};
+THREE.ParticleCircleMaterial.prototype={toString:function(){return"THREE.ParticleCircleMaterial (<br/>color: "+this.color+"<br/>opacity: "+this.opacity+"<br/>blending: "+this.blending+"<br/>)"}};
+THREE.Texture=function(a,c,d,f,g,j){this.image=a;this.mapping=c!==undefined?c:new THREE.UVMapping;this.wrap_s=d!==undefined?d:THREE.ClampToEdgeWrapping;this.wrap_t=f!==undefined?f:THREE.ClampToEdgeWrapping;this.mag_filter=g!==undefined?g:THREE.LinearFilter;this.min_filter=j!==undefined?j:THREE.LinearMipMapLinearFilter;this.needsUpdate=!1};
+THREE.Texture.prototype={clone:function(){return new THREE.Texture(this.image,this.mapping,this.wrap_s,this.wrap_t,this.mag_filter,this.min_filter)},toString:function(){return"THREE.Texture (<br/>image: "+this.image+"<br/>wrap_s: "+this.wrap_s+"<br/>wrap_t: "+this.wrap_t+"<br/>mag_filter: "+this.mag_filter+"<br/>min_filter: "+this.min_filter+"<br/>)"}};THREE.MultiplyOperation=0;THREE.MixOperation=1;THREE.RepeatWrapping=0;THREE.ClampToEdgeWrapping=1;THREE.MirroredRepeatWrapping=2;
+THREE.NearestFilter=3;THREE.NearestMipMapNearestFilter=4;THREE.NearestMipMapLinearFilter=5;THREE.LinearFilter=6;THREE.LinearMipMapNearestFilter=7;THREE.LinearMipMapLinearFilter=8;THREE.ByteType=9;THREE.UnsignedByteType=10;THREE.ShortType=11;THREE.UnsignedShortType=12;THREE.IntType=13;THREE.UnsignedIntType=14;THREE.FloatType=15;THREE.AlphaFormat=16;THREE.RGBFormat=17;THREE.RGBAFormat=18;THREE.LuminanceFormat=19;THREE.LuminanceAlphaFormat=20;
+THREE.RenderTarget=function(a,c,d){this.width=a;this.height=c;d=d||{};this.wrap_s=d.wrap_s!==undefined?d.wrap_s:THREE.ClampToEdgeWrapping;this.wrap_t=d.wrap_t!==undefined?d.wrap_t:THREE.ClampToEdgeWrapping;this.mag_filter=d.mag_filter!==undefined?d.mag_filter:THREE.LinearFilter;this.min_filter=d.min_filter!==undefined?d.min_filter:THREE.LinearMipMapLinearFilter;this.format=d.format!==undefined?d.format:THREE.RGBFormat;this.type=d.type!==undefined?d.type:THREE.UnsignedByteType};
+var Uniforms={clone:function(a){var c,d,f,g={};for(c in a){g[c]={};for(d in a[c]){f=a[c][d];g[c][d]=f instanceof THREE.Color||f instanceof THREE.Vector3||f instanceof THREE.Texture?f.clone():f}}return g},merge:function(a){var c,d,f,g={};for(c=0;c<a.length;c++){f=this.clone(a[c]);for(d in f)g[d]=f[d]}return g}};THREE.Particle=function(a){THREE.Object3D.call(this);this.materials=a instanceof Array?a:[a];this.matrixAutoUpdate=!1};THREE.Particle.prototype=new THREE.Object3D;
+THREE.Particle.prototype.constructor=THREE.Particle;THREE.ParticleSystem=function(a,c){THREE.Object3D.call(this);this.geometry=a;this.materials=c instanceof Array?c:[c];this.sortParticles=!1};THREE.ParticleSystem.prototype=new THREE.Object3D;THREE.ParticleSystem.prototype.constructor=THREE.ParticleSystem;THREE.Line=function(a,c,d){THREE.Object3D.call(this);this.geometry=a;this.materials=c instanceof Array?c:[c];this.type=d!=undefined?d:THREE.LineStrip};THREE.LineStrip=0;THREE.LinePieces=1;
+THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;THREE.Mesh=function(a,c){THREE.Object3D.call(this);this.geometry=a;this.materials=c&&c.length?c:[c];this.flipSided=!1;this.doubleSided=!1;this.overdraw=!1;if(this.geometry){this.geometry.boundingSphere||this.geometry.computeBoundingSphere();this.boundRadius=a.boundingSphere.radius}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;
+THREE.Scene=function(){THREE.Object3D.call(this);this.objects=[];this.lights=[];this.sounds=[];this.fog=null;this.matrixAutoUpdate=!1};THREE.Scene.prototype=new THREE.Object3D;THREE.Scene.prototype.constructor=THREE.Scene;THREE.Scene.prototype.supr=THREE.Object3D.prototype;THREE.Scene.prototype.addChild=function(a){this.supr.addChild.call(this,a);this.addChildRecurse(a)};
+THREE.Scene.prototype.addChildRecurse=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(a instanceof THREE.Sound)this.sounds.indexOf(a)===-1&&this.sounds.push(a);else a instanceof THREE.Camera||a instanceof THREE.Bone||this.objects.indexOf(a)===-1&&this.objects.push(a);for(var c=0;c<a.children.length;c++)this.addChildRecurse(a.children[c])};THREE.Scene.prototype.removeChild=function(a){this.supr.removeChild.call(this,a);this.removeChildRecurse(a)};
+THREE.Scene.prototype.removeChildRecurse=function(a){if(a instanceof THREE.Light){var c=this.lights.indexOf(a);c!==-1&&this.lights.splice(c,1)}else if(a instanceof THREE.Sound){c=this.sounds.indexOf(a);c!==-1&&this.sounds.splice(c,1)}else if(!(a instanceof THREE.Camera)){c=this.objects.indexOf(a);c!==-1&&this.objects.splice(c,1)}for(c=0;c<a.children.length;c++)this.removeChildRecurse(a.children[c])};THREE.Scene.prototype.addObject=THREE.Scene.prototype.addChild;
+THREE.Scene.prototype.removeObject=THREE.Scene.prototype.removeChild;THREE.Scene.prototype.addLight=THREE.Scene.prototype.addChild;THREE.Scene.prototype.removeLight=THREE.Scene.prototype.removeChild;THREE.Fog=function(a,c,d){this.color=new THREE.Color(a);this.near=c||1;this.far=d||1E3};THREE.FogExp2=function(a,c){this.color=new THREE.Color(a);this.density=c||2.5E-4};
+THREE.WebGLRenderer=function(a){function c(e,n,m){var h,l,v,r=e.vertices,q=r.length,s=e.colors,G=s.length,F=e.__vertexArray,I=e.__colorArray,S=e.__sortArray,y=e.__dirtyVertices,M=e.__dirtyColors;if(m.sortParticles){qa.multiplySelf(m.matrixWorld);for(h=0;h<q;h++){l=r[h].position;Aa.copy(l);qa.multiplyVector3(Aa);S[h]=[Aa.z,h]}S.sort(function(ea,Z){return Z[0]-ea[0]});for(h=0;h<q;h++){l=r[S[h][1]].position;v=h*3;F[v]=l.x;F[v+1]=l.y;F[v+2]=l.z}for(h=0;h<G;h++){v=h*3;color=s[S[h][1]];I[v]=color.r;I[v+
+1]=color.g;I[v+2]=color.b}}else{if(y)for(h=0;h<q;h++){l=r[h].position;v=h*3;F[v]=l.x;F[v+1]=l.y;F[v+2]=l.z}if(M)for(h=0;h<G;h++){color=s[h];v=h*3;I[v]=color.r;I[v+1]=color.g;I[v+2]=color.b}}if(y||m.sortParticles){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,F,n)}if(M||m.sortParticles){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,I,n)}}function d(e,n){e.fragment_shader=n.fragment_shader;e.vertex_shader=n.vertex_shader;e.uniforms=Uniforms.clone(n.uniforms)}
+function f(e,n,m,h,l){h.program||ca.initMaterial(h,n,m);var v=h.program,r=v.uniforms,q=h.uniforms;if(v!=aa){b.useProgram(v);aa=v;b.uniformMatrix4fv(r.projectionMatrix,!1,va)}if(m&&(h instanceof THREE.MeshBasicMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshPhongMaterial||h instanceof THREE.LineBasicMaterial||h instanceof THREE.ParticleBasicMaterial)){q.fogColor.value.setHex(m.color.hex);if(m instanceof THREE.Fog){q.fogNear.value=m.near;q.fogFar.value=m.far}else if(m instanceof
+THREE.FogExp2)q.fogDensity.value=m.density}if(h instanceof THREE.MeshPhongMaterial||h instanceof THREE.MeshLambertMaterial){var s,G,F=0,I=0,S=0,y,M,ea,Z=ca.lights,Q=Z.directional.colors,O=Z.directional.positions,N=Z.point.colors,ra=Z.point.positions,u=0,ma=0;m=G=G=0;for(s=n.length;m<s;m++){G=n[m];y=G.color;M=G.position;ea=G.intensity;if(G instanceof THREE.AmbientLight){F+=y.r;I+=y.g;S+=y.b}else if(G instanceof THREE.DirectionalLight){G=u*3;Q[G]=y.r*ea;Q[G+1]=y.g*ea;Q[G+2]=y.b*ea;O[G]=M.x;O[G+1]=M.y;
+O[G+2]=M.z;u+=1}else if(G instanceof THREE.PointLight){G=ma*3;N[G]=y.r*ea;N[G+1]=y.g*ea;N[G+2]=y.b*ea;ra[G]=M.x;ra[G+1]=M.y;ra[G+2]=M.z;ma+=1}}for(m=u*3;m<Q.length;m++)Q[m]=0;for(m=ma*3;m<N.length;m++)N[m]=0;Z.point.length=ma;Z.directional.length=u;Z.ambient[0]=F;Z.ambient[1]=I;Z.ambient[2]=S;n=ca.lights;q.enableLighting.value=n.directional.length+n.point.length;q.ambientLightColor.value=n.ambient;q.directionalLightColor.value=n.directional.colors;q.directionalLightDirection.value=n.directional.positions;
+q.pointLightColor.value=n.point.colors;q.pointLightPosition.value=n.point.positions}if(h instanceof THREE.MeshBasicMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshPhongMaterial){q.diffuse.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);q.opacity.value=h.opacity;q.map.texture=h.map;q.light_map.texture=h.light_map;q.env_map.texture=h.env_map;q.reflectivity.value=h.reflectivity;q.refraction_ratio.value=h.refraction_ratio;q.combine.value=h.combine;q.useRefract.value=
+h.env_map&&h.env_map.mapping instanceof THREE.CubeRefractionMapping}if(h instanceof THREE.LineBasicMaterial){q.diffuse.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);q.opacity.value=h.opacity}else if(h instanceof THREE.ParticleBasicMaterial){q.psColor.value.setRGB(h.color.r*h.opacity,h.color.g*h.opacity,h.color.b*h.opacity);q.opacity.value=h.opacity;q.size.value=h.size;q.map.texture=h.map}else if(h instanceof THREE.MeshPhongMaterial){q.ambient.value.setRGB(h.ambient.r,h.ambient.g,
+h.ambient.b);q.specular.value.setRGB(h.specular.r,h.specular.g,h.specular.b);q.shininess.value=h.shininess}else if(h instanceof THREE.MeshDepthMaterial){q.mNear.value=e.near;q.mFar.value=e.far;q.opacity.value=h.opacity}else if(h instanceof THREE.MeshNormalMaterial)q.opacity.value=h.opacity;for(var ka in q)if(F=v.uniforms[ka]){m=q[ka];s=m.type;n=m.value;if(s=="i")b.uniform1i(F,n);else if(s=="f")b.uniform1f(F,n);else if(s=="fv1")b.uniform1fv(F,n);else if(s=="fv")b.uniform3fv(F,n);else if(s=="v2")b.uniform2f(F,
+n.x,n.y);else if(s=="v3")b.uniform3f(F,n.x,n.y,n.z);else if(s=="c")b.uniform3f(F,n.r,n.g,n.b);else if(s=="t"){b.uniform1i(F,n);if(m=m.texture)if(m.image instanceof Array&&m.image.length==6){if(m.image.length==6){if(m.needsUpdate){if(!m.image.__webGLTextureCube)m.image.__webGLTextureCube=b.createTexture();b.bindTexture(b.TEXTURE_CUBE_MAP,m.image.__webGLTextureCube);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE);
+b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_MAG_FILTER,b.LINEAR);b.texParameteri(b.TEXTURE_CUBE_MAP,b.TEXTURE_MIN_FILTER,b.LINEAR_MIPMAP_LINEAR);for(s=0;s<6;++s)b.texImage2D(b.TEXTURE_CUBE_MAP_POSITIVE_X+s,0,b.RGBA,b.RGBA,b.UNSIGNED_BYTE,m.image[s]);b.generateMipmap(b.TEXTURE_CUBE_MAP);b.bindTexture(b.TEXTURE_CUBE_MAP,null);m.needsUpdate=!1}b.activeTexture(b.TEXTURE0+n);b.bindTexture(b.TEXTURE_CUBE_MAP,m.image.__webGLTextureCube)}}else{if(m.needsUpdate){if(m.__wasSetOnce){b.bindTexture(b.TEXTURE_2D,
+m.__webGLTexture);b.texSubImage2D(b.TEXTURE_2D,0,0,0,b.RGBA,b.UNSIGNED_BYTE,m.image);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,L(m.wrap_s));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,L(m.wrap_t));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,L(m.mag_filter));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,L(m.min_filter));b.generateMipmap(b.TEXTURE_2D);b.bindTexture(b.TEXTURE_2D,null)}else{m.__webGLTexture=b.createTexture();b.bindTexture(b.TEXTURE_2D,m.__webGLTexture);b.texImage2D(b.TEXTURE_2D,
+0,b.RGBA,b.RGBA,b.UNSIGNED_BYTE,m.image);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,L(m.wrap_s));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,L(m.wrap_t));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,L(m.mag_filter));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,L(m.min_filter));b.generateMipmap(b.TEXTURE_2D);b.bindTexture(b.TEXTURE_2D,null);m.__wasSetOnce=!0}m.needsUpdate=!1}b.activeTexture(b.TEXTURE0+n);b.bindTexture(b.TEXTURE_2D,m.__webGLTexture)}}}b.uniformMatrix4fv(r.modelViewMatrix,
+!1,l._modelViewMatrixArray);b.uniformMatrix3fv(r.normalMatrix,!1,l._normalMatrixArray);(h instanceof THREE.MeshShaderMaterial||h instanceof THREE.MeshPhongMaterial||h.env_map)&&b.uniform3f(r.cameraPosition,e.position.x,e.position.y,e.position.z);(h instanceof THREE.MeshShaderMaterial||h.env_map||h.skinning)&&b.uniformMatrix4fv(r.objectMatrix,!1,l._objectMatrixArray);(h instanceof THREE.MeshPhongMaterial||h instanceof THREE.MeshLambertMaterial||h instanceof THREE.MeshShaderMaterial||h.skinning)&&b.uniformMatrix4fv(r.viewMatrix,
+!1,Ha);if(h.skinning){b.uniformMatrix4fv(r.cameraInverseMatrix,!1,wa);b.uniformMatrix4fv(r.boneGlobalMatrices,!1,l.boneMatrices)}return v}function g(e,n,m,h,l,v){e=f(e,n,m,h,v).attributes;b.bindBuffer(b.ARRAY_BUFFER,l.__webGLVertexBuffer);b.vertexAttribPointer(e.position,3,b.FLOAT,!1,0,0);if(e.color>=0){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLColorBuffer);b.vertexAttribPointer(e.color,3,b.FLOAT,!1,0,0)}if(e.normal>=0){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLNormalBuffer);b.vertexAttribPointer(e.normal,
+3,b.FLOAT,!1,0,0)}if(e.tangent>=0){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLTangentBuffer);b.vertexAttribPointer(e.tangent,4,b.FLOAT,!1,0,0)}if(e.uv>=0)if(l.__webGLUVBuffer){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLUVBuffer);b.vertexAttribPointer(e.uv,2,b.FLOAT,!1,0,0);b.enableVertexAttribArray(e.uv)}else b.disableVertexAttribArray(e.uv);if(e.uv2>=0)if(l.__webGLUV2Buffer){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLUV2Buffer);b.vertexAttribPointer(e.uv2,2,b.FLOAT,!1,0,0);b.enableVertexAttribArray(e.uv2)}else b.disableVertexAttribArray(e.uv2);
+if(h.skinning&&e.skinVertexA>=0&&e.skinVertexB>=0&&e.skinIndex>=0&&e.skinWeight>=0){b.bindBuffer(b.ARRAY_BUFFER,l.__webGLSkinVertexABuffer);b.vertexAttribPointer(e.skinVertexA,4,b.FLOAT,!1,0,0);b.bindBuffer(b.ARRAY_BUFFER,l.__webGLSkinVertexBBuffer);b.vertexAttribPointer(e.skinVertexB,4,b.FLOAT,!1,0,0);b.bindBuffer(b.ARRAY_BUFFER,l.__webGLSkinIndicesBuffer);b.vertexAttribPointer(e.skinIndex,4,b.FLOAT,!1,0,0);b.bindBuffer(b.ARRAY_BUFFER,l.__webGLSkinWeightsBuffer);b.vertexAttribPointer(e.skinWeight,
+4,b.FLOAT,!1,0,0)}if(v instanceof THREE.Mesh)if(h.wireframe){b.lineWidth(h.wireframe_linewidth);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,l.__webGLLineBuffer);b.drawElements(b.LINES,l.__webGLLineCount,b.UNSIGNED_SHORT,0)}else{b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,l.__webGLFaceBuffer);b.drawElements(b.TRIANGLES,l.__webGLFaceCount,b.UNSIGNED_SHORT,0)}else if(v instanceof THREE.Line){v=v.type==THREE.LineStrip?b.LINE_STRIP:b.LINES;b.lineWidth(h.linewidth);b.drawArrays(v,0,l.__webGLLineCount)}else if(v instanceof
+THREE.ParticleSystem)b.drawArrays(b.POINTS,0,l.__webGLParticleCount);else v instanceof THREE.Ribbon&&b.drawArrays(b.TRIANGLE_STRIP,0,l.__webGLVertexCount)}function j(e,n){if(!e.__webGLVertexBuffer)e.__webGLVertexBuffer=b.createBuffer();if(!e.__webGLNormalBuffer)e.__webGLNormalBuffer=b.createBuffer();if(e.hasPos){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,e.positionArray,b.DYNAMIC_DRAW);b.enableVertexAttribArray(n.attributes.position);b.vertexAttribPointer(n.attributes.position,
+3,b.FLOAT,!1,0,0)}if(e.hasNormal){b.bindBuffer(b.ARRAY_BUFFER,e.__webGLNormalBuffer);b.bufferData(b.ARRAY_BUFFER,e.normalArray,b.DYNAMIC_DRAW);b.enableVertexAttribArray(n.attributes.normal);b.vertexAttribPointer(n.attributes.normal,3,b.FLOAT,!1,0,0)}b.drawArrays(b.TRIANGLES,0,e.count);e.count=0}function k(e){if(ga!=e.doubleSided){e.doubleSided?b.disable(b.CULL_FACE):b.enable(b.CULL_FACE);ga=e.doubleSided}if(da!=e.flipSided){e.flipSided?b.frontFace(b.CW):b.frontFace(b.CCW);da=e.flipSided}}function o(e){if(na!=
+e){e?b.enable(b.DEPTH_TEST):b.disable(b.DEPTH_TEST);na=e}}function i(e){$[0].set(e.n41-e.n11,e.n42-e.n12,e.n43-e.n13,e.n44-e.n14);$[1].set(e.n41+e.n11,e.n42+e.n12,e.n43+e.n13,e.n44+e.n14);$[2].set(e.n41+e.n21,e.n42+e.n22,e.n43+e.n23,e.n44+e.n24);$[3].set(e.n41-e.n21,e.n42-e.n22,e.n43-e.n23,e.n44-e.n24);$[4].set(e.n41-e.n31,e.n42-e.n32,e.n43-e.n33,e.n44-e.n34);$[5].set(e.n41+e.n31,e.n42+e.n32,e.n43+e.n33,e.n44+e.n34);var n;for(e=0;e<6;e++){n=$[e];n.divideScalar(Math.sqrt(n.x*n.x+n.y*n.y+n.z*n.z))}}
+function t(e){for(var n=e.matrixWorld,m=-e.geometry.boundingSphere.radius*Math.max(e.scale.x,Math.max(e.scale.y,e.scale.z)),h=0;h<6;h++){e=$[h].x*n.n14+$[h].y*n.n24+$[h].z*n.n34+$[h].w;if(e<=m)return!1}return!0}function w(e,n){e.list[e.count]=n;e.count+=1}function x(e){var n,m,h=e.object,l=e.opaque,v=e.transparent;v.count=0;e=l.count=0;for(n=h.materials.length;e<n;e++){m=h.materials[e];m.opacity&&m.opacity<1||m.blending!=THREE.NormalBlending?w(v,m):w(l,m)}}function z(e){var n,m,h,l,v=e.object,r=e.buffer,
+q=e.opaque,s=e.transparent;s.count=0;e=q.count=0;for(h=v.materials.length;e<h;e++){n=v.materials[e];if(n instanceof THREE.MeshFaceMaterial){n=0;for(m=r.materials.length;n<m;n++)(l=r.materials[n])&&(l.opacity&&l.opacity<1||l.blending!=THREE.NormalBlending?w(s,l):w(q,l))}else{l=n;l.opacity&&l.opacity<1||l.blending!=THREE.NormalBlending?w(s,l):w(q,l)}}}function A(e,n){return n.z-e.z}function E(e,n,m,h,l){if(n[m]==undefined){e.push({buffer:h,object:l,opaque:{list:[],count:0},transparent:{list:[],count:0}});
+n[m]=1}}function H(e,n){e._modelViewMatrix.multiplyToArray(n.matrixWorld,e.matrixWorld,e._modelViewMatrixArray);THREE.Matrix4.makeInvert3x3(e._modelViewMatrix).transposeIntoArray(e._normalMatrixArray)}function K(e){if(e!=ja){switch(e){case THREE.AdditiveBlending:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.ONE,b.ONE);break;case THREE.SubtractiveBlending:b.blendFunc(b.DST_COLOR,b.ZERO);break;case THREE.BillboardBlending:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.SRC_ALPHA,b.ONE_MINUS_SRC_ALPHA);break;
+case THREE.ReverseSubtractiveBlending:b.blendEquation(b.FUNC_REVERSE_SUBTRACT);b.blendFunc(b.ONE,b.ONE);break;default:b.blendEquation(b.FUNC_ADD);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA)}ja=e}}function J(e,n){if(e&&!e.__webGLFramebuffer){e.__webGLFramebuffer=b.createFramebuffer();e.__webGLRenderbuffer=b.createRenderbuffer();e.__webGLTexture=b.createTexture();b.bindRenderbuffer(b.RENDERBUFFER,e.__webGLRenderbuffer);b.renderbufferStorage(b.RENDERBUFFER,b.DEPTH_COMPONENT16,e.width,e.height);b.bindTexture(b.TEXTURE_2D,
+e.__webGLTexture);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,L(e.wrap_s));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,L(e.wrap_t));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,L(e.mag_filter));b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,L(e.min_filter));b.texImage2D(b.TEXTURE_2D,0,L(e.format),e.width,e.height,0,L(e.format),L(e.type),null);b.bindFramebuffer(b.FRAMEBUFFER,e.__webGLFramebuffer);b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,e.__webGLTexture,0);
+b.framebufferRenderbuffer(b.FRAMEBUFFER,b.DEPTH_ATTACHMENT,b.RENDERBUFFER,e.__webGLRenderbuffer);b.bindTexture(b.TEXTURE_2D,null);b.bindRenderbuffer(b.RENDERBUFFER,null);b.bindFramebuffer(b.FRAMEBUFFER,null)}var m,h,l;if(e){m=e.__webGLFramebuffer;h=e.width;l=e.height}else{m=null;h=P.width;l=P.height}if(m!=ba){b.bindFramebuffer(b.FRAMEBUFFER,m);b.viewport(0,0,h,l);n&&b.clear(b.COLOR_BUFFER_BIT|b.DEPTH_BUFFER_BIT);ba=m}}function R(e,n){var m;if(e=="fragment")m=b.createShader(b.FRAGMENT_SHADER);else e==
+"vertex"&&(m=b.createShader(b.VERTEX_SHADER));b.shaderSource(m,n);b.compileShader(m);if(!b.getShaderParameter(m,b.COMPILE_STATUS)){alert(b.getShaderInfoLog(m));return null}return m}function L(e){switch(e){case THREE.RepeatWrapping:return b.REPEAT;case THREE.ClampToEdgeWrapping:return b.CLAMP_TO_EDGE;case THREE.MirroredRepeatWrapping:return b.MIRRORED_REPEAT;case THREE.NearestFilter:return b.NEAREST;case THREE.NearestMipMapNearestFilter:return b.NEAREST_MIPMAP_NEAREST;case THREE.NearestMipMapLinearFilter:return b.NEAREST_MIPMAP_LINEAR;
+case THREE.LinearFilter:return b.LINEAR;case THREE.LinearMipMapNearestFilter:return b.LINEAR_MIPMAP_NEAREST;case THREE.LinearMipMapLinearFilter:return b.LINEAR_MIPMAP_LINEAR;case THREE.ByteType:return b.BYTE;case THREE.UnsignedByteType:return b.UNSIGNED_BYTE;case THREE.ShortType:return b.SHORT;case THREE.UnsignedShortType:return b.UNSIGNED_SHORT;case THREE.IntType:return b.INT;case THREE.UnsignedShortType:return b.UNSIGNED_INT;case THREE.FloatType:return b.FLOAT;case THREE.AlphaFormat:return b.ALPHA;
+case THREE.RGBFormat:return b.RGB;case THREE.RGBAFormat:return b.RGBA;case THREE.LuminanceFormat:return b.LUMINANCE;case THREE.LuminanceAlphaFormat:return b.LUMINANCE_ALPHA}return 0}var P=document.createElement("canvas"),b,aa=null,ba=null,ca=this,ga=null,da=null,ja=null,na=null,$=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],qa=new THREE.Matrix4,va=new Float32Array(16),wa=new Float32Array(16),Ha=new Float32Array(16),Aa=new THREE.Vector4,
+Ia=!0,Oa=new THREE.Color(0),Pa=0;if(a){if(a.antialias!==undefined)Ia=a.antialias;a.clearColor!==undefined&&Oa.setHex(a.clearColor);if(a.clearAlpha!==undefined)Pa=a.clearAlpha}this.domElement=P;this.autoClear=!0;this.sortObjects=!1;(function(e,n,m){try{b=P.getContext("experimental-webgl",{antialias:e})}catch(h){console.log(h)}if(!b)throw"cannot create webgl context";b.clearColor(0,0,0,1);b.clearDepth(1);b.enable(b.DEPTH_TEST);b.depthFunc(b.LEQUAL);b.frontFace(b.CCW);b.cullFace(b.BACK);b.enable(b.CULL_FACE);
+b.enable(b.BLEND);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA);b.clearColor(n.r,n.g,n.b,m);_cullEnabled=!0})(Ia,Oa,Pa);this.context=b;this.lights={ambient:[0,0,0],directional:{length:0,colors:[],positions:[]},point:{length:0,colors:[],positions:[]}};this.setSize=function(e,n){P.width=e;P.height=n;b.viewport(0,0,P.width,P.height)};this.setClearColorHex=function(e,n){var m=new THREE.Color(e);b.clearColor(m.r,m.g,m.b,n)};this.setClearColor=function(e,n){b.clearColor(e.r,e.g,e.b,n)};this.clear=function(){b.clear(b.COLOR_BUFFER_BIT|
+b.DEPTH_BUFFER_BIT)};this.initMaterial=function(e,n,m){var h,l;if(e instanceof THREE.MeshDepthMaterial)d(e,THREE.ShaderLib.depth);else if(e instanceof THREE.MeshNormalMaterial)d(e,THREE.ShaderLib.normal);else if(e instanceof THREE.MeshBasicMaterial)d(e,THREE.ShaderLib.basic);else if(e instanceof THREE.MeshLambertMaterial)d(e,THREE.ShaderLib.lambert);else if(e instanceof THREE.MeshPhongMaterial)d(e,THREE.ShaderLib.phong);else if(e instanceof THREE.LineBasicMaterial)d(e,THREE.ShaderLib.basic);else e instanceof
+THREE.ParticleBasicMaterial&&d(e,THREE.ShaderLib.particle_basic);var v,r,q,s;l=q=s=0;for(v=n.length;l<v;l++){r=n[l];r instanceof THREE.DirectionalLight&&q++;r instanceof THREE.PointLight&&s++}if(s+q<=4)n=q;else{n=Math.ceil(4*q/(s+q));s=4-n}l={directional:n,point:s};s=e.fragment_shader;n=e.vertex_shader;v={fog:m,map:e.map,env_map:e.env_map,light_map:e.light_map,vertex_colors:e.vertex_colors,skinning:e.skinning,maxDirLights:l.directional,maxPointLights:l.point};m=b.createProgram();l=["#ifdef GL_ES\nprecision highp float;\n#endif",
+"#define MAX_DIR_LIGHTS "+v.maxDirLights,"#define MAX_POINT_LIGHTS "+v.maxPointLights,v.fog?"#define USE_FOG":"",v.fog instanceof THREE.FogExp2?"#define FOG_EXP2":"",v.map?"#define USE_MAP":"",v.env_map?"#define USE_ENVMAP":"",v.light_map?"#define USE_LIGHTMAP":"",v.vertex_colors?"#define USE_COLOR":"","uniform mat4 viewMatrix;\nuniform vec3 cameraPosition;\n"].join("\n");v=[b.getParameter(b.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>0?"#define VERTEX_TEXTURES":"","#define MAX_DIR_LIGHTS "+v.maxDirLights,"#define MAX_POINT_LIGHTS "+
+v.maxPointLights,v.map?"#define USE_MAP":"",v.env_map?"#define USE_ENVMAP":"",v.light_map?"#define USE_LIGHTMAP":"",v.vertex_colors?"#define USE_COLOR":"",v.skinning?"#define USE_SKINNING":"","uniform mat4 objectMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nuniform mat4 cameraInverseMatrix;\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec3 color;\nattribute vec2 uv;\nattribute vec2 uv2;\nattribute vec4 skinVertexA;\nattribute vec4 skinVertexB;\nattribute vec4 skinIndex;\nattribute vec4 skinWeight;\n"].join("\n");
+b.attachShader(m,R("fragment",l+s));b.attachShader(m,R("vertex",v+n));b.linkProgram(m);b.getProgramParameter(m,b.LINK_STATUS)||alert("Could not initialise shaders\nVALIDATE_STATUS: "+b.getProgramParameter(m,b.VALIDATE_STATUS)+", gl error ["+b.getError()+"]");m.uniforms={};m.attributes={};e.program=m;m=["viewMatrix","modelViewMatrix","projectionMatrix","normalMatrix","objectMatrix","cameraPosition","cameraInverseMatrix","boneGlobalMatrices"];for(h in e.uniforms)m.push(h);h=e.program;s=0;for(n=m.length;s<
+n;s++){l=m[s];h.uniforms[l]=b.getUniformLocation(h,l)}h=e.program;m=["position","normal","uv","uv2","tangent","color","skinVertexA","skinVertexB","skinIndex","skinWeight"];s=0;for(n=m.length;s<n;s++){l=m[s];h.attributes[l]=b.getAttribLocation(h,l)}h=e.program.attributes;b.enableVertexAttribArray(h.position);h.color>=0&&b.enableVertexAttribArray(h.color);h.normal>=0&&b.enableVertexAttribArray(h.normal);h.tangent>=0&&b.enableVertexAttribArray(h.tangent);if(e.skinning&&h.skinVertexA>=0&&h.skinVertexB>=
+0&&h.skinIndex>=0&&h.skinWeight>=0){b.enableVertexAttribArray(h.skinVertexA);b.enableVertexAttribArray(h.skinVertexB);b.enableVertexAttribArray(h.skinIndex);b.enableVertexAttribArray(h.skinWeight)}};this.render=function(e,n,m,h){var l,v,r,q,s,G,F,I,S=e.lights,y=e.fog;n.matrixAutoUpdate&&n.update();n.matrixWorld.flattenToArray(Ha);n.projectionMatrix.flattenToArray(va);n.inverseMatrix.flattenToArray(wa);qa.multiply(n.projectionMatrix,n.matrixWorld);i(qa);THREE.AnimationHandler&&THREE.AnimationHandler.update();
+e.update(undefined,!1,n);this.initWebGLObjects(e,n);J(m,h!==undefined?h:!0);this.autoClear&&this.clear();s=e.__webGLObjects.length;for(h=0;h<s;h++){l=e.__webGLObjects[h];F=l.object;if(F.visible)if(!(F instanceof THREE.Mesh)||t(F)){F.matrixWorld.flattenToArray(F._objectMatrixArray);H(F,n);z(l);l.render=!0;if(this.sortObjects){Aa.copy(F.position);qa.multiplyVector3(Aa);l.z=Aa.z}}else l.render=!1;else l.render=!1}this.sortObjects&&e.__webGLObjects.sort(A);G=e.__webGLObjectsImmediate.length;for(h=0;h<
+G;h++){l=e.__webGLObjectsImmediate[h];F=l.object;if(F.visible){F.matrixAutoUpdate&&F.matrixWorld.flattenToArray(F._objectMatrixArray);H(F,n);x(l)}}K(THREE.NormalBlending);for(h=0;h<s;h++){l=e.__webGLObjects[h];if(l.render){F=l.object;I=l.buffer;r=l.opaque;k(F);for(l=0;l<r.count;l++){q=r.list[l];o(q.depth_test);g(n,S,y,q,I,F)}}}for(h=0;h<G;h++){l=e.__webGLObjectsImmediate[h];F=l.object;if(F.visible){r=l.opaque;k(F);for(l=0;l<r.count;l++){q=r.list[l];o(q.depth_test);v=f(n,S,y,q,F);F.render(function(M){j(M,
+v)})}}}for(h=0;h<s;h++){l=e.__webGLObjects[h];if(l.render){F=l.object;I=l.buffer;r=l.transparent;k(F);for(l=0;l<r.count;l++){q=r.list[l];K(q.blending);o(q.depth_test);g(n,S,y,q,I,F)}}}for(h=0;h<G;h++){l=e.__webGLObjectsImmediate[h];F=l.object;if(F.visible){r=l.transparent;k(F);for(l=0;l<r.count;l++){q=r.list[l];K(q.blending);o(q.depth_test);v=f(n,S,y,q,F);F.render(function(M){j(M,v)})}}}if(m&&m.min_filter!==THREE.NearestFilter&&m.min_filter!==THREE.LinearFilter){b.bindTexture(b.TEXTURE_2D,m.__webGLTexture);
+b.generateMipmap(b.TEXTURE_2D);b.bindTexture(b.TEXTURE_2D,null)}};this.initWebGLObjects=function(e,n){var m,h,l;if(!e.__webGLObjects){e.__webGLObjects=[];e.__webGLObjectsMap={};e.__webGLObjectsImmediate=[]}m=0;for(h=e.objects.length;m<h;m++){l=e.objects[m];var v=e,r=n,q=void 0,s=void 0,G=void 0,F=void 0;s=l.geometry;if(v.__webGLObjectsMap[l.id]==undefined){v.__webGLObjectsMap[l.id]={};l._modelViewMatrix=new THREE.Matrix4;l._normalMatrixArray=new Float32Array(9);l._modelViewMatrixArray=new Float32Array(16);
+l._objectMatrixArray=new Float32Array(16);l.matrixWorld.flattenToArray(l._objectMatrixArray)}F=v.__webGLObjectsMap[l.id];objlist=v.__webGLObjects;if(l instanceof THREE.Mesh){for(q in s.geometryChunks){G=s.geometryChunks[q];if(!G.__webGLVertexBuffer){r=G;r.__webGLVertexBuffer=b.createBuffer();r.__webGLNormalBuffer=b.createBuffer();r.__webGLTangentBuffer=b.createBuffer();r.__webGLColorBuffer=b.createBuffer();r.__webGLUVBuffer=b.createBuffer();r.__webGLUV2Buffer=b.createBuffer();r.__webGLSkinVertexABuffer=
+b.createBuffer();r.__webGLSkinVertexBBuffer=b.createBuffer();r.__webGLSkinIndicesBuffer=b.createBuffer();r.__webGLSkinWeightsBuffer=b.createBuffer();r.__webGLFaceBuffer=b.createBuffer();r.__webGLLineBuffer=b.createBuffer();r=G;var I=l,S=void 0,y=void 0,M=0,ea=v=0,Z=I.geometry.faces,Q=r.faces;S=0;for(y=Q.length;S<y;S++){fi=Q[S];face=Z[fi];if(face instanceof THREE.Face3){M+=3;v+=1;ea+=3}else if(face instanceof THREE.Face4){M+=4;v+=2;ea+=4}}r.__vertexArray=new Float32Array(M*3);r.__normalArray=new Float32Array(M*
+3);r.__tangentArray=new Float32Array(M*4);r.__colorArray=new Float32Array(M*3);r.__uvArray=new Float32Array(M*2);r.__uv2Array=new Float32Array(M*2);r.__skinVertexAArray=new Float32Array(M*4);r.__skinVertexBArray=new Float32Array(M*4);r.__skinIndexArray=new Float32Array(M*4);r.__skinWeightArray=new Float32Array(M*4);r.__faceArray=new Uint16Array(v*3);r.__lineArray=new Uint16Array(ea*2);y=S=r;M=void 0;Z=void 0;var O=void 0,N=void 0;O=void 0;Q=!1;M=0;for(Z=I.materials.length;M<Z;M++){O=I.materials[M];
+if(O instanceof THREE.MeshFaceMaterial){O=0;for(N=y.materials.length;O<N;O++)if(y.materials[O]&&y.materials[O].shading!=undefined&&y.materials[O].shading==THREE.SmoothShading){Q=!0;break}}else if(O&&O.shading!=undefined&&O.shading==THREE.SmoothShading){Q=!0;break}if(Q)break}S.__needsSmoothNormals=Q;r.__webGLFaceCount=v*3;r.__webGLLineCount=ea*2;s.__dirtyVertices=!0;s.__dirtyElements=!0;s.__dirtyUvs=!0;s.__dirtyNormals=!0;s.__dirtyTangents=!0;s.__dirtyColors=!0}if(s.__dirtyVertices||s.__dirtyElements||
+s.__dirtyUvs||s.__dirtyNormals||s.__dirtyColors||s.__dirtyTangents){r=G;v=b.DYNAMIC_DRAW;ea=void 0;S=void 0;var ra=void 0,u=void 0,ma=void 0,ka=void 0,ua=void 0;ra=void 0;var B=void 0,C=void 0,D=void 0,T=void 0;B=void 0;C=void 0;D=void 0;u=void 0;B=void 0;C=void 0;D=void 0;T=void 0;B=void 0;C=void 0;D=void 0;T=void 0;B=void 0;C=void 0;D=void 0;T=void 0;B=void 0;C=void 0;D=void 0;T=void 0;B=void 0;C=void 0;D=void 0;T=void 0;u=void 0;ka=void 0;ma=void 0;ua=void 0;var oa=N=O=Q=Z=M=I=y=0,fa=0,p=0,ha=
+r.__vertexArray,Fa=r.__uvArray,Ga=r.__uv2Array,ta=r.__normalArray,U=r.__tangentArray,ia=r.__colorArray,V=r.__skinVertexAArray,W=r.__skinVertexBArray,X=r.__skinIndexArray,Y=r.__skinWeightArray,xa=r.__faceArray,pa=r.__lineArray,Qa=r.__needsSmoothNormals,la=l.geometry,Ja=la.__dirtyVertices,Ka=la.__dirtyElements,Ea=la.__dirtyUvs,La=la.__dirtyNormals,Ma=la.__dirtyTangents,Na=la.__dirtyColors,sa=la.vertices,Ra=r.faces,Sa=la.faces,Ta=la.uvs,Ua=la.uvs2,ya=la.colors,Ba=la.skinVerticesA,Ca=la.skinVerticesB,
+Da=la.skinIndices,za=la.skinWeights;ea=0;for(S=Ra.length;ea<S;ea++){ra=Ra[ea];u=Sa[ra];ua=Ta[ra];ra=Ua[ra];ma=u.vertexNormals;ka=u.normal;if(u instanceof THREE.Face3){if(Ja){B=sa[u.a].position;C=sa[u.b].position;D=sa[u.c].position;ha[I]=B.x;ha[I+1]=B.y;ha[I+2]=B.z;ha[I+3]=C.x;ha[I+4]=C.y;ha[I+5]=C.z;ha[I+6]=D.x;ha[I+7]=D.y;ha[I+8]=D.z;I+=9}if(za.length){B=za[u.a];C=za[u.b];D=za[u.c];Y[p]=B.x;Y[p+1]=B.y;Y[p+2]=B.z;Y[p+3]=B.w;Y[p+4]=C.x;Y[p+5]=C.y;Y[p+6]=C.z;Y[p+7]=C.w;Y[p+8]=D.x;Y[p+9]=D.y;Y[p+10]=
+D.z;Y[p+11]=D.w;B=Da[u.a];C=Da[u.b];D=Da[u.c];X[p]=B.x;X[p+1]=B.y;X[p+2]=B.z;X[p+3]=B.w;X[p+4]=C.x;X[p+5]=C.y;X[p+6]=C.z;X[p+7]=C.w;X[p+8]=D.x;X[p+9]=D.y;X[p+10]=D.z;X[p+11]=D.w;B=Ba[u.a];C=Ba[u.b];D=Ba[u.c];V[p]=B.x;V[p+1]=B.y;V[p+2]=B.z;V[p+3]=1;V[p+4]=C.x;V[p+5]=C.y;V[p+6]=C.z;V[p+7]=1;V[p+8]=D.x;V[p+9]=D.y;V[p+10]=D.z;V[p+11]=1;B=Ca[u.a];C=Ca[u.b];D=Ca[u.c];W[p]=B.x;W[p+1]=B.y;W[p+2]=B.z;W[p+3]=1;W[p+4]=C.x;W[p+5]=C.y;W[p+6]=C.z;W[p+7]=1;W[p+8]=D.x;W[p+9]=D.y;W[p+10]=D.z;W[p+11]=1;p+=12}if(Na&&
+ya.length){B=ya[u.a];C=ya[u.b];D=ya[u.c];ia[fa]=B.r;ia[fa+1]=B.g;ia[fa+2]=B.b;ia[fa+3]=C.r;ia[fa+4]=C.g;ia[fa+5]=C.b;ia[fa+6]=D.r;ia[fa+7]=D.g;ia[fa+8]=D.b;fa+=9}if(Ma&&la.hasTangents){B=sa[u.a].tangent;C=sa[u.b].tangent;D=sa[u.c].tangent;U[N]=B.x;U[N+1]=B.y;U[N+2]=B.z;U[N+3]=B.w;U[N+4]=C.x;U[N+5]=C.y;U[N+6]=C.z;U[N+7]=C.w;U[N+8]=D.x;U[N+9]=D.y;U[N+10]=D.z;U[N+11]=D.w;N+=12}if(La)if(ma.length==3&&Qa)for(u=0;u<3;u++){ka=ma[u];ta[O]=ka.x;ta[O+1]=ka.y;ta[O+2]=ka.z;O+=3}else for(u=0;u<3;u++){ta[O]=ka.x;
+ta[O+1]=ka.y;ta[O+2]=ka.z;O+=3}if(Ea&&ua)for(u=0;u<3;u++){ma=ua[u];Fa[M]=ma.u;Fa[M+1]=ma.v;M+=2}if(Ea&&ra)for(u=0;u<3;u++){ua=ra[u];Ga[Z]=ua.u;Ga[Z+1]=ua.v;Z+=2}if(Ka){xa[Q]=y;xa[Q+1]=y+1;xa[Q+2]=y+2;Q+=3;pa[oa]=y;pa[oa+1]=y+1;pa[oa+2]=y;pa[oa+3]=y+2;pa[oa+4]=y+1;pa[oa+5]=y+2;oa+=6;y+=3}}else if(u instanceof THREE.Face4){if(Ja){B=sa[u.a].position;C=sa[u.b].position;D=sa[u.c].position;T=sa[u.d].position;ha[I]=B.x;ha[I+1]=B.y;ha[I+2]=B.z;ha[I+3]=C.x;ha[I+4]=C.y;ha[I+5]=C.z;ha[I+6]=D.x;ha[I+7]=D.y;ha[I+
+8]=D.z;ha[I+9]=T.x;ha[I+10]=T.y;ha[I+11]=T.z;I+=12}if(za.length){B=za[u.a];C=za[u.b];D=za[u.c];T=za[u.d];Y[p]=B.x;Y[p+1]=B.y;Y[p+2]=B.z;Y[p+3]=B.w;Y[p+4]=C.x;Y[p+5]=C.y;Y[p+6]=C.z;Y[p+7]=C.w;Y[p+8]=D.x;Y[p+9]=D.y;Y[p+10]=D.z;Y[p+11]=D.w;Y[p+12]=T.x;Y[p+13]=T.y;Y[p+14]=T.z;Y[p+15]=T.w;B=Da[u.a];C=Da[u.b];D=Da[u.c];T=Da[u.d];X[p]=B.x;X[p+1]=B.y;X[p+2]=B.z;X[p+3]=B.w;X[p+4]=C.x;X[p+5]=C.y;X[p+6]=C.z;X[p+7]=C.w;X[p+8]=D.x;X[p+9]=D.y;X[p+10]=D.z;X[p+11]=D.w;X[p+12]=T.x;X[p+13]=T.y;X[p+14]=T.z;X[p+15]=
+T.w;B=Ba[u.a];C=Ba[u.b];D=Ba[u.c];T=Ba[u.d];V[p]=B.x;V[p+1]=B.y;V[p+2]=B.z;V[p+3]=1;V[p+4]=C.x;V[p+5]=C.y;V[p+6]=C.z;V[p+7]=1;V[p+8]=D.x;V[p+9]=D.y;V[p+10]=D.z;V[p+11]=1;V[p+12]=T.x;V[p+13]=T.y;V[p+14]=T.z;V[p+15]=1;B=Ca[u.a];C=Ca[u.b];D=Ca[u.c];T=Ca[u.d];W[p]=B.x;W[p+1]=B.y;W[p+2]=B.z;W[p+3]=1;W[p+4]=C.x;W[p+5]=C.y;W[p+6]=C.z;W[p+7]=1;W[p+8]=D.x;W[p+9]=D.y;W[p+10]=D.z;W[p+11]=1;W[p+12]=T.x;W[p+13]=T.y;W[p+14]=T.z;W[p+15]=1;p+=16}if(Na&&ya.length){B=ya[u.a];C=ya[u.b];D=ya[u.c];T=ya[u.d];ia[fa]=B.r;
+ia[fa+1]=B.g;ia[fa+2]=B.b;ia[fa+3]=C.r;ia[fa+4]=C.g;ia[fa+5]=C.b;ia[fa+6]=D.r;ia[fa+7]=D.g;ia[fa+8]=D.b;ia[fa+9]=T.r;ia[fa+10]=T.g;ia[fa+11]=T.b;fa+=12}if(Ma&&la.hasTangents){B=sa[u.a].tangent;C=sa[u.b].tangent;D=sa[u.c].tangent;u=sa[u.d].tangent;U[N]=B.x;U[N+1]=B.y;U[N+2]=B.z;U[N+3]=B.w;U[N+4]=C.x;U[N+5]=C.y;U[N+6]=C.z;U[N+7]=C.w;U[N+8]=D.x;U[N+9]=D.y;U[N+10]=D.z;U[N+11]=D.w;U[N+12]=u.x;U[N+13]=u.y;U[N+14]=u.z;U[N+15]=u.w;N+=16}if(La)if(ma.length==4&&Qa)for(u=0;u<4;u++){ka=ma[u];ta[O]=ka.x;ta[O+
+1]=ka.y;ta[O+2]=ka.z;O+=3}else for(u=0;u<4;u++){ta[O]=ka.x;ta[O+1]=ka.y;ta[O+2]=ka.z;O+=3}if(Ea&&ua)for(u=0;u<4;u++){ma=ua[u];Fa[M]=ma.u;Fa[M+1]=ma.v;M+=2}if(Ea&&ra)for(u=0;u<4;u++){ua=ra[u];Ga[Z]=ua.u;Ga[Z+1]=ua.v;Z+=2}if(Ka){xa[Q]=y;xa[Q+1]=y+1;xa[Q+2]=y+2;xa[Q+3]=y;xa[Q+4]=y+2;xa[Q+5]=y+3;Q+=6;pa[oa]=y;pa[oa+1]=y+1;pa[oa+2]=y;pa[oa+3]=y+3;pa[oa+4]=y+1;pa[oa+5]=y+2;pa[oa+6]=y+2;pa[oa+7]=y+3;oa+=8;y+=4}}}if(Ja){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,ha,v)}if(Na&&
+ya.length){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,ia,v)}if(La){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLNormalBuffer);b.bufferData(b.ARRAY_BUFFER,ta,v)}if(Ma&&la.hasTangents){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLTangentBuffer);b.bufferData(b.ARRAY_BUFFER,U,v)}if(Ea&&M>0){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLUVBuffer);b.bufferData(b.ARRAY_BUFFER,Fa,v)}if(Ea&&Z>0){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLUV2Buffer);b.bufferData(b.ARRAY_BUFFER,Ga,v)}if(Ka){b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,
+r.__webGLFaceBuffer);b.bufferData(b.ELEMENT_ARRAY_BUFFER,xa,v);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,r.__webGLLineBuffer);b.bufferData(b.ELEMENT_ARRAY_BUFFER,pa,v)}if(p>0){b.bindBuffer(b.ARRAY_BUFFER,r.__webGLSkinVertexABuffer);b.bufferData(b.ARRAY_BUFFER,V,v);b.bindBuffer(b.ARRAY_BUFFER,r.__webGLSkinVertexBBuffer);b.bufferData(b.ARRAY_BUFFER,W,v);b.bindBuffer(b.ARRAY_BUFFER,r.__webGLSkinIndicesBuffer);b.bufferData(b.ARRAY_BUFFER,X,v);b.bindBuffer(b.ARRAY_BUFFER,r.__webGLSkinWeightsBuffer);b.bufferData(b.ARRAY_BUFFER,
+Y,v)}}E(objlist,F,q,G,l)}s.__dirtyVertices=!1;s.__dirtyElements=!1;s.__dirtyUvs=!1;s.__dirtyNormals=!1;s.__dirtyTangents=!1;s.__dirtyColors=!1}else if(l instanceof THREE.Ribbon){if(!s.__webGLVertexBuffer){q=s;q.__webGLVertexBuffer=b.createBuffer();q.__webGLColorBuffer=b.createBuffer();q=s;G=q.vertices.length;q.__vertexArray=new Float32Array(G*3);q.__colorArray=new Float32Array(G*3);q.__webGLVertexCount=G;s.__dirtyVertices=!0;s.__dirtyColors=!0}if(s.__dirtyVertices||s.__dirtyColors){q=s;G=b.DYNAMIC_DRAW;
+y=void 0;y=void 0;I=void 0;r=void 0;M=q.vertices;v=q.colors;Z=M.length;ea=v.length;Q=q.__vertexArray;S=q.__colorArray;O=q.__dirtyColors;if(q.__dirtyVertices){for(y=0;y<Z;y++){I=M[y].position;r=y*3;Q[r]=I.x;Q[r+1]=I.y;Q[r+2]=I.z}b.bindBuffer(b.ARRAY_BUFFER,q.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,Q,G)}if(O){for(y=0;y<ea;y++){color=v[y];r=y*3;S[r]=color.r;S[r+1]=color.g;S[r+2]=color.b}b.bindBuffer(b.ARRAY_BUFFER,q.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,S,G)}}E(objlist,F,0,s,l);s.__dirtyVertices=
+!1;s.__dirtyColors=!1}else if(l instanceof THREE.Line){if(!s.__webGLVertexBuffer){q=s;q.__webGLVertexBuffer=b.createBuffer();q.__webGLColorBuffer=b.createBuffer();q=s;G=q.vertices.length;q.__vertexArray=new Float32Array(G*3);q.__colorArray=new Float32Array(G*3);q.__webGLLineCount=G;s.__dirtyVertices=!0;s.__dirtyColors=!0}if(s.__dirtyVertices||s.__dirtyColors){q=s;G=b.DYNAMIC_DRAW;y=void 0;y=void 0;I=void 0;r=void 0;M=q.vertices;v=q.colors;Z=M.length;ea=v.length;Q=q.__vertexArray;S=q.__colorArray;
+O=q.__dirtyColors;if(q.__dirtyVertices){for(y=0;y<Z;y++){I=M[y].position;r=y*3;Q[r]=I.x;Q[r+1]=I.y;Q[r+2]=I.z}b.bindBuffer(b.ARRAY_BUFFER,q.__webGLVertexBuffer);b.bufferData(b.ARRAY_BUFFER,Q,G)}if(O){for(y=0;y<ea;y++){color=v[y];r=y*3;S[r]=color.r;S[r+1]=color.g;S[r+2]=color.b}b.bindBuffer(b.ARRAY_BUFFER,q.__webGLColorBuffer);b.bufferData(b.ARRAY_BUFFER,S,G)}}E(objlist,F,0,s,l);s.__dirtyVertices=!1;s.__dirtyColors=!1}else if(l instanceof THREE.ParticleSystem){if(!s.__webGLVertexBuffer){q=s;q.__webGLVertexBuffer=
+b.createBuffer();q.__webGLColorBuffer=b.createBuffer();q=s;G=q.vertices.length;q.__vertexArray=new Float32Array(G*3);q.__colorArray=new Float32Array(G*3);q.__sortArray=[];q.__webGLParticleCount=G;s.__dirtyVertices=!0;s.__dirtyColors=!0}(s.__dirtyVertices||s.__dirtyColors||l.sortParticles)&&c(s,b.DYNAMIC_DRAW,l,r);E(objlist,F,0,s,l);s.__dirtyVertices=!1;s.__dirtyColors=!1}else if(THREE.MarchingCubes!==undefined&&l instanceof THREE.MarchingCubes){s=F;if(s[0]==undefined){v.__webGLObjectsImmediate.push({object:l,
+opaque:{list:[],count:0},transparent:{list:[],count:0}});s[0]=1}}}};this.removeObject=function(e,n){var m,h;for(m=e.__webGLObjects.length-1;m>=0;m--){h=e.__webGLObjects[m].object;n==h&&e.__webGLObjects.splice(m,1)}};this.setFaceCulling=function(e,n){if(e){!n||n=="ccw"?b.frontFace(b.CCW):b.frontFace(b.CW);if(e=="back")b.cullFace(b.BACK);else e=="front"?b.cullFace(b.FRONT):b.cullFace(b.FRONT_AND_BACK);b.enable(b.CULL_FACE)}else b.disable(b.CULL_FACE)};this.supportsVertexTextures=function(){return b.getParameter(b.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>
+0}};
+THREE.Snippets={fog_pars_fragment:"#ifdef USE_FOG\nuniform vec3 fogColor;\n#ifdef FOG_EXP2\nuniform float fogDensity;\n#else\nuniform float fogNear;\nuniform float fogFar;\n#endif\n#endif",fog_fragment:"#ifdef USE_FOG\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\n#ifdef FOG_EXP2\nconst float LOG2 = 1.442695;\nfloat fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );\nfogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );\n#else\nfloat fogFactor = smoothstep( fogNear, fogFar, depth );\n#endif\ngl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );\n#endif",envmap_pars_fragment:"#ifdef USE_ENVMAP\nvarying vec3 vReflect;\nuniform float reflectivity;\nuniform samplerCube env_map;\nuniform int combine;\n#endif",
+envmap_fragment:"#ifdef USE_ENVMAP\nvec4 cubeColor = textureCube( env_map, vec3( -vReflect.x, vReflect.yz ) );\nif ( combine == 1 ) {\ngl_FragColor = vec4( mix( gl_FragColor.xyz, cubeColor.xyz, reflectivity ), opacity );\n} else {\ngl_FragColor = gl_FragColor * cubeColor;\n}\n#endif",envmap_pars_vertex:"#ifdef USE_ENVMAP\nvarying vec3 vReflect;\nuniform float refraction_ratio;\nuniform bool useRefract;\n#endif",envmap_vertex:"#ifdef USE_ENVMAP\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvec3 nWorld = mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal;\nif ( useRefract ) {\nvReflect = refract( normalize( mPosition.xyz - cameraPosition ), normalize( nWorld.xyz ), refraction_ratio );\n} else {\nvReflect = reflect( normalize( mPosition.xyz - cameraPosition ), normalize( nWorld.xyz ) );\n}\n#endif",
+map_particle_pars_fragment:"#ifdef USE_MAP\nuniform sampler2D map;\n#endif",map_particle_fragment:"#ifdef USE_MAP\ngl_FragColor = gl_FragColor * texture2D( map, gl_PointCoord );\n#endif",map_pars_fragment:"#ifdef USE_MAP\nvarying vec2 vUv;\nuniform sampler2D map;\n#endif",map_pars_vertex:"#ifdef USE_MAP\nvarying vec2 vUv;\n#endif",map_fragment:"#ifdef USE_MAP\ngl_FragColor = gl_FragColor * texture2D( map, vUv );\n#endif",map_vertex:"#ifdef USE_MAP\nvUv = uv;\n#endif",lightmap_pars_fragment:"#ifdef USE_LIGHTMAP\nvarying vec2 vUv2;\nuniform sampler2D light_map;\n#endif",
+lightmap_pars_vertex:"#ifdef USE_LIGHTMAP\nvarying vec2 vUv2;\n#endif",lightmap_fragment:"#ifdef USE_LIGHTMAP\ngl_FragColor = gl_FragColor * texture2D( light_map, vUv2 );\n#endif",lightmap_vertex:"#ifdef USE_LIGHTMAP\nvUv2 = uv2;\n#endif",lights_pars_vertex:"uniform bool enableLighting;\nuniform vec3 ambientLightColor;\n#if MAX_DIR_LIGHTS > 0\nuniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];\nuniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];\n#endif\n#if MAX_POINT_LIGHTS > 0\nuniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];\nuniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];\n#ifdef PHONG\nvarying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];\n#endif\n#endif",
+lights_vertex:"if ( !enableLighting ) {\nvLightWeighting = vec3( 1.0 );\n} else {\nvLightWeighting = ambientLightColor;\n#if MAX_DIR_LIGHTS > 0\nfor( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {\nvec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );\nfloat directionalLightWeighting = max( dot( transformedNormal, normalize( lDirection.xyz ) ), 0.0 );\nvLightWeighting += directionalLightColor[ i ] * directionalLightWeighting;\n}\n#endif\n#if MAX_POINT_LIGHTS > 0\nfor( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {\nvec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );\nvec3 pointLightVector = normalize( lPosition.xyz - mvPosition.xyz );\nfloat pointLightWeighting = max( dot( transformedNormal, pointLightVector ), 0.0 );\nvLightWeighting += pointLightColor[ i ] * pointLightWeighting;\n#ifdef PHONG\nvPointLightVector[ i ] = pointLightVector;\n#endif\n}\n#endif\n}",
+lights_pars_fragment:"#if MAX_DIR_LIGHTS > 0\nuniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];\n#endif\n#if MAX_POINT_LIGHTS > 0\nvarying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];\n#endif\nvarying vec3 vViewPosition;\nvarying vec3 vNormal;",lights_fragment:"vec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );\nvec4 mColor = vec4( diffuse, opacity );\nvec4 mSpecular = vec4( specular, opacity );\n#if MAX_POINT_LIGHTS > 0\nvec4 pointDiffuse  = vec4( 0.0 );\nvec4 pointSpecular = vec4( 0.0 );\nfor( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {\nvec3 pointVector = normalize( vPointLightVector[ i ] );\nvec3 pointHalfVector = normalize( vPointLightVector[ i ] + vViewPosition );\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = pow( pointDotNormalHalf, shininess );\npointDiffuse  += mColor * pointDiffuseWeight;\npointSpecular += mSpecular * pointSpecularWeight;\n}\n#endif\n#if MAX_DIR_LIGHTS > 0\nvec4 dirDiffuse  = vec4( 0.0 );\nvec4 dirSpecular = vec4( 0.0 );\nfor( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {\nvec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = pow( dirDotNormalHalf, shininess );\ndirDiffuse  += mColor * dirDiffuseWeight;\ndirSpecular += mSpecular * dirSpecularWeight;\n}\n#endif\nvec4 totalLight = vec4( ambient, opacity );\n#if MAX_DIR_LIGHTS > 0\ntotalLight += dirDiffuse + dirSpecular;\n#endif\n#if MAX_POINT_LIGHTS > 0\ntotalLight += pointDiffuse + pointSpecular;\n#endif\ngl_FragColor = gl_FragColor * totalLight;",
+color_pars_fragment:"#ifdef USE_COLOR\nvarying vec3 vColor;\n#endif",color_fragment:"#ifdef USE_COLOR\ngl_FragColor = gl_FragColor * vec4( vColor, opacity );\n#endif",color_pars_vertex:"#ifdef USE_COLOR\nvarying vec3 vColor;\n#endif",color_vertex:"#ifdef USE_COLOR\nvColor = color;\n#endif",skinning_pars_vertex:"#ifdef USE_SKINNING\nuniform mat4 boneGlobalMatrices[20];\n#endif",skinning_vertex:"#ifdef USE_SKINNING\ngl_Position  = ( boneGlobalMatrices[ int( skinIndex.x ) ] * skinVertexA ) * skinWeight.x;\ngl_Position += ( boneGlobalMatrices[ int( skinIndex.y ) ] * skinVertexB ) * skinWeight.y;\ngl_Position  = projectionMatrix * viewMatrix * objectMatrix * gl_Position;\n#else\ngl_Position = projectionMatrix * mvPosition;\n#endif"};
+THREE.UniformsLib={common:{diffuse:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},map:{type:"t",value:0,texture:null},light_map:{type:"t",value:2,texture:null},env_map:{type:"t",value:1,texture:null},useRefract:{type:"i",value:0},reflectivity:{type:"f",value:1},refraction_ratio:{type:"f",value:0.98},combine:{type:"i",value:0},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}},lights:{enableLighting:{type:"i",
+value:1},ambientLightColor:{type:"fv",value:[]},directionalLightDirection:{type:"fv",value:[]},directionalLightColor:{type:"fv",value:[]},pointLightPosition:{type:"fv",value:[]},pointLightColor:{type:"fv",value:[]}},particle:{psColor:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},size:{type:"f",value:1},map:{type:"t",value:0,texture:null},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}}};
+THREE.ShaderLib={depth:{uniforms:{mNear:{type:"f",value:1},mFar:{type:"f",value:2E3},opacity:{type:"f",value:1}},fragment_shader:"uniform float mNear;\nuniform float mFar;\nuniform float opacity;\nvoid main() {\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\nfloat color = 1.0 - smoothstep( mNear, mFar, depth );\ngl_FragColor = vec4( vec3( color ), opacity );\n}",vertex_shader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}"},normal:{uniforms:{opacity:{type:"f",
+value:1}},fragment_shader:"uniform float opacity;\nvarying vec3 vNormal;\nvoid main() {\ngl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );\n}",vertex_shader:"varying vec3 vNormal;\nvoid main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\ngl_Position = projectionMatrix * mvPosition;\n}"},basic:{uniforms:THREE.UniformsLib.common,fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;",THREE.Snippets.color_pars_fragment,
+THREE.Snippets.map_pars_fragment,THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( diffuse, opacity );",THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:[THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,THREE.Snippets.envmap_pars_vertex,THREE.Snippets.color_pars_vertex,
+THREE.Snippets.skinning_pars_vertex,"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,THREE.Snippets.skinning_vertex,"}"].join("\n")},lambert:{uniforms:Uniforms.merge([THREE.UniformsLib.common,THREE.UniformsLib.lights]),fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;\nvarying vec3 vLightWeighting;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_pars_fragment,
+THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( diffuse, opacity );\ngl_FragColor = gl_FragColor * vec4( vLightWeighting, 1.0 );",THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["varying vec3 vLightWeighting;",THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,
+THREE.Snippets.envmap_pars_vertex,THREE.Snippets.lights_pars_vertex,THREE.Snippets.color_pars_vertex,THREE.Snippets.skinning_pars_vertex,"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,"vec3 transformedNormal = normalize( normalMatrix * normal );",THREE.Snippets.lights_vertex,THREE.Snippets.skinning_vertex,"}"].join("\n")},phong:{uniforms:Uniforms.merge([THREE.UniformsLib.common,
+THREE.UniformsLib.lights,{ambient:{type:"c",value:new THREE.Color(328965)},specular:{type:"c",value:new THREE.Color(1118481)},shininess:{type:"f",value:30}}]),fragment_shader:["uniform vec3 diffuse;\nuniform float opacity;\nuniform vec3 ambient;\nuniform vec3 specular;\nuniform float shininess;\nvarying vec3 vLightWeighting;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_pars_fragment,THREE.Snippets.lightmap_pars_fragment,THREE.Snippets.envmap_pars_fragment,THREE.Snippets.fog_pars_fragment,
+THREE.Snippets.lights_pars_fragment,"void main() {\ngl_FragColor = vec4( vLightWeighting, 1.0 );",THREE.Snippets.lights_fragment,THREE.Snippets.map_fragment,THREE.Snippets.lightmap_fragment,THREE.Snippets.color_fragment,THREE.Snippets.envmap_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["#define PHONG\nvarying vec3 vLightWeighting;\nvarying vec3 vViewPosition;\nvarying vec3 vNormal;",THREE.Snippets.map_pars_vertex,THREE.Snippets.lightmap_pars_vertex,THREE.Snippets.envmap_pars_vertex,
+THREE.Snippets.lights_pars_vertex,THREE.Snippets.color_pars_vertex,THREE.Snippets.skinning_pars_vertex,"void main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",THREE.Snippets.map_vertex,THREE.Snippets.lightmap_vertex,THREE.Snippets.envmap_vertex,THREE.Snippets.color_vertex,"#ifndef USE_ENVMAP\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\n#endif\nvViewPosition = cameraPosition - mPosition.xyz;\nvec3 transformedNormal = normalize( normalMatrix * normal );\nvNormal = transformedNormal;",
+THREE.Snippets.lights_vertex,THREE.Snippets.skinning_vertex,"}"].join("\n")},particle_basic:{uniforms:THREE.UniformsLib.particle,fragment_shader:["uniform vec3 psColor;\nuniform float opacity;",THREE.Snippets.color_pars_fragment,THREE.Snippets.map_particle_pars_fragment,THREE.Snippets.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( psColor, opacity );",THREE.Snippets.map_particle_fragment,THREE.Snippets.color_fragment,THREE.Snippets.fog_fragment,"}"].join("\n"),vertex_shader:["uniform float size;",
+THREE.Snippets.color_pars_vertex,"void main() {",THREE.Snippets.color_vertex,"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\ngl_Position = projectionMatrix * mvPosition;\ngl_PointSize = size;\n}"].join("\n")}};

+ 18 - 6
examples/camera_orthographic.html → examples/canvas_camera_orthographic.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - camera - orthographic</title>
+		<title>three.js canvas - camera - orthographic</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -18,6 +18,7 @@
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -26,7 +27,7 @@
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -115,19 +116,30 @@
 				stats = new Stats();
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 				var timer = new Date().getTime() * 0.0001;
 
 
 				camera.position.x = Math.cos( timer ) * 200;
 				camera.position.x = Math.cos( timer ) * 200;
 				camera.position.z = Math.sin( timer ) * 200;
 				camera.position.z = Math.sin( timer ) * 200;
 
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 17 - 8
examples/geometry_birds.html → examples/canvas_geometry_birds.html

@@ -1,7 +1,7 @@
 <html>
 <html>
 	<head>
 	<head>
 		<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
 		<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
-		<title>three.js - geometry - birds</title>
+		<title>three.js canvas - geometry - birds</title>
 		<style type="text/css"> 
 		<style type="text/css"> 
 			body {
 			body {
 				color: #808080;
 				color: #808080;
@@ -26,11 +26,12 @@
 		<div id="container"></div>
 		<div id="container"></div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="obj/Bird.js"></script>
 		<script type="text/javascript" src="obj/Bird.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
 			// Based on http://www.openprocessing.org/visuals/?visualID=6910
 			// Based on http://www.openprocessing.org/visuals/?visualID=6910
@@ -331,6 +332,7 @@
 			var stats;
 			var stats;
 
 
 			init();
 			init();
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -378,8 +380,6 @@
 
 
 				document.getElementById( 'container' ).appendChild(stats.domElement);
 				document.getElementById( 'container' ).appendChild(stats.domElement);
 
 
-				setInterval( loop, 1000 / 200 );
-
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
@@ -398,7 +398,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				for ( var i = 0, il = birds.length; i < il; i++ ) {
 				for ( var i = 0, il = birds.length; i < il; i++ ) {
 
 
@@ -421,8 +432,6 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 		</script>
 		</script>

+ 15 - 8
examples/geometry_cube.html → examples/canvas_geometry_cube.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - cube</title>
+		<title>three.js canvas - geometry - cube</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -16,9 +16,8 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -39,7 +38,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval(loop, 1000/60);
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -84,7 +83,7 @@
 				scene.addObject( plane );
 				scene.addObject( plane );
 
 
 				renderer = new THREE.CanvasRenderer();
 				renderer = new THREE.CanvasRenderer();
-				renderer.setSize(  window.innerWidth, window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
 
 
@@ -159,12 +158,20 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
 
 
-				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				requestAnimationFrame( animate );
 
 
-				renderer.render(scene, camera);
+				render();
 				stats.update();
 				stats.update();
+
+			}
+
+			function render() {
+
+				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				renderer.render( scene, camera );
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 17 - 9
examples/geometry_earth.html → examples/canvas_geometry_earth.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - earth</title>
+		<title>three.js canvas - geometry - earth</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -33,14 +33,14 @@
 		<div id="container"></div> 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
 			var container, stats;
 			var container, stats;
@@ -54,10 +54,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -98,7 +96,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
@@ -106,7 +115,6 @@
 				mesh.rotation.y -= 0.005;
 				mesh.rotation.y -= 0.005;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 202 - 0
examples/canvas_geometry_hierarchy.html

@@ -0,0 +1,202 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js canvas - geometry hierarchy 2</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var statsEnabled = true;
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var geometry, group;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+
+				var geometry = new Cube( 100, 100, 100 );
+				var material = new THREE.MeshNormalMaterial();
+
+				group = new THREE.Object3D();
+
+				for ( var i = 0; i < 200; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 2000 - 1000;
+					mesh.position.y = Math.random() * 2000 - 1000;
+					mesh.position.z = Math.random() * 2000 - 1000;
+					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.updateMatrix();
+					mesh.autoUpdateMatrix = false;
+					mesh.overdraw = true;
+					group.addChild( mesh );
+
+				}
+
+				scene.addObject( group );
+
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				if ( statsEnabled ) {
+
+					stats = new Stats();
+					stats.domElement.style.position = 'absolute';
+					stats.domElement.style.top = '0px';
+					stats.domElement.style.zIndex = 100;
+					container.appendChild( stats.domElement );
+
+				}
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			function loop() {
+
+				var rx = Math.sin( new Date().getTime() * 0.0007 ) * 0.5,
+				ry = Math.sin( new Date().getTime() * 0.0003 ) * 0.5,
+				rz = Math.sin( new Date().getTime() * 0.0002 ) * 0.5;
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				group.rotation.x = rx;
+				group.rotation.y = ry;
+				group.rotation.z = rz;
+
+				renderer.render( scene, camera );
+
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function log( text ) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 8 - 7
examples/geometry_panorama.html → examples/canvas_geometry_panorama.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - panorama demo</title>
+		<title>three.js canvas - panorama demo</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -32,7 +32,6 @@
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -74,7 +73,7 @@
 					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
 					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
 					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
 					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
 					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
 					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
-					loadTexture( 'textures/cube/skybox/nz.jpg' ) // front
+					loadTexture( 'textures/cube/skybox/nz.jpg' )  // front
 
 
 				];
 				];
 
 
@@ -99,14 +98,15 @@
 
 
 			function loadTexture( path ) {
 			function loadTexture( path ) {
 
 
-				var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( texture_placeholder ) } );
-
-				var image = new Image();
+				var texture = new THREE.Texture( texture_placeholder ),
+					material = new THREE.MeshBasicMaterial( { map: texture } ),
+					image = new Image();
 
 
 				image.onload = function () {
 				image.onload = function () {
 
 
-					this.loaded = true;
+					texture.needsUpdate = true;
 					material.map.image = this;
 					material.map.image = this;
+					
 					render();
 					render();
 
 
 				};
 				};
@@ -114,6 +114,7 @@
 				image.src = path;
 				image.src = path;
 
 
 				return material;
 				return material;
+
 			}
 			}
 
 
 			function onDocumentMouseDown( event ) {
 			function onDocumentMouseDown( event ) {

+ 6 - 3
examples/geometry_panorama_fisheye.html → examples/canvas_geometry_panorama_fisheye.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - panorama fisheye demo</title>
+		<title>three.js canvas - panorama fisheye demo</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -108,14 +108,16 @@
 
 
 			function loadTexture( path ) {
 			function loadTexture( path ) {
 
 
-				var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( texture_placeholder ) } );
+				var texture = new THREE.Texture( texture_placeholder ),
+					material = new THREE.MeshBasicMaterial( { map: texture } );
 
 
 				var image = new Image();
 				var image = new Image();
 
 
 				image.onload = function () {
 				image.onload = function () {
 
 
-					this.loaded = true;
+					texture.needsUpdate = true;
 					material.map.image = this;
 					material.map.image = this;
+					
 					render();
 					render();
 
 
 				};
 				};
@@ -123,6 +125,7 @@
 				image.src = path;
 				image.src = path;
 
 
 				return material;
 				return material;
+
 			}
 			}
 
 
 			function onDocumentMouseDown( event ) {
 			function onDocumentMouseDown( event ) {

+ 34 - 25
examples/geometry_terrain.html → examples/canvas_geometry_terrain.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - terrain</title>
+		<title>three.js canvas - geometry - terrain</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -33,12 +33,14 @@
 		<div id="container"><br /><br /><br /><br /><br />Generating...</div> 
 		<div id="container"><br /><br /><br /><br /><br />Generating...</div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div> 
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
 			var container, stats;
 			var container, stats;
@@ -53,10 +55,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -103,23 +103,6 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function loop() {
-
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
-
-				renderer.render(scene, camera);
-				stats.update();
-
-			}
-
 			function generateHeight( width, height ) {
 			function generateHeight( width, height ) {
 
 
 				var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
 				var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
@@ -162,7 +145,6 @@
 				canvas = document.createElement( 'canvas' );
 				canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.width = width;
 				canvas.height = height;
 				canvas.height = height;
-				canvas.loaded = true;
 
 
 				context = canvas.getContext( '2d' );
 				context = canvas.getContext( '2d' );
 				context.fillStyle = '#000';
 				context.fillStyle = '#000';
@@ -192,6 +174,33 @@
 
 
 			}
 			}
 
 
+			function onDocumentMouseMove(event) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+
+				renderer.render( scene, camera );
+
+			}
+
 
 
 		</script>
 		</script>
 
 

+ 18 - 6
examples/interactive_cubes.html → examples/canvas_interactive_cubes.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - interactive - cubes</title>
+		<title>three.js canvas - interactive - cubes</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -17,6 +17,7 @@
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -25,7 +26,7 @@
 			var camera, scene, projector, renderer;
 			var camera, scene, projector, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -69,7 +70,7 @@
 				renderer = new THREE.CanvasRenderer();
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 
 				stats = new Stats();
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.position = 'absolute';
@@ -112,18 +113,29 @@
 				*/
 				*/
 			}
 			}
 
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var radius = 600;
 			var radius = 600;
 			var theta = 0;
 			var theta = 0;
 
 
-			function loop() {
+			function render() {
 
 
 				theta += 0.2;
 				theta += 0.2;
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 17 - 5
examples/interactive_cubes_tween.html → examples/canvas_interactive_cubes_tween.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - interactive - cubes tween</title>
+		<title>three.js canvas - interactive - cubes tween</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -18,6 +18,7 @@
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 
 		<script type="text/javascript" src="js/Tween.js"></script>
 		<script type="text/javascript" src="js/Tween.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -26,7 +27,7 @@
 			var camera, scene, projector, renderer;
 			var camera, scene, projector, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -118,10 +119,21 @@
 				*/
 				*/
 			}
 			}
 
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var radius = 600;
 			var radius = 600;
 			var theta = 0;
 			var theta = 0;
 
 
-			function loop() {
+			function render() {
 
 
 				TWEEN.update();
 				TWEEN.update();
 
 
@@ -130,8 +142,8 @@
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 17 - 6
examples/interactive_voxelpainter.html → examples/canvas_interactive_voxelpainter.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - interactive - voxel painter</title>
+		<title>three.js canvas - interactive - voxel painter</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -15,10 +15,10 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -31,7 +31,7 @@
 			theta = 45, isCtrlDown = false;
 			theta = 45, isCtrlDown = false;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -145,7 +145,7 @@
 
 
 					} else {
 					} else {
 
 
-						var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
+						var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
 
 
 						var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
 						var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
 						voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
 						voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
@@ -186,7 +186,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				if ( isShiftDown ) {
 				if ( isShiftDown ) {
 
 
@@ -221,7 +232,7 @@
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 18 - 6
examples/lights_pointlights.html → examples/canvas_lights_pointlights.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - point light</title>
+		<title>three.js canvas - point light</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -38,8 +38,10 @@
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
@@ -49,7 +51,7 @@
 			mesh;
 			mesh;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -93,7 +95,17 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -123,7 +135,7 @@
 				light3.position.y = particle3.position.y;
 				light3.position.y = particle3.position.y;
 				light3.position.z = particle3.position.z;
 				light3.position.z = particle3.position.z;
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 18 - 6
examples/lights_pointlights_smooth.html → examples/canvas_lights_pointlights_smooth.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - point light</title>
+		<title>three.js canvas - point light smooth</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -38,8 +38,10 @@
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
@@ -49,7 +51,7 @@
 			geometry, mesh;
 			geometry, mesh;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -96,7 +98,17 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -126,7 +138,7 @@
 				light3.position.y = particle3.position.y;
 				light3.position.y = particle3.position.y;
 				light3.position.z = particle3.position.z;
 				light3.position.z = particle3.position.z;
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 20 - 17
examples/lines_test.html → examples/canvas_lines.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - lines - random</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -18,7 +18,9 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
@@ -31,12 +33,10 @@
 			AMOUNTX = 10,
 			AMOUNTX = 10,
 			AMOUNTY = 10,
 			AMOUNTY = 10,
 
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -80,13 +80,6 @@
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 				scene.addObject( line );
 				scene.addObject( line );
 
 
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -108,7 +101,9 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			function onDocumentTouchMove( event ) {
 			function onDocumentTouchMove( event ) {
@@ -119,20 +114,28 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
-				// stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 22 - 19
examples/lines_sphere.html → examples/canvas_lines_sphere.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - lines - sphere</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -18,7 +18,9 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
@@ -34,12 +36,10 @@
 			AMOUNTX = 10,
 			AMOUNTX = 10,
 			AMOUNTY = 10,
 			AMOUNTY = 10,
 
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 
 			init();
 			init();
-			setInterval(loop, 1000 / 60);
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -92,16 +92,9 @@
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 
 
 					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
 					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
-					scene.addObject(line);
+					scene.addObject( line );
 				}
 				}
 
 
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -117,37 +110,47 @@
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
 
 
-				if(event.touches.length > 1) {
+				if ( event.touches.length > 1 ) {
 
 
 					event.preventDefault();
 					event.preventDefault();
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			function onDocumentTouchMove( event ) {
 			function onDocumentTouchMove( event ) {
 
 
-				if(event.touches.length == 1) {
+				if ( event.touches.length == 1 ) {
 
 
 					event.preventDefault();
 					event.preventDefault();
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				// stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 14 - 7
examples/materials.html → examples/canvas_materials.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials</title>
+		<title>three.js canvas - materials</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -15,10 +15,10 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -29,8 +29,7 @@
 			var particleLight, pointLight;
 			var particleLight, pointLight;
 
 
 			init();
 			init();
-			// loop();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -163,7 +162,7 @@
 				var image = document.createElement( 'img' );
 				var image = document.createElement( 'img' );
 				var texture = new THREE.Texture( image, THREE.UVMapping )
 				var texture = new THREE.Texture( image, THREE.UVMapping )
 
 
-				image.onload = function () { texture.loaded = true; };
+				image.onload = function () { texture.needsUpdate = true; };
 				image.src = path;
 				image.src = path;
 
 
 				return texture;
 				return texture;
@@ -172,7 +171,16 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 				var timer = new Date().getTime() * 0.0001;
 
 
@@ -198,7 +206,6 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 17 - 11
examples/materials_depth.html → examples/canvas_materials_depth.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - depth material</title>
+		<title>three.js canvas - depth material</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -15,10 +15,10 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -55,8 +55,7 @@
 			var debugContext;
 			var debugContext;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-			// loop();
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -129,7 +128,6 @@
 				scene.addLight( pointLight );
 				scene.addLight( pointLight );
 
 
 				renderer = new THREE.CanvasRenderer();
 				renderer = new THREE.CanvasRenderer();
-				// renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
@@ -196,7 +194,16 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
 				if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
 				if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
 				if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
@@ -216,14 +223,14 @@
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
 
-				debugContext.clearRect( -256, -256, 512, 512 );
+				debugContext.clearRect( - 256, - 256, 512, 512 );
 
 
 				debugContext.beginPath();
 				debugContext.beginPath();
 
 
 				// center
 				// center
-				debugContext.moveTo( -10, 0 );
+				debugContext.moveTo( - 10, 0 );
 				debugContext.lineTo( 10, 0 );
 				debugContext.lineTo( 10, 0 );
-				debugContext.moveTo( 0, -10 );
+				debugContext.moveTo( 0, - 10 );
 				debugContext.lineTo( 0, 10 );
 				debugContext.lineTo( 0, 10 );
 
 
 				// camera
 				// camera
@@ -249,9 +256,8 @@
 				debugContext.closePath();
 				debugContext.closePath();
 				debugContext.stroke();
 				debugContext.stroke();
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 15 - 5
examples/materials_normal.html → examples/canvas_materials_normal.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - normal material</title>
+		<title>three.js canvas - normal material</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -41,13 +41,15 @@
 		<script type="text/javascript" src="../build/Three.js"></script> 
 		<script type="text/javascript" src="../build/Three.js"></script> 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
 			var camera, scene, renderer,
 			var camera, scene, renderer,
 			object;
 			object;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,20 +66,28 @@
 				scene.addObject( object );
 				scene.addObject( object );
 
 
 				renderer = new THREE.CanvasRenderer();
 				renderer = new THREE.CanvasRenderer();
-				//renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
 
 
 				object.rotation.x -= 0.005;
 				object.rotation.x -= 0.005;
 				object.rotation.y -= 0.01;
 				object.rotation.y -= 0.01;
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 16 - 4
examples/materials_reflection.html → examples/canvas_materials_reflection.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - spherical reflection</title>
+		<title>three.js canvas - spherical reflection</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -42,6 +42,8 @@
 
 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
 			var camera, scene, renderer,
 			var camera, scene, renderer,
@@ -50,7 +52,7 @@
 			geometry, mesh;
 			geometry, mesh;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -74,13 +76,23 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
 
 
 				mesh.rotation.y -= 0.01;
 				mesh.rotation.y -= 0.01;
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 55 - 36
examples/materials_video.html → examples/canvas_materials_video.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - video</title>
+		<title>three.js canvas - materials - video</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -15,11 +15,12 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<video id="video" autoplay style="display:none">
 		<video id="video" autoplay style="display:none">
 			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
@@ -33,8 +34,9 @@
 
 
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 
 
-			var video, texture, textureContext,
-			textureReflection, textureReflectionContext, textureReflectionGradient;
+			var video, image, imageContext,
+			imageReflection, imageReflectionContext, imageReflectionGradient,
+			texture, textureReflection;
 
 
 			var mesh;
 			var mesh;
 
 
@@ -44,12 +46,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -73,33 +71,37 @@
 
 
 				// 
 				// 
 
 
-				texture = document.createElement( 'canvas' );
-				texture.loaded = true;
-				texture.width = 480;
-				texture.height = 204;
+				image = document.createElement( 'canvas' );
+				image.width = 480;
+				image.height = 204;
 
 
-				textureContext = texture.getContext( '2d' );
-				textureContext.fillStyle = '#000000';
-				textureContext.fillRect( 0, 0, 480, 204 );
+				imageContext = image.getContext( '2d' );
+				imageContext.fillStyle = '#000000';
+				imageContext.fillRect( 0, 0, 480, 204 );
 
 
-				var map = new THREE.Texture( texture );
+				texture = new THREE.Texture( image );
+				texture.min_filter = THREE.LinearFilter;
+				texture.mag_filter = THREE.LinearFilter;
 
 
-				var material = new THREE.MeshBasicMaterial( { map: map } );
+				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 
-				textureReflection = document.createElement( 'canvas' );
-				textureReflection.loaded = true;
-				textureReflection.width = 480;
-				textureReflection.height = 204;
+				imageReflection = document.createElement( 'canvas' );
+				imageReflection.width = 480;
+				imageReflection.height = 204;
 
 
-				textureReflectionContext = textureReflection.getContext( '2d' );
-				textureReflectionContext.fillStyle = '#000000';
-				textureReflectionContext.fillRect( 0, 0, 480, 204 );
+				imageReflectionContext = imageReflection.getContext( '2d' );
+				imageReflectionContext.fillStyle = '#000000';
+				imageReflectionContext.fillRect( 0, 0, 480, 204 );
 
 
-				textureReflectionGradient = textureReflectionContext.createLinearGradient( 0, 0, 0, 204 );
-				textureReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
-				textureReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
+				imageReflectionGradient = imageReflectionContext.createLinearGradient( 0, 0, 0, 204 );
+				imageReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
+				imageReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
 
 
-				var materialReflection = new THREE.MeshBasicMaterial( { map: new THREE.Texture( textureReflection ) } );
+				textureReflection = new THREE.Texture( imageReflection );
+				textureReflection.min_filter = THREE.LinearFilter;
+				textureReflection.mag_filter = THREE.LinearFilter;
+				
+				var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection } );
 
 
 				//
 				//
 
 
@@ -135,6 +137,7 @@
 						particle.position.y = -153
 						particle.position.y = -153
 						particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );
 						particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );
 						scene.addObject( particle );
 						scene.addObject( particle );
+
 					}
 					}
 				}
 				}
 
 
@@ -148,6 +151,8 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
 			}
 			}
 
 
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
@@ -157,22 +162,36 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 
 
-					textureContext.drawImage( video, 0, 0 );
+					imageContext.drawImage( video, 0, 0 );
+					
+					if ( texture ) texture.needsUpdate = true;
+					if ( textureReflection ) textureReflection.needsUpdate = true;
+
 				}
 				}
 
 
-				textureReflectionContext.drawImage( texture, 0, 0 );
-				textureReflectionContext.fillStyle = textureReflectionGradient;
-				textureReflectionContext.fillRect( 0, 0, 480, 204 );
+				imageReflectionContext.drawImage( image, 0, 0 );
+				imageReflectionContext.fillStyle = imageReflectionGradient;
+				imageReflectionContext.fillRect( 0, 0, 480, 204 );
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 14 - 4
examples/particles_floor.html → examples/canvas_particles_floor.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - particles - floor</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -19,6 +19,8 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -35,7 +37,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -106,14 +108,22 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 15 - 6
examples/particles_random.html → examples/canvas_particles_random.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - random</title>
+		<title>three.js canvas - particles - random</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -20,6 +20,7 @@
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -32,12 +33,12 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 1000;
 				camera.position.z = 1000;
@@ -100,14 +101,22 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 21 - 8
examples/particles_sprites.html → examples/canvas_particles_sprites.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - sprites</title>
+		<title>three.js canvas - particles - sprites</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -19,8 +19,10 @@
 	<body>
 	<body>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="js/Tween.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
+		<script type="text/javascript" src="js/Tween.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
@@ -32,12 +34,12 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 				camera.position.z = 1000;
@@ -76,7 +78,6 @@
 				var canvas = document.createElement( 'canvas' );
 				var canvas = document.createElement( 'canvas' );
 				canvas.width = 16;
 				canvas.width = 16;
 				canvas.height = 16;
 				canvas.height = 16;
-				canvas.loaded = true;
 
 
 				var context = canvas.getContext( '2d' );
 				var context = canvas.getContext( '2d' );
 				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
@@ -136,7 +137,9 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			function onDocumentTouchMove( event ) {
 			function onDocumentTouchMove( event ) {
@@ -147,12 +150,23 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 				}
+
 			}
 			}
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				TWEEN.update();
 				TWEEN.update();
 
 
@@ -161,7 +175,6 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 14 - 5
examples/particles_waves.html → examples/canvas_particles_waves.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - waves</title>
+		<title>three.js canvas - particles - waves</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
 		<style type="text/css">
@@ -18,6 +18,8 @@
 	</head>
 	</head>
 	<body>
 	<body>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -35,7 +37,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval(loop, 1000 / 60);
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -116,7 +118,16 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -136,8 +147,6 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
-
 				count += 0.1;
 				count += 0.1;
 
 
 			}
 			}

+ 215 - 0
examples/canvas_performance.html

@@ -0,0 +1,215 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js canvas - performance</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				font-family: Monospace;
+				background-color: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var sphere, plane;
+
+			var targetRotation = 0;
+			var targetRotationOnMouseDown = 0;
+
+			var mouseX = 0;
+			var mouseXOnMouseDown = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 1000;
+				camera.position.y = 1000;
+				camera.position.z = 1000;
+
+				scene = new THREE.Scene();
+
+				// Grid
+
+				var geometry = new THREE.Geometry();
+				geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
+				geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
+
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
+
+				for ( var i = 0; i <= 10; i ++ ) {
+
+					var line = new THREE.Line( geometry, material );
+					line.position.z = ( i * 100 ) - 500;
+					scene.addObject( line );
+
+					var line = new THREE.Line( geometry, material );
+					line.position.x = ( i * 100 ) - 500;
+					line.rotation.y = 90 * Math.PI / 180;
+					scene.addObject( line );
+
+				}
+
+				// Spheres
+
+				geometry = new Sphere( 100, 26, 18 );
+				material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, opacity: 1 } );
+
+				for ( var i = 0; i < 20; i ++ ) {
+
+					sphere = new THREE.Mesh( geometry, material );
+					sphere.overdraw = true;
+
+					sphere.position.x = ( i % 5 ) * 200 - 400;
+					sphere.position.z = Math.floor( i / 5 ) * 200 - 400;
+
+					scene.addObject( sphere );
+
+				}
+
+				// Lights
+
+				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
+				scene.addLight( ambientLight );
+
+				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
+				directionalLight.position.x = 0;
+				directionalLight.position.y = 1;
+				directionalLight.position.z = 0;
+				scene.addLight( directionalLight );
+
+				var pointLight = new THREE.PointLight( 0xff0000, 1 );
+				scene.addLight( pointLight );
+
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild(stats.domElement);
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 46 - 17
examples/canvasrenderer_sandbox.html → examples/canvas_sandbox.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - sphere</title>
+		<title>three.js canvas - sandbox</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -25,21 +25,23 @@
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
@@ -52,28 +54,47 @@
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -105,7 +126,7 @@
 			var debugContext;
 			var debugContext;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -145,7 +166,7 @@
 				objects = [];
 				objects = [];
 
 
 				geometry = new Sphere( 100, 16, 8 );
 				geometry = new Sphere( 100, 16, 8 );
-				material = new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } );
+				material = new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } );
 
 
 				for ( var i = 0; i < 10; i ++ ) {
 				for ( var i = 0; i < 10; i ++ ) {
 
 
@@ -250,7 +271,16 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				if ( moveForward ) camera.position.z -= 5;
 				if ( moveForward ) camera.position.z -= 5;
 				if ( moveBackwards ) camera.position.z += 5;
 				if ( moveBackwards ) camera.position.z += 5;
@@ -304,9 +334,8 @@
 				debugContext.closePath();
 				debugContext.closePath();
 				debugContext.stroke();
 				debugContext.stroke();
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 0 - 216
examples/hdr.html

@@ -1,216 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en">
-    <head>
-        <title>three.js - materials - HDR texture - webgl</title>
-        <meta charset="utf-8">
-        <style type="text/css">
-            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;
-				
-            }
-
-            a { color: red; }
-
-        </style>
-    </head>
-    <body>
-
-        <div id="container"></div>
-        <div id="info">
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl HDR texture example -
-			based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
-		</div>
-
-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>
-        <script type="text/javascript" src="js/Stats.js"></script>
-
-		
-		<!-- HDR fragment shader -->
-		<script id="fs-hdr" type="x-shader/x-fragment">
-		uniform sampler2D   tDiffuse;
-		uniform float       exposure;
-		uniform float       brightMax;
-		
-		varying vec2  vUv;
-		 
-		vec3 decode_pnghdr( const in vec4 color ) {
-		
-			// remove gamma correction
-			vec4 res = color * color;
-			
-			// decoded RI
-			float ri = pow( 2.0, res.w * 32.0 - 16.0 );
-			
-			// decoded HDR pixel
-			res.xyz = res.xyz * ri;
-			return res.xyz;
-			
-		}
-		 
-		void main(void)
-		{
-			vec4 color = texture2D( tDiffuse, vUv );
-			color.xyz  = decode_pnghdr( color );
-			
-			// apply gamma correction and exposure
-			//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
-			
-			// Perform tone-mapping
-			float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
-			float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
-			color *= YD;
-			
-			gl_FragColor = vec4( color.xyz, 1.0 );
-		}
-		</script>
-		
-		<!-- HDR vertex shader -->
-		<script id="vs-hdr" type="x-shader/x-vertex">
-		varying vec2 vUv;
-		 
-		void main(void)
-		{
-			vUv  = uv;
-			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-		}		
-		</script>
-		
-
-        <script type="text/javascript">
-
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-
-            var container, stats;
-
-            var camera, scene, renderer, mesh, directionalLight;
-			
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-			
-            var materialHDR, quad;
-
-            init();
-            setInterval( loop, 1000 / 60 );
-
-            function init() {
-
-                container = document.getElementById( 'container' );
-
-				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 900;
-
-                scene = new THREE.Scene();
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.x = 0;
-				directionalLight.position.y = 0;
-				directionalLight.position.z = 1;
-				directionalLight.position.normalize();
-				scene.addLight( directionalLight );
-
-				var texture = ImageUtils.loadTexture( "textures/memorial.png" );
-				texture.min_filter = THREE.LinearFilter;
-				texture.mag_filter = THREE.NearestFilter;
-				
-                materialHDR = new THREE.MeshShaderMaterial( {
-
-                    uniforms: { tDiffuse:  { type: "t", value: 0, texture: texture },
-								exposure:  { type: "f", value: 0.125 },
-								brightMax: { type: "f", value: 0.5 }
-							  },
-                    vertex_shader: getText( 'vs-hdr' ),
-                    fragment_shader: getText( 'fs-hdr' )
-
-                } );
-
-				var plane = new Plane( 512, 768 );				
-
-                quad = new THREE.Mesh( plane, materialHDR );
-				quad.position.z = -100;
-                scene.addObject( quad );
-
-                renderer = new THREE.WebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-                container.appendChild( renderer.domElement );
-				
-                stats = new Stats();
-                stats.domElement.style.position = 'absolute';
-                stats.domElement.style.top = '0px';
-                container.appendChild( stats.domElement );
-
-            }
-
-			function getText( id ) {
-				
-				return document.getElementById( id ).textContent;
-			}
-			
-			var delta, current, old = 0, sign = 1, rate = 1;
-			
-            function loop() {
-
-				if ( ! old ) old = new Date().getTime();
-				current = new Date().getTime();
-				delta = (current  - old ) * 0.005;
-				old = current;
-				
-				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
-				
-					rate = 0.25;
-					
-				} else {
-				
-					rate = 1;
-					
-				}
-				
-				
-				if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
-				
-					sign *= -1;
-					
-				}				
-				
-
-				materialHDR.uniforms.exposure.value += sign * rate * delta;
-				
-				// Render final scene to the screen with film shader
-
-				renderer.render( scene, camera );
-
-                stats.update();
-
-            }
-			
-			function is_browser_compatible() {
-
-				// WebGL support
-
-				try { var test = new Float32Array(1); } catch(e) { return false; }
-
-				// Web workers
-
-				return !!window.Worker;
-
-			}
-			
-
-        </script>
-
-    </body>
-</html>

+ 143 - 0
examples/js/CameraControl.js

@@ -0,0 +1,143 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author alteredq / http://alteredqualia.com/
+ * @author paulirish / http://paulirish.com/
+ */
+
+function bind( scope, fn ) {
+	return function () {
+		fn.apply( scope, arguments );
+	};
+}
+
+CameraControlWASD = function ( camera, movement_speed, look_speed, nofly, look_vertical ) {
+
+	this.movement_speed = movement_speed !== undefined ? movement_speed : 1.0;
+	this.look_speed = look_speed !== undefined ? look_speed : 0.005;
+
+	this.nofly = nofly;
+	this.look_vertical = look_vertical;
+	
+	this.camera = camera;
+	
+	this.mouseX = 0;
+	this.mouseY = 0;
+	
+	this.lat = 0;
+	this.lon = 0;
+	this.phy = 0;
+	this.theta = 0;
+	
+	this.moveForward = false;
+	this.moveBackward = false;
+	this.moveLeft = false;
+	this.moveRight = false;
+	
+	this.windowHalfX = window.innerWidth / 2;
+	this.windowHalfY = window.innerHeight / 2;
+
+	this.onDocumentMouseDown = function ( event ) {
+		
+		event.preventDefault();
+		event.stopPropagation();
+
+		switch ( event.button ) {
+
+			case 0: this.moveForward = true; break;
+			case 2: this.moveBackward = true; break;
+
+		}
+
+	};
+
+	this.onDocumentMouseUp = function ( event ) {
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		switch ( event.button ) {
+
+			case 0: this.moveForward = false; break;
+			case 2: this.moveBackward = false; break;
+
+		}
+
+	};
+
+	this.onDocumentMouseMove = function (event) {
+
+		this.mouseX = event.clientX - this.windowHalfX;
+		this.mouseY = event.clientY - this.windowHalfY;
+
+	};
+	
+	this.onDocumentKeyDown = function ( event ) {
+
+		switch( event.keyCode ) {
+
+			case 38: /*up*/
+			case 87: /*W*/ this.moveForward = true; break;
+
+			case 37: /*left*/
+			case 65: /*A*/ this.moveLeft = true; break;
+
+			case 40: /*down*/
+			case 83: /*S*/ this.moveBackward = true; break;
+
+			case 39: /*right*/
+			case 68: /*D*/ this.moveRight = true; break;
+
+		}
+
+	};
+
+	this.onDocumentKeyUp = function ( event ) {
+
+		switch( event.keyCode ) {
+
+			case 38: /*up*/
+			case 87: /*W*/ this.moveForward = false; break;
+
+			case 37: /*left*/
+			case 65: /*A*/ this.moveLeft = false; break;
+
+			case 40: /*down*/
+			case 83: /*S*/ this.moveBackward = false; break;
+
+			case 39: /*right*/
+			case 68: /*D*/ this.moveRight = false; break;
+
+		}
+
+	};
+	
+	this.update = function() {
+	
+		if ( this.moveForward )  this.camera.translateZ( - this.movement_speed, this.nofly );
+		if ( this.moveBackward ) this.camera.translateZ(   this.movement_speed, this.nofly  );
+		if ( this.moveLeft )     this.camera.translateX( - this.movement_speed, this.nofly  );
+		if ( this.moveRight )    this.camera.translateX(   this.movement_speed, this.nofly  );
+
+		this.lon += this.mouseX * this.look_speed;
+		if( this.look_vertical ) this.lat -= this.mouseY * this.look_speed;
+
+		this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
+		this.phi = ( 90 - this.lat ) * Math.PI / 180;
+		this.theta = this.lon * Math.PI / 180;
+
+		this.camera.target.position.x = 100 * Math.sin( this.phi ) * Math.cos( this.theta ) + this.camera.position.x;
+		this.camera.target.position.y = 100 * Math.cos( this.phi ) + this.camera.position.y;
+		this.camera.target.position.z = 100 * Math.sin( this.phi ) * Math.sin( this.theta ) + this.camera.position.z;
+		
+	};
+	
+	
+	document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
+	
+	document.addEventListener( 'mousemove', bind( this, this.onDocumentMouseMove ), false );
+	document.addEventListener( 'mousedown', bind( this, this.onDocumentMouseDown ), false );
+	document.addEventListener( 'mouseup', bind( this, this.onDocumentMouseUp ), false );
+	document.addEventListener( 'keydown', bind( this, this.onDocumentKeyDown ), false );
+	document.addEventListener( 'keyup', bind( this, this.onDocumentKeyUp ), false );
+	
+};

+ 23 - 23
src/extras/Detector.js → examples/js/Detector.js

@@ -1,48 +1,48 @@
 /**
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author alteredq / http://alteredqualia.com/
  */
  */
- 
-THREE.Detector = {
-	
+
+Detector = {
+
 	// supported features
 	// supported features
-	
-	canvas	: !!window.CanvasRenderingContext2D, // !!document.createElement( 'canvas' ).getContext,
-	webgl	: !!window.WebGLRenderingContext, // window.Uint8Array != undefined,
+
+	canvas	: !!window.CanvasRenderingContext2D,
+	webgl	: !!window.WebGLRenderingContext,
 	workers : !!window.Worker,
 	workers : !!window.Worker,
-	
+
 	// helper methods
 	// helper methods
-	
+
 	addGetWebGLMessage: function( parameters ) {
 	addGetWebGLMessage: function( parameters ) {
-		
+
 		var parent = document.body,
 		var parent = document.body,
 			id = "oldie" ;
 			id = "oldie" ;
-		
+
 		if ( parameters ) {
 		if ( parameters ) {
-			
+
 			if ( parameters.parent !== undefined ) parent  = parameters.parent;
 			if ( parameters.parent !== undefined ) parent  = parameters.parent;
 			if ( parameters.id !== undefined ) id  = parameters.id;
 			if ( parameters.id !== undefined ) id  = parameters.id;
-			
+
 		}
 		}
-		
+
 		var html = [
 		var html = [
-		
+
 		'Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>',
 		'Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>',
 		'<br/>',
 		'<br/>',
-		'Please try in',
+		'Please try with',
 		'<a href="http://www.google.com/chrome">Chrome 9+</a> /',
 		'<a href="http://www.google.com/chrome">Chrome 9+</a> /',
 		'<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /',
 		'<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /',
 		'<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>'
 		'<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>'
-		
+
 		].join("\n");
 		].join("\n");
-		
+
 		var wrap = document.createElement( "center" ),
 		var wrap = document.createElement( "center" ),
 			message = document.createElement( "div" );
 			message = document.createElement( "div" );
-		
+
 		message.innerHTML = html;
 		message.innerHTML = html;
 		message.id = id;
 		message.id = id;
-		
+
 		var style = message.style;
 		var style = message.style;
-		
+
 		style.fontFamily = "monospace";
 		style.fontFamily = "monospace";
 		style.fontSize = "13px";
 		style.fontSize = "13px";
 		style.textAlign = "center";
 		style.textAlign = "center";
@@ -51,12 +51,12 @@ THREE.Detector = {
 		style.padding = "1em";
 		style.padding = "1em";
 		style.width = "475px";
 		style.width = "475px";
 		style.margin = "5em auto 0";
 		style.margin = "5em auto 0";
-		
+
 		wrap.appendChild( message )
 		wrap.appendChild( message )
 		parent.appendChild( wrap );
 		parent.appendChild( wrap );
-		
+
 		return message;
 		return message;
 
 
 	}
 	}
-	
+
 };
 };

+ 22 - 0
examples/js/RequestAnimationFrame.js

@@ -0,0 +1,22 @@
+/**
+ * Provides requestAnimationFrame in a cross browser way.
+ * @author paulirish / http://paulirish.com/
+ */
+
+if ( !window.requestAnimationFrame ) {
+
+	window.requestAnimationFrame = ( function() {
+
+		return window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
+		window.oRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+
+			window.setTimeout( callback, 1000 / 60 );
+
+		};
+
+	} )();
+
+}

+ 115 - 0
examples/js/ShaderExtras.js

@@ -0,0 +1,115 @@
+var ShaderExtras = {
+
+	/* -------------------------------------------------------------------------
+	//	Depth-of-field shader with bokeh
+	//	ported from GLSL shader by Martins Upitis 
+	//	http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
+	 ------------------------------------------------------------------------- */
+	
+	'bokeh'	: {
+
+	uniforms: { tColor:   { type: "t", value: 0, texture: null },
+				tDepth:   { type: "t", value: 1, texture: null },
+				focus:    { type: "f", value: 1.0 },
+				aspect:   { type: "f", value: 1.0 },
+				aperture: { type: "f", value: 0.025 },
+				maxblur:  { type: "f", value: 1.0 },
+			  },
+
+	vertex_shader: [
+
+	"varying vec2 vUv;",
+
+	"void main() {",
+		
+		"vUv = vec2( uv.x, 1.0 - uv.y );",
+		"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		
+	"}"
+
+	].join("\n"),
+
+	fragment_shader: [
+
+	"varying vec2 vUv;",
+	
+	"uniform sampler2D tColor;",
+	"uniform sampler2D tDepth;",
+
+	"uniform float maxblur;",  	// max blur amount
+	"uniform float aperture;",	// aperture - bigger values for shallower depth of field
+	
+	"uniform float focus;",
+	"uniform float aspect;",
+	
+	"void main() {",
+
+	"vec2 aspectcorrect = vec2( 1.0, aspect );",
+
+	"vec4 depth1 = texture2D( tDepth, vUv );",
+
+	"float factor = depth1.x - focus;",
+ 
+	"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
+	
+	"vec2 dofblur9 = dofblur * 0.9;",
+	"vec2 dofblur7 = dofblur * 0.7;",
+	"vec2 dofblur4 = dofblur * 0.4;",
+
+	"vec4 col = vec4( 0.0 );",
+
+	"col += texture2D( tColor, vUv.xy );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur );",
+
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",		
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",		
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",		
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",	
+
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur7 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur7 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur7 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur7 );",
+		 
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur4 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",
+	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",	
+	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur4 );",
+
+	"gl_FragColor = col / 41.0;",
+	"gl_FragColor.a = 1.0;",
+	
+	"}"
+	
+	].join("\n")	
+	
+}
+
+};

+ 170 - 0
examples/js/gui/gui.css

@@ -0,0 +1,170 @@
+#guidat { 
+	position: fixed;
+	top: 0; 
+	right: 0;
+	width: auto;
+	z-index: 1001;
+	text-align: right;
+}
+
+.guidat { 
+	color: #fff;
+	opacity: 0.97;
+	text-align: left;
+	float: right;
+	margin-right: 20px;
+	margin-bottom: 20px;
+	background-color: #fff;
+}
+
+.guidat,
+.guidat input { 
+	font: 9.5px Lucida Grande, sans-serif;
+}
+
+.guidat-controllers { 
+	height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	background-color: rgba(0,0,0,0.1);
+	/*
+	-moz-transition: height .2s ease-out;
+	-webkit-transition: height .2s ease-out;
+	transition: height .2s ease-out;
+	*/
+}
+
+a.guidat-toggle { 
+	text-decoration: none;
+	cursor: pointer;
+	color: #fff;
+	background-color: #222;
+	text-align: center;
+	display: block;
+	padding: 5px;
+
+}
+
+a.guidat-toggle:hover { 
+	background-color: #000;
+}
+
+.guidat-controller { 
+	padding: 3px;
+	height: 25px;
+	clear: left;
+	border-bottom: 1px solid #222;
+	background-color: #111;
+}
+
+.guidat-controller,
+.guidat-controller input,
+.guidat-slider-bg,
+.guidat-slider-fg { 
+	-moz-transition: background-color 0.15s linear;
+	-webkit-transition: background-color 0.15s linear;
+	transition: background-color 0.15s linear;
+}
+
+.guidat-controller.boolean:hover,
+.guidat-controller.function:hover {
+	background-color: #000;
+}
+
+.guidat-controller input { 
+	float: right;
+	outline: none;
+	border: 0;
+	padding: 4px;
+	margin-top: 2px;
+	background-color: #222;
+}
+
+
+.guidat-controller select {
+	margin-top: 4px;
+	float: right;
+}
+
+.guidat-controller input:hover { 
+	background-color: #444;
+}
+
+.guidat-controller input:focus { 
+	background-color: #555;
+}
+
+.guidat-controller.number { 
+	border-left: 5px solid #00aeff ;
+}
+
+.guidat-controller.string { 
+	border-left: 5px solid #1ed36f;
+}
+
+.guidat-controller.string input { 
+	border: 0;
+	color: #1ed36f;
+	margin-right: 2px;
+	width: 148px;
+}
+
+.guidat-controller.boolean { 
+	border-left: 5px solid #54396e;
+}
+
+.guidat-controller.function { 
+	border-left: 5px solid #e61d5f;
+}
+
+.guidat-controller.number input[type=text] {
+	width: 35px;
+	margin-left: 5px;
+	margin-right: 2px;
+	color: #00aeff;
+}
+
+.guidat .guidat-controller.boolean input { 
+	margin-top: 6px;
+	margin-right: 2px;
+	font-size: 20px;
+}
+
+.guidat-controller:last-child {
+	border-bottom: none;
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.guidat-propertyname { 
+	padding: 5px;
+	padding-top: 7px;
+	cursor: default;
+	display: inline-block;
+}
+
+
+.guidat-slider-bg:hover,
+.guidat-slider-bg.active {
+	background-color: #444;
+}
+
+.guidat-slider-bg:hover .guidat-slider-fg, 
+.guidat-slider-bg.active .guidat-slider-fg { 
+	background-color: #52c8ff;
+}
+
+.guidat-slider-bg { 
+	background-color: #222;
+	cursor: ew-resize;
+	width: 40%;
+	margin-top: 2px;
+	float: right;
+	height: 21px;
+}
+
+.guidat-slider-fg { 
+	background-color: #00aeff;
+	height: 20px;
+}

+ 1051 - 0
examples/js/gui/gui.full.js

@@ -0,0 +1,1051 @@
+var GUI = function() {
+
+	var _this = this;
+	
+	var MIN_WIDTH = 240;
+	var MAX_WIDTH = 500;
+	
+	var controllers = [];
+	var listening = [];
+	
+	var autoListen = true;
+	
+	var listenInterval;
+	
+	// Sum total of heights of controllers in this gui
+	var controllerHeight;
+	
+	var curControllerContainerHeight = 0;
+	
+	var _this = this;
+	
+	var open = false;
+	var width = 280;
+	
+	// Prevents checkForOverflow bug in which loaded gui appearance
+	// settings are not respected by presence of scrollbar.
+	var explicitOpenHeight = false;
+	
+	// How big we get when we open
+	var openHeight;
+	
+	var name;
+	
+	var resizeTo = 0;
+	var resizeTimeout;
+	
+	this.domElement = document.createElement('div');
+	this.domElement.setAttribute('class', 'guidat');
+	this.domElement.style.width = width+'px';
+
+	var controllerContainer = document.createElement('div');
+	controllerContainer.setAttribute('class', 'guidat-controllers');
+	
+	// Firefox hack to prevent horizontal scrolling
+	controllerContainer.addEventListener('DOMMouseScroll', function(e) {
+		
+		var scrollAmount = this.scrollTop;
+		
+		if (e.wheelDelta) {
+			scrollAmount+=e.wheelDelta; 
+		} else if (e.detail) {
+			scrollAmount+=e.detail;
+		}
+			
+		if (e.preventDefault) {
+			e.preventDefault();
+		}
+		e.returnValue = false;
+		
+		controllerContainer.scrollTop = scrollAmount;
+		
+	}, false);
+	
+	controllerContainer.style.height = '0px';
+
+	var toggleButton = document.createElement('a');
+	toggleButton.setAttribute('class', 'guidat-toggle');
+	toggleButton.setAttribute('href', '#');
+	toggleButton.innerHTML = "Show Controls";
+	
+	var toggleDragged = false;
+	var dragDisplacementY = 0;
+	var togglePressed = false;
+	
+	var my, pmy, mx, pmx;
+	
+	var resize = function(e) {
+		pmy = my;
+		pmx = mx;
+		my = e.pageY;
+		mx = e.pageX;
+		
+		var dmy = my - pmy;
+				
+		if (!open) { 
+			if (dmy > 0) {
+				open = true;
+				curControllerContainerHeight = openHeight = 1;
+				toggleButton.innerHTML = name || "Hide Controls";
+			} else {
+				return;
+			}
+		}
+		
+		// TODO: Flip this if you want to resize to the left.
+		var dmx = pmx - mx;
+		
+		if (dmy > 0 && 
+			curControllerContainerHeight > controllerHeight) {
+			var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
+			dmy *= d;
+		}
+		
+		toggleDragged = true;
+		dragDisplacementY += dmy;
+		dragDisplacementX += dmx;
+		openHeight += dmy;
+		width += dmx;
+		curControllerContainerHeight += dmy;
+		controllerContainer.style.height = openHeight+'px';
+		width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
+		_this.domElement.style.width = width+'px';
+		checkForOverflow();
+	};
+	
+	toggleButton.addEventListener('mousedown', function(e) {
+		pmy = my = e.pageY;
+		pmx = mx = e.pageX;
+		togglePressed = true;
+		e.preventDefault();
+		dragDisplacementY = 0;
+		dragDisplacementX = 0;
+		document.addEventListener('mousemove', resize, false);
+		return false;
+
+	}, false);
+	
+	
+	toggleButton.addEventListener('click', function(e) {
+		e.preventDefault();
+		return false;
+	}, false);
+	
+	
+	document.addEventListener('mouseup', function(e) {
+		
+		if (togglePressed && !toggleDragged) {
+			
+			_this.toggle();
+
+			// Clears lingering slider column
+			_this.domElement.style.width = (width+1)+'px';
+			setTimeout(function() {
+				_this.domElement.style.width = width+'px';
+			}, 1);
+		}
+		
+		if (togglePressed && toggleDragged) {
+		
+			if (dragDisplacementX == 0) {
+			
+				// Clears lingering slider column
+				_this.domElement.style.width = (width+1)+'px';
+				setTimeout(function() {
+					_this.domElement.style.width = width+'px';
+				}, 1);
+	
+			}
+		
+			if (openHeight > controllerHeight) {
+			
+				clearTimeout(resizeTimeout);
+				openHeight = resizeTo = controllerHeight;
+				beginResize();
+				
+			} else if (controllerContainer.children.length >= 1) {
+
+				var singleControllerHeight = controllerContainer.children[0].offsetHeight;			
+				clearTimeout(resizeTimeout);
+				var target = Math.round(curControllerContainerHeight/singleControllerHeight)*singleControllerHeight-1;
+				resizeTo = target;
+				if (resizeTo <= 0) {
+					_this.hide();
+					openHeight = singleControllerHeight*2;
+				} else { 
+					openHeight = resizeTo;		
+					beginResize();			
+				}
+			}
+			
+			
+			
+		}
+		
+		
+		document.removeEventListener('mousemove', resize, false);
+		e.preventDefault();
+		toggleDragged = false;
+		togglePressed = false;
+		
+		return false;
+
+	}, false);
+	
+	this.domElement.appendChild(controllerContainer);
+	this.domElement.appendChild(toggleButton);
+
+	if (GUI.autoPlace) {
+		if(GUI.autoPlaceContainer == null) {
+			GUI.autoPlaceContainer = document.createElement('div');
+			GUI.autoPlaceContainer.setAttribute("id", "guidat");
+			
+			document.body.appendChild(GUI.autoPlaceContainer);
+		}
+		GUI.autoPlaceContainer.appendChild(this.domElement);
+	}
+
+	this.autoListenIntervalTime = 1000/60;
+
+	var createListenInterval = function() {
+		listenInterval = setInterval(function() {
+			_this.listen();
+		}, this.autoListenIntervalTime);
+	}
+	
+	this.__defineSetter__("autoListen", function(v) {
+		autoListen = v;
+		if (!autoListen) {
+			clearInterval(listenInterval);
+		} else { 
+			if (listening.length > 0) createListenInterval();
+		}
+	});
+	
+	this.__defineGetter__("autoListen", function(v) {
+		return autoListen;
+	});
+	
+	this.listenTo = function(controller) {
+	 	// TODO: check for duplicates
+	 	if (listening.length == 0) {
+	 		createListenInterval();
+	 	}
+		listening.push(controller);
+	};
+	
+	this.unlistenTo = function(controller) {
+		// TODO: test this
+		for(var i = 0; i < listening.length; i++) {
+			if(listening[i] == controller) listening.splice(i, 1);
+		}
+		if(listening.length <= 0) {
+			clearInterval(listenInterval);
+		}
+	};
+	
+	this.listen = function(whoToListenTo) {
+		var arr = whoToListenTo || listening;
+		for (var i in arr) {
+			arr[i].updateDisplay();
+		}
+	};
+	
+	this.listenAll = function() {
+		this.listen(controllers);
+	}
+	
+	this.autoListen = true;
+
+	var alreadyControlled = function(object, propertyName) {
+		for (var i in controllers) {
+			if (controllers[i].object == object &&
+				controllers[i].propertyName == propertyName) {
+				return true;
+			}
+		}
+		return false;
+	};
+
+
+	var construct = function(constructor, args) {
+		function F() {
+		    return constructor.apply(this, args);
+		}
+		F.prototype = constructor.prototype;
+		return new F();
+	};
+
+	this.add = function() {
+
+		var object = arguments[0];
+		var propertyName = arguments[1];
+
+		// Have we already added this?
+		if (alreadyControlled(object, propertyName)) {
+		//	GUI.error("Controller for \"" + propertyName+"\" already added.");
+		//	return;
+		}
+
+		var value = object[propertyName];
+
+		// Does this value exist? Is it accessible?
+		if (value == undefined) {
+			GUI.error(object + " either has no property \""+propertyName+"\", or the property is inaccessible.");
+			return;
+		}
+
+		var type = typeof value;
+		var handler = handlerTypes[type];
+
+		// Do we know how to deal with this data type?
+		if (handler == undefined) {
+			GUI.error("Cannot create controller for data type \""+type+"\"");
+			return;
+		}
+	
+		var args = [this]; // Set first arg (parent) to this 
+		for (var j = 0; j < arguments.length; j++) {
+			args.push(arguments[j]);
+		}
+	
+		var controllerObject = construct(handler, args);
+		
+		// Were we able to make the controller?
+		if (!controllerObject) {
+			GUI.error("Error creating controller for \""+propertyName+"\".");
+			return;
+		}
+
+		// Success.
+		controllerContainer.appendChild(controllerObject.domElement);
+		controllers.push(controllerObject);
+		GUI.allControllers.push(controllerObject);
+
+		// Do we have a saved value for this controller?
+		if (type != "function" && 
+			GUI.saveIndex < GUI.savedValues.length) {
+			controllerObject.setValue(GUI.savedValues[GUI.saveIndex]);
+			GUI.saveIndex++;
+		}
+	
+		// Compute sum height of controllers.
+		checkForOverflow();
+		
+		// Prevents checkForOverflow bug in which loaded gui appearance
+		// settings are not respected by presence of scrollbar.
+		if (!explicitOpenHeight) {
+			openHeight = controllerHeight;
+		}
+		
+		return controllerObject;
+		
+	}
+	
+	var checkForOverflow = function() {
+		controllerHeight = 0;
+		for (var i in controllers) {
+			controllerHeight += controllers[i].domElement.offsetHeight;
+		}
+		if (controllerHeight - 1 > openHeight) {
+			controllerContainer.style.overflowY = "auto";
+		} else {
+			controllerContainer.style.overflowY = "hidden";
+		}	
+	}
+	
+	var handlerTypes = {
+		"number": GUI.NumberController,
+		"string": GUI.StringController,
+		"boolean": GUI.BooleanController,
+		"function": GUI.FunctionController
+	};
+	
+	var alreadyControlled = function(object, propertyName) {
+		for (var i in controllers) {
+			if (controllers[i].object == object &&
+				controllers[i].propertyName == propertyName) {
+				return true;
+			}
+		}
+		return false;
+	};
+	
+	var construct = function(constructor, args) {
+        function F() {
+            return constructor.apply(this, args);
+        }
+        F.prototype = constructor.prototype;
+        return new F();
+    };
+
+	this.reset = function() {
+		// TODO
+	}
+
+	// GUI ... GUI
+	
+	this.toggle = function() {
+		open ? this.hide() : this.show();
+	};
+
+	this.show = function() {
+		toggleButton.innerHTML = name || "Hide Controls";
+		resizeTo = openHeight;
+		clearTimeout(resizeTimeout);
+		beginResize();
+		open = true;
+	}
+
+	this.hide = function() {
+		toggleButton.innerHTML = name || "Show Controls";
+		resizeTo = 0;
+		clearTimeout(resizeTimeout);
+		beginResize();
+		open = false;
+	}
+	
+	this.name = function(n) {
+		name = n;
+		toggleButton.innerHTML = n;
+	}
+	
+	// used in saveURL
+	this.appearanceVars = function() {
+		return [open, width, openHeight, controllerContainer.scrollTop]
+	}
+	
+	var beginResize = function() {
+		//console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
+		curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
+		if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
+			curControllerContainerHeight = resizeTo;
+		} else { 
+			resizeTimeout = setTimeout(beginResize, 1000/30);
+		}
+		controllerContainer.style.height = Math.round(curControllerContainerHeight)+'px';
+		checkForOverflow();
+	}
+	
+	// Load saved appearance:
+
+	if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
+
+	
+		width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
+		_this.domElement.style.width = width+"px";
+		
+		openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
+		explicitOpenHeight = true;
+		if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
+			curControllerContainerHeight = openHeight;
+			var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
+			
+			// Hack.
+			setTimeout(function() {
+				controllerContainer.scrollTop = t;
+			}, 0);
+			
+			if (GUI.scrollTop > -1) {
+				document.body.scrollTop = GUI.scrollTop;
+			}
+			resizeTo = openHeight;
+			this.show();
+		}
+
+		GUI.guiIndex++;
+	}
+
+	GUI.allGuis.push(this);
+
+};
+
+// Static members
+
+GUI.autoPlace = true;
+GUI.autoPlaceContainer = null;
+GUI.allControllers = [];
+GUI.allGuis = [];
+
+GUI.saveURL = function() { 
+	title = window.location;
+	url = GUI.replaceGetVar("saveString", GUI.getSaveString());
+	window.location = url;
+};
+
+GUI.scrollTop = -1;
+
+GUI.load = function(saveString) {
+
+	//GUI.savedAppearanceVars = [];
+	var vals = saveString.split(",");
+	var numGuis = parseInt(vals[0]);
+	GUI.scrollTop = parseInt(vals[1]);
+	for (var i = 0; i < numGuis; i++) {
+		var appr = vals.splice(2, 4);
+		GUI.savedAppearanceVars.push(appr);
+	}
+	
+	GUI.savedValues = vals.splice(2, vals.length);
+	
+};
+
+GUI.savedValues = [];
+GUI.savedAppearanceVars = [];
+
+GUI.getSaveString = function() {
+
+	var vals = [];
+	
+	vals.push(GUI.allGuis.length);
+	vals.push(document.body.scrollTop);
+	
+	
+	for (var i in GUI.allGuis) {
+		var av = GUI.allGuis[i].appearanceVars();
+		for (var j = 0; j < av.length; j++) {
+			vals.push(av[j]);
+		}
+	}	
+	
+	for (var i in GUI.allControllers) {
+	
+		// We don't save values for functions.
+		if (GUI.allControllers[i].type == "function") {
+			continue;
+		}
+		
+		var v = GUI.allControllers[i].getValue();
+		
+		// Round numbers so they don't get enormous
+		if (GUI.allControllers[i].type == "number") {
+			v = GUI.roundToDecimal(v, 4);
+		}
+		
+		vals.push(v);
+		
+	}
+	
+	return vals.join(',');
+	
+}
+
+GUI.getVarFromURL = function(v) {
+
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+
+    for (var i = 0; i < hashes.length; i++) {
+ 		hash = hashes[i].split("=")
+        if (hash == undefined) continue;
+		if (hash[0] == v) {
+			return hash[1];
+		}
+    }
+	
+	return null;
+
+};
+
+GUI.replaceGetVar = function(varName, val) {
+
+    var vars = [], hash;
+    var loc = window.location.href;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+
+    for (var i = 0; i < hashes.length; i++) {
+ 		hash = hashes[i].split("=")
+        if (hash == undefined) continue;
+		if (hash[0] == varName) {
+			return loc.replace(hash[1], val);
+		}
+    }
+	
+	if (window.location.href.indexOf('?') != -1) {
+		return loc + "&"+varName+"="+val;
+	}
+	
+	return loc+"?"+varName+"="+val;
+	
+};
+
+GUI.saveIndex = 0;
+GUI.guiIndex = 0;
+
+GUI.showSaveString = function() {
+	alert(GUI.getSaveString());
+}
+
+// Util functions
+
+GUI.makeUnselectable = function(elem) {
+	elem.onselectstart = function() { return false; };
+	elem.style.MozUserSelect = "none";
+	elem.style.KhtmlUserSelect = "none";
+	elem.unselectable = "on";
+}
+    
+GUI.makeSelectable = function(elem) {
+	elem.onselectstart = function() { };
+	elem.style.MozUserSelect = "auto";
+	elem.style.KhtmlUserSelect = "auto";
+	elem.unselectable = "off";
+}
+
+GUI.map = function(v, i1, i2, o1, o2) {
+	var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+	return v;
+}
+
+GUI.constrain = function (v, o1, o2) {
+	if (v < o1) v = o1;
+	else if (v > o2) v = o2;
+	return v;
+}
+
+GUI.error = function(str) {
+	if (typeof console.error == 'function') {
+		console.error("[GUI ERROR] " + str);
+	}
+};
+
+GUI.roundToDecimal = function(n, decimals) {
+	var t = Math.pow(10, decimals);
+	return Math.round(n*t)/t;
+}
+
+GUI.extendController = function(clazz) {
+	clazz.prototype = new GUI.Controller();
+	clazz.prototype.constructor = clazz;
+}
+
+if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));GUI.Slider = function(numberController, min, max, step, initValue) {
+	
+	var min = min;
+	var max = max;
+	var step = step;
+	
+	var clicked = false;
+	var _this = this;
+	
+	var x, px;
+	
+	this.domElement = document.createElement('div');
+	this.domElement.setAttribute('class', 'guidat-slider-bg');
+	
+	this.fg = document.createElement('div');
+	this.fg.setAttribute('class', 'guidat-slider-fg');
+	
+	this.domElement.appendChild(this.fg);
+	
+	var findPos = function(obj) {
+		var curleft = curtop = 0;
+		if (obj.offsetParent) {
+			do {
+				curleft += obj.offsetLeft;
+				curtop += obj.offsetTop;
+			} while (obj = obj.offsetParent);
+			return [curleft,curtop];
+		}
+	}
+	
+	this.__defineSetter__('value', function(e) {
+		var pct = GUI.map(e, min, max, 0, 100);
+		this.fg.style.width = pct+"%";
+	});
+
+	var onDrag = function(e) {
+		if (!clicked) return;
+		var pos = findPos(_this.domElement);
+		var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
+		val = Math.round(val/step)*step;
+		numberController.setValue(val);
+	}
+	
+	this.domElement.addEventListener('mousedown', function(e) {
+		clicked = true;
+		x = px = e.pageX;
+		_this.domElement.setAttribute('class', 'guidat-slider-bg active');
+		_this.fg.setAttribute('class', 'guidat-slider-fg active');
+		onDrag(e);
+		document.addEventListener('mouseup', mouseup, false);
+	}, false);
+	
+	
+	var mouseup = function(e) { 
+		_this.domElement.setAttribute('class', 'guidat-slider-bg');
+		_this.fg.setAttribute('class', 'guidat-slider-fg');
+		clicked = false;			
+		if (numberController.finishChangeFunction != null) {
+			numberController.finishChangeFunction.call(this, numberController.getValue());
+		}
+		document.removeEventListener('mouseup', mouseup, false);
+	};
+
+	
+	document.addEventListener('mousemove', onDrag, false);
+	
+	this.value = initValue;	
+		
+}
+GUI.Controller = function() {
+
+	this.parent = arguments[0];
+    this.object = arguments[1];
+    this.propertyName = arguments[2];
+
+	if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
+
+    this.domElement = document.createElement('div');
+    this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
+    
+    this.propertyNameElement = document.createElement('span');
+    this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
+    this.name(this.propertyName);
+    this.domElement.appendChild(this.propertyNameElement);
+    
+    GUI.makeUnselectable(this.domElement);
+    
+};
+
+GUI.Controller.prototype.changeFunction = null;
+GUI.Controller.prototype.finishChangeFunction = null;
+
+GUI.Controller.prototype.name = function(n) {
+	this.propertyNameElement.innerHTML = n;
+	return this;
+};
+
+GUI.Controller.prototype.reset = function() {
+	this.setValue(this.initialValue);
+	return this;
+};
+
+GUI.Controller.prototype.listen = function() {
+	this.parent.listenTo(this);
+	return this;
+}
+
+GUI.Controller.prototype.unlisten = function() {
+	this.parent.unlistenTo(this); // <--- hasn't been tested yet
+	return this;
+}
+    
+GUI.Controller.prototype.setValue = function(n) {
+	this.object[this.propertyName] = n;
+	if (this.changeFunction != null) {
+		this.changeFunction.call(this, n);
+	}
+	this.updateDisplay();
+	return this;
+}
+    
+GUI.Controller.prototype.getValue = function() {
+	return this.object[this.propertyName];
+}
+
+GUI.Controller.prototype.updateDisplay = function() {}
+    
+GUI.Controller.prototype.onChange = function(fnc) {
+	this.changeFunction = fnc;
+	return this;
+}
+GUI.Controller.prototype.onFinishChange = function(fnc) {
+	this.finishChangeFunction = fnc;
+	return this;
+}
+
+GUI.Controller.prototype.options = function() {
+	var _this = this;
+	var select = document.createElement('select');
+	if (arguments.length == 1) {
+		var arr = arguments[0];
+		for (var i in arr) {
+			var opt = document.createElement('option');
+			opt.innerHTML = i;
+			opt.setAttribute('value', arr[i]);
+			select.appendChild(opt);
+		}
+	} else { 
+		for (var i = 0; i < arguments.length; i++) {
+			var opt = document.createElement('option');
+			opt.innerHTML = arguments[i];
+			opt.setAttribute('value', arguments[i]);
+			select.appendChild(opt);
+		}
+	}
+	
+	select.addEventListener('change', function() {
+		_this.setValue(this.value);
+		if (_this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+	}, false);
+	_this.domElement.appendChild(select);
+	return this;
+}
+GUI.BooleanController = function() {
+
+	this.type = "boolean";
+	GUI.Controller.apply(this, arguments);
+
+	var _this = this;
+    var input = document.createElement('input');
+    input.setAttribute('type', 'checkbox');
+    
+    this.domElement.addEventListener('click', function(e) {
+    	input.checked = !input.checked;
+    	e.preventDefault();
+    	_this.setValue(input.checked);
+    }, false);
+    
+    input.addEventListener('mouseup', function(e) {
+    	input.checked = !input.checked; // counteracts default.
+    }, false);
+    
+    this.domElement.style.cursor = "pointer";
+    this.propertyNameElement.style.cursor = "pointer";
+    this.domElement.appendChild(input);
+    
+    this.updateDisplay = function() {
+    	input.checked = _this.getValue();
+    };
+    
+    
+    this.setValue = function(val) {
+		if (typeof val != "boolean") {
+			try { 
+				val = eval(val);
+			} catch (e) {}
+		}
+		return GUI.Controller.prototype.setValue.call(this, val);
+    }
+
+};
+GUI.extendController(GUI.BooleanController);GUI.FunctionController = function() {
+	
+	this.type = "function";
+	
+	var _this = this;
+	
+	GUI.Controller.apply(this, arguments);
+	
+	this.domElement.addEventListener('click', function() {
+		_this.fire();
+	}, false);
+	
+	this.domElement.style.cursor = "pointer";
+	this.propertyNameElement.style.cursor = "pointer";
+	
+	var fireFunction = null;
+	this.onFire = function(fnc) {
+		fireFunction = fnc;
+		return this;
+	}
+	
+	this.fire = function() {
+		if (fireFunction != null) {
+			fireFunction.call(this);
+		}
+		_this.object[_this.propertyName].call(_this.object);
+	};
+	
+};
+GUI.extendController(GUI.FunctionController);
+GUI.NumberController = function() {
+
+	this.type = "number";
+    
+    GUI.Controller.apply(this, arguments);
+    
+    var _this = this;
+    
+    // If we simply click and release a number field, we want to highlight it.
+    // This variable keeps track of whether or not we've dragged
+    var draggedNumberField = false;
+    
+    var clickedNumberField = false;
+    
+    var y = py = 0;
+    
+    var min = arguments[3];
+    var max = arguments[4];
+    var step = arguments[5];
+    
+    if (!step) {
+    	if (min != undefined && max != undefined) {
+    		step = (max-min)*0.01;
+    	} else {
+    		step = 1;
+    	}	
+    }
+    
+    var numberField = document.createElement('input');
+    numberField.setAttribute('id', this.propertyName);
+    numberField.setAttribute('type', 'text');
+    numberField.setAttribute('value', this.getValue());
+    
+    if (step) numberField.setAttribute('step', step);
+    
+    this.domElement.appendChild(numberField);
+    
+    var slider;
+    
+    if (min != undefined && max != undefined) {
+    	slider = new GUI.Slider(this, min, max, step, this.getValue());
+    	this.domElement.appendChild(slider.domElement);
+    }
+    
+    numberField.addEventListener('blur', function(e) {
+        var val = parseFloat(this.value);
+        console.log(val);
+        if (!isNaN(val)) {
+	        _this.setValue(val);
+        }
+    }, false);
+    
+    numberField.addEventListener('mousewheel', function(e) {
+    	e.preventDefault();
+    	_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+    	return false;
+    }, false);
+    
+    numberField.addEventListener('mousedown', function(e) {
+        py = y = e.pageY;
+		clickedNumberField = true;
+        document.addEventListener('mousemove', dragNumberField, false);
+		document.addEventListener('mouseup', mouseup, false);
+    }, false);
+
+	// Handle up arrow and down arrow
+	numberField.addEventListener('keydown', function(e) {
+		switch(e.keyCode) {
+			case 38: 	// up
+				var newVal = _this.getValue() + step;
+				_this.setValue(newVal);
+				break;
+			case 40: 	// down
+				var newVal = _this.getValue() - step;
+				_this.setValue(newVal);
+				break;
+		}
+	}, false);
+    
+    var mouseup = function(e) {
+        document.removeEventListener('mousemove', dragNumberField, false);
+        GUI.makeSelectable(_this.parent.domElement); 
+        GUI.makeSelectable(numberField);
+        if (clickedNumberField && !draggedNumberField) { 
+	        numberField.focus();
+	        numberField.select();
+        }
+        draggedNumberField = false;
+        clickedNumberField = false;
+		if (_this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+		document.removeEventListener('mouseup', mouseup, false);
+	}
+
+    
+    
+    var dragNumberField = function(e) {
+    	draggedNumberField = true;
+		e.preventDefault();
+
+		// We don't want to be highlighting this field as we scroll.
+		// Or any other fields in this gui for that matter ...
+		// TODO: Make makeUselectable go through each element and child element.
+
+		GUI.makeUnselectable(_this.parent.domElement);
+		GUI.makeUnselectable(numberField);
+		
+		py = y;
+		y = e.pageY;
+		var dy = py - y;
+		var newVal = _this.getValue() + dy*step;	
+		_this.setValue(newVal);
+		return false;
+    }
+    
+    this.options = function() {
+    	_this.noSlider();
+    	_this.domElement.removeChild(numberField);
+    	return GUI.Controller.prototype.options.apply(this, arguments);
+    };
+    
+    this.noSlider = function() {
+    	if (slider) {
+    		_this.domElement.removeChild(slider.domElement);
+    	}
+    	return this;
+    };
+    
+    this.setValue = function(val) {
+    
+		val = parseFloat(val);
+		
+    	if (min != undefined && val <= min) {
+    		val = min;
+    	} else if (max != undefined && val >= max) { 
+    		val = max;
+    	}
+    	
+    	return GUI.Controller.prototype.setValue.call(this, val);
+    	
+    }
+    
+    this.updateDisplay = function() {
+        numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
+        if (slider) slider.value = _this.getValue();
+	}
+};
+
+GUI.extendController(GUI.NumberController);
+GUI.StringController = function() {
+
+	this.type = "string";
+	
+	var _this = this;
+    GUI.Controller.apply(this, arguments);
+    
+    var input = document.createElement('input');
+    
+    var initialValue = this.getValue();
+    
+    input.setAttribute('value', initialValue);
+    input.setAttribute('spellcheck', 'false');
+    
+    this.domElement.addEventListener('mouseup', function() {
+    	input.focus();
+    	input.select();
+    }, false);
+    
+    // TODO: getting messed up on ctrl a
+    input.addEventListener('keyup', function(e) {
+    	if (e.keyCode == 13 && _this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+        _this.setValue(input.value);
+    }, false);
+    
+    input.addEventListener('blur', function() {
+		if (_this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+    }, false);
+    
+    this.updateDisplay = function() {
+    	input.value = _this.getValue();
+    }
+    
+    this.options = function() {
+    	_this.domElement.removeChild(input);
+    	return GUI.Controller.prototype.options.apply(this, arguments);
+    };
+    
+    this.domElement.appendChild(input);
+    
+};
+
+GUI.extendController(GUI.StringController);

+ 34 - 0
examples/js/gui/gui.min.js

@@ -0,0 +1,34 @@
+var GUI=function(){var a=this,b=[],d=[],e=true,j,k,h=0;a=this;var l=false,n=280,o=false,i,f,q=0,s;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat");this.domElement.style.width=n+"px";var p=document.createElement("div");p.setAttribute("class","guidat-controllers");p.addEventListener("DOMMouseScroll",function(c){var g=this.scrollTop;if(c.wheelDelta)g+=c.wheelDelta;else if(c.detail)g+=c.detail;c.preventDefault&&c.preventDefault();c.returnValue=false;p.scrollTop=
+g},false);p.style.height="0px";var r=document.createElement("a");r.setAttribute("class","guidat-toggle");r.setAttribute("href","#");r.innerHTML="Show Controls";var u=false,C=0,v=false,w,y,x,z,D=function(c){y=w;z=x;w=c.pageY;x=c.pageX;c=w-y;if(!l)if(c>0){l=true;h=i=1;r.innerHTML=f||"Hide Controls"}else return;var g=z-x;if(c>0&&h>k){var m=GUI.map(h,k,k+100,1,0);c*=m}u=true;C+=c;dragDisplacementX+=g;i+=c;n+=g;h+=c;p.style.height=i+"px";n=GUI.constrain(n,240,500);a.domElement.style.width=n+"px";A()};
+r.addEventListener("mousedown",function(c){y=w=c.pageY;z=x=c.pageX;v=true;c.preventDefault();dragDisplacementX=C=0;document.addEventListener("mousemove",D,false);return false},false);r.addEventListener("click",function(c){c.preventDefault();return false},false);document.addEventListener("mouseup",function(c){if(v&&!u){a.toggle();a.domElement.style.width=n+1+"px";setTimeout(function(){a.domElement.style.width=n+"px"},1)}if(v&&u){if(dragDisplacementX==0){a.domElement.style.width=n+1+"px";setTimeout(function(){a.domElement.style.width=
+n+"px"},1)}if(i>k){clearTimeout(s);i=q=k;t()}else if(p.children.length>=1){var g=p.children[0].offsetHeight;clearTimeout(s);q=Math.round(h/g)*g-1;if(q<=0){a.hide();i=g*2}else{i=q;t()}}}document.removeEventListener("mousemove",D,false);c.preventDefault();return v=u=false},false);this.domElement.appendChild(p);this.domElement.appendChild(r);if(GUI.autoPlace){if(GUI.autoPlaceContainer==null){GUI.autoPlaceContainer=document.createElement("div");GUI.autoPlaceContainer.setAttribute("id","guidat");document.body.appendChild(GUI.autoPlaceContainer)}GUI.autoPlaceContainer.appendChild(this.domElement)}this.autoListenIntervalTime=
+1E3/60;var E=function(){j=setInterval(function(){a.listen()},this.autoListenIntervalTime)};this.__defineSetter__("autoListen",function(c){if(e=c)d.length>0&&E();else clearInterval(j)});this.__defineGetter__("autoListen",function(){return e});this.listenTo=function(c){d.length==0&&E();d.push(c)};this.unlistenTo=function(c){for(var g=0;g<d.length;g++)d[g]==c&&d.splice(g,1);d.length<=0&&clearInterval(j)};this.listen=function(c){c=c||d;for(var g in c)c[g].updateDisplay()};this.listenAll=function(){this.listen(b)};
+this.autoListen=true;var F=function(c,g){for(var m in b)if(b[m].object==c&&b[m].propertyName==g)return true;return false},G=function(c,g){function m(){return c.apply(this,g)}m.prototype=c.prototype;return new m};this.add=function(){var c=arguments[0],g=arguments[1];F(c,g);var m=c[g];if(m==undefined)GUI.error(c+' either has no property "'+g+'", or the property is inaccessible.');else{c=typeof m;m=I[c];if(m==undefined)GUI.error('Cannot create controller for data type "'+c+'"');else{for(var H=[this],
+B=0;B<arguments.length;B++)H.push(arguments[B]);if(m=G(m,H)){p.appendChild(m.domElement);b.push(m);GUI.allControllers.push(m);if(c!="function"&&GUI.saveIndex<GUI.savedValues.length){m.setValue(GUI.savedValues[GUI.saveIndex]);GUI.saveIndex++}A();o||(i=k);return m}else GUI.error('Error creating controller for "'+g+'".')}}};var A=function(){k=0;for(var c in b)k+=b[c].domElement.offsetHeight;p.style.overflowY=k-1>i?"auto":"hidden"},I={number:GUI.NumberController,string:GUI.StringController,"boolean":GUI.BooleanController,
+"function":GUI.FunctionController};F=function(c,g){for(var m in b)if(b[m].object==c&&b[m].propertyName==g)return true;return false};G=function(c,g){function m(){return c.apply(this,g)}m.prototype=c.prototype;return new m};this.reset=function(){};this.toggle=function(){l?this.hide():this.show()};this.show=function(){r.innerHTML=f||"Hide Controls";q=i;clearTimeout(s);t();l=true};this.hide=function(){r.innerHTML=f||"Show Controls";q=0;clearTimeout(s);t();l=false};this.name=function(c){f=c;r.innerHTML=
+c};this.appearanceVars=function(){return[l,n,i,p.scrollTop]};var t=function(){h+=(q-h)*0.6;if(Math.abs(h-q)<1)h=q;else s=setTimeout(t,1E3/30);p.style.height=Math.round(h)+"px";A()};if(GUI.guiIndex<GUI.savedAppearanceVars.length){n=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);a.domElement.style.width=n+"px";i=parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);o=true;if(eval(GUI.savedAppearanceVars[GUI.guiIndex][0])==true){h=i;var J=GUI.savedAppearanceVars[GUI.guiIndex][3];setTimeout(function(){p.scrollTop=
+J},0);if(GUI.scrollTop>-1)document.body.scrollTop=GUI.scrollTop;q=i;this.show()}GUI.guiIndex++}GUI.allGuis.push(this)};GUI.autoPlace=true;GUI.autoPlaceContainer=null;GUI.allControllers=[];GUI.allGuis=[];GUI.saveURL=function(){title=window.location;url=GUI.replaceGetVar("saveString",GUI.getSaveString());window.location=url};GUI.scrollTop=-1;
+GUI.load=function(a){a=a.split(",");var b=parseInt(a[0]);GUI.scrollTop=parseInt(a[1]);for(var d=0;d<b;d++){var e=a.splice(2,4);GUI.savedAppearanceVars.push(e)}GUI.savedValues=a.splice(2,a.length)};GUI.savedValues=[];GUI.savedAppearanceVars=[];
+GUI.getSaveString=function(){var a=[];a.push(GUI.allGuis.length);a.push(document.body.scrollTop);for(var b in GUI.allGuis)for(var d=GUI.allGuis[b].appearanceVars(),e=0;e<d.length;e++)a.push(d[e]);for(b in GUI.allControllers)if(GUI.allControllers[b].type!="function"){d=GUI.allControllers[b].getValue();if(GUI.allControllers[b].type=="number")d=GUI.roundToDecimal(d,4);a.push(d)}return a.join(",")};
+GUI.getVarFromURL=function(a){for(var b,d=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),e=0;e<d.length;e++){b=d[e].split("=");if(b!=undefined)if(b[0]==a)return b[1]}return null};
+GUI.replaceGetVar=function(a,b){for(var d,e=window.location.href,j=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),k=0;k<j.length;k++){d=j[k].split("=");if(d!=undefined)if(d[0]==a)return e.replace(d[1],b)}if(window.location.href.indexOf("?")!=-1)return e+"&"+a+"="+b;return e+"?"+a+"="+b};GUI.saveIndex=0;GUI.guiIndex=0;GUI.showSaveString=function(){alert(GUI.getSaveString())};
+GUI.makeUnselectable=function(a){a.onselectstart=function(){return false};a.style.MozUserSelect="none";a.style.KhtmlUserSelect="none";a.unselectable="on"};GUI.makeSelectable=function(a){a.onselectstart=function(){};a.style.MozUserSelect="auto";a.style.KhtmlUserSelect="auto";a.unselectable="off"};GUI.map=function(a,b,d,e,j){return a=e+(j-e)*((a-b)/(d-b))};GUI.constrain=function(a,b,d){if(a<b)a=b;else if(a>d)a=d;return a};
+GUI.error=function(a){typeof console.error=="function"&&console.error("[GUI ERROR] "+a)};GUI.roundToDecimal=function(a,b){var d=Math.pow(10,b);return Math.round(a*d)/d};GUI.extendController=function(a){a.prototype=new GUI.Controller;a.prototype.constructor=a};GUI.getVarFromURL("saveString")!=null&&GUI.load(GUI.getVarFromURL("saveString"));
+GUI.Slider=function(a,b,d,e,j){b=b;d=d;e=e;var k=false,h=this;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat-slider-bg");this.fg=document.createElement("div");this.fg.setAttribute("class","guidat-slider-fg");this.domElement.appendChild(this.fg);this.__defineSetter__("value",function(o){this.fg.style.width=GUI.map(o,b,d,0,100)+"%"});var l=function(o){if(k){var i;i=h.domElement;var f=curtop=0;if(i.offsetParent){do{f+=i.offsetLeft;curtop+=i.offsetTop}while(i=
+i.offsetParent);i=[f,curtop]}else i=void 0;o=GUI.map(o.pageX,i[0],i[0]+h.domElement.offsetWidth,b,d);o=Math.round(o/e)*e;a.setValue(o)}};this.domElement.addEventListener("mousedown",function(o){k=true;h.domElement.setAttribute("class","guidat-slider-bg active");h.fg.setAttribute("class","guidat-slider-fg active");l(o);document.addEventListener("mouseup",n,false)},false);var n=function(){h.domElement.setAttribute("class","guidat-slider-bg");h.fg.setAttribute("class","guidat-slider-fg");k=false;a.finishChangeFunction!=
+null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",n,false)};document.addEventListener("mousemove",l,false);this.value=j};
+GUI.Controller=function(){this.parent=arguments[0];this.object=arguments[1];this.propertyName=arguments[2];if(arguments.length>0)this.initialValue=this.propertyName[this.object];this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat-controller "+this.type);this.propertyNameElement=document.createElement("span");this.propertyNameElement.setAttribute("class","guidat-propertyname");this.name(this.propertyName);this.domElement.appendChild(this.propertyNameElement);
+GUI.makeUnselectable(this.domElement)};GUI.Controller.prototype.changeFunction=null;GUI.Controller.prototype.finishChangeFunction=null;GUI.Controller.prototype.name=function(a){this.propertyNameElement.innerHTML=a;return this};GUI.Controller.prototype.reset=function(){this.setValue(this.initialValue);return this};GUI.Controller.prototype.listen=function(){this.parent.listenTo(this);return this};GUI.Controller.prototype.unlisten=function(){this.parent.unlistenTo(this);return this};
+GUI.Controller.prototype.setValue=function(a){this.object[this.propertyName]=a;this.changeFunction!=null&&this.changeFunction.call(this,a);this.updateDisplay();return this};GUI.Controller.prototype.getValue=function(){return this.object[this.propertyName]};GUI.Controller.prototype.updateDisplay=function(){};GUI.Controller.prototype.onChange=function(a){this.changeFunction=a;return this};GUI.Controller.prototype.onFinishChange=function(a){this.finishChangeFunction=a;return this};
+GUI.Controller.prototype.options=function(){var a=this,b=document.createElement("select");if(arguments.length==1){var d=arguments[0],e;for(e in d){var j=document.createElement("option");j.innerHTML=e;j.setAttribute("value",d[e]);b.appendChild(j)}}else for(e=0;e<arguments.length;e++){j=document.createElement("option");j.innerHTML=arguments[e];j.setAttribute("value",arguments[e]);b.appendChild(j)}b.addEventListener("change",function(){a.setValue(this.value);a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,
+a.getValue())});a.domElement.appendChild(b);return this};
+GUI.BooleanController=function(){this.type="boolean";GUI.Controller.apply(this,arguments);var a=this,b=document.createElement("input");b.setAttribute("type","checkbox");this.domElement.addEventListener("click",function(d){b.checked=!b.checked;d.preventDefault();a.setValue(b.checked)},false);b.addEventListener("mouseup",function(){b.checked=!b.checked},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";this.domElement.appendChild(b);this.updateDisplay=function(){b.checked=
+a.getValue()};this.setValue=function(d){if(typeof d!="boolean")try{d=eval(d)}catch(e){}return GUI.Controller.prototype.setValue.call(this,d)}};GUI.extendController(GUI.BooleanController);
+GUI.FunctionController=function(){this.type="function";var a=this;GUI.Controller.apply(this,arguments);this.domElement.addEventListener("click",function(){a.fire()},false);this.domElement.style.cursor="pointer";this.propertyNameElement.style.cursor="pointer";var b=null;this.onFire=function(d){b=d;return this};this.fire=function(){b!=null&&b.call(this);a.object[a.propertyName].call(a.object)}};GUI.extendController(GUI.FunctionController);
+GUI.NumberController=function(){this.type="number";GUI.Controller.apply(this,arguments);var a=this,b=false,d=false,e=py=0,j=arguments[3],k=arguments[4],h=arguments[5];h||(h=j!=undefined&&k!=undefined?(k-j)*0.01:1);var l=document.createElement("input");l.setAttribute("id",this.propertyName);l.setAttribute("type","text");l.setAttribute("value",this.getValue());h&&l.setAttribute("step",h);this.domElement.appendChild(l);var n;if(j!=undefined&&k!=undefined){n=new GUI.Slider(this,j,k,h,this.getValue());
+this.domElement.appendChild(n.domElement)}l.addEventListener("blur",function(){var f=parseFloat(this.value);console.log(f);isNaN(f)||a.setValue(f)},false);l.addEventListener("mousewheel",function(f){f.preventDefault();a.setValue(a.getValue()+Math.abs(f.wheelDeltaY)/f.wheelDeltaY*h);return false},false);l.addEventListener("mousedown",function(f){py=e=f.pageY;d=true;document.addEventListener("mousemove",i,false);document.addEventListener("mouseup",o,false)},false);l.addEventListener("keydown",function(f){switch(f.keyCode){case 38:f=
+a.getValue()+h;a.setValue(f);break;case 40:f=a.getValue()-h;a.setValue(f)}},false);var o=function(){document.removeEventListener("mousemove",i,false);GUI.makeSelectable(a.parent.domElement);GUI.makeSelectable(l);if(d&&!b){l.focus();l.select()}d=b=false;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",o,false)},i=function(f){b=true;f.preventDefault();GUI.makeUnselectable(a.parent.domElement);GUI.makeUnselectable(l);py=e;e=f.pageY;f=
+py-e;f=a.getValue()+f*h;a.setValue(f);return false};this.options=function(){a.noSlider();a.domElement.removeChild(l);return GUI.Controller.prototype.options.apply(this,arguments)};this.noSlider=function(){n&&a.domElement.removeChild(n.domElement);return this};this.setValue=function(f){f=parseFloat(f);if(j!=undefined&&f<=j)f=j;else if(k!=undefined&&f>=k)f=k;return GUI.Controller.prototype.setValue.call(this,f)};this.updateDisplay=function(){l.value=GUI.roundToDecimal(a.getValue(),4);if(n)n.value=a.getValue()}};
+GUI.extendController(GUI.NumberController);
+GUI.StringController=function(){this.type="string";var a=this;GUI.Controller.apply(this,arguments);var b=document.createElement("input"),d=this.getValue();b.setAttribute("value",d);b.setAttribute("spellcheck","false");this.domElement.addEventListener("mouseup",function(){b.focus();b.select()},false);b.addEventListener("keyup",function(e){e.keyCode==13&&a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());a.setValue(b.value)},false);b.addEventListener("blur",function(){a.finishChangeFunction!=
+null&&a.finishChangeFunction.call(this,a.getValue())},false);this.updateDisplay=function(){b.value=a.getValue()};this.options=function(){a.domElement.removeChild(b);return GUI.Controller.prototype.options.apply(this,arguments)};this.domElement.appendChild(b)};GUI.extendController(GUI.StringController);

+ 22 - 33
examples/lights_test.html → examples/misc_lights_test.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - lights - point + directional - webgl</title>
+		<title>three.js misc - lights - point + directional</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 
 
@@ -39,11 +39,8 @@
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
-
+		
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -71,18 +68,15 @@
 			var bcanvas = document.getElementById( 'rcanvas' );
 			var bcanvas = document.getElementById( 'rcanvas' );
 			var bwebgl = document.getElementById( 'rwebgl' );
 			var bwebgl = document.getElementById( 'rwebgl' );
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-
-			loop();
+			animate();
 
 
 			//render_canvas = !has_gl;
 			//render_canvas = !has_gl;
 			bwebgl.style.display = has_gl ? 'inline' : 'none';
 			bwebgl.style.display = has_gl ? 'inline' : 'none';
 			bcanvas.className = render_canvas ? 'button' : 'button inactive';
 			bcanvas.className = render_canvas ? 'button' : 'button inactive';
 
 
-			setInterval(loop, 1000/60);
-
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -107,8 +101,7 @@
 					mesh.position.z = 500 * ( Math.random() - 0.5 );
 					mesh.position.z = 500 * ( Math.random() - 0.5 );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
 					mesh.overdraw = true;
 					mesh.overdraw = true;
-					mesh.updateMatrix();
-					scene.addObject(mesh);
+					scene.addObject( mesh );
 
 
 				}
 				}
 
 
@@ -133,7 +126,6 @@
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 				lightMesh.position = pointLight.position;
 				lightMesh.position = pointLight.position;
 				lightMesh.overdraw = true;
 				lightMesh.overdraw = true;
-				lightMesh.updateMatrix();
 				scene.addObject(lightMesh);
 				scene.addObject(lightMesh);
 
 
 
 
@@ -197,24 +189,25 @@
 
 
 			}
 			}
 
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var r = 0, counter = 0;
 			var r = 0, counter = 0;
 
 
-			function loop() {
+			function render() {
+
+				counter == 30 ? scene.removeLight( directionalLight ) : counter ++;
 
 
-				if( counter == 30 ) {
-					
-					scene.removeLight( directionalLight );
-					
-				} else {
-				
-					counter++;
-					
-				}
-				
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-				camera.updateMatrix();
-
 
 
 				for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
 				for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
 
 
@@ -230,21 +223,17 @@
 
 
 						scene.objects[i].rotation.z += 0.05;
 						scene.objects[i].rotation.z += 0.05;
 
 
-					scene.objects[i].updateMatrix();
 				}
 				}
 
 
 
 
-				lightMesh.position.x = 200*Math.cos(r);
-				lightMesh.position.z = 200*Math.sin(r);
-				lightMesh.updateMatrix();
+				lightMesh.position.x = 200 * Math.cos( r );
+				lightMesh.position.z = 200 * Math.sin( r );
 
 
 				r += 0.1;
 				r += 0.1;
 
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {

+ 18 - 16
examples/materials_multimaterials.html → examples/misc_materials_multimaterials.html

@@ -42,10 +42,7 @@
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -80,15 +77,12 @@
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-
-			loop();
+			animate();
 
 
 			//render_canvas = !has_gl;
 			//render_canvas = !has_gl;
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 
-			setInterval(loop, 1000/60);
-
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -167,7 +161,7 @@
 
 
 				var loader = new THREE.Loader(),
 				var loader = new THREE.Loader(),
 					callback = function( geometry ) { createScene( geometry) };
 					callback = function( geometry ) { createScene( geometry) };
-				
+
 				loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
 				loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
 				//loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callback } );
 				//loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callback } );
 
 
@@ -205,10 +199,9 @@
 				}
 				}
 
 
 				var xm1 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x1 ) } );
 				var xm1 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x1 ) } );
-				xm1.map.image.loaded = 1; // this is procedurally generated texture
-
 				var xm2 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x2 ) } );
 				var xm2 = new THREE.MeshLambertMaterial( { map: new THREE.Texture( x2 ) } );
-				xm2.map.image.loaded = 1; // this is procedurally generated texture
+				xm1.map.needsUpdate = true;
+				xm2.map.needsUpdate = true;
 
 
 				geometry.materials[0].push ( xm1 ); // goes to faces with material 0
 				geometry.materials[0].push ( xm1 ); // goes to faces with material 0
 				geometry.materials[1].push ( xm2 ); // goes to faces with material 1
 				geometry.materials[1].push ( xm2 ); // goes to faces with material 1
@@ -263,7 +256,7 @@
 					xc.fillText(i, 10, 64);
 					xc.fillText(i, 10, 64);
 
 
 					var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
 					var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
-					xm.map.image.loaded = 1;
+					xm.map.needsUpdate = true;
 
 
 					mesh = new THREE.Mesh( new Plane( size, size ), xm );
 					mesh = new THREE.Mesh( new Plane( size, size ), xm );
 					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
 					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
@@ -284,7 +277,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -293,8 +297,6 @@
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {

+ 275 - 0
examples/misc_sound.html

@@ -0,0 +1,275 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - misc - sound</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				text-align:center;
+			}
+
+			a {
+				color:#0078ff;
+			}
+
+			#info {
+				color:#fff;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index:100;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl 3d sounds example -
+			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank">larrylarrybb</a> and
+			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank">skullbeatz</a> <br/><br/>
+
+			navigate with WASD / arrows / mouse
+		</div>
+
+
+		<div id="container"></div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Detector.js"></script>
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container;
+			var camera, scene, renderer, soundRenderer;
+			var light, pointLight;
+			var cameraControl;
+
+			var mesh;
+			var material_sphere1, material_sphere2;
+
+			var postprocessing = { enabled: true };
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				scene  = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0x000000, 0.0035 );
+
+				camera = new THREE.QuakeCamera( { fov: 50, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000,
+												  movement_speed: 1, look_speed: 0.002, nofly: true, look_vertical: false } );
+
+				camera.position.set( 0, 25, 0 );
+
+				light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 0.5, 1 );
+				light.position.normalize();
+				scene.addLight( light );
+
+				var sphere = new Sphere( 20, 32, 16 );
+
+				material_sphere1 = new THREE.MeshLambertMaterial( { color: 0xffaa00, shading: THREE.FlatShading } );
+				material_sphere2 = new THREE.MeshLambertMaterial( { color: 0xff2200, shading: THREE.FlatShading } );
+
+				var cube = new Cube( 5, 40, 5 );
+				var material_cube = new THREE.MeshLambertMaterial( { color: 0xffff00, shading: THREE.FlatShading } );
+				material_cube.color.setHSV( 0.1, 0.7, 1 );
+
+				// sound spheres
+
+				var s = 1;
+
+				var mesh1 = new THREE.Mesh( sphere, material_sphere1 );
+				mesh1.position.set( -250, 30, 0 );
+				mesh1.scale.set( s, s, s );
+
+				var sound1 = new THREE.Sound( [ "sounds/358232_j_s_song.mp3", "sounds/358232_j_s_song.ogg" ] , 275, 20, true );
+				//var sound1 = new THREE.Sound( "sounds/358232_j_s_song.ogg", 275, 20, true );
+				sound1.play();
+
+				var dbg = new THREE.Mesh( cube, material_cube );
+				dbg.position.set( 0, -10 ,0 );
+				mesh1.addChild( dbg );
+
+				mesh1.addChild( sound1 );
+				scene.addObject( mesh1 );
+
+
+				var mesh2 = new THREE.Mesh( sphere, material_sphere2 );
+				mesh2.position.set( 250, 30, 0 );
+				mesh2.scale.set( s, s, s );
+
+				var sound2 = new THREE.Sound( [ "sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3", "sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg" ], 275, 20, true );
+				//var sound2 = new THREE.Sound( "sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg", 275, 20, true );
+				sound2.play();
+
+				var dbg = new THREE.Mesh( cube, material_cube );
+				dbg.position.set( 0, -10, 0 );
+				mesh2.addChild( dbg );
+
+				mesh2.addChild( sound2 );
+				scene.addObject( mesh2 );
+
+				// ground
+
+				var material_wireframe = new THREE.MeshLambertMaterial( { color: 0xffaa00, wireframe: true, wireframe_linewidth: 1 } );
+				material_wireframe.color.setHSV( 0.1, 0.2, 0.25 );
+
+
+				var plane = new Plane( 1000, 1000, 100, 100 );
+				mesh = new THREE.Mesh( plane, material_wireframe );
+				mesh.position.y = 0.1;
+				mesh.rotation.x = -1.57;
+				scene.addObject( mesh );
+
+
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				soundRenderer = new THREE.SoundRenderer();
+
+				container.innerHTML = "";
+				container.appendChild( renderer.domElement );
+				container.appendChild( soundRenderer.domElement );
+
+				initPostprocessing();
+				renderer.autoClear = false;
+
+			}
+
+
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
+				postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
+
+				var screen_shader = ShaderUtils.lib["screen"];
+				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
+
+				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				screen_uniforms["opacity"].value = 1.0;
+
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
+					blending: THREE.AdditiveBlending
+
+				} );
+
+				var convolution_shader = ShaderUtils.lib["convolution"];
+				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
+
+				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
+				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
+
+				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
+				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
+
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
+
+				} );
+
+				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
+				postprocessing.quad.position.z = -500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+
+			function render() {
+
+				var time = new Date().getTime() * 0.005;
+
+				material_sphere1.color.setHSV( 0.0, 0.3 + 0.7 * ( 1 + Math.cos(time) ) / 2, 1 );
+				material_sphere2.color.setHSV( 0.1, 0.3 + 0.7 * ( 1 + Math.sin(time) ) / 2, 1 );
+
+				if ( postprocessing.enabled ) {
+
+					renderer.clear();
+
+					// Render scene into texture
+
+					renderer.render( scene, camera, postprocessing.rtTexture1 );
+
+					// Render quad with blured scene into texture (convolution pass 1)
+
+					postprocessing.quad.materials = [ postprocessing.materialConvolution ];
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2 );
+
+					// Render quad with blured scene into texture (convolution pass 2)
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3 );
+
+					// Render original scene with superimposed blur to texture
+
+					postprocessing.quad.materials = [ postprocessing.materialScreen ];
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
+					postprocessing.materialScreen.uniforms.opacity.value = 1.3;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
+
+					// Render to screen
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}
+
+				soundRenderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 43 - 23
examples/uqbiquity_test.html → examples/misc_uqbiquity_test.html

@@ -26,22 +26,23 @@
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
-		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
@@ -56,13 +57,14 @@
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
 		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
 		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
 		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
 		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
 		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
@@ -71,17 +73,28 @@
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-
-		<script type="text/javascript" src="obj/Qrcode.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="obj/Qrcode.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -102,12 +115,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
 			init();
-			// loop();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -231,6 +240,8 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
 			}
 			}
 
 
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
@@ -240,7 +251,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -258,8 +280,6 @@
 				svgRenderer.render( scene, camera );
 				svgRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 		</script>
 		</script>

+ 0 - 281
examples/render_to_texture.html

@@ -1,281 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en">
-    <head>
-        <title>three.js - render-to-texture - webgl</title>
-        <meta charset="utf-8">
-        <style type="text/css">
-            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;
-            }
-
-        </style>
-    </head>
-    <body>
-
-        <div id="container"></div>
-        <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
-
-        <script type="text/javascript" src="js/Stats.js"></script>
-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>
-
-        <script id="fragment_shader_screen" type="x-shader/x-fragment">
-			varying vec2 vUv;
-			uniform sampler2D tDiffuse;
-			
-            void main(void)
-            {
-				//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
-				gl_FragColor = texture2D( tDiffuse, vUv );
-            }
-        </script>
-
-        <script id="fragment_shader_pass_1" type="x-shader/x-fragment">
-			varying vec2 vUv;
-			uniform float time;
-			
-            void main(void)
-            {
-                //gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
-				float r = vUv.x;
-				if( vUv.y < 0.5 ) r = 0.0;
-				float g = vUv.y;
-				if( vUv.x < 0.5 ) g = 0.0;
-				
-				gl_FragColor = vec4( r, g, time, 1.0 );
-            }
-        </script>
-
-        <script id="vertex_shader" type="x-shader/x-vertex">
-            varying vec2 vUv;
-
-            void main()
-            {
-               vUv = uv;
-               //gl_Position = vec4( position, 1.0 );
-			   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-           }
-        </script>
-
-
-        <script type="text/javascript">
-
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
-            var container, stats;
-
-            var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
-
-			var mouseX = 0, mouseY = 0;
-			
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-			
-            var rtTexture, material, quad;
-
-            init();
-            setInterval( loop, 1000 / 60 );
-
-            function init() {
-
-                container = document.getElementById( 'container' );
-
-                cameraRTT = new THREE.Camera();
-				cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-                cameraRTT.position.z = 100;
-
-				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 100;
-				camera.updateMatrix();
-
-                sceneRTT = new THREE.Scene();
-				sceneScreen = new THREE.Scene();
-				scene = new THREE.Scene();
-
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.x = 0;
-				light.position.y = 0;
-				light.position.z = 1;
-				light.position.normalize();
-				scene.addLight( light );
-				sceneRTT.addLight( light );
-				sceneScreen.addLight( light );
-
-				light = new THREE.DirectionalLight( 0xffaaaa, 0.5 );
-				light.position.x = -1;
-				light.position.y = 0;
-				light.position.z = -1;
-				light.position.normalize();
-				scene.addLight( light );
-
-                rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
-
-                material = new THREE.MeshShaderMaterial( {
-
-                    uniforms: { time: { type: "f", value: 0.0 } },
-                    vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
-                    fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
-
-                } );
-
-                var materialScreen = new THREE.MeshShaderMaterial( {
-
-                    uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
-                    vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
-                    fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
-
-                } );
-
-				//var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
-				
-				var plane = new Plane( window.innerWidth, window.innerHeight );
-				
-                quad = new THREE.Mesh( plane, material );
-				quad.position.z = -100;
-                sceneRTT.addObject( quad );
-
-				var loader = new THREE.Loader();
-				loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
-
-                quad = new THREE.Mesh( plane, materialScreen );
-				quad.position.z = -100;
-                sceneScreen.addObject( quad );
-
-				var n = 5,
-					geometry = new Sphere( 10, 64, 32 ),
-					material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
-					//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
-				
-				for( var j = 0; j < n; j++ ) {
-					for( var i = 0; i < n; i++ ) {
-					
-						mesh = new THREE.Mesh( geometry, material2 );
-						mesh.position.x = ( i - (n-1)/2 ) * 20;
-						mesh.position.y = ( j - (n-1)/2 ) * 20;
-						mesh.position.z = 0;
-						mesh.rotation.y = 1.57;
-						scene.addObject( mesh );
-						
-					}
-				}
-
-                renderer = new THREE.WebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
-                container.appendChild( renderer.domElement );
-				
-                stats = new Stats();
-                stats.domElement.style.position = 'absolute';
-                stats.domElement.style.top = '0px';
-                container.appendChild( stats.domElement );
-				
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
-            }
-
-			function createMesh( geometry, xscene ) {
-
-				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
-					mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
-				
-				zmesh1 = new THREE.Mesh( geometry, mat1 );
-				zmesh1.position.x = 0;
-				zmesh1.position.y = 0;
-				zmesh1.position.z = 100;
-				zmesh1.scale.x = zmesh1.scale.y = zmesh1.scale.z = 150;
-				zmesh1.overdraw = true;
-				zmesh1.updateMatrix();
-				xscene.addObject( zmesh1 );
-
-				zmesh2 = new THREE.Mesh( geometry, mat2 );
-				zmesh2.position.x = 0;
-				zmesh2.position.y = 150;
-				zmesh2.position.z = 100;
-				zmesh2.scale.x = zmesh2.scale.y = zmesh2.scale.z = 75;
-				zmesh2.overdraw = true;
-				zmesh2.updateMatrix();
-				xscene.addObject( zmesh2 );
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX );
-				mouseY = ( event.clientY - windowHalfY );
-
-			}
-
-			var delta = 0.01;
-			
-            function loop() {
-
-				var time = new Date().getTime() * 0.0015;
-				
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				if ( zmesh1 && zmesh2 ) {
-				
-					zmesh1.rotation.x = 1.57;
-					zmesh1.rotation.z = time;
-
-					zmesh2.rotation.z = 1.57;
-					zmesh2.rotation.y = -time;
-
-				}
-				
-				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
-				
-					delta *= -1;
-					
-				}
-					
-				material.uniforms.time.value += delta;
-				
-				renderer.clear();
-				
-				// Render first scene into texture
-				
-                renderer.render( sceneRTT, cameraRTT, rtTexture );
-				
-				
-				// Render full screen quad with generated texture
-				// (disable depth writing so that it stays in the background)
-				
-				renderer.context.depthMask( 0 );
-				renderer.render( sceneScreen, cameraRTT );
-				//renderer.render( sceneRTT, cameraRTT );
-				renderer.context.depthMask( 1 );
-				
-                // Render second scene to screen
-				// (using first scene as regular texture)
-				
-                renderer.render( scene, camera );
-				
-
-                stats.update();
-
-            }
-
-        </script>
-
-    </body>
-</html>

BIN
examples/sounds/358232_j_s_song.mp3


BIN
examples/sounds/358232_j_s_song.ogg


BIN
examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3


BIN
examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg


+ 8 - 0
examples/sounds/readme.txt

@@ -0,0 +1,8 @@
+Music from Newgrounds Audio portal, licensed under 
+Creative Commons Attribution Noncommercial Share Alike
+
+Bad Cat [Master Version] by Skullbeatz
+http://www.newgrounds.com/audio/listen/376737
+
+The Sound of Epicness by larrylarrybb
+http://www.newgrounds.com/audio/listen/358232

+ 36 - 26
examples/io_blender_colors.html → examples/webgl_geometry_blenderexport_colors.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - io - blender - vertex colors - webgl</title>
+		<title>three.js webgl - io blender - vertex colors</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -12,6 +12,7 @@
 
 
 				background-color: #000;
 				background-color: #000;
 				margin: 0px;
 				margin: 0px;
+				padding: 0px;
 				overflow: hidden;
 				overflow: hidden;
 			}
 			}
 
 
@@ -22,7 +23,6 @@
 			}
 			}
 
 
 			a {
 			a {
-
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
 
 
@@ -30,15 +30,18 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"></div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - blender export - webgl</div>
+		<div id="container"></div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - io blender - vertex colors</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
-		<script type="text/javascript" src="js/Stats.js"></script>		
-		
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 
 
@@ -51,10 +54,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,9 +65,9 @@
 				camera.position.z = 1800;
 				camera.position.z = 1800;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
+
 				//scene.addLight( new THREE.AmbientLight( 0x333333 )  );
 				//scene.addLight( new THREE.AmbientLight( 0x333333 )  );
-				
+
 				light = new THREE.DirectionalLight( 0xffffff );
 				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				light.position.set( 0, 0, 1 );
 				light.position.normalize();
 				light.position.normalize();
@@ -74,7 +75,7 @@
 
 
 				var loader = new THREE.Loader();
 				var loader = new THREE.Loader();
 				loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
 				loader.loadAscii( { model: "obj/cubecolors/cubecolors.js", callback: createScene } );
-				
+
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
@@ -90,16 +91,15 @@
 			}
 			}
 
 
 			function createScene( geometry ) {
 			function createScene( geometry ) {
-			
+
 				geometry.materials[0][0].shading = THREE.FlatShading;
 				geometry.materials[0][0].shading = THREE.FlatShading;
-				
-				var material = [ new THREE.MeshFaceMaterial(), 
-								 new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } )  
-								];
+
+				var material = [ new THREE.MeshFaceMaterial(), new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframe_linewidth: 2 } ) ];
+
 				mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
 				mesh = SceneUtils.addMesh( scene, geometry, 250, 0, 0, 0, 0, 0, 0, material );
-				
+
 			}
 			}
-			
+
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseX = ( event.clientX - windowHalfX );
@@ -107,20 +107,30 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				if ( mesh ) {
 				if ( mesh ) {
-				
+
 					mesh.rotation.x += 0.01;
 					mesh.rotation.x += 0.01;
 					mesh.rotation.y += 0.01;
 					mesh.rotation.y += 0.01;
-					
+
 				}
 				}
-				
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 32 - 21
examples/geometry_colors.html → examples/webgl_geometry_colors.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - vertex colors - webgl</title>
+		<title>three.js webgl - geometry - vertex colors</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -30,15 +30,18 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"></div> 
+		<div id="container"></div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
 
 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 
 
@@ -51,10 +54,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,7 +65,7 @@
 				camera.position.z = 1800;
 				camera.position.z = 1800;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
+
 				light = new THREE.DirectionalLight( 0xffffff );
 				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				light.position.set( 0, 0, 1 );
 				light.position.normalize();
 				light.position.normalize();
@@ -72,7 +73,7 @@
 
 
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/shadow.png' ) } );
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/shadow.png' ) } );
 				var shadowGeo = new Plane( 300, 300, 1, 1 );
 				var shadowGeo = new Plane( 300, 300, 1, 1 );
-				
+
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				mesh.position.y = - 250;
 				mesh.position.y = - 250;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				mesh.rotation.x = - 90 * Math.PI / 180;
@@ -91,15 +92,15 @@
 				scene.addObject( mesh );
 				scene.addObject( mesh );
 
 
 				var color, p, colors = [], colors2 = [], colors3 = [],
 				var color, p, colors = [], colors2 = [], colors3 = [],
-					
+
 					geometry = new Icosahedron( 1 ),
 					geometry = new Icosahedron( 1 ),
 					geometry2 = new THREE.Geometry(),
 					geometry2 = new THREE.Geometry(),
 					geometry3 = new THREE.Geometry();
 					geometry3 = new THREE.Geometry();
-					
+
 				for( var i = 0; i < geometry.vertices.length; i++ ) {
 				for( var i = 0; i < geometry.vertices.length; i++ ) {
-				
+
 					p = geometry.vertices[ i ].position;
 					p = geometry.vertices[ i ].position;
-					
+
 					color = new THREE.Color( 0xffffff );
 					color = new THREE.Color( 0xffffff );
 					color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
 					color.setHSV( ( p.y + 1 ) / 2, 1.0, 1.0 );
 					colors[ i ] = color;
 					colors[ i ] = color;
@@ -116,21 +117,21 @@
 
 
 				geometry3.vertices = geometry2.vertices = geometry.vertices;
 				geometry3.vertices = geometry2.vertices = geometry.vertices;
 				geometry3.faces = geometry2.faces = geometry.faces;
 				geometry3.faces = geometry2.faces = geometry.faces;
-				
+
 				geometry2.sortFacesByMaterial();
 				geometry2.sortFacesByMaterial();
 				geometry3.sortFacesByMaterial();
 				geometry3.sortFacesByMaterial();
-				
+
 				geometry.colors = colors;
 				geometry.colors = colors;
 				geometry2.colors = colors2;
 				geometry2.colors = colors2;
 				geometry3.colors = colors3;
 				geometry3.colors = colors3;
-				
+
 				var materials = [
 				var materials = [
-					
+
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertex_colors: true } ),
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertex_colors: true } ),
 					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
 					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
-					
+
 				];
 				];
-				
+
 				mesh = new THREE.Mesh( geometry, materials  );
 				mesh = new THREE.Mesh( geometry, materials  );
 				mesh.position.x = -400;
 				mesh.position.x = -400;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
@@ -170,13 +171,23 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 35 - 130
examples/geometry_dynamic_gl.html → examples/webgl_geometry_dynamic.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - dynamic - webgl</title>
+		<title>three.js webgl - geometry - dynamic</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -36,54 +36,48 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div> 
+		<div id="container"></div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-			
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
 
 
 			var container, stats;
 			var container, stats;
 
 
 			var camera, scene, renderer;
 			var camera, scene, renderer;
-			
+
 			var mesh, texture,geometry, material;
 			var mesh, texture,geometry, material;
 
 
 			var worldWidth = 128, worldDepth = 128,
 			var worldWidth = 128, worldDepth = 128,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 10, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
-				
+
 				//var light = new THREE.PointLight( 0xffffff, 2 );
 				//var light = new THREE.PointLight( 0xffffff, 2 );
 				//light.position.y = 500;
 				//light.position.y = 500;
 				//scene.addLight( light );
 				//scene.addLight( light );
@@ -94,42 +88,42 @@
 				geometry = new Plane( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 				geometry = new Plane( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 
 
 				var i, j, il, jl;
 				var i, j, il, jl;
-				
+
 				for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
 				for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
 
 
 					geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
 					geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
 
 
 				}
 				}
-				
+
 				for( i = 0; i < geometry.uvs.length; i++ ) {
 				for( i = 0; i < geometry.uvs.length; i++ ) {
-				
+
 					var uvs = geometry.uvs[ i ];
 					var uvs = geometry.uvs[ i ];
 					for ( j = 0, jl = uvs.length; j < jl; j++ ) {
 					for ( j = 0, jl = uvs.length; j < jl; j++ ) {
-					
+
 						uvs[ j ].u *= 5;
 						uvs[ j ].u *= 5;
 						uvs[ j ].v *= 5;
 						uvs[ j ].v *= 5;
-						
+
 					}
 					}
 
 
 				}
 				}
-				
+
 
 
 				//console.log( "triangles: " + geometry.faces.length * 2 + " faces: " + geometry.faces.length + " vertices: " + geometry.vertices.length );
 				//console.log( "triangles: " + geometry.faces.length * 2 + " faces: " + geometry.faces.length + " vertices: " + geometry.vertices.length );
-				
+
 				geometry.computeFaceNormals();
 				geometry.computeFaceNormals();
 				geometry.computeVertexNormals();
 				geometry.computeVertexNormals();
-				
+
 				var texture = ImageUtils.loadTexture( "textures/water.jpg" );
 				var texture = ImageUtils.loadTexture( "textures/water.jpg" );
 				texture.wrap_s = texture.wrap_t = THREE.RepeatWrapping;
 				texture.wrap_s = texture.wrap_t = THREE.RepeatWrapping;
 				material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
 				material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
-				
+
 				mesh = new THREE.Mesh( geometry, material );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 				scene.addObject( mesh );
 
 
 				renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
 				renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				
+
 				container.innerHTML = "";
 				container.innerHTML = "";
 
 
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
@@ -139,110 +133,23 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-				
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
-			}
-
-
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
 			}
 			}
 
 
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
 
 
-				}
-
-			}
+			//
 
 
-			function onDocumentMouseMove(event) {
+			function animate() {
 
 
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
+				requestAnimationFrame( animate );
 
 
-			}
-			
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = true; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = true; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = true; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = true; break;
-				}
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = false; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = false; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = false; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = false; break;
-				}
-
-			}
-			
-			function loop() {
+			function render() {
 
 
 				var time = new Date().getTime() * 0.01;
 				var time = new Date().getTime() * 0.01;
-				
-				if ( moveForward ) camera.translateZ( - 10 );
-				if ( moveBackward ) camera.translateZ( 10 );
-				if ( moveLeft )     camera.translateX( - 10 );
-				if ( moveRight )    camera.translateX( 10 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
 
 
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
 
@@ -255,12 +162,10 @@
 
 
 				mesh.geometry.__dirtyVertices = true;
 				mesh.geometry.__dirtyVertices = true;
 				//mesh.geometry.__dirtyNormals = true;
 				//mesh.geometry.__dirtyNormals = true;
-				
+
 				renderer.render(scene, camera);
 				renderer.render(scene, camera);
-				
-				stats.update();
 
 
-			}			
+			}
 
 
 		</script>
 		</script>
 
 

+ 203 - 0
examples/webgl_geometry_hierarchy.html

@@ -0,0 +1,203 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - geometry hierarchy</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var statsEnabled = true;
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var geometry, group;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
+
+				var geometry = new Cube( 100, 100, 100 );
+				var material = new THREE.MeshNormalMaterial();
+
+				group = new THREE.Object3D();
+
+				for ( var i = 0; i < 1000; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 2000 - 1000;
+					mesh.position.y = Math.random() * 2000 - 1000;
+					mesh.position.z = Math.random() * 2000 - 1000;
+					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.updateMatrix();
+					mesh.autoUpdateMatrix = false;
+
+					group.addChild( mesh );
+
+				}
+
+				scene.addObject( group );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				if ( statsEnabled ) {
+
+					stats = new Stats();
+					stats.domElement.style.position = 'absolute';
+					stats.domElement.style.top = '0px';
+					stats.domElement.style.zIndex = 100;
+					container.appendChild( stats.domElement );
+
+				}
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			function loop() {
+
+				var rx = Math.sin( new Date().getTime() * 0.0007 ) * 0.5,
+				ry = Math.sin( new Date().getTime() * 0.0003 ) * 0.5,
+				rz = Math.sin( new Date().getTime() * 0.0002 ) * 0.5;
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				group.rotation.x = rx;
+				group.rotation.y = ry;
+				group.rotation.z = rz;
+
+				renderer.render( scene, camera );
+
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function log( text ) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 281 - 0
examples/webgl_geometry_hierarchy2.html

@@ -0,0 +1,281 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - geometry hierarchy 2</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var statsEnabled = true;
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var geometry, objects;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
+
+				var geometry = new Cube( 100, 100, 100 );
+				var material = new THREE.MeshNormalMaterial();
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 1000;
+
+				objects = [];
+
+				objects.push( mesh );
+
+				var amount = 200, child, object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.x = 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.x = - 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.y = - 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.y = 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.z = - 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				object = mesh;
+
+				for ( var i = 0; i < amount; i ++ ) {
+
+					child = new THREE.Mesh( geometry, material );
+					child.position.z = 100;
+
+					object.addChild( child );
+					object = child;
+
+					objects.push( child );
+
+				}
+
+				scene.addObject( mesh );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				if ( statsEnabled ) {
+
+					stats = new Stats();
+					stats.domElement.style.position = 'absolute';
+					stats.domElement.style.top = '0px';
+					stats.domElement.style.zIndex = 100;
+					container.appendChild( stats.domElement );
+
+				}
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			function loop() {
+
+				var rx = Math.sin( new Date().getTime() * 0.0007 ) * 0.2,
+				ry = Math.sin( new Date().getTime() * 0.0003 ) * 0.1,
+				rz = Math.sin( new Date().getTime() * 0.0002 ) * 0.1;
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+					objects[ i ].rotation.x = rx;
+					objects[ i ].rotation.y = ry;
+					objects[ i ].rotation.z = rz;
+
+				}
+
+				renderer.render( scene, camera );
+
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function log( text ) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 64 - 60
examples/geometry_large_mesh.html → examples/webgl_geometry_large_mesh.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - large mesh - webgl</title>
+		<title>three.js webgl - geometry - large mesh</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -22,7 +22,7 @@
 			.inactive { background:#999; color:#eee }
 			.inactive { background:#999; color:#eee }
 		</style>
 		</style>
 	</head>
 	</head>
-	
+
 	<body>
 	<body>
 		<div id="d">
 		<div id="d">
 			<h1>Large mesh test</h1>
 			<h1>Large mesh test</h1>
@@ -30,25 +30,23 @@
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 			<span id="rwebgl" class="button">WebGL renderer</span>
 			<span id="rwebgl" class="button">WebGL renderer</span>
 			<br/>
 			<br/>
-			
-			<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a> 
+
+			<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
 			(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
 			(decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
-			
+
 			<p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
 			<p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
-			
+
 			<br/>
 			<br/>
 			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
 			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
 			<p>Canvas renderer is very slow for this demo and only diffuse material works there.
 			<p>Canvas renderer is very slow for this demo and only diffuse material works there.
 			<p>Use the flag --allow-file-access-from-files if working localy in Chrome.
 			<p>Use the flag --allow-file-access-from-files if working localy in Chrome.
 		</div>
 		</div>
-		
+
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -65,37 +63,34 @@
 			var canvasRenderer, webglRenderer;
 			var canvasRenderer, webglRenderer;
 
 
 			var loader;
 			var loader;
-			
+
 			var mesh, zmesh, lightMesh;
 			var mesh, zmesh, lightMesh;
-			
+
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
-			
+
 			var mouseX = 0;
 			var mouseX = 0;
 			var mouseY = 0;
 			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
 			var render_canvas = 1, render_gl = 1;
 			var render_canvas = 1, render_gl = 1;
 			var has_gl = 0;
 			var has_gl = 0;
-			
+
 			var bcanvas = document.getElementById("rcanvas");
 			var bcanvas = document.getElementById("rcanvas");
 			var bwebgl = document.getElementById("rwebgl");
 			var bwebgl = document.getElementById("rwebgl");
-			
+
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-			
-			loop();
-			
+			animate();
+
 			render_canvas = !has_gl;
 			render_canvas = !has_gl;
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
-			
-			setInterval(loop, 1000/60);
-			
+
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
-				
+
 				mesh = new THREE.Mesh( geometry, material );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.position.x = x;
 				mesh.position.x = x;
@@ -107,9 +102,9 @@
 				mesh.overdraw = true;
 				mesh.overdraw = true;
 				mesh.updateMatrix();
 				mesh.updateMatrix();
 				scene.addObject(mesh);
 				scene.addObject(mesh);
-				
+
 			}
 			}
-			
+
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -147,7 +142,7 @@
 				lightMesh.overdraw = true;
 				lightMesh.overdraw = true;
 				lightMesh.updateMatrix();
 				lightMesh.updateMatrix();
 				scene.addObject(lightMesh);
 				scene.addObject(lightMesh);
-				
+
 
 
 				if ( render_gl ) {
 				if ( render_gl ) {
 					try {
 					try {
@@ -160,7 +155,7 @@
 					catch (e) {
 					catch (e) {
 					}
 					}
 				}
 				}
-				
+
 				if( render_canvas ) {
 				if( render_canvas ) {
 					canvasRenderer = new THREE.CanvasRenderer();
 					canvasRenderer = new THREE.CanvasRenderer();
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -173,38 +168,38 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.zIndex = 100;
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
-				
+
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
-				
+
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
-				
+
 				var s = (new Date).getTime(),
 				var s = (new Date).getTime(),
 					callback = function( geometry ) { createScene( geometry, s ) };
 					callback = function( geometry ) { createScene( geometry, s ) };
-				
+
 				//loader.loadAscii( { model: 'obj/lucy/Lucy100k_slim.js', callback: callback } );
 				//loader.loadAscii( { model: 'obj/lucy/Lucy100k_slim.js', callback: callback } );
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: callback } );
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: callback } );
 
 
 			}
 			}
-			
-			
+
+
 			function createScene( geometry, start ) {
 			function createScene( geometry, start ) {
-				
+
 				addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
 				addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
 				addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
 				addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
 				addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
 				addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
 				addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
 				addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
-				
+
 				loader.statusDomElement.style.display = "none";
 				loader.statusDomElement.style.display = "none";
-				
+
 				log( "geometry.vertices: " + geometry.vertices.length );
 				log( "geometry.vertices: " + geometry.vertices.length );
 				log( "geometry.faces: " + geometry.faces.length );
 				log( "geometry.faces: " + geometry.faces.length );
 
 
 				log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
 				log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
-				
+
 			}
 			}
-			
+
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseX = ( event.clientX - windowHalfX );
@@ -212,63 +207,72 @@
 
 
 			}
 			}
 
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var r = 0;
 			var r = 0;
-			
-			function loop() {
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.updateMatrix();
 				camera.updateMatrix();
-				
+
 				lightMesh.position.x = 700*Math.cos(r);
 				lightMesh.position.x = 700*Math.cos(r);
 				lightMesh.position.z = 700*Math.sin(r);
 				lightMesh.position.z = 700*Math.sin(r);
 				lightMesh.updateMatrix();
 				lightMesh.updateMatrix();
 
 
 				r += 0.01;
 				r += 0.01;
-				
-				
+
+
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {
-			
+
 				var e = document.getElementById("log");
 				var e = document.getElementById("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
-				
+
 			}
 			}
-			
+
 			function toggleCanvas() {
 			function toggleCanvas() {
-			
+
 				render_canvas = !render_canvas;
 				render_canvas = !render_canvas;
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 				bcanvas.className = render_canvas ? "button" : "button inactive";
-				
+
 				render_gl = !render_canvas;
 				render_gl = !render_canvas;
 				bwebgl.className = render_gl ? "button" : "button inactive";
 				bwebgl.className = render_gl ? "button" : "button inactive";
-				
+
 				if( has_gl )
 				if( has_gl )
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-				
+
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-				
+
 			}
 			}
-			
+
 			function toggleWebGL() {
 			function toggleWebGL() {
-			
+
 				render_gl = !render_gl;
 				render_gl = !render_gl;
 				bwebgl.className = render_gl ? "button" : "button inactive";
 				bwebgl.className = render_gl ? "button" : "button inactive";
-				
+
 				render_canvas = !render_gl;
 				render_canvas = !render_gl;
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 				bcanvas.className = render_canvas ? "button" : "button inactive";
-				
+
 				if( has_gl )
 				if( has_gl )
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-					
+
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-				
+
 			}
 			}
 		</script>
 		</script>
 
 

+ 25 - 116
examples/geometry_minecraft.html → examples/webgl_geometry_minecraft.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - minecraft - webgl</title>
+		<title>three.js webgl - geometry - minecraft</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -40,21 +40,21 @@
 		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
 		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-				
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
 
 
 			var container, stats;
 			var container, stats;
@@ -67,25 +67,17 @@
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			data = generateHeight( worldWidth, worldDepth );
 			data = generateHeight( worldWidth, worldDepth );
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
+				
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												   movement_speed: 15, look_speed: 0.005, nofly: false, look_vertical: true } );
 
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
@@ -181,34 +173,18 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 			}
 			}
 
 
-			function generateAO( image, sides ) {
-
-				var c = document.createElement('canvas');
-				c.width = image.width;
-				c.height = image.height;
-				c.getContext( "2d" ).drawImage( image, 0, 0 );
-
-				return c;
-
-			}
 
 
 			function loadTexture( path ) {
 			function loadTexture( path ) {
 
 
 				var image = new Image();
 				var image = new Image();
-				image.onload = function () { this.loaded = true; };
+				image.onload = function () { texture.needsUpdate = true; };
 				image.src = path;
 				image.src = path;
 
 
-				return new THREE.MeshLambertMaterial( { map: new THREE.Texture( image, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter ) } );
+				var texture  = new THREE.Texture( image, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter );
+				
+				return new THREE.MeshLambertMaterial( { map: texture } );
 
 
 			}
 			}
 
 
@@ -243,87 +219,20 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
+			//
 
 
-				event.preventDefault();
-				event.stopPropagation();
+			function animate() {
 
 
-				switch ( event.button ) {
+				requestAnimationFrame( animate );
 
 
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*↑*/ moveForward = true; break;
-					case 40: /*↓*/ moveBackward = true; break;
-
-					case 87: /*W*/ moveForward = true; break;
-					case 83: /*S*/ moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*↑*/ moveForward = false; break;
-					case 40: /*↓*/ moveBackward = false; break;
-
-					case 87: /*W*/ moveForward = false; break;
-					case 83: /*S*/ moveBackward = false; break;
-
-				}
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function loop() {
-
-				if ( moveForward ) camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
-
-				lon += mouseX * 0.005;
-				lat -= mouseY * 0.005;
+			function render() {
 
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 38 - 135
examples/geometry_minecraft_ao.html → examples/webgl_geometry_minecraft_ao.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - minecraft - ao - webgl</title>
+		<title>three.js webgl - geometry - minecraft - ao</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -47,69 +47,54 @@
 			<button id="baot">texture + ao</button>
 			<button id="baot">texture + ao</button>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-				
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
 
 
 			var fogExp2 = true;
 			var fogExp2 = true;
-			
+
 			var container, stats;
 			var container, stats;
 
 
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 
 
 			var mesh;
 			var mesh;
+			
+			var mat;
 
 
 			var worldWidth = 128, worldDepth = 128,
 			var worldWidth = 128, worldDepth = 128,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
 			data = generateHeight( worldWidth, worldDepth );
 			data = generateHeight( worldWidth, worldDepth );
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
 
 
-				if( fogExp2 )
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
-				else
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 7500 );
-					
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 15, look_speed: 0.005, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 				camera.target.position.y = camera.position.y;
 				camera.target.position.y = camera.position.y;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
-				if( fogExp2 )
-					scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
-				else
-					scene.fog = new THREE.Fog( 0xffffff, - 1000, 7500 );
+				scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );
 
 
 				var debug_texture = false,
 				var debug_texture = false,
 					debug_numbers = false,
 					debug_numbers = false,
@@ -476,14 +461,6 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
-
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
@@ -503,6 +480,8 @@
 
 
 				canvas.width = canvas.height = size;
 				canvas.width = canvas.height = size;
 
 
+				var texture = new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter );
+
 				function generateTexture() {
 				function generateTexture() {
 
 
 					if( count == 3 ) {
 					if( count == 3 ) {
@@ -517,13 +496,13 @@
 
 
 						}
 						}
 
 
-						canvas.loaded = true;
+						texture.needsUpdate = true;
 
 
 					}
 					}
 
 
 				}
 				}
 
 
-				return new THREE.MeshLambertMaterial( { map: new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter ) } );
+				return new THREE.MeshLambertMaterial( { map: texture } );
 
 
 			}
 			}
 
 
@@ -540,6 +519,8 @@
 
 
 				canvas.width = canvas.height = size;
 				canvas.width = canvas.height = size;
 
 
+				var texture = new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter );
+				
 				function generateTexture() {
 				function generateTexture() {
 
 
 					if( count == 3 ) {
 					if( count == 3 ) {
@@ -558,13 +539,13 @@
 
 
 						}
 						}
 
 
-						canvas.loaded = true;
+						texture.needsUpdate = true;
 
 
 					}
 					}
 
 
 				}
 				}
 
 
-				return new THREE.MeshLambertMaterial( { map: new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter ) } );
+				return new THREE.MeshLambertMaterial( { map: texture } );
 
 
 			}
 			}
 			function generateMegamaterialDebug() {
 			function generateMegamaterialDebug() {
@@ -594,9 +575,10 @@
 
 
 				}
 				}
 
 
-				canvas.loaded = true;
-
-				return new THREE.MeshLambertMaterial( { map: new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter ) } );
+				var texture = new THREE.Texture( canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearMipMapLinearFilter );
+				texture.needsUpdate = true;
+				
+				return new THREE.MeshLambertMaterial( { map: texture } );
 
 
 			}
 			}
 
 
@@ -769,7 +751,7 @@
 
 
 				var image = new Image();
 				var image = new Image();
 
 
-				image.onload = function () { this.loaded = true; callback(); };
+				image.onload = function () { callback(); };
 				image.src = path;
 				image.src = path;
 
 
 				return image;
 				return image;
@@ -806,99 +788,20 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
+			//
 
 
-			function onDocumentMouseUp( event ) {
+			function animate() {
 
 
-				event.preventDefault();
-				event.stopPropagation();
+				requestAnimationFrame( animate );
 
 
-				switch ( event.button ) {
-
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function onDocumentKeyDown( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = true; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = true; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = true; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = true; break;
-				}
-
-			}
-
-			function onDocumentKeyUp( event ) {
-
-				switch( event.keyCode ) {
-
-					case 38: /*up*/
-					case 87: /*W*/ moveForward = false; break;
-
-					case 37: /*left*/
-					case 65: /*A*/ moveLeft = false; break;
-
-					case 40: /*down*/
-					case 83: /*S*/ moveBackward = false; break;
-
-					case 39: /*right*/
-					case 68: /*D*/ moveRight = false; break;
-				}
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function loop() {
-
-				if ( moveForward )  camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
-				if ( moveLeft )     camera.translateX( - 15 );
-				if ( moveRight )    camera.translateX( 15 );
-
-				lon += mouseX * 0.005;
-				lat -= mouseY * 0.005;
+			function render() {
 
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 26 - 77
examples/geometry_terrain_gl.html → examples/webgl_geometry_terrain.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - terrain - webgl</title>
+		<title>three.js webgl - geometry - terrain</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -30,23 +30,24 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div> 
+		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
-		
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-				
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
 
 
 			var container, stats;
 			var container, stats;
@@ -58,25 +59,17 @@
 			var worldWidth = 256, worldDepth = 256,
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 15, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
@@ -95,7 +88,8 @@
 				}
 				}
 
 
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
-
+				texture.needsUpdate = true;
+				
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 				scene.addObject( mesh );
@@ -112,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 			}
 
 
 			function generateHeight( width, height ) {
 			function generateHeight( width, height ) {
@@ -190,7 +179,6 @@
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 				canvasScaled.height = height * 4;
-				canvasScaled.loaded = true;
 
 
 				context = canvasScaled.getContext( '2d' );
 				context = canvasScaled.getContext( '2d' );
 				context.scale( 4, 4 );
 				context.scale( 4, 4 );
@@ -215,59 +203,20 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
+			//
 
 
-				switch ( event.button ) {
+			function animate() {
 
 
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
+				requestAnimationFrame( animate );
 
 
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function loop() {
-
-				if ( moveForward ) camera.translateZ( - 15 );
-				if ( moveBackward ) camera.translateZ( 15 );
+			function render() {
 
 
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 25 - 77
examples/geometry_terrain_gl2.html → examples/webgl_geometry_terrain2.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - terrain 2 - webgl</title>
+		<title>three.js webgl - geometry - terrain 2</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -30,24 +30,25 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div> 
+		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/PRNG.js"></script>
 		<script type="text/javascript" src="js/PRNG.js"></script>
 		<script type="text/javascript" src="js/SimplexNoise.js"></script>
 		<script type="text/javascript" src="js/SimplexNoise.js"></script>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-				
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
 
 
 			var container, stats;
 			var container, stats;
@@ -59,25 +60,16 @@
 			var worldWidth = 256, worldDepth = 256,
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
+												  movement_speed: 10, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
@@ -96,7 +88,8 @@
 				}
 				}
 
 
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
-
+				texture.needsUpdate = true;
+				
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 				scene.addObject( mesh );
@@ -113,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 			}
 
 
 			/*
 			/*
@@ -268,7 +256,6 @@
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 				canvasScaled.height = height * 4;
-				canvasScaled.loaded = true;
 
 
 				context = canvasScaled.getContext( '2d' );
 				context = canvasScaled.getContext( '2d' );
 				context.scale( 4, 4 );
 				context.scale( 4, 4 );
@@ -293,59 +280,20 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
+			//
 
 
-				switch ( event.button ) {
+			function animate() {
 
 
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
-
-				}
+				requestAnimationFrame( animate );
 
 
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function loop() {
-
-				if ( moveForward ) camera.translateZ( - 10 );
-				if ( moveBackward ) camera.translateZ( 10 );
+			function render() {
 
 
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
-
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 29 - 89
examples/geometry_terrain_fog_gl.html → examples/webgl_geometry_terrain_fog.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - geometry - terrain + fog - webgl</title>
+		<title>three.js webgl - geometry - terrain + fog</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -30,28 +30,26 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div> 
+		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
-		
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) {
-				
-				THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
 				document.getElementById( 'container' ).innerHTML = "";
 				document.getElementById( 'container' ).innerHTML = "";
-				
+
 			}
 			}
-			
-			var fogExp2 = true;
-			
+
 			var container, stats;
 			var container, stats;
 
 
 			var camera, scene, renderer;
 			var camera, scene, renderer;
@@ -61,36 +59,20 @@
 			var worldWidth = 256, worldDepth = 256,
 			var worldWidth = 256, worldDepth = 256,
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 
-			var mouseX = 0, mouseY = 0,
-			lat = 0, lon = 0, phy = 0, theta = 0;
-
-			var direction = new THREE.Vector3(),
-			moveForward = false, moveBackward = false;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
 				container = document.getElementById( 'container' );
 				container = document.getElementById( 'container' );
 
 
-				if ( fogExp2 )
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
-				else
-					camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.QuakeCamera( { fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000,
+												  movement_speed: 5, look_speed: 0.004, nofly: false, look_vertical: true } );
+
 				camera.target.position.z = - 100;
 				camera.target.position.z = - 100;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
-				if ( fogExp2 )
-					scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
-				else
-					scene.fog = new THREE.Fog( 0xefd1b5, - 750, 1000 );
+				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
 
 				data = generateHeight( worldWidth, worldDepth );
 				data = generateHeight( worldWidth, worldDepth );
 
 
@@ -106,7 +88,8 @@
 				}
 				}
 
 
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
 				texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
-
+				texture.needsUpdate = true;
+				
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 				scene.addObject( mesh );
@@ -123,11 +106,6 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
-
 			}
 			}
 
 
 			function generateHeight( width, height ) {
 			function generateHeight( width, height ) {
@@ -192,6 +170,7 @@
 					imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 					imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
+
 				}
 				}
 
 
 				context.putImageData( image, 0, 0 );
 				context.putImageData( image, 0, 0 );
@@ -201,7 +180,6 @@
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 				canvasScaled.height = height * 4;
-				canvasScaled.loaded = true;
 
 
 				context = canvasScaled.getContext( '2d' );
 				context = canvasScaled.getContext( '2d' );
 				context.scale( 4, 4 );
 				context.scale( 4, 4 );
@@ -226,59 +204,21 @@
 
 
 			}
 			}
 
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
-
-				switch ( event.button ) {
-
-					case 0: moveForward = true; break;
-					case 2: moveBackward = true; break;
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-				event.stopPropagation();
+			//
 
 
-				switch ( event.button ) {
+			function animate() {
 
 
-					case 0: moveForward = false; break;
-					case 2: moveBackward = false; break;
+				requestAnimationFrame( animate );
 
 
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
+				render();
+				stats.update();
 
 
 			}
 			}
 
 
-			function loop() {
-
-				if ( moveForward ) camera.translateZ( - 5 );
-				if ( moveBackward ) camera.translateZ( 5 );
-
-				lon += mouseX * 0.004;
-				lat -= mouseY * 0.004;
 
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = ( 90 - lat ) * Math.PI / 180;
-				theta = lon * Math.PI / 180;
+			function render() {
 
 
-				camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
-				camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
-				camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
-
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
 
 

+ 225 - 0
examples/webgl_hdr.html

@@ -0,0 +1,225 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - HDR texture</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+		    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;
+
+		    }
+
+		    a { color: red; }
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl HDR texture example -
+			based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
+		</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<!-- HDR fragment shader -->
+		<script id="fs-hdr" type="x-shader/x-fragment">
+			uniform sampler2D   tDiffuse;
+			uniform float       exposure;
+			uniform float       brightMax;
+
+			varying vec2  vUv;
+
+			vec3 decode_pnghdr( const in vec4 color ) {
+
+				// remove gamma correction
+				vec4 res = color * color;
+
+				// decoded RI
+				float ri = pow( 2.0, res.w * 32.0 - 16.0 );
+
+				// decoded HDR pixel
+				res.xyz = res.xyz * ri;
+				return res.xyz;
+
+			}
+
+			void main(void)
+			{
+				vec4 color = texture2D( tDiffuse, vUv );
+				color.xyz  = decode_pnghdr( color );
+
+				// apply gamma correction and exposure
+				//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
+
+				// Perform tone-mapping
+				float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
+				float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
+				color *= YD;
+
+				gl_FragColor = vec4( color.xyz, 1.0 );
+			}
+		</script>
+
+		<!-- HDR vertex shader -->
+		<script id="vs-hdr" type="x-shader/x-vertex">
+			varying vec2 vUv;
+
+			void main(void)
+			{
+				vUv  = uv;
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			}
+		</script>
+
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var camera, scene, renderer, mesh, directionalLight;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var materialHDR, quad;
+
+			var delta, current, old = 0, sign = 1, rate = 1;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 900;
+
+				scene = new THREE.Scene();
+
+				directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.x = 0;
+				directionalLight.position.y = 0;
+				directionalLight.position.z = 1;
+				directionalLight.position.normalize();
+				scene.addLight( directionalLight );
+
+				var texture = ImageUtils.loadTexture( "textures/memorial.png" );
+				texture.min_filter = THREE.LinearFilter;
+				texture.mag_filter = THREE.NearestFilter;
+
+				materialHDR = new THREE.MeshShaderMaterial( {
+
+					uniforms: {
+						tDiffuse:  { type: "t", value: 0, texture: texture },
+						exposure:  { type: "f", value: 0.125 },
+						brightMax: { type: "f", value: 0.5 }
+						},
+					vertex_shader: getText( 'vs-hdr' ),
+					fragment_shader: getText( 'fs-hdr' )
+
+				} );
+
+				var plane = new Plane( 512, 768 );
+
+				quad = new THREE.Mesh( plane, materialHDR );
+				quad.position.z = -100;
+				scene.addObject( quad );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+			}
+
+			function getText( id ) {
+
+				return document.getElementById( id ).textContent;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				if ( ! old ) old = new Date().getTime();
+				current = new Date().getTime();
+				delta = (current  - old ) * 0.005;
+				old = current;
+
+				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
+
+					rate = 0.25;
+
+				} else {
+
+					rate = 1;
+
+				}
+
+				if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
+
+					sign *= -1;
+
+				}
+
+				materialHDR.uniforms.exposure.value += sign * rate * delta;
+
+				// Render final scene to the screen with film shader
+
+				renderer.render( scene, camera );
+
+			}
+
+			function is_browser_compatible() {
+
+				// WebGL support
+
+				try { var test = new Float32Array(1); } catch(e) { return false; }
+
+				// Web workers
+
+				return !!window.Worker;
+
+			}
+
+		</script>
+	</body>
+</html>

+ 52 - 44
examples/interactive_voxelpainter_gl.html → examples/webgl_interactive_voxelpainter.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - interactive - voxel painter - webgl</title>
+		<title>three.js webgl - interactive - voxel painter</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -10,7 +10,7 @@
 				margin: 0px;
 				margin: 0px;
 				overflow: hidden;
 				overflow: hidden;
 			}
 			}
-			
+
 			#oldie { background-color: #ddd !important }
 			#oldie { background-color: #ddd !important }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -18,17 +18,14 @@
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
-
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var container, stats;
 			var container, stats;
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 			var projector, plane, cube;
 			var projector, plane, cube;
@@ -36,12 +33,12 @@
 			rollOveredFace, isShiftDown = false,
 			rollOveredFace, isShiftDown = false,
 			theta = 45, isCtrlDown = false;
 			theta = 45, isCtrlDown = false;
 
 
-			var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();			
+			var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
 			var cubeGeo, cubeMaterial;
 			var cubeGeo, cubeMaterial;
 			var i, intersector;
 			var i, intersector;
-			
+
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -63,20 +60,20 @@
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 
 
 				// roll-over helpers
 				// roll-over helpers
-				
+
 				rollOverGeo = new Cube( 50, 50, 50 );
 				rollOverGeo = new Cube( 50, 50, 50 );
 				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
 				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
 				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
 				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
 				scene.addObject( rollOverMesh );
 				scene.addObject( rollOverMesh );
-				
+
 
 
 				// cubes
 				// cubes
-				
+
 				cubeGeo = new Cube( 50, 50, 50 );
 				cubeGeo = new Cube( 50, 50, 50 );
 				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
 				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
 				cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
 				cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
 				// picking
 				// picking
-				
+
 				projector = new THREE.Projector();
 				projector = new THREE.Projector();
 
 
 				// grid
 				// grid
@@ -125,35 +122,35 @@
 			}
 			}
 
 
 			function getRealIntersector( intersects ) {
 			function getRealIntersector( intersects ) {
-				
+
 				for( i = 0; i < intersects.length; i++ ) {
 				for( i = 0; i < intersects.length; i++ ) {
-				
+
 					intersector = intersects[ i ];
 					intersector = intersects[ i ];
-					
+
 					if ( intersector.object != rollOverMesh ) {
 					if ( intersector.object != rollOverMesh ) {
-						
+
 						return intersector;
 						return intersector;
-						
+
 					}
 					}
-				
+
 				}
 				}
-				
+
 				return null;
 				return null;
-				
+
 			}
 			}
-			
+
 			function setVoxelPosition( intersector ) {
 			function setVoxelPosition( intersector ) {
-				
+
 				tmpVec.copy( intersector.face.normal );
 				tmpVec.copy( intersector.face.normal );
-				
-				voxelPosition.add( intersector.point, intersector.object.rotationMatrix.multiplyVector3( tmpVec ) );
-					
+
+				voxelPosition.add( intersector.point, intersector.object.matrixRotation.multiplyVector3( tmpVec ) );
+
 				voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
 				voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
 				voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
 				voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
 				voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
 				voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
 
 
 			}
 			}
-			
+
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				event.preventDefault();
 				event.preventDefault();
@@ -172,11 +169,11 @@
 				if ( intersects.length > 0 ) {
 				if ( intersects.length > 0 ) {
 
 
 					intersector = getRealIntersector( intersects );
 					intersector = getRealIntersector( intersects );
-					
+
 					// delete cube
 					// delete cube
-					
+
 					if ( isCtrlDown ) {
 					if ( isCtrlDown ) {
-						
+
 						if ( intersector.object != plane ) {
 						if ( intersector.object != plane ) {
 
 
 							scene.removeObject( intersector.object );
 							scene.removeObject( intersector.object );
@@ -185,15 +182,15 @@
 						}
 						}
 
 
 					// create cube
 					// create cube
-					
+
 					} else {
 					} else {
 
 
-						intersector = getRealIntersector( intersects );						
+						intersector = getRealIntersector( intersects );
 						setVoxelPosition( intersector );
 						setVoxelPosition( intersector );
 
 
 						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
 						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
 						voxel.position.copy( voxelPosition );
 						voxel.position.copy( voxelPosition );
-						
+
 						scene.addObject( voxel );
 						scene.addObject( voxel );
 
 
 					}
 					}
@@ -227,8 +224,19 @@
 				window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
 				window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
 
 
 			}
 			}
-			
-			function loop() {
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				if ( isShiftDown ) {
 				if ( isShiftDown ) {
 
 
@@ -245,19 +253,19 @@
 
 
 					intersector = getRealIntersector( intersects );
 					intersector = getRealIntersector( intersects );
 					if ( intersector ) {
 					if ( intersector ) {
-					
-						setVoxelPosition( intersector );					
+
+						setVoxelPosition( intersector );
 						rollOverMesh.position = voxelPosition;
 						rollOverMesh.position = voxelPosition;
-						
+
 					}
 					}
-					
+
 				}
 				}
-				
+
 				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
 				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 36 - 30
examples/lights_pointlights_gl.html → examples/webgl_lights_pointlights.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - lights - point lights - webgl</title>
+		<title>three.js webl - lights - point lights</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -28,39 +28,37 @@
 			a:hover {
 			a:hover {
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
-			
+
 			#log { color:#fff; position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#log { color:#fff; position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
 
 
 		<pre id="log"></pre>
 		<pre id="log"></pre>
-		
+
 		<div id="container"></div>
 		<div id="container"></div>
 		<div id="info">
 		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights WebGL demo.<br />
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights WebGL demo.<br />
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var camera, scene, renderer,
 			var camera, scene, renderer,
 			particle1, particle2, particle2,
 			particle1, particle2, particle2,
 			light1, light2, light3,
 			light1, light2, light3,
 			object,loader;
 			object,loader;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -73,21 +71,21 @@
 
 
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
-				
+
 				var callback = function( geometry ) {
 				var callback = function( geometry ) {
-				
+
 					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading }  )  );
 					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading }  )  );
 					object.scale.x = object.scale.y = object.scale.z = 0.80;
 					object.scale.x = object.scale.y = object.scale.z = 0.80;
 					object.overdraw = true;
 					object.overdraw = true;
 					scene.addObject( object );
 					scene.addObject( object );
-					
+
 					loader.statusDomElement.style.display = "none";
 					loader.statusDomElement.style.display = "none";
-					
+
 				};
 				};
-				
+
 				//loader.loadAscii( { model: "obj/walt/WaltHead_slim.js", callback: callback } );
 				//loader.loadAscii( { model: "obj/walt/WaltHead_slim.js", callback: callback } );
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: callback } );
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: callback } );
-				
+
 				/*
 				/*
 				var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
 				var directionalLight = new THREE.DirectionalLight( 0x111111, 0.9 );
 				directionalLight.position.x = 1;
 				directionalLight.position.x = 1;
@@ -96,7 +94,7 @@
 				directionalLight.position.normalize();
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
 				scene.addLight( directionalLight );
 				*/
 				*/
-				
+
 				scene.addLight( new THREE.AmbientLight( 0x00000 ) );
 				scene.addLight( new THREE.AmbientLight( 0x00000 ) );
 
 
 				light1 = new THREE.PointLight( 0xff0040 );
 				light1 = new THREE.PointLight( 0xff0040 );
@@ -109,23 +107,23 @@
 				scene.addLight( light3 );
 				scene.addLight( light3 );
 
 
 				var sphere = new Sphere( 0.5, 16, 8 );
 				var sphere = new Sphere( 0.5, 16, 8 );
-				
+
 				var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
 				var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
 				l1.position = light1.position;
 				l1.position = light1.position;
 				scene.addObject( l1 );
 				scene.addObject( l1 );
-				
+
 				var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
 				var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
 				l2.position = light2.position;
 				l2.position = light2.position;
 				scene.addObject( l2 );
 				scene.addObject( l2 );
-	 
+
 				var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
 				var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
 				l3.position = light3.position;
 				l3.position = light3.position;
 				scene.addObject( l3 );
 				scene.addObject( l3 );
- 
+
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
-				
+
 				/*
 				/*
 				stats = new Stats();
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.position = 'absolute';
@@ -136,7 +134,17 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
 
 
@@ -154,17 +162,15 @@
 				light3.position.y = Math.cos( time * 0.3 ) * 40;
 				light3.position.y = Math.cos( time * 0.3 ) * 40;
 				light3.position.z = Math.sin( time * 0.5 ) * 30;
 				light3.position.z = Math.sin( time * 0.5 ) * 30;
 
 
-				renderer.render(scene, camera);
-				
-				//stats.update();
+				renderer.render( scene, camera );
 
 
 			}
 			}
-			
+
 			function log( text ) {
 			function log( text ) {
-			
+
 				var e = document.getElementById("log");
 				var e = document.getElementById("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
-				
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 94 - 91
examples/lines_colors_gl.html → examples/webgl_lines_colors.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - lines - cubes - colors - webgl</title>
+		<title>three.js webgl - lines - cubes - colors</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -13,7 +13,7 @@
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
+
 			#info {
 			#info {
 				position: absolute;
 				position: absolute;
 				top: 10px; width: 100%;
 				top: 10px; width: 100%;
@@ -24,7 +24,7 @@
 				text-align: center;
 				text-align: center;
 				z-index:100;
 				z-index:100;
 			}
 			}
-			
+
 			a {
 			a {
 				color: orange;
 				color: orange;
 				text-decoration: none;
 				text-decoration: none;
@@ -33,38 +33,37 @@
 			a:hover {
 			a:hover {
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
-			
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
+
 		<div id="info">
 		<div id="info">
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL 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://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var mouseX = 0, mouseY = 0,
 			var mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 			windowHalfX = window.innerWidth / 2,
 			windowHalfY = window.innerHeight / 2,
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
-			
-			material,
-
-			stats;
+			camera, scene, renderer, material;
 
 
 			var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
 			var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
-			
+
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -75,7 +74,7 @@
 
 
 				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
 				camera.position.z = 700;
-				
+
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 
 
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
@@ -83,16 +82,16 @@
 				renderer.autoClear = false;
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
 
 
-				var geometry = new THREE.Geometry(), 
+				var geometry = new THREE.Geometry(),
 					geometry2 = new THREE.Geometry(),
 					geometry2 = new THREE.Geometry(),
 					geometry3 = new THREE.Geometry(),
 					geometry3 = new THREE.Geometry(),
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
 					colors = [], colors2 = [], colors3 = [];
 					colors = [], colors2 = [], colors3 = [];
 
 
 				for ( i = 0; i < points.length; i ++ ) {
 				for ( i = 0; i < points.length; i ++ ) {
-				
+
 					geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
 					geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
-				
+
 					colors[ i ] = new THREE.Color( 0xffffff );
 					colors[ i ] = new THREE.Color( 0xffffff );
 					colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
 					colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
 
 
@@ -103,26 +102,26 @@
 					colors3[ i ].setHSV( i / points.length, 1.0, 1.0 );
 					colors3[ i ].setHSV( i / points.length, 1.0, 1.0 );
 
 
 				}
 				}
-				
+
 				geometry2.vertices = geometry3.vertices = geometry.vertices;
 				geometry2.vertices = geometry3.vertices = geometry.vertices;
-				
+
 				geometry.colors = colors;
 				geometry.colors = colors;
 				geometry2.colors = colors2;
 				geometry2.colors = colors2;
 				geometry3.colors = colors3;
 				geometry3.colors = colors3;
-				
+
 				// lines
 				// lines
 
 
 				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
 				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
 
 
 				var line, p, scale = 0.3, d = 225,
 				var line, p, scale = 0.3, d = 225,
-					parameters =  [ [ material, scale*1.5, [-d,0,0],  geometry ], 
-									[ material, scale*1.5, [0,0,0],  geometry2 ], 
+					parameters =  [ [ material, scale*1.5, [-d,0,0],  geometry ],
+									[ material, scale*1.5, [0,0,0],  geometry2 ],
 									[ material, scale*1.5, [d,0,0],  geometry3 ] ];
 									[ material, scale*1.5, [d,0,0],  geometry3 ] ];
-				
+
 				material.vertex_colors = true;
 				material.vertex_colors = true;
-				
+
 				for ( i = 0; i < parameters.length; ++i ) {
 				for ( i = 0; i < parameters.length; ++i ) {
-				
+
 					p = parameters[ i ];
 					p = parameters[ i ];
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
@@ -130,38 +129,37 @@
 					line.position.y = p[ 2 ][ 1 ];
 					line.position.y = p[ 2 ][ 1 ];
 					line.position.z = p[ 2 ][ 2 ];
 					line.position.z = p[ 2 ][ 2 ];
 					scene.addObject( line );
 					scene.addObject( line );
-					
+
 				}
 				}
 
 
 				// postprocessing
 				// postprocessing
-				
-                cameraOrtho = new THREE.Camera();
+
+				cameraOrtho = new THREE.Camera();
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-                cameraOrtho.position.z = 100;
+				cameraOrtho.position.z = 100;
 
 
 				sceneScreen = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
-				
+
 				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
 				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
-                rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
-                rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
-                rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
+				rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
+				rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
+				rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
 
 
 				var screen_shader = ShaderUtils.lib["screen"];
 				var screen_shader = ShaderUtils.lib["screen"];
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
-				
+
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 				screen_uniforms["opacity"].value = 1.0;
 				screen_uniforms["opacity"].value = 1.0;
-				
-                materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: screen_uniforms,
-                    vertex_shader: screen_shader.vertex_shader,
-                    fragment_shader: screen_shader.fragment_shader,
+				materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
 					blending: THREE.AdditiveBlending
 					blending: THREE.AdditiveBlending
 
 
-                } );
-				
-				
+				} );
+
 				var convolution_shader = ShaderUtils.lib["convolution"];
 				var convolution_shader = ShaderUtils.lib["convolution"];
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 
 
@@ -171,43 +169,42 @@
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 				convolution_uniforms["uImageIncrement"].value = blurx;
 				convolution_uniforms["uImageIncrement"].value = blurx;
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
-				
-                materialConvolution = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: convolution_uniforms,
-                    vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
-                    fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
+				materialConvolution = new THREE.MeshShaderMaterial( {
 
 
-                } );
-				
-				var plane = new Plane( window.innerWidth, window.innerHeight );				
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
 
 
-                quadScreen = new THREE.Mesh( plane, materialConvolution );
+				} );
+
+				var plane = new Plane( window.innerWidth, window.innerHeight );
+
+				quadScreen = new THREE.Mesh( plane, materialConvolution );
 				quadScreen.position.z = -100;
 				quadScreen.position.z = -100;
-                sceneScreen.addObject( quadScreen );
+				sceneScreen.addObject( quadScreen );
 
 
-				
 				stats = new Stats();
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				//container.appendChild(stats.domElement);
 				//container.appendChild(stats.domElement);
-				
+
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			// port of Processing Java code by Thomas Diewald
 			// port of Processing Java code by Thomas Diewald
 			// http://www.openprocessing.org/visuals/?visualID=15599
 			// http://www.openprocessing.org/visuals/?visualID=15599
-			
+
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
-			
+
 				var half = side/2,
 				var half = side/2,
-					
+
 					vec_s = [
 					vec_s = [
-			  
+
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
@@ -216,31 +213,31 @@
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
-				
+
 					],
 					],
-  
+
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 
 
 				if( --iterations >= 0 ) {
 				if( --iterations >= 0 ) {
-			
+
 					var tmp = [];
 					var tmp = [];
-					
+
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
-					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
-					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
-					
+
 					return tmp;
 					return tmp;
-					
+
 				}
 				}
-			
+
 				return vec;
 				return vec;
 			}
 			}
-			
+
 			//
 			//
 
 
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
@@ -273,51 +270,59 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.updateMatrix();
 				camera.updateMatrix();
 
 
 				var time = new Date().getTime() * 0.0005;
 				var time = new Date().getTime() * 0.0005;
-				
+
 				for( var i = 0; i<scene.objects.length; i++ ) {
 				for( var i = 0; i<scene.objects.length; i++ ) {
-				
+
 					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
 					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
-					
+
 				}
 				}
-				
+
 				//renderer.render( scene, camera );
 				//renderer.render( scene, camera );
 
 
 				renderer.clear();
 				renderer.clear();
-				
+
 				// Render scene into texture
 				// Render scene into texture
-				
+
 				renderer.render( scene, camera, rtTexture1 );
 				renderer.render( scene, camera, rtTexture1 );
 
 
 				// Render quad with blured scene into texture (convolution pass 1)
 				// Render quad with blured scene into texture (convolution pass 1)
-				
+
 				quadScreen.materials = [ materialConvolution ];
 				quadScreen.materials = [ materialConvolution ];
-				
+
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
-				
+
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
-				
+
 				// Render quad with blured scene into texture (convolution pass 2)
 				// Render quad with blured scene into texture (convolution pass 2)
-				
+
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 				materialConvolution.uniforms.uImageIncrement.value = blury;
-				
+
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
-				
+
 				// Render original scene with superimposed blur to texture
 				// Render original scene with superimposed blur to texture
-				
+
 				quadScreen.materials = [ materialScreen ];
 				quadScreen.materials = [ materialScreen ];
-				
+
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 				materialScreen.uniforms.opacity.value = 1.3;
 				materialScreen.uniforms.opacity.value = 1.3;
-				
+
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 
 
 				// Render to screen
 				// Render to screen
@@ -325,8 +330,6 @@
 				materialScreen.uniforms.tDiffuse.texture = rtTexture1;
 				materialScreen.uniforms.tDiffuse.texture = rtTexture1;
 				renderer.render( sceneScreen, cameraOrtho );
 				renderer.render( sceneScreen, cameraOrtho );
 
 
-				//stats.update();
-				
 			}
 			}
 
 
 
 

+ 51 - 49
examples/lines_cubes_gl.html → examples/webgl_lines_cubes.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - lines - cubes - webgl</title>
+		<title>three.js webgl - lines - cubes</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -13,7 +13,7 @@
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
+
 			#info {
 			#info {
 				position: absolute;
 				position: absolute;
 				top: 10px; width: 100%;
 				top: 10px; width: 100%;
@@ -24,7 +24,7 @@
 				text-align: center;
 				text-align: center;
 				z-index:100;
 				z-index:100;
 			}
 			}
-			
+
 			a {
 			a {
 				color: orange;
 				color: orange;
 				text-decoration: none;
 				text-decoration: none;
@@ -33,34 +33,35 @@
 			a:hover {
 			a:hover {
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
-			
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
+
 		<div id="info">
 		<div id="info">
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL 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://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var mouseX = 0, mouseY = 0,
 			var mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 			windowHalfX = window.innerWidth / 2,
 			windowHalfY = window.innerHeight / 2,
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -82,11 +83,11 @@
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 );
 					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 );
 
 
 				for ( i = 0; i < points.length; i ++ ) {
 				for ( i = 0; i < points.length; i ++ ) {
-				
+
 					geometry.vertices.push( new THREE.Vertex( points[i] ) );
 					geometry.vertices.push( new THREE.Vertex( points[i] ) );
-				
+
 				}
 				}
-				
+
 
 
 				// lines
 				// lines
 
 
@@ -97,14 +98,14 @@
 					parameters = [ [ m3, scale*0.5, [0,0,0],  g1 ], [ m2, scale*0.5, [d, 0, 0],  g1 ], [ m2, scale*0.5, [-d, 0, 0],  g1 ],
 					parameters = [ [ m3, scale*0.5, [0,0,0],  g1 ], [ m2, scale*0.5, [d, 0, 0],  g1 ], [ m2, scale*0.5, [-d, 0, 0],  g1 ],
 								   [ m2, scale*0.5, [0,d,0],  g1 ], [ m2, scale*0.5, [d, d, 0],  g1 ], [ m2, scale*0.5, [-d, d, 0],  g1 ],
 								   [ m2, scale*0.5, [0,d,0],  g1 ], [ m2, scale*0.5, [d, d, 0],  g1 ], [ m2, scale*0.5, [-d, d, 0],  g1 ],
 								   [ m2, scale*0.5, [0,-d,0], g1 ], [ m2, scale*0.5, [d, -d, 0], g1 ], [ m2, scale*0.5, [-d, -d, 0], g1 ],
 								   [ m2, scale*0.5, [0,-d,0], g1 ], [ m2, scale*0.5, [d, -d, 0], g1 ], [ m2, scale*0.5, [-d, -d, 0], g1 ],
-								   
+
 								   [ m1, scale*0.5, [2*d, 0, 0],  g1 ], [ m1, scale*0.5, [-2*d, 0, 0],  g1 ],
 								   [ m1, scale*0.5, [2*d, 0, 0],  g1 ], [ m1, scale*0.5, [-2*d, 0, 0],  g1 ],
 								   [ m1, scale*0.5, [2*d, d, 0],  g1 ], [ m1, scale*0.5, [-2*d, d, 0],  g1 ],
 								   [ m1, scale*0.5, [2*d, d, 0],  g1 ], [ m1, scale*0.5, [-2*d, d, 0],  g1 ],
 								   [ m1, scale*0.5, [2*d, -d, 0], g1 ], [ m1, scale*0.5, [-2*d, -d, 0], g1 ],
 								   [ m1, scale*0.5, [2*d, -d, 0], g1 ], [ m1, scale*0.5, [-2*d, -d, 0], g1 ],
 								   ];
 								   ];
-				
+
 				for ( i = 0; i < parameters.length; ++i ) {
 				for ( i = 0; i < parameters.length; ++i ) {
-				
+
 					p = parameters[ i ];
 					p = parameters[ i ];
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 					line = new THREE.Line( p[ 3 ],  p[ 0 ] );
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
 					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
@@ -112,30 +113,24 @@
 					line.position.y = p[ 2 ][ 1 ];
 					line.position.y = p[ 2 ][ 1 ];
 					line.position.z = p[ 2 ][ 2 ];
 					line.position.z = p[ 2 ][ 2 ];
 					scene.addObject( line );
 					scene.addObject( line );
-					
-				}
 
 
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
+				}
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+
 			}
 			}
 
 
 			// port of Processing Java code by Thomas Diewald
 			// port of Processing Java code by Thomas Diewald
 			// http://www.openprocessing.org/visuals/?visualID=15599
 			// http://www.openprocessing.org/visuals/?visualID=15599
-			
+
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
-			
+
 				var half = side/2,
 				var half = side/2,
-					
+
 					vec_s = [
 					vec_s = [
-			  
+
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
@@ -144,31 +139,31 @@
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
-				
+
 					],
 					],
-  
+
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 
 
 				if( --iterations >= 0 ) {
 				if( --iterations >= 0 ) {
-			
+
 					var tmp = [];
 					var tmp = [];
-					
+
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
-					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
-					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) ); 
+					tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 					tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
-					
+
 					return tmp;
 					return tmp;
-					
+
 				}
 				}
-			
+
 				return vec;
 				return vec;
 			}
 			}
-			
+
 			//
 			//
 
 
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
@@ -201,23 +196,30 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.updateMatrix();
 				camera.updateMatrix();
 
 
 				var time = new Date().getTime() * 0.0015;
 				var time = new Date().getTime() * 0.0015;
-				
-				for( var i = 0; i<scene.objects.length; i++ ) {
-				
-					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
-					
+
+				for( var i = 0; i < scene.objects.length; i++ ) {
+
+					scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1);
+
 				}
 				}
 
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 
-				//stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 39 - 39
examples/lines_sphere_gl.html → examples/webgl_lines_sphere.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - lines - spheres - webgl</title>
+		<title>three.js webgl - lines - spheres</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -13,7 +13,7 @@
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
+
 			#info {
 			#info {
 				position: absolute;
 				position: absolute;
 				top: 10px; width: 100%;
 				top: 10px; width: 100%;
@@ -24,7 +24,7 @@
 				text-align: center;
 				text-align: center;
 				z-index:100;
 				z-index:100;
 			}
 			}
-			
+
 			a {
 			a {
 				color: #ff0080;
 				color: #ff0080;
 				text-decoration: none;
 				text-decoration: none;
@@ -33,7 +33,7 @@
 			a:hover {
 			a:hover {
 				color: #0080ff;
 				color: #0080ff;
 			}
 			}
-			
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
@@ -42,29 +42,30 @@
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
-		
+
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var SCREEN_WIDTH = window.innerWidth,
 			var SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,
 				SCREEN_HEIGHT = window.innerHeight,
 
 
 			r = 450,
 			r = 450,
-			
+
 			mouseX = 0, mouseY = 0,
 			mouseX = 0, mouseY = 0,
 
 
 			windowHalfX = window.innerWidth / 2,
 			windowHalfX = window.innerWidth / 2,
 			windowHalfY = window.innerHeight / 2,
 			windowHalfY = window.innerHeight / 2,
 
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -77,14 +78,14 @@
 				camera.position.z = 1000;
 				camera.position.z = 1000;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
+
 				var i, line, vector1, vector2, material, p,
 				var i, line, vector1, vector2, material, p,
 					parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.75, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 1.25, 0x000833, 0.8, 1 ],
 					parameters = [ [ 0.25, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.75, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 1.25, 0x000833, 0.8, 1 ],
 							       [ 3.0, 0xaaaaaa, 0.75, 2 ], [ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ], [ 5.5, 0xffffff, 0.125, 1 ] ],
 							       [ 3.0, 0xaaaaaa, 0.75, 2 ], [ 3.5, 0xffffff, 0.5, 1 ], [ 4.5, 0xffffff, 0.25, 1 ], [ 5.5, 0xffffff, 0.125, 1 ] ],
-					
+
 					geometry = new THREE.Geometry();
 					geometry = new THREE.Geometry();
-				
-				
+
+
 				for ( i = 0; i < 1500; ++i ) {
 				for ( i = 0; i < 1500; ++i ) {
 
 
 					vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 					vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
@@ -96,13 +97,13 @@
 
 
 					geometry.vertices.push( new THREE.Vertex( vector1 ) );
 					geometry.vertices.push( new THREE.Vertex( vector1 ) );
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
-					
+
 				}
 				}
 
 
 				for( i = 0; i < parameters.length; ++i ) {
 				for( i = 0; i < parameters.length; ++i ) {
-					
+
 					p = parameters[ i ];
 					p = parameters[ i ];
-					
+
 					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
 					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
 
 
 					line = new THREE.Line( geometry, material, THREE.LinePieces );
 					line = new THREE.Line( geometry, material, THREE.LinePieces );
@@ -117,25 +118,18 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 				container.appendChild(renderer.domElement);
 				container.appendChild(renderer.domElement);
-				
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
-				
+
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = event.clientX - windowHalfX;
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 				mouseY = event.clientY - windowHalfY;
-				
+
 			}
 			}
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
@@ -147,7 +141,7 @@
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 				}
-				
+
 			}
 			}
 
 
 			function onDocumentTouchMove( event ) {
 			function onDocumentTouchMove( event ) {
@@ -159,12 +153,20 @@
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
 				}
-				
+
 			}
 			}
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				//camera.position.x += ( mouseX - camera.position.x ) * .05;
 				//camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
@@ -175,17 +177,15 @@
 				var time = new Date().getTime() * 0.0001;
 				var time = new Date().getTime() * 0.0001;
 
 
 				for( var i = 0; i<scene.objects.length; i++ ) {
 				for( var i = 0; i<scene.objects.length; i++ ) {
-				
+
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 
 
 					if ( i < 5 ) scene.objects[i].scale.x = scene.objects[i].scale.y = scene.objects[i].scale.z = scene.objects[i].originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
 					if ( i < 5 ) scene.objects[i].scale.x = scene.objects[i].scale.y = scene.objects[i].scale.z = scene.objects[i].originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
-					
+
 				}
 				}
-				
-				//stats.update();
-				 
+
 			}
 			}
-			
+
 
 
 		</script>
 		</script>
 	</body>
 	</body>

+ 32 - 21
examples/materials_gl.html → examples/webgl_materials.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - webgl</title>
+		<title>three.js webgl - materials</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -17,20 +17,23 @@
 
 
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var container, stats;
 			var container, stats;
 
 
 			var camera, scene, renderer, objects;
 			var camera, scene, renderer, objects;
 			var particleLight, pointLight;
 			var particleLight, pointLight;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -48,9 +51,9 @@
 				var line_material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ),
 				var line_material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ),
 					geometry = new THREE.Geometry(),
 					geometry = new THREE.Geometry(),
 					floor = -75, step = 25;
 					floor = -75, step = 25;
-				
+
 				for ( var i = 0; i <= 40; i ++ ) {
 				for ( var i = 0; i <= 40; i ++ ) {
-				
+
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, floor, i * step - 500 ) ) );
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, floor, i * step - 500 ) ) );
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(   500, floor, i * step - 500 ) ) );
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(   500, floor, i * step - 500 ) ) );
 
 
@@ -58,12 +61,12 @@
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor,  500 ) ) );
 					geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor,  500 ) ) );
 
 
 				}
 				}
-				
+
 				var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
 				var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
 				scene.addObject( line );
 				scene.addObject( line );
 
 
 				var generatedTexture = new THREE.Texture( generateTexture() );
 				var generatedTexture = new THREE.Texture( generateTexture() );
-				generatedTexture.image.loaded = 1;
+				generatedTexture.needsUpdate = true;
 
 
 				var materials = [];
 				var materials = [];
 				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
 				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
@@ -86,7 +89,7 @@
 				var geometry_smooth = new Sphere( 70, 32, 16 );
 				var geometry_smooth = new Sphere( 70, 32, 16 );
 				var geometry_flat = new Sphere( 70, 32, 16 );
 				var geometry_flat = new Sphere( 70, 32, 16 );
 				var geometry_pieces = new Sphere( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
 				var geometry_pieces = new Sphere( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
-				
+
 				for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
 				for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
 
 
 					var face = geometry_pieces.faces[ i ];
 					var face = geometry_pieces.faces[ i ];
@@ -95,20 +98,20 @@
 				}
 				}
 
 
 				geometry_pieces.sortFacesByMaterial();
 				geometry_pieces.sortFacesByMaterial();
-				
+
 				materials.push( new THREE.MeshFaceMaterial() );
 				materials.push( new THREE.MeshFaceMaterial() );
 
 
 				objects = [];
 				objects = [];
 
 
 				var sphere, geometry, material;
 				var sphere, geometry, material;
-				
+
 				for ( var i = 0, l = materials.length; i < l; i ++ ) {
 				for ( var i = 0, l = materials.length; i < l; i ++ ) {
-				
+
 					material = materials[ i ];
 					material = materials[ i ];
-					
-					geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces : 
+
+					geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
 							   ( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
 							   ( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
-					
+
 					sphere = new THREE.Mesh( geometry, material );
 					sphere = new THREE.Mesh( geometry, material );
 
 
 					sphere.position.x = ( i % 4 ) * 200 - 400;
 					sphere.position.x = ( i % 4 ) * 200 - 400;
@@ -195,7 +198,16 @@
 
 
 			//
 			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				var timer = new Date().getTime() * 0.0001;
 				var timer = new Date().getTime() * 0.0001;
 
 
@@ -221,14 +233,13 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
-			
+
 			function log( text ) {
 			function log( text ) {
-			
+
 				var e = document.getElementById("log");
 				var e = document.getElementById("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
-				
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 25 - 16
examples/materials_cars.html → examples/webgl_materials_cars.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube reflection [cars] - webgl</title>
+		<title>three.js webgl - materials - cube reflection [cars]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -27,7 +27,7 @@
 			#car_info { text-align:center; }
 			#car_info { text-align:center; }
 			#car_name { font-size:1em }
 			#car_name { font-size:1em }
 			#car_author { font-size:1em }
 			#car_author { font-size:1em }
-			
+
 			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -56,13 +56,16 @@
 
 
 		<div id="log"></div>
 		<div id="log"></div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var STATS_ENABLED = false;
 			var STATS_ENABLED = false;
 
 
 			var CARS = {
 			var CARS = {
@@ -150,12 +153,9 @@
 
 
 			var loader = new THREE.Loader( true );
 			var loader = new THREE.Loader( true );
 			document.body.appendChild( loader.statusDomElement );
 			document.body.appendChild( loader.statusDomElement );
-			
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-
-			setInterval(loop, 1000/60);
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -214,13 +214,14 @@
 
 
 				}
 				}
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
+
 				var r = "textures/cube/Bridge2/";
 				var r = "textures/cube/Bridge2/";
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 							 r + "posy.jpg", r + "negy.jpg",
 							 r + "posy.jpg", r + "negy.jpg",
 							 r + "posz.jpg", r + "negz.jpg" ];
 							 r + "posz.jpg", r + "negz.jpg" ];
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images );
+				var textureCube = ImageUtils.loadTextureCube( urls );
 
 
 				// common materials
 				// common materials
 
 
@@ -569,16 +570,24 @@
 
 
 			}
 			}
 
 
-			var r = 0;
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
 
 
-			function loop() {
+			function render() {
 
 
-				r -= 0.005;
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
-				camera.position.x = 1000 * Math.cos( r );
-				camera.position.z = 1000 * Math.sin( r );
+				camera.position.x = 1000 * Math.cos( timer );
+				camera.position.z = 1000 * Math.sin( timer );
 
 
 				cameraCube.target.position.x = - camera.position.x;
 				cameraCube.target.position.x = - camera.position.x;
 				cameraCube.target.position.y = - camera.position.y;
 				cameraCube.target.position.y = - camera.position.y;

+ 58 - 64
examples/materials_cars_camaro.html → examples/webgl_materials_cars_camaro.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube reflection [camaro] - webgl</title>
+		<title>three.js webgl - materials - cube reflection [camaro]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -23,58 +23,45 @@
 			button:hover { background:#333 }
 			button:hover { background:#333 }
 		</style>
 		</style>
 	</head>
 	</head>
-	
+
 	<body>
 	<body>
 		<div id="d">
 		<div id="d">
 			<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a></div>
 			<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a></div>
-			
+
 			<div id="buttons"></div>
 			<div id="buttons"></div>
 		</div>
 		</div>
-		
-		<div id="log"></div>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<div id="log"></div>
 
 
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
-			var container;
-			var stats;
+			var container, stats;
 
 
-			var camera;
-			var scene;
-			var webglRenderer;
+			var camera, scene, webglRenderer;
 
 
 			var lightMesh;
 			var lightMesh;
-			
+
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
-			
-			var mouseX = 0;
-			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var mouseX = 0, mouseY = 0;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			
-			loop();
-						
-			setInterval(loop, 1000/60);
-			
+			animate();
+
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -85,7 +72,7 @@
 				camera.updateMatrix();
 				camera.updateMatrix();
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				
+
 				// LIGHTS
 				// LIGHTS
 
 
 				var ambient = new THREE.AmbientLight( 0x555555 );
 				var ambient = new THREE.AmbientLight( 0x555555 );
@@ -125,16 +112,17 @@
 				stats.domElement.style.zIndex = 100;
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
+
 				var r = "textures/cube/SwedishRoyalCastle/";
 				var r = "textures/cube/SwedishRoyalCastle/";
-				var urls = [ r + "px.jpg", r + "nx.jpg", 
-							 r + "py.jpg", r + "ny.jpg", 
+				var urls = [ r + "px.jpg", r + "nx.jpg",
+							 r + "py.jpg", r + "ny.jpg",
 							 r + "pz.jpg", r + "nz.jpg" ];
 							 r + "pz.jpg", r + "nz.jpg" ];
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images );
-				
+				var textureCube = ImageUtils.loadTextureCube( urls );
+
 				var camaroMaterials = {
 				var camaroMaterials = {
-					
+
 					body: 		[],
 					body: 		[],
 					chrome: 	new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
 					chrome: 	new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
 					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
 					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
@@ -142,15 +130,15 @@
 					tire:       new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 					tire:       new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 					interior:   new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
 					interior:   new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
 					black:      new THREE.MeshLambertMaterial( { color: 0x000000 } )
 					black:      new THREE.MeshLambertMaterial( { color: 0x000000 } )
-					
+
 				}
 				}
-				
+
 				camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 				camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 				camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 				camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
 				camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				
+
 				camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 				camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 				camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 				camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, env_map: textureCube, combine: THREE.MultiplyOperation } ) ] );
 				camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
 				camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, env_map: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
@@ -158,26 +146,26 @@
 
 
 				var loader = new THREE.Loader();
 				var loader = new THREE.Loader();
 				loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
 				loader.loadBinary( { model: "obj/camaro/CamaroNoUv_bin.js", callback: function( geometry ) { createScene( geometry, camaroMaterials ) } } );
-				
+
 			}
 			}
-			
+
 			function $( id ) { return document.getElementById( id ) }
 			function $( id ) { return document.getElementById( id ) }
-			
-			
+
+
 			function createButtons( materials, geometry ) {
 			function createButtons( materials, geometry ) {
 
 
 				var i, src = "", parent = $( "buttons" );
 				var i, src = "", parent = $( "buttons" );
-				
+
 				for( i = 0; i < materials.length; i++ ) {
 				for( i = 0; i < materials.length; i++ ) {
-				
+
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
-					
+
 				}
 				}
-				
+
 				parent.innerHTML = src;
 				parent.innerHTML = src;
 
 
 				for( i = 0; i < materials.length; i++ ) {
 				for( i = 0; i < materials.length; i++ ) {
-				
+
 					$( "m" + i ).counter = i;
 					$( "m" + i ).counter = i;
 					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
 					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
 
 
@@ -188,7 +176,7 @@
 			function createScene( geometry, materials ) {
 			function createScene( geometry, materials ) {
 
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 				var s = 75, m = new THREE.MeshFaceMaterial();
-				
+
 				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; 	// car body
 				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; 	// car body
 				geometry.materials[ 1 ][ 0 ] = materials.chrome; 			// wheels chrome
 				geometry.materials[ 1 ][ 0 ] = materials.chrome; 			// wheels chrome
 				geometry.materials[ 2 ][ 0 ] = materials.chrome; 			// grille chrome
 				geometry.materials[ 2 ][ 0 ] = materials.chrome; 			// grille chrome
@@ -198,14 +186,13 @@
 				geometry.materials[ 6 ][ 0 ] = materials.tire;              // tire
 				geometry.materials[ 6 ][ 0 ] = materials.tire;              // tire
 				geometry.materials[ 7 ][ 0 ] = materials.black;             // tireling
 				geometry.materials[ 7 ][ 0 ] = materials.black;             // tireling
 				geometry.materials[ 8 ][ 0 ] = materials.black;             // behind grille
 				geometry.materials[ 8 ][ 0 ] = materials.black;             // behind grille
-				
+
 				SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
 				SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
 
 
 				createButtons( materials.body, geometry );
 				createButtons( materials.body, geometry );
 
 
 			}
 			}
 
 
-			
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseX = ( event.clientX - windowHalfX );
@@ -213,31 +200,38 @@
 
 
 			}
 			}
 
 
-			var r = 0;
-			
-			function loop() {
+			// 
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
-				lightMesh.position.z = 1500 * Math.sin( r );
-
-				r += 0.01;
+				lightMesh.position.x = 1500 * Math.cos( timer );
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {
-			
+
 				var e = document.getElementById("log");
 				var e = document.getElementById("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
-				
+
 			}
 			}
-			
+
 		</script>
 		</script>
 
 
 	</body>
 	</body>

+ 31 - 25
examples/materials_cubemap.html → examples/webgl_materials_cubemap.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube reflection / refraction [Walt] - webgl</title>
+		<title>three.js webgl - materials - cube reflection / refraction [Walt]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -21,7 +21,7 @@
 			#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
 			#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
 			.inactive { background:#999; color:#eee }
 			.inactive { background:#999; color:#eee }
-			
+
 			#oldie { margin-top:11em !important }
 			#oldie { margin-top:11em !important }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -36,13 +36,16 @@
 
 
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var container, stats;
 			var container, stats;
 
 
 			var camera, scene, webglRenderer;
 			var camera, scene, webglRenderer;
@@ -51,7 +54,7 @@
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh, zmesh, lightMesh, geometry;
 
 
 			var loader;
 			var loader;
-			
+
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
 
 
 			var mouseX = 0;
 			var mouseX = 0;
@@ -63,7 +66,7 @@
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -101,20 +104,16 @@
 						path + 'pz' + format, path + 'nz' + format
 						path + 'pz' + format, path + 'nz' + format
 					];
 					];
 
 
-				var images = ImageUtils.loadArray( urls );
-
-				var reflectionCube = new THREE.Texture( images );
-				var refractionCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
+				var reflectionCube = ImageUtils.loadTextureCube( urls );
+				var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
 				
 				
-				//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, env_map: new THREE.TextureCube( images ), combine: THREE.MixOperation, reflectivity: 0.25 } );
+				//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, env_map: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.25 } );
 				var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
 				var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
 				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, env_map: refractionCube, refraction_ratio: 0.95 } );
 				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, env_map: refractionCube, refraction_ratio: 0.95 } );
 				var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: reflectionCube } )
 				var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: reflectionCube } )
 
 
-				//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
-				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
-				
+
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				webglRenderer.autoClear = false;
@@ -129,7 +128,7 @@
 
 
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
-				
+
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 				loader.loadBinary( { model: "obj/walt/WaltHead_bin.js", callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 
 
 			}
 			}
@@ -141,7 +140,7 @@
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, -100, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, -100, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, -100, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, -100, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, -100, 0,0,0, m3 );
-				
+
 				loader.statusDomElement.style.display = "none";
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 			}
@@ -153,9 +152,20 @@
 
 
 			}
 			}
 
 
-			var r = 0;
+			//
 
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -165,17 +175,13 @@
 				cameraCube.target.position.z = - camera.position.z;
 				cameraCube.target.position.z = - camera.position.z;
 
 
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
-				lightMesh.position.z = 1500 * Math.sin( r );
-
-				r += 0.01;
+				lightMesh.position.x = 1500 * Math.cos( timer );
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.clear();
 				webglRenderer.clear();
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {

+ 24 - 17
examples/materials_cubemap_balls_reflection.html → examples/webgl_materials_cubemap_balls_reflection.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube reflection [balls] - webgl</title>
+		<title>three.js webgl - materials - cube reflection [balls]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -26,7 +26,7 @@
 			a {
 			a {
 				color: #ffffff;
 				color: #ffffff;
 			}
 			}
-			
+
 			#oldie a { color:#da0 }
 			#oldie a { color:#da0 }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -34,13 +34,16 @@
 	<body>
 	<body>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var statsEnabled = false;
 			var statsEnabled = false;
 
 
 			var container, stats;
 			var container, stats;
@@ -61,12 +64,12 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 
 				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 				camera.position.z = 3200;
@@ -87,10 +90,7 @@
 						path + 'pz' + format, path + 'nz' + format
 						path + 'pz' + format, path + 'nz' + format
 					];
 					];
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images );
-				// var textureCube = new THREE.Texture( images, new THREE.CubeRefractionMapping );
-
+				var textureCube = ImageUtils.loadTextureCube( urls );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } );
 
 
 				for ( var i = 0; i < 200; i ++ ) {
 				for ( var i = 0; i < 200; i ++ ) {
@@ -103,8 +103,6 @@
 					scene.addObject( mesh );
 					scene.addObject( mesh );
 				}
 				}
 
 
-				//SceneUtils.addPanoramaCubePlanes( sceneCube, 100000, images );
-				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
 
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer = new THREE.WebGLRenderer();
@@ -131,7 +129,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -144,8 +153,6 @@
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 		</script>
 		</script>

+ 22 - 11
examples/materials_cubemap_balls_refraction.html → examples/webgl_materials_cubemap_balls_refraction.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube refraction [balls] - webgl</title>
+		<title>three.js webgl - materials - cube refraction [balls]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -26,7 +26,7 @@
 			a {
 			a {
 				color: #ffffff;
 				color: #ffffff;
 			}
 			}
-			
+
 			#oldie a { color:#da0 }
 			#oldie a { color:#da0 }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -34,13 +34,16 @@
 	<body>
 	<body>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var statsEnabled = false;
 			var statsEnabled = false;
 
 
 			var container, stats;
 			var container, stats;
@@ -61,7 +64,7 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -87,8 +90,7 @@
 						path + 'pz' + format, path + 'nz' + format
 						path + 'pz' + format, path + 'nz' + format
 					];
 					];
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
+				var textureCube = ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube, refraction_ratio: 0.95 } );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube, refraction_ratio: 0.95 } );
 
 
 				for ( var i = 0; i < 200; i ++ ) {
 				for ( var i = 0; i < 200; i ++ ) {
@@ -129,7 +131,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -142,8 +155,6 @@
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 		</script>
 		</script>

+ 22 - 15
examples/materials_cubemap_escher.html → examples/webgl_materials_cubemap_escher.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube reflection [Escher] - webgl</title>
+		<title>three.js webgl - materials - cube reflection [Escher]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -14,11 +14,10 @@
 				text-align:center;
 				text-align:center;
 			}
 			}
 			a {	color: #ff0080;	text-decoration: none; }
 			a {	color: #ff0080;	text-decoration: none; }
-			a:hover { color: #0080ff; }			
+			a:hover { color: #0080ff; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em auto -9.0em; z-index:1000; position:relative; display:block; 
 			#d { text-align:center; margin:1em auto -9.0em; z-index:1000; position:relative; display:block; 
 				 background:rgba(0,0,0,0.75); padding:0.25em; width:300px; border-radius:10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
 				 background:rgba(0,0,0,0.75); padding:0.25em; width:300px; border-radius:10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
-				 
 			#oldie { margin-top:15em !important }
 			#oldie { margin-top:15em !important }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -32,13 +31,16 @@
 
 
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var statsEnabled = false;
 			var statsEnabled = false;
 
 
 			var container, stats;
 			var container, stats;
@@ -58,7 +60,7 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -77,9 +79,7 @@
 							 r + "py.jpg", r + "ny.jpg", 
 							 r + "py.jpg", r + "ny.jpg", 
 							 r + "pz.jpg", r + "nz.jpg" ];
 							 r + "pz.jpg", r + "nz.jpg" ];
 
 
-				var images = ImageUtils.loadArray( urls );
-
-				var textureCube = new THREE.Texture( images );
+				var textureCube = ImageUtils.loadTextureCube( urls );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } )
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } )
 				var geometry = new Sphere( 100, 96, 64 );
 				var geometry = new Sphere( 100, 96, 64 );
 
 
@@ -87,8 +87,6 @@
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 16;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 16;
 				scene.addObject( mesh );
 				scene.addObject( mesh );
 
 
-				//SceneUtils.addPanoramaCubePlanes( scene, 6000, images );
-				//SceneUtils.addPanoramaCube( scene, 6000, images );
 				SceneUtils.addPanoramaCubeWebGL( scene, 6000, textureCube );
 				SceneUtils.addPanoramaCubeWebGL( scene, 6000, textureCube );
 
 
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer = new THREE.WebGLRenderer();
@@ -114,15 +112,24 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {

+ 31 - 23
examples/materials_cubemap_refraction.html → examples/webgl_materials_cubemap_refraction.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - cube refraction [Lucy] - webgl</title>
+		<title>three.js webgl - materials - cube refraction [Lucy]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -20,7 +20,7 @@
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block; 
 			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block; 
 				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
 				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
-				
+
 			#oldie { margin-top:15em !important }
 			#oldie { margin-top:15em !important }
 		</style>
 		</style>
 	</head>
 	</head>
@@ -35,13 +35,16 @@
 
 
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var FLOOR = -250;
 			var FLOOR = -250;
 
 
 			var container, stats;
 			var container, stats;
@@ -52,19 +55,16 @@
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh, zmesh, lightMesh, geometry;
 
 
 			var loader;
 			var loader;
-			
+
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
 
 
-			var mouseX = 0;
-			var mouseY = 0;
+			var mouseX = 0, mouseY = 0;
 
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -102,8 +102,7 @@
 							 r + "py.jpg", r + "ny.jpg", 
 							 r + "py.jpg", r + "ny.jpg", 
 							 r + "pz.jpg", r + "nz.jpg" ];
 							 r + "pz.jpg", r + "nz.jpg" ];
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images, new THREE.CubeRefractionMapping() );
+				var textureCube = ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
 
 
 				var cubeMaterial3 = new THREE.MeshBasicMaterial( { color: 0xccddff, env_map: textureCube, refraction_ratio: 0.98, reflectivity:0.9 } );
 				var cubeMaterial3 = new THREE.MeshBasicMaterial( { color: 0xccddff, env_map: textureCube, refraction_ratio: 0.98, reflectivity:0.9 } );
 				var cubeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xccfffd, env_map: textureCube, refraction_ratio: 0.985 } );
 				var cubeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xccfffd, env_map: textureCube, refraction_ratio: 0.985 } );
@@ -126,9 +125,11 @@
 
 
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
-				
+
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 				loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } } );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
+
 			}
 			}
 
 
 			function createScene( geometry, m1, m2, m3 ) {
 			function createScene( geometry, m1, m2, m3 ) {
@@ -138,7 +139,7 @@
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, z, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,      0, 0, z, 0,0,0, m1 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, z, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,   -900, 0, z, 0,0,0, m2 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, z, 0,0,0, m3 );
 				SceneUtils.addMesh( scene, geometry, s,    900, 0, z, 0,0,0, m3 );
-				
+
 				loader.statusDomElement.style.display = "none";
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 			}
@@ -150,9 +151,20 @@
 
 
 			}
 			}
 
 
-			var r = 0;
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
-			function loop() {
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -162,17 +174,13 @@
 				cameraCube.target.position.z = - camera.position.z;
 				cameraCube.target.position.z = - camera.position.z;
 
 
 
 
-				lightMesh.position.x = 1500 * Math.cos( r );
-				lightMesh.position.z = 1500 * Math.sin( r );
-
-				r += 0.01;
+				lightMesh.position.x = 1500 * Math.cos( timer );
+				lightMesh.position.z = 1500 * Math.sin( timer );
 
 
 				webglRenderer.clear();
 				webglRenderer.clear();
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {

+ 20 - 9
examples/materials_grass.html → examples/webgl_materials_grass.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - grass - webgl</title>
+		<title>three.js webgl - materials - grass</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -18,18 +18,19 @@
 
 
 	<body>
 	<body>
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var camera, scene, renderer,
 			var camera, scene, renderer,
 			mesh, levels = [];
 			mesh, levels = [];
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -42,10 +43,12 @@
 				var geometry = new Plane( 100, 100 );
 				var geometry = new Plane( 100, 100 );
 
 
 				var texture = generateTextureBase();
 				var texture = generateTextureBase();
+				texture.needsUpdate = true;
 
 
 				for ( var i = 0; i < 10; i ++ ) {
 				for ( var i = 0; i < 10; i ++ ) {
 
 
 					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( texture ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping ) } ) );
 					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( texture ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping ) } ) );
+					mesh.materials[0].map.needsUpdate = true;
 					mesh.rotation.x = - 90 * ( Math.PI / 180 );
 					mesh.rotation.x = - 90 * ( Math.PI / 180 );
 					mesh.position.y = i * 0.5;
 					mesh.position.y = i * 0.5;
 					scene.addObject( mesh );
 					scene.addObject( mesh );
@@ -62,7 +65,6 @@
 			function generateTextureBase() {
 			function generateTextureBase() {
 
 
 				var canvas = document.createElement( 'canvas' );
 				var canvas = document.createElement( 'canvas' );
-				canvas.loaded = true;
 				canvas.width = 1024;
 				canvas.width = 1024;
 				canvas.height = 1024;
 				canvas.height = 1024;
 
 
@@ -89,7 +91,6 @@
 				texture.getContext( '2d' ).drawImage( texture, 0, 0 );
 				texture.getContext( '2d' ).drawImage( texture, 0, 0 );
 
 
 				var canvas = document.createElement( 'canvas' );
 				var canvas = document.createElement( 'canvas' );
-				canvas.loaded = true;
 				canvas.width = texture.width;
 				canvas.width = texture.width;
 				canvas.height = texture.height;
 				canvas.height = texture.height;
 
 
@@ -99,7 +100,17 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() / 6000;
 				var time = new Date().getTime() / 6000;
 
 

+ 56 - 44
examples/materials_normalmap.html → examples/webgl_materials_normalmap.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - normal map - webgl</title>
+		<title>three.js webgl - materials - normal map</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -23,29 +23,29 @@
 				font-family:Monospace;
 				font-family:Monospace;
 				font-size:13px;
 				font-size:13px;
 				text-align:center;
 				text-align:center;
-				z-index:1000; 
+				z-index:1000;
 			}
 			}
-			
+
 			#oldie {
 			#oldie {
 				background:rgb(200,100,0) !important;
 				background:rgb(200,100,0) !important;
-				color:#fff;				
+				color:#fff;
 			}
 			}
-			
-			#vt { display:none } 
+
+			#vt { display:none }
 			#vt, #vt a { color:orange; }
 			#vt, #vt a { color:orange; }
 			.code { }
 			.code { }
-			
+
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 		</style>
 		</style>
 	</head>
 	</head>
 
 
 	<body>
 	<body>
 		<pre id="log"></pre>
 		<pre id="log"></pre>
-		
+
 		<div id="info">
 		<div id="info">
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo. 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
 			ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
 			ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
-			
+
 			<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
 			<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
 			on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
 			on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
 			or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
 			or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
@@ -53,13 +53,16 @@
 			</div>
 			</div>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
-		
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var statsEnabled = true;
 			var statsEnabled = true;
 
 
 			var container, stats, loader;
 			var container, stats, loader;
@@ -68,7 +71,7 @@
 
 
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh1, mesh2;
 			var mesh1, mesh2;
-	
+
 			var directionalLight, pointLight, ambientLight;
 			var directionalLight, pointLight, ambientLight;
 
 
 			var mouseX = 0;
 			var mouseX = 0;
@@ -82,7 +85,7 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -112,7 +115,7 @@
 				scene.addLight( directionalLight );
 				scene.addLight( directionalLight );
 
 
 				// light representation
 				// light representation
-				
+
 				var sphere = new Sphere( 100, 16, 8 );
 				var sphere = new Sphere( 100, 16, 8 );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
 				lightMesh.position = pointLight.position;
 				lightMesh.position = pointLight.position;
@@ -120,36 +123,36 @@
 				scene.addObject(lightMesh);
 				scene.addObject(lightMesh);
 
 
 				// common material parameters
 				// common material parameters
-				
+
 				var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
 				var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
 
 
 				// normal map shader
 				// normal map shader
-				
+
 				var shader = ShaderUtils.lib[ "normal" ];
 				var shader = ShaderUtils.lib[ "normal" ];
 				var uniforms = Uniforms.clone( shader.uniforms );
 				var uniforms = Uniforms.clone( shader.uniforms );
 
 
 				uniforms[ "enableAO" ].value = true;
 				uniforms[ "enableAO" ].value = true;
 				uniforms[ "enableDiffuse" ].value = false;
 				uniforms[ "enableDiffuse" ].value = false;
-				
+
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
 				uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
 				uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
-				
+
 				uniforms[ "tDisplacement" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
 				uniforms[ "tDisplacement" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
 				uniforms[ "uDisplacementBias" ].value = -0.428408 * scale;
 				uniforms[ "uDisplacementBias" ].value = -0.428408 * scale;
 				uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
 				uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
-				
+
 				uniforms[ "uPointLightPos" ].value = pointLight.position;
 				uniforms[ "uPointLightPos" ].value = pointLight.position;
 				uniforms[ "uPointLightColor" ].value = pointLight.color;
 				uniforms[ "uPointLightColor" ].value = pointLight.color;
 
 
 				uniforms[ "uDirLightPos" ].value = directionalLight.position;
 				uniforms[ "uDirLightPos" ].value = directionalLight.position;
 				uniforms[ "uDirLightColor" ].value = directionalLight.color;
 				uniforms[ "uDirLightColor" ].value = directionalLight.color;
-				
+
 				uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
 				uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
-				
+
 				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 				uniforms[ "uSpecularColor" ].value.setHex( specular );
 				uniforms[ "uSpecularColor" ].value.setHex( specular );
 				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 				uniforms[ "uAmbientColor" ].value.setHex( ambient );
-				
+
 				uniforms[ "uShininess" ].value = shininess;
 				uniforms[ "uShininess" ].value = shininess;
 
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
@@ -159,7 +162,7 @@
 
 
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
-				
+
 				loader.loadBinary( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
 				loader.loadBinary( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
 
 
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer = new THREE.WebGLRenderer();
@@ -169,7 +172,7 @@
 				var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
 				var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
 				document.getElementById( "description" ).innerHTML = description;
 				document.getElementById( "description" ).innerHTML = description;
 				document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
 				document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
-				
+
 				if ( statsEnabled ) {
 				if ( statsEnabled ) {
 
 
 					stats = new Stats();
 					stats = new Stats();
@@ -183,41 +186,52 @@
 			}
 			}
 
 
 			function createScene( geometry, scale, material1, material2 ) {
 			function createScene( geometry, scale, material1, material2 ) {
-				
+
 				geometry.computeTangents();
 				geometry.computeTangents();
-				
+
 				mesh1 = SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
 				mesh1 = SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
 				mesh2 = SceneUtils.addMesh( scene, geometry, scale,  scale * 12, 0, 0, 0,0,0, material2 );
 				mesh2 = SceneUtils.addMesh( scene, geometry, scale,  scale * 12, 0, 0, 0,0,0, material2 );
-				
+
 				loader.statusDomElement.style.display = "none";
 				loader.statusDomElement.style.display = "none";
-				
+
 			}
 			}
-			
+
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;
 				mouseY = ( event.clientY - windowHalfY ) * 10;
 
 
 			}
 			}
-			
-			function loop() {
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
-				
+
 				if( mesh1 ) {
 				if( mesh1 ) {
-				
+
 					mesh1.rotation.y = ry;
 					mesh1.rotation.y = ry;
 					mesh1.rotation.x = rx;
 					mesh1.rotation.x = rx;
-					
+
 				}
 				}
-				
+
 				if( mesh2 ) {
 				if( mesh2 ) {
-					
+
 					mesh2.rotation.y = ry;
 					mesh2.rotation.y = ry;
 					mesh2.rotation.x = rx;
 					mesh2.rotation.x = rx;
-					
+
 				}
 				}
-				
+
 				lightMesh.position.x = 2500 * Math.cos( r );
 				lightMesh.position.x = 2500 * Math.cos( r );
 				lightMesh.position.z = 2500 * Math.sin( r );
 				lightMesh.position.z = 2500 * Math.sin( r );
 
 
@@ -225,8 +239,6 @@
 
 
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {
@@ -235,7 +247,7 @@
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
 
 			}
 			}
-			
+
 
 
 		</script>
 		</script>
 
 

+ 21 - 9
examples/materials_normalmap2.html → examples/webgl_materials_normalmap2.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - normal map [Lee Perry-Smith] - webgl</title>
+		<title>three.js webgl - materials - normal map [Lee Perry-Smith]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -52,12 +52,15 @@
 			</div>
 			</div>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var statsEnabled = true;
 			var statsEnabled = true;
 
 
@@ -76,10 +79,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -159,6 +160,8 @@
 
 
 				}
 				}
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
 			}
 			}
 
 
 			function createScene( geometry, scale, material ) {
 			function createScene( geometry, scale, material ) {
@@ -178,7 +181,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 				var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
 
 
@@ -191,8 +205,6 @@
 
 
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {

+ 61 - 63
examples/materials_shaders.html → examples/webgl_materials_shaders.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - shaders [Phong, Lambert] - webgl</title>
+		<title>three.js webgl - materials - shaders [Phong, Lambert]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -22,7 +22,7 @@
 			.inactive { background:#999; color:#eee }
 			.inactive { background:#999; color:#eee }
 		</style>
 		</style>
 	</head>
 	</head>
-	
+
 	<body>
 	<body>
 		<div id="d">
 		<div id="d">
 			<h1>Blinn-Phong / Lambert materials</h1>
 			<h1>Blinn-Phong / Lambert materials</h1>
@@ -30,22 +30,21 @@
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
 			<span id="rwebgl" class="button">WebGL renderer</span>
 			<span id="rwebgl" class="button">WebGL renderer</span>
 			<br/>
 			<br/>
-			
+
 			<p><a href="http://github.com/mrdoob/three.js">Three.js</a> example
 			<p><a href="http://github.com/mrdoob/three.js">Three.js</a> example
-			
+
 			<br/>
 			<br/>
 			<p>Best viewed in Chrome 9 or Firefox 4 using WebGL renderer.
 			<p>Best viewed in Chrome 9 or Firefox 4 using WebGL renderer.
 			<p>Canvas renderer is very slow on anything other than Chrome.
 			<p>Canvas renderer is very slow on anything other than Chrome.
 			<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
 			<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
 		</div>
 		</div>
-		
-		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -54,43 +53,34 @@
 			var SCREEN_HEIGHT = window.innerHeight;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var FLOOR = -250;
 			var FLOOR = -250;
 
 
-			var container;
-			var stats;
+			var container, stats;
 
 
-			var camera;
-			var scene;
-			var canvasRenderer, webglRenderer;
+			var camera, scene, canvasRenderer, webglRenderer;
 
 
 			var mesh, zmesh, lightMesh, geometry;
 			var mesh, zmesh, lightMesh, geometry;
-			
+
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
-			
-			var mouseX = 0;
-			var mouseY = 0;
 
 
-			var windowHalfX = window.innerWidth >> 1;
-			var windowHalfY = window.innerHeight >> 1;
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
 
 			var render_canvas = 1, render_gl = 1;
 			var render_canvas = 1, render_gl = 1;
 			var has_gl = 0;
 			var has_gl = 0;
-			
+
 			var bcanvas = document.getElementById("rcanvas");
 			var bcanvas = document.getElementById("rcanvas");
 			var bwebgl = document.getElementById("rwebgl");
 			var bwebgl = document.getElementById("rwebgl");
-			
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-			
-			loop();
-			
+			animate();
+
 			render_canvas = !has_gl;
 			render_canvas = !has_gl;
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
-			
-			setInterval(loop, 1000/60);
-			
+
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
 			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
-				
+
 				mesh = new THREE.Mesh( geometry, material );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.position.x = x;
 				mesh.position.x = x;
@@ -102,9 +92,9 @@
 				mesh.overdraw = true;
 				mesh.overdraw = true;
 				mesh.updateMatrix();
 				mesh.updateMatrix();
 				scene.addObject(mesh);
 				scene.addObject(mesh);
-				
+
 			}
 			}
-			
+
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -147,7 +137,7 @@
 				sphere = new Sphere( 100, 32, 32 );
 				sphere = new Sphere( 100, 32, 32 );
 
 
 				var y1 = 0, y2 = -200;
 				var y1 = 0, y2 = -200;
-				
+
 				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
 				addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
 				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
 				addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
 
 
@@ -180,7 +170,7 @@
 					catch (e) {
 					catch (e) {
 					}
 					}
 				}
 				}
-				
+
 				if( render_canvas ) {
 				if( render_canvas ) {
 					canvasRenderer = new THREE.CanvasRenderer();
 					canvasRenderer = new THREE.CanvasRenderer();
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -193,7 +183,7 @@
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.top = '0px';
 				stats.domElement.style.zIndex = 100;
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
 				container.appendChild( stats.domElement );
-				
+
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bcanvas.addEventListener("click", toggleCanvas, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
 				bwebgl.addEventListener("click", toggleWebGL, false);
 
 
@@ -201,12 +191,14 @@
 				loader.loadAscii( { model: "obj/torus/Torus_slim.js", callback: function( geometry ) { createScene( geometry ) } } );
 				loader.loadAscii( { model: "obj/torus/Torus_slim.js", callback: function( geometry ) { createScene( geometry ) } } );
 				//loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
 				//loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
 
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
+
 			}
 			}
 
 
 			function createScene( geometry ) {
 			function createScene( geometry ) {
-				
+
 				var s = 80, t = s + 20, y = 200;
 				var s = 80, t = s + 20, y = 200;
-				
+
 				addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
 				addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
 				addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
 				addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
 				addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
 				addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
@@ -217,7 +209,7 @@
 
 
 			}
 			}
 
 
-			
+
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseX = ( event.clientX - windowHalfX );
@@ -225,63 +217,69 @@
 
 
 			}
 			}
 
 
-			var r = 0;
-			
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var timer = - new Date().getTime() * 0.0002;
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.updateMatrix();
 				camera.updateMatrix();
-				
-				lightMesh.position.x = 700*Math.cos(r);
-				lightMesh.position.z = 700*Math.sin(r);
+
+				lightMesh.position.x = 700*Math.cos( timer );
+				lightMesh.position.z = 700*Math.sin( timer );
 				lightMesh.updateMatrix();
 				lightMesh.updateMatrix();
 
 
-				r += 0.01;
-				
-				
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log(text) {
 			function log(text) {
-			
+
 				var e = document.getElementById("log");
 				var e = document.getElementById("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 				e.innerHTML = text + "<br/>" + e.innerHTML;
-				
+
 			}
 			}
-			
+
 			function toggleCanvas() {
 			function toggleCanvas() {
-			
+
 				render_canvas = !render_canvas;
 				render_canvas = !render_canvas;
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 				bcanvas.className = render_canvas ? "button" : "button inactive";
-				
+
 				render_gl = !render_canvas;
 				render_gl = !render_canvas;
 				bwebgl.className = render_gl ? "button" : "button inactive";
 				bwebgl.className = render_gl ? "button" : "button inactive";
-				
+
 				if( has_gl )
 				if( has_gl )
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-				
+
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-				
+
 			}
 			}
-			
+
 			function toggleWebGL() {
 			function toggleWebGL() {
-			
+
 				render_gl = !render_gl;
 				render_gl = !render_gl;
 				bwebgl.className = render_gl ? "button" : "button inactive";
 				bwebgl.className = render_gl ? "button" : "button inactive";
-				
+
 				render_canvas = !render_gl;
 				render_canvas = !render_gl;
 				bcanvas.className = render_canvas ? "button" : "button inactive";
 				bcanvas.className = render_canvas ? "button" : "button inactive";
-				
+
 				if( has_gl )
 				if( has_gl )
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
 					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-					
+
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
 				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-				
+
 			}
 			}
 		</script>
 		</script>
 
 

+ 28 - 16
examples/materials_shaders_fresnel.html → examples/webgl_materials_shaders_fresnel.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - shaders [Fresnel] - webgl</title>
+		<title>three.js webgl - materials - shaders [Fresnel]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -27,22 +27,25 @@
 				color: #ffffff;
 				color: #ffffff;
 			}
 			}
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
-			
+
 			#oldie a { color:#0b0 }
 			#oldie a { color:#0b0 }
 		</style>
 		</style>
 	</head>
 	</head>
 
 
 	<body>
 	<body>
 		<pre id="log"></pre>
 		<pre id="log"></pre>
-		
+
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> </div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> </div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
-		
+
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var statsEnabled = true;
 			var statsEnabled = true;
 
 
@@ -55,8 +58,7 @@
 
 
 			var directionalLight, pointLight;
 			var directionalLight, pointLight;
 
 
-			var mouseX = 0;
-			var mouseY = 0;
+			var mouseX = 0, mouseY = 0;
 
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
@@ -64,7 +66,7 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -90,8 +92,7 @@
 					];
 					];
 
 
 
 
-				var images = ImageUtils.loadArray( urls );
-				var textureCube = new THREE.Texture( images );
+				var textureCube = ImageUtils.loadTextureCube( urls );
 
 
 				var shader = ShaderUtils.lib["fresnel"];
 				var shader = ShaderUtils.lib["fresnel"];
 				var uniforms = Uniforms.clone( shader.uniforms );
 				var uniforms = Uniforms.clone( shader.uniforms );
@@ -108,12 +109,14 @@
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
-					mesh.autoUpdateMatrix = false;
+					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
 					mesh.updateMatrix();
 					scene.addObject( mesh );
 					scene.addObject( mesh );
-					
+
 				}
 				}
 
 
+				scene.matrixAutoUpdate = false;
+
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
 
 				webglRenderer = new THREE.WebGLRenderer();
 				webglRenderer = new THREE.WebGLRenderer();
@@ -140,7 +143,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -153,8 +167,6 @@
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( sceneCube, cameraCube );
 				webglRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {

+ 376 - 0
examples/webgl_materials_video.html

@@ -0,0 +1,376 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - video</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				text-align:center;
+			}
+
+			a {
+				color:#0078ff;
+			}
+
+			#info {
+				color:#fff;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index:100;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer
+		</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<video id="video" autoplay loop style="display:none">
+			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
+		</video>
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var video, texture, material, mesh;
+
+			var mouseX = 0;
+			var mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var postprocessing = { enabled: true };
+
+			var cube_count,
+
+				meshes = [],
+				materials = [],
+
+				xgrid = 20,
+				ygrid = 10;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement('div');
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+
+				var light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0.5, 1, 1 );
+				light.position.normalize();
+				scene.addLight( light );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild( renderer.domElement );
+
+				video = document.getElementById( 'video' );
+
+				//video.volume = 0;
+				//video.muted = true;
+
+				texture = new THREE.Texture( video );
+				texture.min_filter = THREE.LinearFilter;
+				texture.mag_filter = THREE.LinearFilter;
+
+				//
+
+				var i, j, ux, uy, ox, oy,
+					geometry,
+					xsize, ysize;
+
+				ux = 1 / xgrid;
+				uy = 1 / ygrid;
+
+				xsize = 480 / xgrid;
+				ysize = 204 / ygrid;
+
+				var parameters = { color: 0xffffff, map: texture },
+					material_base = new THREE.MeshLambertMaterial( parameters );
+
+				renderer.initMaterial( material_base, scene.lights, scene.fog );
+
+				cube_count = 0;
+
+				for( i = 0; i < xgrid; i++)
+				for( j = 0; j < ygrid; j++) {
+
+					ox = i;
+					oy = j;
+
+					geometry = new Cube( xsize, ysize, xsize );
+					change_uvs( geometry, ux, uy, ox, oy );
+
+					materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
+
+					material = materials[ cube_count ];
+
+					material.program = material_base.program;
+					material.uniforms = Uniforms.clone( THREE.ShaderLib[ 'lambert' ].uniforms );
+
+					material.hue = i/xgrid;
+					material.saturation = j/ygrid;
+
+					material.color.setHSV( material.hue, material.saturation, 1 );
+
+					mesh = new THREE.Mesh( geometry, material );
+
+					mesh.position.x =   ( i - xgrid/2 ) * xsize;
+					mesh.position.y = - ( j - ygrid/2 ) * ysize;
+					mesh.position.z = 0;
+
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
+
+					scene.addObject(mesh);
+
+					mesh.dx = 0.001 * ( 0.5 - Math.random() );
+					mesh.dy = 0.001 * ( 0.5 - Math.random() );
+
+					meshes[ cube_count ] = mesh;
+
+					cube_count += 1;
+
+				}
+
+				initPostprocessing();
+				renderer.autoClear = false;
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				//container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
+
+				var i, j, uv;
+
+				for ( i = 0; i < geometry.uvs.length; i++ ) {
+
+					uv = geometry.uvs[ i ];
+
+					for ( j = 0; j < uv.length; j++ ) {
+
+						uv[j].u = ( uv[j].u + offsetx ) * unitx;
+						uv[j].v = ( uv[j].v + offsety ) * unity;
+
+					}
+
+				}
+
+			}
+
+
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
+				postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
+
+				var screen_shader = ShaderUtils.lib["screen"];
+				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
+
+				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				screen_uniforms["opacity"].value = 1.0;
+
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
+					blending: THREE.AdditiveBlending
+
+				} );
+
+				var convolution_shader = ShaderUtils.lib["convolution"];
+				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
+
+				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
+				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
+
+				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
+				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
+
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
+
+				} );
+
+				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
+				postprocessing.quad.position.z = -500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY ) * 0.3;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			var h, counter = 1;
+
+			function render() {
+
+				var time = new Date().getTime() * 0.00005;
+
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+
+				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
+
+					if ( texture ) texture.needsUpdate = true;
+
+				}
+
+				for( i = 0; i < cube_count; i++ ) {
+
+					material = materials[i];
+
+					h = ( 360 * ( material.hue + time ) % 360 ) / 360;
+					material.color.setHSV( h, material.saturation, 1 );
+
+				}
+
+				if( counter % 1000  > 200 ) {
+
+					for( i = 0; i < cube_count; i++ ) {
+
+						mesh = meshes[i];
+
+						mesh.rotation.x += 10 * mesh.dx;
+						mesh.rotation.y += 10 * mesh.dy;
+
+						mesh.position.x += 200 * mesh.dx;
+						mesh.position.y += 200 * mesh.dy;
+						mesh.position.z += 400 * mesh.dx;
+
+					}
+
+				}
+
+				if( counter % 1000  == 0 ) {
+
+					for( i = 0; i < cube_count; i++ ) {
+
+						mesh = meshes[i];
+
+						mesh.dx *= -1;
+						mesh.dy *= -1;
+
+					}
+
+				}
+
+				counter++;
+
+				if ( postprocessing.enabled ) {
+
+					renderer.clear();
+
+					// Render scene into texture
+
+					renderer.render( scene, camera, postprocessing.rtTexture1 );
+
+					// Render quad with blured scene into texture (convolution pass 1)
+
+					postprocessing.quad.materials = [ postprocessing.materialConvolution ];
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2 );
+
+					// Render quad with blured scene into texture (convolution pass 2)
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3 );
+
+					// Render original scene with superimposed blur to texture
+
+					postprocessing.quad.materials = [ postprocessing.materialScreen ];
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
+					postprocessing.materialScreen.uniforms.opacity.value = 1.3;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
+
+					// Render to screen
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}
+
+			}
+
+
+		</script>
+
+	</body>
+</html>

+ 21 - 18
examples/obj_convert_test.html → examples/webgl_objconvert_test.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - io - OBJ converter - webgl</title>
+		<title>three.js webgl - io - OBJ converter</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -44,10 +44,8 @@
 
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
 
 
-		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -77,16 +75,12 @@
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 			document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 
 			init();
 			init();
-
-			loop();
+			animate();
 
 
 			render_canvas = !has_gl;
 			render_canvas = !has_gl;
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bwebgl.style.display = has_gl ? "inline" : "none";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 			bcanvas.className = render_canvas ? "button" : "button inactive";
 
 
-			setInterval(loop, 1000/60);
-
-
 			function init() {
 			function init() {
 
 
 				container = document.createElement('div');
 				container = document.createElement('div');
@@ -115,8 +109,8 @@
 				xc.fillRect(96, 96, 32, 32);
 				xc.fillRect(96, 96, 32, 32);
 
 
 				var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping ) } );
 				var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping ) } );
-				xm.map.image.loaded = 1;
-
+				xm.map.needsUpdate = true;
+				
 				geometry = new Plane( 100, 100, 15, 10 );
 				geometry = new Plane( 100, 100, 15, 10 );
 				for(var i=0; i<geometry.uvs.length; i++) {
 				for(var i=0; i<geometry.uvs.length; i++) {
 					var uvs = geometry.uvs[i];
 					var uvs = geometry.uvs[i];
@@ -197,10 +191,10 @@
 				var loader = new THREE.Loader(),
 				var loader = new THREE.Loader(),
 					callbackMale   = function( geometry ) { createScene( geometry,  90, 50, FLOOR, 105 ) },
 					callbackMale   = function( geometry ) { createScene( geometry,  90, 50, FLOOR, 105 ) },
 					callbackFemale = function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) };
 					callbackFemale = function( geometry ) { createScene( geometry, -80, 50, FLOOR, 0 ) };
-					
+
 				//loader.loadAscii( { model: "obj/male02/Male02_slim.js", callback: callbackMale } );
 				//loader.loadAscii( { model: "obj/male02/Male02_slim.js", callback: callbackMale } );
 				//loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callbackFemale } );
 				//loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callbackFemale } );
-				
+
 				loader.loadBinary( { model: "obj/male02/Male02_bin.js", callback: callbackMale } );
 				loader.loadBinary( { model: "obj/male02/Male02_bin.js", callback: callbackMale } );
 				loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callbackFemale } );
 				loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callbackFemale } );
 
 
@@ -246,7 +240,7 @@
 					xc.fillText(i, 10, 64);
 					xc.fillText(i, 10, 64);
 
 
 					var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
 					var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ) } );
-					xm.map.image.loaded = 1;
+					xm.map.needsUpdate = true;
 
 
 					mesh = new THREE.Mesh( new Plane( size, size ), xm );
 					mesh = new THREE.Mesh( new Plane( size, size ), xm );
 					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
 					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
@@ -267,7 +261,18 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -281,8 +286,6 @@
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {

+ 49 - 38
examples/particles_billboards_gl.html → examples/webgl_particles_billboards.html

@@ -1,47 +1,49 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - billboards - webgl</title>
+		<title>three.js webgl - particles - billboards</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
 				background-color: #000000;
 				background-color: #000000;
 				margin: 0px;
 				margin: 0px;
 				overflow: hidden;
 				overflow: hidden;
-                font-family:Monospace;
-                font-size:13px;
-                text-align:center;
-                font-weight: bold;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
 				text-align:center;
 				text-align:center;
 			}
 			}
 
 
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
-            #info {
+
+			#info {
 				color:#fff;
 				color:#fff;
-                position: absolute;
-                top: 0px; width: 100%;
-                padding: 5px;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
 				z-index:100;
 				z-index:100;
-				
-            }
-			
+			}
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
-        <div id="info">
+
+		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards example
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards example
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size, x, y, z;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size, x, y, z;
@@ -51,8 +53,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-			//loop();
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,19 +65,20 @@
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
 				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
-				
+
 				geometry = new THREE.Geometry();
 				geometry = new THREE.Geometry();
-				
+
 				sprite = ImageUtils.loadTexture( "textures/sprites/circle.png" );
 				sprite = ImageUtils.loadTexture( "textures/sprites/circle.png" );
-				
+
 				for ( i = 0; i < 5000; i++ ) {
 				for ( i = 0; i < 5000; i++ ) {
 
 
 					x = 2000 * Math.random() - 1000;
 					x = 2000 * Math.random() - 1000;
 					y = 2000 * Math.random() - 1000;
 					y = 2000 * Math.random() - 1000;
 					z = 2000 * Math.random() - 1000;
 					z = 2000 * Math.random() - 1000;
+
 					vector = new THREE.Vector3( x, y, z );
 					vector = new THREE.Vector3( x, y, z );
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
+
 				}
 				}
 
 
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending } );
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending } );
@@ -86,7 +88,7 @@
 				particles.sortParticles = true;
 				particles.sortParticles = true;
 				particles.updateMatrix();
 				particles.updateMatrix();
 				scene.addObject( particles );
 				scene.addObject( particles );
-				
+
 				var light = new THREE.DirectionalLight( 0xffffff );
 				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.x = 0;
 				light.position.x = 0;
 				light.position.y = 0;
 				light.position.y = 0;
@@ -105,14 +107,14 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 				mouseY = event.clientY - windowHalfY;
-				
+
 			}
 			}
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
@@ -123,7 +125,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
 			}
 			}
 
 
@@ -135,33 +137,42 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
-				
+
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 				var time = new Date().getTime() * 0.00005;
-				
+
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				/*
 				/*
 				for( i = 0; i < scene.objects.length; i++ ) {
 				for( i = 0; i < scene.objects.length; i++ ) {
-				
+
 					scene.objects[i].rotation.y = 5*time * ( i < 4 ? i+1 : - (i+1) );
 					scene.objects[i].rotation.y = 5*time * ( i < 4 ? i+1 : - (i+1) );
-					
+
 				}
 				}
 				*/
 				*/
 
 
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				material.color.setHSV( h, 0.75, 0.8 );
 				material.color.setHSV( h, 0.75, 0.8 );
-					
-				
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 47 - 36
examples/particles_billboards_colors_gl.html → examples/webgl_particles_billboards_colors.html

@@ -1,47 +1,49 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - billboards - colors - webgl</title>
+		<title>three.js webgl - particles - billboards - colors</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
 				background-color: #000000;
 				background-color: #000000;
 				margin: 0px;
 				margin: 0px;
 				overflow: hidden;
 				overflow: hidden;
-                font-family:Monospace;
-                font-size:13px;
-                text-align:center;
-                font-weight: bold;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
 				text-align:center;
 				text-align:center;
 			}
 			}
 
 
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
-            #info {
+
+			#info {
 				color:#fff;
 				color:#fff;
-                position: absolute;
-                top: 0px; width: 100%;
-                padding: 5px;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
 				z-index:100;
 				z-index:100;
-				
-            }
-			
+			}
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
-        <div id="info">
+
+		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards colors example
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle billboards colors example
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size, x, y, z;
 			var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size, x, y, z;
@@ -51,8 +53,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
-			//loop();
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,11 +65,11 @@
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
-				
+
 				geometry = new THREE.Geometry();
 				geometry = new THREE.Geometry();
-				
+
 				sprite = ImageUtils.loadTexture( "textures/sprites/ball.png" );
 				sprite = ImageUtils.loadTexture( "textures/sprites/ball.png" );
-				
+
 				for ( i = 0; i < 5000; i++ ) {
 				for ( i = 0; i < 5000; i++ ) {
 
 
 					x = 2000 * Math.random() - 1000;
 					x = 2000 * Math.random() - 1000;
@@ -76,12 +77,12 @@
 					z = 2000 * Math.random() - 1000;
 					z = 2000 * Math.random() - 1000;
 					vector = new THREE.Vector3( x, y, z );
 					vector = new THREE.Vector3( x, y, z );
 					geometry.vertices.push( new THREE.Vertex( vector ) );
 					geometry.vertices.push( new THREE.Vertex( vector ) );
-					
+
 					colors[ i ] = new THREE.Color( 0xffffff );
 					colors[ i ] = new THREE.Color( 0xffffff );
 					colors[ i ].setHSV( (x+1000)/2000, 1.0, 1.0 );
 					colors[ i ].setHSV( (x+1000)/2000, 1.0, 1.0 );
-					
+
 				}
 				}
-				
+
 				geometry.colors = colors;
 				geometry.colors = colors;
 
 
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending, vertex_colors: true } );
 				material = new THREE.ParticleBasicMaterial( { size: 35, map: sprite, blending: THREE.BillboardBlending, vertex_colors: true } );
@@ -91,7 +92,7 @@
 				particles.sortParticles = true;
 				particles.sortParticles = true;
 				particles.updateMatrix();
 				particles.updateMatrix();
 				scene.addObject( particles );
 				scene.addObject( particles );
-				
+
 				var light = new THREE.DirectionalLight( 0xffffff );
 				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.x = 0;
 				light.position.x = 0;
 				light.position.y = 0;
 				light.position.y = 0;
@@ -110,14 +111,14 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 				mouseY = event.clientY - windowHalfY;
-				
+
 			}
 			}
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
@@ -128,7 +129,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
 			}
 			}
 
 
@@ -140,24 +141,34 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
-				
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
 			}
 			}
 
 
-			function loop() {
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 				var time = new Date().getTime() * 0.00005;
-				
+
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				material.color.setHSV( h, 0.8, 1.0 );
 				material.color.setHSV( h, 0.8, 1.0 );
-				
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 		</script>
 		</script>

+ 54 - 42
examples/particles_random_gl.html → examples/webgl_particles_random.html

@@ -1,47 +1,49 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - webgl</title>
+		<title>three.js webgl - particles</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
 				background-color: #000000;
 				background-color: #000000;
 				margin: 0px;
 				margin: 0px;
 				overflow: hidden;
 				overflow: hidden;
-                font-family:Monospace;
-                font-size:13px;
-                text-align:center;
-                font-weight: bold;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
 				text-align:center;
 				text-align:center;
 			}
 			}
 
 
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
-            #info {
-				color:#fff;
-                position: absolute;
-                top: 0px; width: 100%;
-                padding: 5px;
-				z-index:100;
-				
-            }
-			
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index: 100;
+			}
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
+
         <div id="info">
         <div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particles example
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;
@@ -51,7 +53,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -63,27 +65,27 @@
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
-				
+
 				geometry = new THREE.Geometry();
 				geometry = new THREE.Geometry();
-				
+
 				for ( i = 0; i < 4000; i++ ) {
 				for ( i = 0; i < 4000; i++ ) {
 
 
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
+
 				}
 				}
 
 
 				parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ];
 				parameters = [ [ [1.0, 1.0, 1.0], 5 ], [ [0.95, 1, 1], 4 ], [ [0.90, 1, 1], 3 ], [ [0.85, 1, 1], 2 ], [ [0.80, 1, 1], 1 ] ];
 				//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
 				//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
 				//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
 				//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
-				
+
 				for ( i = 0; i < parameters.length; i++ ) {
 				for ( i = 0; i < parameters.length; i++ ) {
 
 
 					size  = parameters[i][1];
 					size  = parameters[i][1];
 					color = parameters[i][0];
 					color = parameters[i][0];
-					
+
 					//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
 					//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
-					
+
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 
 
@@ -92,7 +94,7 @@
 					particles.rotation.y = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
 					particles.rotation.z = Math.random() * 6;
 					particles.rotation.z = Math.random() * 6;
 					scene.addObject( particles );
 					scene.addObject( particles );
-					
+
 				}
 				}
 
 
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
@@ -107,14 +109,14 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 				mouseY = event.clientY - windowHalfY;
-				
+
 			}
 			}
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
@@ -125,7 +127,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
 			}
 			}
 
 
@@ -137,36 +139,46 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
-				
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
 			}
 			}
 
 
-			function loop() {
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 				var time = new Date().getTime() * 0.00005;
-				
+
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				for( i = 0; i < scene.objects.length; i++ ) {
 				for( i = 0; i < scene.objects.length; i++ ) {
-				
+
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
-					
+
 				}
 				}
 
 
 				for( i = 0; i < materials.length; i++ ) {
 				for( i = 0; i < materials.length; i++ ) {
-					
+
 					color = parameters[i][0];
 					color = parameters[i][0];
-					
+
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 					materials[i].color.setHSV( h, color[1], color[2] );
 					materials[i].color.setHSV( h, color[1], color[2] );
-					
+
 				}
 				}
-				
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 
 

+ 53 - 41
examples/particles_sprites_gl.html → examples/webgl_particles_sprites.html

@@ -1,48 +1,50 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - particles - sprites - webgl</title>
+		<title>three.js webgl - particles - sprites</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
 				background-color: #000000;
 				background-color: #000000;
 				margin: 0px;
 				margin: 0px;
 				overflow: hidden;
 				overflow: hidden;
-                font-family:Monospace;
-                font-size:13px;
-                text-align:center;
-                font-weight: bold;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
 				text-align:center;
 				text-align:center;
 			}
 			}
 
 
 			a {
 			a {
 				color:#0078ff;
 				color:#0078ff;
 			}
 			}
-			
-            #info {
+
+			#info {
 				color:#fff;
 				color:#fff;
-                position: absolute;
-                top: 0px; width: 100%;
-                padding: 5px;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
 				z-index:100;
 				z-index:100;
-				
-            }
-			
+			}
+
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-	
+
         <div id="info">
         <div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle sprites example -
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl particle sprites example -
 			snowflakes by <a href="http://en.wikipedia.org/wiki/File:Sketch_of_snow_crystal_by_Ren%C3%A9_Descartes.jpg">Ren&eacute;  Descartes</a>
 			snowflakes by <a href="http://en.wikipedia.org/wiki/File:Sketch_of_snow_crystal_by_Ren%C3%A9_Descartes.jpg">Ren&eacute;  Descartes</a>
 		</div>
 		</div>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
 			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
@@ -52,7 +54,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -64,31 +66,31 @@
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
-				
+
 				geometry = new THREE.Geometry();
 				geometry = new THREE.Geometry();
-				
+
 				sprite1 = ImageUtils.loadTexture( "textures/sprites/snowflake1.png" );
 				sprite1 = ImageUtils.loadTexture( "textures/sprites/snowflake1.png" );
 				sprite2 = ImageUtils.loadTexture( "textures/sprites/snowflake2.png" );
 				sprite2 = ImageUtils.loadTexture( "textures/sprites/snowflake2.png" );
 				sprite3 = ImageUtils.loadTexture( "textures/sprites/snowflake3.png" );
 				sprite3 = ImageUtils.loadTexture( "textures/sprites/snowflake3.png" );
 				sprite4 = ImageUtils.loadTexture( "textures/sprites/snowflake4.png" );
 				sprite4 = ImageUtils.loadTexture( "textures/sprites/snowflake4.png" );
 				sprite5 = ImageUtils.loadTexture( "textures/sprites/snowflake5.png" );
 				sprite5 = ImageUtils.loadTexture( "textures/sprites/snowflake5.png" );
-				
+
 				for ( i = 0; i < 2000; i++ ) {
 				for ( i = 0; i < 2000; i++ ) {
 
 
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
 					vector = new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000 );
-					geometry.vertices.push( new THREE.Vertex( vector ) );					
-					
+					geometry.vertices.push( new THREE.Vertex( vector ) );
+
 				}
 				}
 
 
-				parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],			
+				parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ], [ [0.95, 0.1, 1], sprite3, 15 ], [ [0.90, 0.05, 1], sprite1, 10 ], [ [0.85, 0, 0.8], sprite5, 8 ], [ [0.80, 0, 0.7], sprite4, 5 ],
 							   ];
 							   ];
-				
+
 				for ( i = 0; i < parameters.length; i++ ) {
 				for ( i = 0; i < parameters.length; i++ ) {
 
 
 					color  = parameters[i][0];
 					color  = parameters[i][0];
 					sprite = parameters[i][1];
 					sprite = parameters[i][1];
 					size   = parameters[i][2];
 					size   = parameters[i][2];
-					
+
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depth_test: false } );
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depth_test: false } );
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 					materials[i].color.setHSV( color[0], color[1], color[2] );
 
 
@@ -97,7 +99,7 @@
 					particles.rotation.y = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
 					particles.rotation.z = Math.random() * 6;
 					particles.rotation.z = Math.random() * 6;
 					scene.addObject( particles );
 					scene.addObject( particles );
-					
+
 				}
 				}
 
 
 				renderer = new THREE.WebGLRenderer( { clearAlpha: 1 });
 				renderer = new THREE.WebGLRenderer( { clearAlpha: 1 });
@@ -112,14 +114,14 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-				
+
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
 
 
 				mouseX = event.clientX - windowHalfX;
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
 				mouseY = event.clientY - windowHalfY;
-				
+
 			}
 			}
 
 
 			function onDocumentTouchStart( event ) {
 			function onDocumentTouchStart( event ) {
@@ -130,7 +132,7 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
 			}
 			}
 
 
@@ -142,36 +144,46 @@
 
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
-					
+
 				}
 				}
-				
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
 			}
 			}
 
 
-			function loop() {
+			function render() {
 
 
 				var time = new Date().getTime() * 0.00005;
 				var time = new Date().getTime() * 0.00005;
-				
+
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				for( i = 0; i < scene.objects.length; i++ ) {
 				for( i = 0; i < scene.objects.length; i++ ) {
-				
+
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
 					scene.objects[i].rotation.y = time * ( i < 4 ? i+1 : - (i+1) );
-					
+
 				}
 				}
 
 
 				for( i = 0; i < materials.length; i++ ) {
 				for( i = 0; i < materials.length; i++ ) {
-					
+
 					color = parameters[i][0];
 					color = parameters[i][0];
-					
+
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
 					materials[i].color.setHSV( h, color[1], color[2] );
 					materials[i].color.setHSV( h, color[1], color[2] );
-					
+
 				}
 				}
-				
+
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
 			}
 			}
 
 
 
 

+ 217 - 0
examples/webgl_performance.html

@@ -0,0 +1,217 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - performance</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.js"></script>
+		<script type="text/javascript" src="../src/core/Vector3.js"></script>
+		<script type="text/javascript" src="../src/core/Vector4.js"></script>
+		<script type="text/javascript" src="../src/core/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
+		<script type="text/javascript" src="../src/core/Vertex.js"></script>
+		<script type="text/javascript" src="../src/core/Face3.js"></script>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh, zmesh, lightMesh, geometry;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			// loop();
+			setInterval( loop, 1000 / 60 );
+
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+
+				var geometry = new Cube( 50, 50, 50 );
+				var material = new THREE.MeshNormalMaterial();
+
+				for ( var i = 0; i < 5000; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 10000 - 5000;
+					mesh.position.y = Math.random() * 10000 - 5000;
+					mesh.position.z = Math.random() * 10000 - 5000;
+					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
+					mesh.updateMatrix();
+					mesh.autoUpdateMatrix = false;
+					scene.addObject( mesh );
+
+				}
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
+
+			}
+
+			function generateTexture( r, g, b ) {
+
+				var canvas = document.createElement( 'canvas' );
+				canvas.loaded = true;
+				canvas.width = 256;
+				canvas.height = 256;
+
+				var context = canvas.getContext( '2d' );
+				var image = context.getImageData( 0, 0, 256, 256 );
+
+				var x = 0, y = 0, p;
+
+				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
+
+					x = j % 256;
+					y = x == 0 ? y + 1 : y;
+					p = Math.floor( x ^ y );
+
+					image.data[ i ] = ~~ p * r;
+					image.data[ i + 1 ] = ~~ p * g;
+					image.data[ i + 2 ] = ~~ p * b;
+					image.data[ i + 3 ] = 255;
+
+				}
+
+				context.putImageData( image, 0, 0 );
+
+				return canvas;
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			function loop() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				renderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+			function log( text ) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+
+		</script>
+
+	</body>
+</html>

+ 158 - 149
examples/postprocessing.html → examples/webgl_postprocessing.html

@@ -1,95 +1,102 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
-    <head>
-        <title>three.js - postprocessing - webgl</title>
-        <meta charset="utf-8">
-        <style type="text/css">
-            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;
-				
-            }
-
-            a { color: red; }
-
-        </style>
-    </head>
-    <body>
-
-        <div id="container"></div>
-        <div id="info">
+	<head>
+		<title>three.js webgl - postprocessing</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+		    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;
+
+		    }
+
+		    a { color: red; }
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
 			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 		</div>
 		</div>
 
 
-        <script type="text/javascript" src="js/Stats.js"></script>
-        <script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<!-- Time modulated procedural color fragment shader -->
 		<!-- Time modulated procedural color fragment shader -->
-        <script id="fs-colors" type="x-shader/x-fragment">
+		<script id="fs-colors" type="x-shader/x-fragment">
 			varying vec2 vUv;
 			varying vec2 vUv;
 			uniform float time;
 			uniform float time;
-			
-            void main(void)
-            {
-                gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
-            }
-        </script>
+
+			void main(void) {
+
+				gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
+
+			}
+		</script>
 
 
 		<!-- Generic vertex shader -->
 		<!-- Generic vertex shader -->
-        <script id="vs-generic" type="x-shader/x-vertex">
-            varying vec2 vUv;
+		<script id="vs-generic" type="x-shader/x-vertex">
+			varying vec2 vUv;
 
 
-            void main()
-            {
-               vUv = vec2( uv.x, 1.0 - uv.y );
-			   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-           }
-        </script>
+			void main() {
 
 
+				vUv = vec2( uv.x, 1.0 - uv.y );
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+		</script>
 
 
-        <script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+		<script type="text/javascript">
 
 
-            var container, stats;
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
 
 
-            var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
-			
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
-			
-            var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
 
 
-            init();
-            setInterval( loop, 1000 / 60 );
+			var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
+
+			var delta = 0.01;
 
 
-            function init() {
+			init();
+			animate();
 
 
-                container = document.getElementById( 'container' );
+			function init() {
 
 
-                cameraOrtho = new THREE.Camera();
+				container = document.getElementById( 'container' );
+
+				cameraOrtho = new THREE.Camera();
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-                cameraOrtho.position.z = 100;
+				cameraOrtho.position.z = 100;
 
 
 				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				cameraPerspective.position.z = 900;
 				cameraPerspective.position.z = 900;
 
 
-                sceneModel = new THREE.Scene();
+				sceneModel = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
 				sceneBG = new THREE.Scene();
 				sceneBG = new THREE.Scene();
 
 
@@ -100,108 +107,110 @@
 				directionalLight.position.normalize();
 				directionalLight.position.normalize();
 				sceneModel.addLight( directionalLight );
 				sceneModel.addLight( directionalLight );
 
 
-                rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
-                rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
-                rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
+				rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
+				rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
+				rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
 
 
-                materialColor = new THREE.MeshShaderMaterial( {
+				materialColor = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: { time: { type: "f", value: 0.0 } },
-                    vertex_shader: getText( 'vs-generic' ),
-                    fragment_shader: getText( 'fs-colors' ),
+					uniforms: { time: { type: "f", value: 0.0 } },
+					vertex_shader: getText( 'vs-generic' ),
+					fragment_shader: getText( 'fs-colors' ),
 					depth_test: false
 					depth_test: false
-					
-                } );
+
+				} );
 
 
 				var screen_shader = ShaderUtils.lib["screen"];
 				var screen_shader = ShaderUtils.lib["screen"];
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
 				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
-				
+
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 				screen_uniforms["tDiffuse"].texture = rtTexture1;
 				screen_uniforms["opacity"].value = 0.4;
 				screen_uniforms["opacity"].value = 0.4;
-				
-                materialScreen = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: screen_uniforms,
-                    vertex_shader: screen_shader.vertex_shader,
-                    fragment_shader: screen_shader.fragment_shader,
+				materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
 					blending: THREE.AdditiveBlending
 					blending: THREE.AdditiveBlending
 
 
-                } );
+				} );
 
 
 				var film_shader = ShaderUtils.lib["film"];
 				var film_shader = ShaderUtils.lib["film"];
 				var film_uniforms = Uniforms.clone( film_shader.uniforms );
 				var film_uniforms = Uniforms.clone( film_shader.uniforms );
-				
+
 				film_uniforms["tDiffuse"].texture = rtTexture1;
 				film_uniforms["tDiffuse"].texture = rtTexture1;
-				
-                materialFilm = new THREE.MeshShaderMaterial( {
+				film_uniforms["nIntensity"].value = 0.25;
+				film_uniforms["sIntensity"].value = 0.5;
 
 
-                    uniforms: film_uniforms,
-                    vertex_shader: film_shader.vertex_shader,
-                    fragment_shader: film_shader.fragment_shader
+				materialFilm = new THREE.MeshShaderMaterial( {
 
 
-                } );
+					uniforms: film_uniforms,
+					vertex_shader: film_shader.vertex_shader,
+					fragment_shader: film_shader.fragment_shader
 
 
+				} );
 
 
 				var increment = 0.001953125;
 				var increment = 0.001953125;
-				
+
 				blurx = new THREE.Vector2( increment, 0.0 ),
 				blurx = new THREE.Vector2( increment, 0.0 ),
 				blury = new THREE.Vector2( 0.0, increment );
 				blury = new THREE.Vector2( 0.0, increment );
-				
+
 				var convolution_shader = ShaderUtils.lib["convolution"];
 				var convolution_shader = ShaderUtils.lib["convolution"];
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
 				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
-				
+
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 				convolution_uniforms["tDiffuse"].texture = rtTexture1;
 				convolution_uniforms["uImageIncrement"].value = blurx;
 				convolution_uniforms["uImageIncrement"].value = blurx;
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
 				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
-				
-                materialConvolution = new THREE.MeshShaderMaterial( {
 
 
-                    uniforms: convolution_uniforms,
-                    vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
-                    fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
+				materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
 
 
-                } );
+				} );
 
 
 				var plane = new Plane( window.innerWidth, window.innerHeight );
 				var plane = new Plane( window.innerWidth, window.innerHeight );
-				
-                quadBG = new THREE.Mesh( plane, materialColor );
+
+				quadBG = new THREE.Mesh( plane, materialColor );
 				quadBG.position.z = -500;
 				quadBG.position.z = -500;
-                sceneBG.addObject( quadBG );
+				sceneBG.addObject( quadBG );
 
 
 				loader = new THREE.Loader( true );
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
 				document.body.appendChild( loader.statusDomElement );
 				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
 				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
-				
-                quadScreen = new THREE.Mesh( plane, materialConvolution );
+
+				quadScreen = new THREE.Mesh( plane, materialConvolution );
 				quadScreen.position.z = -100;
 				quadScreen.position.z = -100;
-                sceneScreen.addObject( quadScreen );
+				sceneScreen.addObject( quadScreen );
 
 
-                renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 				renderer.autoClear = false;
-                container.appendChild( renderer.domElement );
-				
-                stats = new Stats();
-                stats.domElement.style.position = 'absolute';
-                stats.domElement.style.top = '0px';
-                //container.appendChild( stats.domElement );
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				//container.appendChild( stats.domElement );
 
 
-            }
+			}
 
 
 			function getText( id ) {
 			function getText( id ) {
-				
+
 				return document.getElementById( id ).textContent;
 				return document.getElementById( id ).textContent;
+
 			}
 			}
-			
+
 			function createMesh( geometry, scene, scale ) {
 			function createMesh( geometry, scene, scale ) {
 
 
 				geometry.computeTangents();
 				geometry.computeTangents();
-				
+
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 
 
 				var shader = ShaderUtils.lib[ "normal" ];
 				var shader = ShaderUtils.lib[ "normal" ];
 				var uniforms = Uniforms.clone( shader.uniforms );
 				var uniforms = Uniforms.clone( shader.uniforms );
- 
+
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 				uniforms[ "uNormalScale" ].value = - 0.75;
 				uniforms[ "uNormalScale" ].value = - 0.75;
 
 
@@ -226,7 +235,7 @@
 
 
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
-				
+
 				mesh = new THREE.Mesh( geometry, mat2 );
 				mesh = new THREE.Mesh( geometry, mat2 );
 				mesh.position.x = 0;
 				mesh.position.x = 0;
 				mesh.position.y = -50;
 				mesh.position.y = -50;
@@ -234,63 +243,66 @@
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 				mesh.updateMatrix();
 				mesh.updateMatrix();
 				scene.addObject( mesh );
 				scene.addObject( mesh );
-				
+
 				loader.statusDomElement.style.display = "none";
 				loader.statusDomElement.style.display = "none";
 
 
 			}
 			}
 
 
-			var delta = 0.01;
-			var start = 0;
-			
-            function loop() {
+			//
 
 
-				if ( ! start ) start = new Date().getTime();
-				var time = ( new Date().getTime() - start ) * 0.0004;
+			function animate() {
 
 
-				if ( mesh  ) {
-				
-					mesh.rotation.y = -time;
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = new Date().getTime() * 0.0004;
+
+				if ( mesh ) mesh.rotation.y = -time;
 
 
-				}
-				
 				if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
 				if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
-				
+
 					delta *= -1;
 					delta *= -1;
-					
+
 				}
 				}
-					
+
 				materialColor.uniforms.time.value += delta/2;
 				materialColor.uniforms.time.value += delta/2;
 				materialFilm.uniforms.time.value += delta;
 				materialFilm.uniforms.time.value += delta;
-				
+
 				renderer.clear();
 				renderer.clear();
-				
+
 				// Render scene into texture
 				// Render scene into texture
-				
-				// background 
-				
+
+				// background
+
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
-				
+
 				// model
 				// model
-				
-                renderer.render( sceneModel, cameraPerspective, rtTexture1 );
+
+				renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
 
 				// Render quad with blured scene into texture (convolution pass 1)
 				// Render quad with blured scene into texture (convolution pass 1)
-				
+
 				quadScreen.materials = [ materialConvolution ];
 				quadScreen.materials = [ materialConvolution ];
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 				materialConvolution.uniforms.uImageIncrement.value = blurx;
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
-				
+
 				// Render quad with blured scene into texture (convolution pass 2)
 				// Render quad with blured scene into texture (convolution pass 2)
-				
+
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 				materialConvolution.uniforms.uImageIncrement.value = blury;
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
-				
+
 				// Render original scene with superimposed blur into texture
 				// Render original scene with superimposed blur into texture
-				
+
 				quadScreen.materials = [ materialScreen ];
 				quadScreen.materials = [ materialScreen ];
-				
+
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
 				materialScreen.uniforms.opacity.value = 1.0;
 				materialScreen.uniforms.opacity.value = 1.0;
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
 				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
@@ -301,12 +313,9 @@
 				quadScreen.materials = [ materialFilm ];
 				quadScreen.materials = [ materialFilm ];
 				renderer.render( sceneScreen, cameraOrtho );
 				renderer.render( sceneScreen, cameraOrtho );
 
 
-                stats.update();
-
-            }			
-			
+			}
 
 
-        </script>
 
 
-    </body>
+		</script>
+	</body>
 </html>
 </html>

+ 336 - 0
examples/webgl_postprocessing_dof.html

@@ -0,0 +1,336 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - postprocessing - depth-of-field - webgl</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				text-align:center;
+			}
+
+			a {
+				color:#0078ff;
+			}
+
+			#info {
+				color:#fff;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index:100;
+			}
+		</style>
+	</head>
+
+	<body>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/ShaderExtras.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
+		<script type="text/javascript" src="js/gui/gui.min.js"></script>
+
+        <div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl depth-of-field with bokeh example -
+			shader by <a href="http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html">Martins Upitis</a>
+		</div>
+
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var camera, scene, renderer,
+				materials = [], objects = [],
+				singleMaterial, zmaterial = [],
+				parameters, i, j, k, h, color, x, y, z, s, n, nobjects,
+				material_depth, material_base, cubeMaterial;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var height = window.innerHeight - 300;
+
+			var postprocessing = { enabled  : true };
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 70, window.innerWidth / height, 1, 3000 );
+				camera.position.z = 200;
+
+				scene = new THREE.Scene();
+
+				/*
+				var light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 0.5, 1 );
+				light.position.normalize();
+				scene.addLight( light );
+				*/
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, height );
+				container.appendChild( renderer.domElement );
+
+				material_depth = new THREE.MeshDepthMaterial();
+
+				var path = "textures/cube/SwedishRoyalCastle/";
+				var format = '.jpg';
+				var urls = [
+						path + 'px' + format, path + 'nx' + format,
+						path + 'py' + format, path + 'ny' + format,
+						path + 'pz' + format, path + 'nz' + format
+					];
+
+				var textureCube = ImageUtils.loadTextureCube( urls );
+
+				parameters = { color: 0xff1100, env_map: textureCube, shading: THREE.FlatShading };
+				//parameters = { color: 0xff1100, shading: THREE.FlatShading };
+				cubeMaterial = new THREE.MeshBasicMaterial( parameters );
+
+				singleMaterial = false;
+
+				if( singleMaterial ) zmaterial = [ cubeMaterial ];
+
+				//var geo = new Cube( 1, 1, 1 );
+				var geo = new Sphere( 1, 20, 10 );
+				//var geo = new Icosahedron( 2 );
+
+				material_base = cubeMaterial;
+
+				renderer.initMaterial( material_base, scene.lights, scene.fog );
+
+				var xgrid = 14,
+					ygrid = 9,
+					zgrid = 14;
+
+				nobjects = xgrid * ygrid * zgrid;
+
+				c = 0;
+
+				//var s = 0.25;
+				var s = 60;
+
+				for ( i = 0; i < xgrid; i++ )
+				for ( j = 0; j < ygrid; j++ )
+				for ( k = 0; k < zgrid; k++ ) {
+
+					materials[c] = new THREE.MeshBasicMaterial( parameters );
+					materials[c].program = material_base.program;
+					materials[c].uniforms = Uniforms.clone( THREE.ShaderLib[ 'basic' ].uniforms );
+
+					if ( singleMaterial )
+						mesh = new THREE.Mesh( geo, zmaterial );
+					else
+						mesh = new THREE.Mesh( geo, materials[c] );
+
+					x = 200 * ( i - xgrid/2 );
+					y = 200 * ( j - ygrid/2 );
+					z = 200 * ( k - zgrid/2 );
+
+					mesh.position.set( x, y, z );
+					mesh.scale.set( s, s, s );
+
+					mesh.matrixAutoUpdate = false;
+					mesh.updateMatrix();
+
+					scene.addObject( mesh );
+					objects.push( mesh );
+
+					c++;
+
+				}
+
+				scene.matrixAutoUpdate = false;
+
+				initPostprocessing();
+
+				renderer.autoClear = false;
+
+				renderer.domElement.style.position = 'absolute';
+				renderer.domElement.style.top = "150px";
+				renderer.domElement.style.left = "0px";
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				//container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+
+				var effectController  = {
+
+					focus: 		1.0,
+					aperture:	0.025,
+					maxblur:	1.0
+
+				};
+
+				var matChanger = function( ) {
+
+					postprocessing.bokeh_uniforms["focus"].value = effectController.focus;
+					postprocessing.bokeh_uniforms["aperture"].value = effectController.aperture;
+					postprocessing.bokeh_uniforms["maxblur"].value = effectController.maxblur;
+
+				};
+
+				var gui = new GUI();
+				gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
+				gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
+				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+
+			}
+
+			function onDocumentTouchStart( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+				}
+			}
+
+			function onDocumentTouchMove( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+				}
+
+			}
+
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
+				postprocessing.rtTextureDepth = new THREE.RenderTarget( window.innerWidth, height, pars );
+				postprocessing.rtTextureColor = new THREE.RenderTarget( window.innerWidth, height, pars );
+
+				var bokeh_shader = ShaderExtras["bokeh"];
+
+				postprocessing.bokeh_uniforms = Uniforms.clone( bokeh_shader.uniforms );
+
+				postprocessing.bokeh_uniforms["tColor"].texture = postprocessing.rtTextureColor;
+				postprocessing.bokeh_uniforms["tDepth"].texture = postprocessing.rtTextureDepth;
+				postprocessing.bokeh_uniforms["focus"].value = 1.1;
+				postprocessing.bokeh_uniforms["aspect"].value = window.innerWidth / height;
+
+				postprocessing.materialBokeh = new THREE.MeshShaderMaterial( {
+
+					uniforms: postprocessing.bokeh_uniforms,
+					vertex_shader: bokeh_shader.vertex_shader,
+					fragment_shader: bokeh_shader.fragment_shader
+
+				} );
+
+				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
+				postprocessing.quad.position.z = -500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate, renderer.domElement );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = new Date().getTime() * 0.00005;
+
+				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
+				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
+
+				for( i = 0; i < nobjects; i++ ) {
+
+					h = ( 360 * ( i/nobjects + time ) % 360 ) / 360;
+					//materials[i].color.setHSV( h, 0.5 + 0.5 * ( i % 20 / 20 ), 1 );
+					materials[i].color.setHSV( h, 1, 1 );
+
+				}
+
+
+				if ( postprocessing.enabled ) {
+
+					renderer.clear();
+
+					// Render scene into texture
+
+					if ( singleMaterial )
+						zmaterial[0] = cubeMaterial;
+					else
+						for( i = 0; i < nobjects; i++ ) objects[i].materials = [ materials[i] ];
+
+
+					renderer.render( scene, camera, postprocessing.rtTextureColor );
+
+					// Render depth into texture
+
+					if ( singleMaterial )
+						zmaterial[0] = material_depth;
+					else
+						for( i = 0; i < nobjects; i++ ) objects[i].materials = [ material_depth ];
+
+					renderer.render( scene, camera, postprocessing.rtTextureDepth );
+
+					// Render bokeh composite
+
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}
+
+			}
+
+
+		</script>
+	</body>
+</html>

+ 369 - 0
examples/webgl_ribbons.html

@@ -0,0 +1,369 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - ribbons</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				text-align:center;
+			}
+
+			a {
+				color:#0078ff;
+			}
+
+			#info {
+				color:#fff;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index:100;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl ribbons example
+		</div>
+
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
+				parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var postprocessing = { enabled  : true };
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera.position.z = 1200;
+
+				scene = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0x000000, 0.0016 );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				geometry = new THREE.Geometry();
+				geometry2 = new THREE.Geometry();
+
+				n = 1000;
+				n2 = 2 * n;
+
+				for ( i = -n; i < n; i++ ) {
+
+					i2 = i + n;
+
+					x = i * 1.175;
+					y = ( i2 % 2 ) * 5;
+
+					if ( i2 % 2 )  {
+
+						z = 10 * Math.sin( i2 * 0.3 ) * Math.cos( i2 * 0.1 );
+
+					}
+
+					vector = new THREE.Vector3( x, y, z );
+					geometry.vertices.push( new THREE.Vertex( vector ) );
+
+
+					vector = new THREE.Vector3( x, y, z );
+					geometry2.vertices.push( new THREE.Vertex( vector ) );
+
+					h = i2%2 ? 1 : 0.15;
+					if( i2%4 <= 2 ) h -= 0.15;
+
+					color = new THREE.Color( 0xffffff );
+					color.setHSV( 0.1 , 0, h );
+					geometry.colors.push( color );
+					geometry2.colors.push( color );
+
+				}
+
+				var tmpRot = new THREE.Matrix4();
+				tmpRot.setRotAxis( new THREE.Vector3( 1, 0, 0 ), 1.57 );
+				
+				var material_base = new THREE.MeshBasicMaterial( { color:0xffffff, vertex_colors:true } );
+
+				renderer.initMaterial( material_base, scene.lights, scene.fog );
+
+				xgrid = 34;
+				ygrid = 15;
+				nribbons = xgrid * ygrid;
+
+				c = 0;
+				for ( i = 0; i < xgrid; i++ )
+				for ( j = 0; j < ygrid; j++ ) {
+
+					materials[c] = new THREE.MeshBasicMaterial( { color:0xffffff, vertex_colors:true } );
+					materials[c].program = material_base.program;
+					materials[c].uniforms = Uniforms.clone( THREE.ShaderLib[ 'basic' ].uniforms );
+
+					ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[c] );
+					ribbon.rotation.x = 0;
+					ribbon.rotation.y = 1.57;
+					ribbon.rotation.z = 3.14;	
+
+					x = 40 * ( i - xgrid/2 );
+					y = 40 * ( j - ygrid/2 );
+					z = 0;
+					ribbon.position.set( x, y, z );
+
+					materials[c].color.setHSV( i/xgrid, 0.3 +  0.7*j/ygrid, 1 );
+
+					ribbon.doubleSided = true;
+					ribbon.matrixAutoUpdate = false;
+
+					// manually create local matrix
+
+					ribbon.matrix.setPosition( ribbon.position );
+					ribbon.matrixRotation.setRotationFromEuler( ribbon.rotation );
+
+					ribbon.matrix.n11 = ribbon.matrixRotation.n11;
+					ribbon.matrix.n12 = ribbon.matrixRotation.n12;
+					ribbon.matrix.n13 = ribbon.matrixRotation.n13;
+
+					ribbon.matrix.n21 = ribbon.matrixRotation.n21;
+					ribbon.matrix.n22 = ribbon.matrixRotation.n22;
+					ribbon.matrix.n23 = ribbon.matrixRotation.n23;
+
+					ribbon.matrix.n31 = ribbon.matrixRotation.n31;
+					ribbon.matrix.n32 = ribbon.matrixRotation.n32;
+					ribbon.matrix.n33 = ribbon.matrixRotation.n33;
+
+					ribbon.matrix.multiplySelf( tmpRot );
+
+					ribbon.matrix.scale( ribbon.scale );
+					ribbon.boundRadiusScale = Math.max( ribbon.scale.x, Math.max( ribbon.scale.y, ribbon.scale.z ) );
+
+					ribbons.push( ribbon );
+					scene.addObject( ribbon );
+
+					c++;
+
+				}
+
+				scene.matrixAutoUpdate = false;
+
+				initPostprocessing();
+				renderer.autoClear = false;
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+
+			}
+
+			function onDocumentTouchStart( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+				}
+			}
+
+			function onDocumentTouchMove( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
+				}
+
+			}
+
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter };
+				postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
+
+				var screen_shader = ShaderUtils.lib["screen"];
+				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
+
+				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				screen_uniforms["opacity"].value = 1.0;
+
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertex_shader: screen_shader.vertex_shader,
+					fragment_shader: screen_shader.fragment_shader,
+					blending: THREE.AdditiveBlending
+
+				} );
+
+				var convolution_shader = ShaderUtils.lib["convolution"];
+				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
+
+				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
+				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
+
+				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
+				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
+
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertex_shader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
+					fragment_shader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragment_shader
+
+				} );
+
+				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
+				postprocessing.quad.position.z = -500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = new Date().getTime() * 0.00005;
+
+				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
+				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
+
+				for ( i = -n; i < n; i++ ) {
+
+					i2 = i + n;
+
+					z  =  10 * Math.sin( i2 * 0.1 + time*30 );
+					z2 =  20 * Math.cos( Math.sin( i2 * 0.1 + time * 20 ) );
+
+					geometry.vertices[i2].position.z = z;
+					geometry2.vertices[i2].position.z = z2;
+
+				}
+
+				geometry.__dirtyVertices = true;
+				geometry2.__dirtyVertices = true;
+
+
+				for( i = 0; i < nribbons; i++ ) {
+
+					h = ( 360 * ( i/nribbons + time ) % 360 ) / 360;
+					materials[i].color.setHSV( h, 0.5+0.5*(i%20/20), 1 );
+
+				}
+
+				if ( postprocessing.enabled ) {
+
+					renderer.clear();
+
+					// Render scene into texture
+
+					renderer.render( scene, camera, postprocessing.rtTexture1 );
+
+					// Render quad with blured scene into texture (convolution pass 1)
+
+					postprocessing.quad.materials = [ postprocessing.materialConvolution ];
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2 );
+
+					// Render quad with blured scene into texture (convolution pass 2)
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3 );
+
+					// Render original scene with superimposed blur to texture
+
+					postprocessing.quad.materials = [ postprocessing.materialScreen ];
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
+					postprocessing.materialScreen.uniforms.opacity.value = 1.2;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
+
+					// Render to screen
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}
+
+			}
+
+		</script>
+	</body>
+</html>

+ 286 - 0
examples/webgl_rtt.html

@@ -0,0 +1,286 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - render-to-texture</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			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;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script id="fragment_shader_screen" type="x-shader/x-fragment">
+			varying vec2 vUv;
+			uniform sampler2D tDiffuse;
+
+			void main(void) {
+
+				//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
+				gl_FragColor = texture2D( tDiffuse, vUv );
+
+			}
+		</script>
+
+		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
+			varying vec2 vUv;
+			uniform float time;
+
+			void main(void) {
+
+				//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
+				float r = vUv.x;
+				if( vUv.y < 0.5 ) r = 0.0;
+				float g = vUv.y;
+				if( vUv.x < 0.5 ) g = 0.0;
+
+				gl_FragColor = vec4( r, g, time, 1.0 );
+
+			}
+		</script>
+
+		<script id="vertex_shader" type="x-shader/x-vertex">
+			varying vec2 vUv;
+
+			void main() {
+
+				vUv = uv;
+				//gl_Position = vec4( position, 1.0 );
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+		</script>
+
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var rtTexture, material, quad;
+
+			var delta = 0.01;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				cameraRTT = new THREE.Camera();
+				cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				cameraRTT.position.z = 100;
+
+				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 100;
+				camera.updateMatrix();
+
+				scene = new THREE.Scene();
+				sceneRTT = new THREE.Scene();
+				sceneScreen = new THREE.Scene();
+
+				var light = new THREE.DirectionalLight( 0xffffff );
+				light.position.x = 0;
+				light.position.y = 0;
+				light.position.z = 1;
+				light.position.normalize();
+				sceneRTT.addLight( light );
+				
+				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light.position.x = 0;
+				light.position.y = 0;
+				light.position.z = -1;
+				light.position.normalize();
+				sceneRTT.addLight( light );
+
+				rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
+
+				material = new THREE.MeshShaderMaterial( {
+
+					uniforms: { time: { type: "f", value: 0.0 } },
+					vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
+					fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
+
+				} );
+
+				var materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
+					vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
+					fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
+
+				} );
+
+				// var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
+
+				var plane = new Plane( window.innerWidth, window.innerHeight );
+
+				quad = new THREE.Mesh( plane, material );
+				quad.position.z = -100;
+				sceneRTT.addObject( quad );
+
+				var loader = new THREE.Loader();
+				loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
+
+				quad = new THREE.Mesh( plane, materialScreen );
+				quad.position.z = -100;
+				sceneScreen.addObject( quad );
+
+				var n = 5,
+					geometry = new Sphere( 10, 64, 32 ),
+					material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
+					//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
+
+				for( var j = 0; j < n; j++ ) {
+
+					for( var i = 0; i < n; i++ ) {
+
+						mesh = new THREE.Mesh( geometry, material2 );
+						mesh.position.x = ( i - (n-1)/2 ) * 20;
+						mesh.position.y = ( j - (n-1)/2 ) * 20;
+						mesh.position.z = 0;
+						mesh.rotation.y = 1.57;
+						scene.addObject( mesh );
+
+					}
+				}
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function createMesh( geometry, xscene ) {
+
+				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
+					mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
+
+				zmesh1 = new THREE.Mesh( geometry, mat1 );
+				zmesh1.position.x = 0;
+				zmesh1.position.y = 0;
+				zmesh1.position.z = 100;
+				zmesh1.scale.x = zmesh1.scale.y = zmesh1.scale.z = 150;
+				xscene.addObject( zmesh1 );
+
+				zmesh2 = new THREE.Mesh( geometry, mat2 );
+				zmesh2.position.x = 0;
+				zmesh2.position.y = 150;
+				zmesh2.position.z = 100;
+				zmesh2.scale.x = zmesh2.scale.y = zmesh2.scale.z = 75;
+				xscene.addObject( zmesh2 );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = new Date().getTime() * 0.0015;
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				if ( zmesh1 && zmesh2 ) {
+
+					zmesh1.rotation.x = 1.57;
+					zmesh1.rotation.z = time;
+
+					zmesh2.rotation.z = 1.57;
+					zmesh2.rotation.y = -time;
+
+				}
+
+				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
+
+					delta *= -1;
+
+				}
+
+				material.uniforms.time.value += delta;
+
+				renderer.clear();
+
+				// Render first scene into texture
+
+				renderer.render( sceneRTT, cameraRTT, rtTexture );
+
+				// Render full screen quad with generated texture
+				// (disable depth writing so that it stays in the background)
+
+				renderer.context.depthMask( 0 );
+				renderer.render( sceneScreen, cameraRTT );
+				//renderer.render( sceneRTT, cameraRTT );
+				renderer.context.depthMask( 1 );
+
+				// Render second scene to screen
+				// (using first scene as regular texture)
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>

+ 47 - 31
examples/webglrenderer2_sandbox.html → examples/webgl_sandbox.html

@@ -26,18 +26,14 @@
 			a {
 			a {
 				color: #ffffff;
 				color: #ffffff;
 			}
 			}
-			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
+
 		</style>
 		</style>
 	</head>
 	</head>
 
 
 	<body>
 	<body>
-		<pre id="log"></pre>
-
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo.</div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo.</div>
 
 
-		<!-- 
-		<script type="text/javascript" src="../build/Three.js"></script>
-		-->
+		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
 
 		<script type="text/javascript" src="../src/Three.js"></script>
 		<script type="text/javascript" src="../src/Three.js"></script>
 		<script type="text/javascript" src="../src/core/Color.js"></script>
 		<script type="text/javascript" src="../src/core/Color.js"></script>
@@ -48,21 +44,23 @@
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face3.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/Face4.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/UV.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/animation/Animation.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/QuakeCamera.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/Light.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
 		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/Mappings.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
@@ -77,30 +75,42 @@
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
 		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
 		<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
 		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
 		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
-		<script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/Sound.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
-		<script type="text/javascript" src="../src/renderers/WebGLRenderer2.js"></script>
+		<script type="text/javascript" src="../src/renderers/SoundRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-
-		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Torus.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Icosahedron.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/LathedObject.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
 
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -118,12 +128,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
 			init();
-			// loop();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -191,13 +197,13 @@
 					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
 					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
 					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
 					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
+					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
 					mesh.updateMatrix();
-					mesh.autoUpdateMatrix = false;
 					scene.addObject( mesh );
 					scene.addObject( mesh );
 
 
 				}
 				}
 
 
-				renderer = new THREE.WebGLRenderer2();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				// renderer.sortObjects = false;
 				// renderer.sortObjects = false;
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
@@ -212,12 +218,13 @@
 
 
 				}
 				}
 
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
 			}
 			}
 
 
 			function generateTexture( r, g, b ) {
 			function generateTexture( r, g, b ) {
 
 
 				var canvas = document.createElement( 'canvas' );
 				var canvas = document.createElement( 'canvas' );
-				canvas.loaded = true;
 				canvas.width = 256;
 				canvas.width = 256;
 				canvas.height = 256;
 				canvas.height = 256;
 
 
@@ -252,15 +259,24 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				if ( statsEnabled ) stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				if ( statsEnabled ) stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {

+ 138 - 123
examples/scene_test.html → examples/webgl_scene_test.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - io - scene loader - webgl</title>
+		<title>three.js webgl - io - scene loader</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -13,7 +13,7 @@
 				font-family:georgia;
 				font-family:georgia;
 				text-align:center;
 				text-align:center;
 			}
 			}
-			
+
 			#info {
 			#info {
 				position: absolute;
 				position: absolute;
 				top: 0px; width: 100%;
 				top: 0px; width: 100%;
@@ -23,7 +23,7 @@
 				text-align: center;
 				text-align: center;
 				z-index:100;
 				z-index:100;
 			}
 			}
-			
+
 			#progress {
 			#progress {
 				color:red;
 				color:red;
 				top:7em;
 				top:7em;
@@ -37,7 +37,7 @@
 				text-shadow: #000 0px 0px 10px;
 				text-shadow: #000 0px 0px 10px;
 				display:none;
 				display:none;
 			}
 			}
-			
+
 			#start {
 			#start {
 				color:#fff;
 				color:#fff;
 				text-shadow: #000 0px 0px 2px;
 				text-shadow: #000 0px 0px 2px;
@@ -46,44 +46,44 @@
 				text-align: center;
 				text-align: center;
 				display:none;
 				display:none;
 			}
 			}
-			
+
 			.shadow {
 			.shadow {
 				-moz-box-shadow: 0px 0px 5px #000;
 				-moz-box-shadow: 0px 0px 5px #000;
 				-webkit-box-shadow: 0px 0px 5px #000;
 				-webkit-box-shadow: 0px 0px 5px #000;
 				box-shadow: 0px 0px 5px #000;
 				box-shadow: 0px 0px 5px #000;
 			}
 			}
-			
+
 			#progressbar {
 			#progressbar {
 				text-align: center;
 				text-align: center;
 				background: white;
 				background: white;
 				width: 250px;
 				width: 250px;
 				height: 10px;
 				height: 10px;
 			}
 			}
-			
+
 			#bar {
 			#bar {
 				background:#d00;
 				background:#d00;
 				width:50px;
 				width:50px;
 				height:10px;
 				height:10px;
 			}
 			}
-			
+
 			.enabled {
 			.enabled {
 				color: lime!important;
 				color: lime!important;
 				cursor:pointer;
 				cursor:pointer;
 			}
 			}
-			
+
 			.enabled:hover {
 			.enabled:hover {
 				text-shadow: #0f0 0px 0px 5px !important;
 				text-shadow: #0f0 0px 0px 5px !important;
 			}
 			}
-			
+
 			.disabled {
 			.disabled {
 				background:gray;
 				background:gray;
 				cursor:default;
 				cursor:default;
 			}
 			}
-			
+
 			a { color:red }
 			a { color:red }
 			canvas { pointer-events:none; z-index:10; }
 			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
 			#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
-			
+
 			#scene_explorer {
 			#scene_explorer {
 				background:transparent;
 				background:transparent;
 				color:#fff;
 				color:#fff;
@@ -94,20 +94,20 @@
 				z-index:200;
 				z-index:200;
 				overflow:auto;
 				overflow:auto;
 			}
 			}
-			
+
 			#section_exp {
 			#section_exp {
 				background:rgba(0,0,50,0.5);
 				background:rgba(0,0,50,0.5);
 				padding:0.5em 0;
 				padding:0.5em 0;
 				display:none;
 				display:none;
 			}
 			}
-			
-			#scene_explorer h3 { 
+
+			#scene_explorer h3 {
 				font-size:1em;
 				font-size:1em;
 				padding:0;
 				padding:0;
 				margin:0;
 				margin:0;
 				color:orange;
 				color:orange;
 			}
 			}
-			
+
 			#scene_explorer a {
 			#scene_explorer a {
 				color:#555;
 				color:#555;
 				font-weight:bold;
 				font-weight:bold;
@@ -119,12 +119,12 @@
 				background:#555;
 				background:#555;
 				color:rgba(0,0,50,1);
 				color:rgba(0,0,50,1);
 			}
 			}
-			
+
 			.part {
 			.part {
 				display:none;
 				display:none;
 				padding:0 0 0.5em 2em;
 				padding:0 0 0.5em 2em;
 			}
 			}
-			
+
 		</style>
 		</style>
 	</head>
 	</head>
 
 
@@ -132,7 +132,7 @@
 		<div id="info">
 		<div id="info">
 			<a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
 			<a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
 		</div>
 		</div>
-		
+
 		<div id="scene_explorer">
 		<div id="scene_explorer">
 			<a id="plus_exp" href="#">[+]</a>
 			<a id="plus_exp" href="#">[+]</a>
 			<div id="section_exp"></div>
 			<div id="section_exp"></div>
@@ -140,22 +140,25 @@
 
 
 		<div id="progress">
 		<div id="progress">
 			<span id="message">Loading ...</span>
 			<span id="message">Loading ...</span>
-			
+
 			<center>
 			<center>
 				<div id="progressbar" class="shadow"><div id="bar" class="shadow"></div></div>
 				<div id="progressbar" class="shadow"><div id="bar" class="shadow"></div></div>
 				<div id="start" class="disabled">Start</div>
 				<div id="start" class="disabled">Start</div>
 			</center>
 			</center>
 		</div>
 		</div>
-		
+
 		<pre id="log"></pre>
 		<pre id="log"></pre>
 
 
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
@@ -174,46 +177,47 @@
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			init();
 			init();
+			animate();
 
 
 			function $( id ) {
 			function $( id ) {
-				
+
 				return document.getElementById( id );
 				return document.getElementById( id );
-				
+
 			}
 			}
-			
+
 			function handle_update( result, pieces ) {
 			function handle_update( result, pieces ) {
-				
+
 				refreshSceneView( result );
 				refreshSceneView( result );
 				renderer.initWebGLObjects( result.scene );
 				renderer.initWebGLObjects( result.scene );
-				
+
 				var m, material, count = 0;
 				var m, material, count = 0;
-				
+
 				for ( m in result.materials ) {
 				for ( m in result.materials ) {
-				
+
 					material = result.materials[ m ];
 					material = result.materials[ m ];
 					if ( ! ( material instanceof THREE.MeshFaceMaterial ) ) {
 					if ( ! ( material instanceof THREE.MeshFaceMaterial ) ) {
-						
+
 						if( !material.program ) {
 						if( !material.program ) {
-						
+
 							console.log(m);
 							console.log(m);
 							renderer.initMaterial( material, result.scene.lights, result.scene.fog );
 							renderer.initMaterial( material, result.scene.lights, result.scene.fog );
-							
+
 							count += 1;
 							count += 1;
 							if( count > pieces ) {
 							if( count > pieces ) {
-								
+
 								//console.log("xxxxxxxxx");
 								//console.log("xxxxxxxxx");
 								break;
 								break;
-							
+
 							}
 							}
-							
+
 						}
 						}
-						
+
 					}
 					}
-					
+
 				}
 				}
-				
+
 			}
 			}
-			
+
 			function init() {
 			function init() {
 
 
 				container = document.createElement( 'div' );
 				container = document.createElement( 'div' );
@@ -222,60 +226,65 @@
 				var loadScene = createLoadScene();
 				var loadScene = createLoadScene();
 				scene  = loadScene.scene;
 				scene  = loadScene.scene;
 				camera = loadScene.camera;
 				camera = loadScene.camera;
-				
+
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
 				renderer.domElement.style.position = "relative";
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
 
 
-				$( "start" ).addEventListener( 'click', onStartClick, false );
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.right = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
 
 
-				setInterval( loop, 1000/60 );
+				$( "start" ).addEventListener( 'click', onStartClick, false );
 
 
 				var callback_progress = function( progress, result ) {
 				var callback_progress = function( progress, result ) {
-				
-					var bar = 250, 
+
+					var bar = 250,
 						total = progress.total_models + progress.total_textures,
 						total = progress.total_models + progress.total_textures,
 						loaded = progress.loaded_models + progress.loaded_textures;
 						loaded = progress.loaded_models + progress.loaded_textures;
-					
+
 					if ( total )
 					if ( total )
 						bar = Math.floor( bar * loaded / total );
 						bar = Math.floor( bar * loaded / total );
-					
+
 					$( "bar" ).style.width = bar + "px";
 					$( "bar" ).style.width = bar + "px";
-					
+
 					count = 0;
 					count = 0;
 					for ( var m in result.materials ) count++;
 					for ( var m in result.materials ) count++;
 
 
 					handle_update( result, Math.floor( count/total ) );
 					handle_update( result, Math.floor( count/total ) );
-					
+
 				}
 				}
-				
+
 				var callback_sync = function( result ) {
 				var callback_sync = function( result ) {
-				
+
 					/*
 					/*
-					
+
 					// uncomment to see progressive scene loading
 					// uncomment to see progressive scene loading
-					
+
 					scene = result.scene;
 					scene = result.scene;
 					camera = result.currentCamera;
 					camera = result.currentCamera;
-					
+
 					camera.aspect = window.innerWidth / window.innerHeight;
 					camera.aspect = window.innerWidth / window.innerHeight;
 					camera.updateProjectionMatrix();
 					camera.updateProjectionMatrix();
-					
+
 					renderer.setClearColor( result.bgColor, result.bgAlpha );
 					renderer.setClearColor( result.bgColor, result.bgAlpha );
-					
+
 					*/
 					*/
 
 
 					//handle_update( result, 1 );
 					//handle_update( result, 1 );
-					
+
 				}
 				}
-				
+
 				var callback_async = function( result ) {
 				var callback_async = function( result ) {
-				
+
 					loaded = result;
 					loaded = result;
-					
+
 					var mat_veyron = result.geometries[ "veyron" ].materials;
 					var mat_veyron = result.geometries[ "veyron" ].materials;
-					
+
 					mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
 					mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
 					mat_veyron[ 1 ][ 0 ] = result.materials[ "chrome" ];
 					mat_veyron[ 1 ][ 0 ] = result.materials[ "chrome" ];
 					mat_veyron[ 2 ][ 0 ] = result.materials[ "darkerchrome" ];
 					mat_veyron[ 2 ][ 0 ] = result.materials[ "darkerchrome" ];
@@ -284,50 +293,43 @@
 					mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
 					mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
 					mat_veyron[ 6 ][ 0 ] = result.materials[ "backlights" ];
 					mat_veyron[ 6 ][ 0 ] = result.materials[ "backlights" ];
 					mat_veyron[ 7 ][ 0 ] = result.materials[ "backsignals" ];
 					mat_veyron[ 7 ][ 0 ] = result.materials[ "backsignals" ];
-					
+
 					$( "message" ).style.display = "none";
 					$( "message" ).style.display = "none";
 					$( "progressbar" ).style.display = "none";
 					$( "progressbar" ).style.display = "none";
 					$( "start" ).style.display = "block";
 					$( "start" ).style.display = "block";
 					$( "start" ).className = "enabled";
 					$( "start" ).className = "enabled";
-					
+
 					handle_update( result, 1 );
 					handle_update( result, 1 );
-					
+
 				}
 				}
-				
+
 				$( "progress" ).style.display = "block";
 				$( "progress" ).style.display = "block";
 				SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async, callback_progress );
 				SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async, callback_progress );
 
 
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				stats.domElement.style.right = '0px';
-				stats.domElement.style.zIndex = 100;
-				container.appendChild( stats.domElement );
-				
 				$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
 				$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
 
 
 			}
 			}
 
 
 			function setButtonActive( id ) {
 			function setButtonActive( id ) {
-			
+
 				$( "start" ).style.backgroundColor = "green";
 				$( "start" ).style.backgroundColor = "green";
-					
+
 			}
 			}
-			
+
 			function onStartClick() {
 			function onStartClick() {
-			
+
 				$( "progress" ).style.display = "none";
 				$( "progress" ).style.display = "none";
-				
+
 				scene = loaded.scene;
 				scene = loaded.scene;
 				camera = loaded.currentCamera;
 				camera = loaded.currentCamera;
-				
+
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 				camera.updateProjectionMatrix();
-				
+
 				renderer.setClearColor( loaded.bgColor, loaded.bgAlpha );
 				renderer.setClearColor( loaded.bgColor, loaded.bgAlpha );
-				
+
 			}
 			}
-			
+
 			function onDocumentMouseMove(event) {
 			function onDocumentMouseMove(event) {
 
 
 				mouseX = ( event.clientX - windowHalfX );
 				mouseX = ( event.clientX - windowHalfX );
@@ -336,23 +338,23 @@
 			}
 			}
 
 
 			function createLoadScene() {
 			function createLoadScene() {
-			
+
 				var result = {
 				var result = {
-				
+
 					scene:  new THREE.Scene(),
 					scene:  new THREE.Scene(),
 					camera: new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
 					camera: new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
-					
+
 				};
 				};
-				
+
 				result.camera.position.z = 100;
 				result.camera.position.z = 100;
-				
-				var object, geometry, material, light, count = 100, range = 150;
-				
+
+				var object, geometry, material, light, count = 500, range = 200;
+
 				material = new THREE.MeshLambertMaterial( { color:0xffffff } );
 				material = new THREE.MeshLambertMaterial( { color:0xffffff } );
 				geometry = new Cube( 5, 5, 5 );
 				geometry = new Cube( 5, 5, 5 );
-				
+
 				for( var i = 0; i < count; i++ ) {
 				for( var i = 0; i < count; i++ ) {
-				
+
 					object = new THREE.Mesh( geometry, material );
 					object = new THREE.Mesh( geometry, material );
 					object.position.x = ( Math.random() - 0.5 ) * range;
 					object.position.x = ( Math.random() - 0.5 ) * range;
 					object.position.y = ( Math.random() - 0.5 ) * range;
 					object.position.y = ( Math.random() - 0.5 ) * range;
@@ -360,10 +362,14 @@
 					object.rotation.x = Math.random() * 6;
 					object.rotation.x = Math.random() * 6;
 					object.rotation.y = Math.random() * 6;
 					object.rotation.y = Math.random() * 6;
 					object.rotation.z = Math.random() * 6;
 					object.rotation.z = Math.random() * 6;
+					object.matrixAutoUpdate = false;
+					object.updateMatrix();
 					result.scene.addObject( object );
 					result.scene.addObject( object );
-					
+
 				}
 				}
-				
+
+				result.scene.matrixAutoUpdate = false;
+
 				light = new THREE.PointLight( 0xffffff );
 				light = new THREE.PointLight( 0xffffff );
 				result.scene.addLight( light );
 				result.scene.addLight( light );
 
 
@@ -372,18 +378,27 @@
 				result.scene.addLight( light );
 				result.scene.addLight( light );
 
 
 				return result;
 				return result;
-				
+
 			}
 			}
-			
-			function loop() {
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .001;
 				camera.position.x += ( mouseX - camera.position.x ) * .001;
 				camera.position.y += ( - mouseY - camera.position.y ) * .001;
 				camera.position.y += ( - mouseY - camera.position.y ) * .001;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-				stats.update();
-
 			}
 			}
 
 
 			function log( text ) {
 			function log( text ) {
@@ -394,60 +409,60 @@
 			}
 			}
 
 
 			// Scene explorer user interface
 			// Scene explorer user interface
-			
+
 			function toggle( id ) {
 			function toggle( id ) {
-				
+
 				var scn = $( "section_" + id ).style,
 				var scn = $( "section_" + id ).style,
 					btn = $( "plus_" + id );
 					btn = $( "plus_" + id );
-				
+
 				if ( scn.display == "block" ) {
 				if ( scn.display == "block" ) {
-				
+
 					scn.display = "none";
 					scn.display = "none";
 					btn.innerHTML = "[+]";
 					btn.innerHTML = "[+]";
-					
+
 				}
 				}
 				else {
 				else {
-					
+
 					scn.display = "block";
 					scn.display = "block";
 					btn.innerHTML = "[-]";
 					btn.innerHTML = "[-]";
-					
+
 				}
 				}
-					
+
 			}
 			}
-			
+
 			function createToggle( label ) { return function() { toggle( label ) } };
 			function createToggle( label ) { return function() { toggle( label ) } };
-			
+
 			function refreshSceneView( result ) {
 			function refreshSceneView( result ) {
-				
+
 				$( "section_exp" ).innerHTML = generateSceneView( result );
 				$( "section_exp" ).innerHTML = generateSceneView( result );
 
 
 				var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
 				var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
-				
+
 				for ( var i = 0; i < config.length; i++ )
 				for ( var i = 0; i < config.length; i++ )
 					$( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
 					$( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
 
 
 			}
 			}
-			
+
 			function generateSection( label, id, objects ) {
 			function generateSection( label, id, objects ) {
-				
+
 				var html = "";
 				var html = "";
-				
+
 				html += "<h3><a id='plus_" + id + "' href='#'>[+]</a> " + label + "</h3>";
 				html += "<h3><a id='plus_" + id + "' href='#'>[+]</a> " + label + "</h3>";
 				html += "<div id='section_" + id + "' class='part'>";
 				html += "<div id='section_" + id + "' class='part'>";
-				
+
 				for( var o in objects ) {
 				for( var o in objects ) {
-				
+
 					html += o + "<br/>";
 					html += o + "<br/>";
-					
+
 				}
 				}
 				html += "</div>";
 				html += "</div>";
-				
+
 				return html;
 				return html;
-			
+
 			}
 			}
-			
+
 			function generateSceneView( result ) {
 			function generateSceneView( result ) {
-				
+
 				var config = [
 				var config = [
 				[ "Objects",    "obj", result.objects ],
 				[ "Objects",    "obj", result.objects ],
 				[ "Geometries", "geo", result.geometries ],
 				[ "Geometries", "geo", result.geometries ],
@@ -456,14 +471,14 @@
 				[ "Lights",     "lit", result.lights ],
 				[ "Lights",     "lit", result.lights ],
 				[ "Cameras",    "cam", result.cameras ]
 				[ "Cameras",    "cam", result.cameras ]
 				];
 				];
-				
+
 				var html = "";
 				var html = "";
-				
+
 				for ( var i = 0; i < config.length; i++ )
 				for ( var i = 0; i < config.length; i++ )
 					html += generateSection( config[i][0], config[i][1], config[i][2] );
 					html += generateSection( config[i][0], config[i][1], config[i][2] );
 
 
 				return html;
 				return html;
-				
+
 			}
 			}
 
 
 		</script>
 		</script>

+ 43 - 33
examples/shader.html → examples/webgl_shader.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - shaders [Monjori] - webgl</title>
+		<title>three.js webgl - materials - shaders [Monjori]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -35,11 +35,11 @@
 		<div id="container"></div> 
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div> 
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
-		<script type="text/javascript" src="../src/extras/Detector.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 		<script id="vertex_shader" type="x-shader/x-vertex">
 			void main()
 			void main()
@@ -58,35 +58,35 @@
 
 
 			void main(void)
 			void main(void)
 			{
 			{
-			    vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
-			    float a = time*40.0;
-			    float d,e,f,g=1.0/40.0,h,i,r,q;
-			    e=400.0*(p.x*0.5+0.5);
-			    f=400.0*(p.y*0.5+0.5);
-			    i=200.0+sin(e*g+a/150.0)*20.0;
-			    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
-			    r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
-			    q=f/r;
-			    e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
-			    d=sin(e*g)*176.0+sin(e*g)*164.0+r;
-			    h=((f+d)+a/2.0)*g;
-			    i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
-			    h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
-			    h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
-			    i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
-			    i=mod(i/5.6,256.0)/64.0;
-			    if(i<0.0) i+=4.0;
-			    if(i>=2.0) i=4.0-i;
-			    d=r/350.0;
-			    d+=sin(d*d*8.0)*0.52;
-			    f=(sin(a*g)+1.0)/2.0;
-			    gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
+				vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
+				float a = time*40.0;
+				float d,e,f,g=1.0/40.0,h,i,r,q;
+				e=400.0*(p.x*0.5+0.5);
+				f=400.0*(p.y*0.5+0.5);
+				i=200.0+sin(e*g+a/150.0)*20.0;
+				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
+				r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
+				q=f/r;
+				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
+				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
+				h=((f+d)+a/2.0)*g;
+				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
+				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
+				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
+				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
+				i=mod(i/5.6,256.0)/64.0;
+				if(i<0.0) i+=4.0;
+				if(i>=2.0) i=4.0-i;
+				d=r/350.0;
+				d+=sin(d*d*8.0)*0.52;
+				f=(sin(a*g)+1.0)/2.0;
+				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 			}
 			}
 		</script>
 		</script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
-		
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
 
 
@@ -101,7 +101,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -150,12 +150,22 @@
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				uniforms.time.value += 0.05;
 				uniforms.time.value += 0.05;
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 76 - 64
examples/shader2.html → examples/webgl_shader2.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!DOCTYPE HTML>
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
-		<title>three.js - materials - shaders [custom] - webgl</title>
+		<title>three.js webgl - materials - shaders [custom]</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<style type="text/css">
 		<style type="text/css">
 			body {
 			body {
@@ -32,12 +32,14 @@
 	</head>
 	</head>
 	<body>
 	<body>
 
 
-		<div id="container"></div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div> 
+		<div id="container"></div>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>
 
 
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
 
 
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 
 
@@ -45,11 +47,11 @@
 			uniform vec2 resolution;
 			uniform vec2 resolution;
 
 
 			varying vec2 vUv;
 			varying vec2 vUv;
-			
+
 			void main( void ) {
 			void main( void ) {
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 				vec2 position = -1.0 + 2.0 * vUv;
-				
+
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
 				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
@@ -58,18 +60,18 @@
 			}
 			}
 
 
 		</script>
 		</script>
-		
+
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 
 
 			uniform float time;
 			uniform float time;
 			uniform vec2 resolution;
 			uniform vec2 resolution;
-			
+
 			varying vec2 vUv;
 			varying vec2 vUv;
-			
+
 			void main( void ) {
 			void main( void ) {
 
 
 				vec2 position = vUv;
 				vec2 position = vUv;
-				
+
 				float color = 0.0;
 				float color = 0.0;
 				color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
 				color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
 				color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
 				color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
@@ -83,18 +85,18 @@
 		</script>
 		</script>
 
 
 		<script id="fragment_shader2" type="x-shader/x-fragment">
 		<script id="fragment_shader2" type="x-shader/x-fragment">
-		
+
 			uniform float time;
 			uniform float time;
 			uniform vec2 resolution;
 			uniform vec2 resolution;
 
 
 			uniform sampler2D texture;
 			uniform sampler2D texture;
-			
+
 			varying vec2 vUv;
 			varying vec2 vUv;
-			
+
 			void main( void ) {
 			void main( void ) {
 
 
 				vec2 position = -1.0 + 2.0 * vUv;
 				vec2 position = -1.0 + 2.0 * vUv;
-				
+
 				float a = atan( position.y, position.x );
 				float a = atan( position.y, position.x );
 				float r = sqrt( dot( position, position ) );
 				float r = sqrt( dot( position, position ) );
 
 
@@ -120,60 +122,60 @@
 			uniform float time;
 			uniform float time;
 
 
 			varying vec2 vUv;
 			varying vec2 vUv;
-			
+
 			void main(void)
 			void main(void)
 			{
 			{
-			    
+
 				vec2 p = -1.0 + 2.0 * vUv;
 				vec2 p = -1.0 + 2.0 * vUv;
-			    float a = time*40.0;
-			    float d,e,f,g=1.0/40.0,h,i,r,q;
-				
-			    e=400.0*(p.x*0.5+0.5);
-			    f=400.0*(p.y*0.5+0.5);
-			    i=200.0+sin(e*g+a/150.0)*20.0;
-			    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
-			    r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
-			    q=f/r;
-			    e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
-			    d=sin(e*g)*176.0+sin(e*g)*164.0+r;
-			    h=((f+d)+a/2.0)*g;
-			    i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
-			    h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
-			    h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
-			    i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
-			    i=mod(i/5.6,256.0)/64.0;
-			    if(i<0.0) i+=4.0;
-			    if(i>=2.0) i=4.0-i;
-			    d=r/350.0;
-			    d+=sin(d*d*8.0)*0.52;
-			    f=(sin(a*g)+1.0)/2.0;
-			    gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
-				
+				float a = time*40.0;
+				float d,e,f,g=1.0/40.0,h,i,r,q;
+
+				e=400.0*(p.x*0.5+0.5);
+				f=400.0*(p.y*0.5+0.5);
+				i=200.0+sin(e*g+a/150.0)*20.0;
+				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
+				r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
+				q=f/r;
+				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
+				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
+				h=((f+d)+a/2.0)*g;
+				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
+				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
+				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
+				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
+				i=mod(i/5.6,256.0)/64.0;
+				if(i<0.0) i+=4.0;
+				if(i>=2.0) i=4.0-i;
+				d=r/350.0;
+				d+=sin(d*d*8.0)*0.52;
+				f=(sin(a*g)+1.0)/2.0;
+				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
+
 			}
 			}
-			
+
 		</script>
 		</script>
 
 
 		<script id="vertex_shader" type="x-shader/x-vertex">
 		<script id="vertex_shader" type="x-shader/x-vertex">
-		
+
 			varying vec2 vUv;
 			varying vec2 vUv;
-			
+
 			void main()
 			void main()
 			{
 			{
 				vUv = uv;
 				vUv = uv;
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 				gl_Position = projectionMatrix * mvPosition;
 				gl_Position = projectionMatrix * mvPosition;
 			}
 			}
-			
+
 		</script>
 		</script>
 
 
 		<script type="text/javascript">
 		<script type="text/javascript">
 
 
-			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
-			
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 			var container, stats;
 			var container, stats;
 
 
 			var start_time;
 			var start_time;
-			
+
 			var camera, scene, renderer;
 			var camera, scene, renderer;
 
 
 			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
 			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
@@ -185,7 +187,7 @@
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
 			init();
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 
 			function init() {
 			function init() {
 
 
@@ -197,7 +199,7 @@
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 
 
 				start_time = new Date().getTime();
 				start_time = new Date().getTime();
-				
+
 				uniforms1 = {
 				uniforms1 = {
 					time: { type: "f", value: 1.0 },
 					time: { type: "f", value: 1.0 },
 					resolution: { type: "v2", value: new THREE.Vector2() }
 					resolution: { type: "v2", value: new THREE.Vector2() }
@@ -208,14 +210,14 @@
 					resolution: { type: "v2", value: new THREE.Vector2() },
 					resolution: { type: "v2", value: new THREE.Vector2() },
 					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
 				};
 				};
-				
+
 				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
 				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
 
 
-				var size = 0.75, mlib = [], 
+				var size = 0.75, mlib = [],
 					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
 					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
-				
+
 				for( var i = 0; i < params.length; i++ ) {
 				for( var i = 0; i < params.length; i++ ) {
-				
+
 					material = new THREE.MeshShaderMaterial( {
 					material = new THREE.MeshShaderMaterial( {
 
 
 						uniforms: params[ i ][ 1 ],
 						uniforms: params[ i ][ 1 ],
@@ -223,18 +225,18 @@
 						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
 						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent
 
 
 						} );
 						} );
-						
+
 					mlib[ i ] = material;
 					mlib[ i ] = material;
 
 
 					mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ], false ), new THREE.MeshFaceMaterial() );
 					mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ], false ), new THREE.MeshFaceMaterial() );
 					mesh.position.x = i - (params.length - 1)/2;
 					mesh.position.x = i - (params.length - 1)/2;
 					mesh.position.y = i % 2 - 0.5;
 					mesh.position.y = i % 2 - 0.5;
 					scene.addObject( mesh );
 					scene.addObject( mesh );
-					
+
 					meshes[ i ] = mesh;
 					meshes[ i ] = mesh;
 
 
 				}
 				}
-				
+
 				renderer = new THREE.WebGLRenderer();
 				renderer = new THREE.WebGLRenderer();
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );
 
 
@@ -253,28 +255,38 @@
 
 
 				uniforms1.resolution.value.x = window.innerWidth;
 				uniforms1.resolution.value.x = window.innerWidth;
 				uniforms1.resolution.value.y = window.innerHeight;
 				uniforms1.resolution.value.y = window.innerHeight;
-				
+
 				uniforms2.resolution.value.x = window.innerWidth;
 				uniforms2.resolution.value.x = window.innerWidth;
 				uniforms2.resolution.value.y = window.innerHeight;
 				uniforms2.resolution.value.y = window.innerHeight;
-				
+
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 			}
 			}
 
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 
 				uniforms1.time.value += 0.05;
 				uniforms1.time.value += 0.05;
 				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
 				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
-				
+
 				for( var i = 0; i < meshes.length; ++i ) {
 				for( var i = 0; i < meshes.length; ++i ) {
-					
+
 					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
 					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
 					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
 					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
-					
+
 				}
 				}
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
-				stats.update();
 
 
 			}
 			}
 
 

+ 297 - 0
src/animation/Animation.js

@@ -0,0 +1,297 @@
+/**
+ * @author mikael emtinger / http://gomo.se/
+ */
+
+THREE.Animation = function( root, data ) {
+
+	this.root = root;
+	this.data = data;
+	this.hierarchy = [];
+
+	this.startTime = 0;
+	this.isPlaying = false;
+	this.loop = true;
+
+	this.offset = 0;
+
+	// need to initialize data?
+
+	if( !this.data.initialized ) {
+
+		THREE.AnimationHandler.initData( this.data );
+
+	}
+
+
+	// setup hierarchy
+
+	if ( root instanceof THREE.SkinnedMesh ) {
+
+		for( var b = 0; b < this.root.bones.length; b++ ) {
+
+			this.hierarchy.push( this.root.bones[ b ] );
+
+		}
+
+	} else {
+
+		// parse hierarchy and match against animation (somehow)
+
+	}
+
+}
+
+
+/*
+ * Play
+ */
+
+THREE.Animation.prototype.play = function( loop ) {
+
+	if( !this.isPlaying ) {
+
+		this.isPlaying = true;
+		this.startTime = new Date().getTime() * 0.001;
+
+		// reset key cache
+
+		for ( var h = 0; h < this.hierarchy.length; h++ ) {
+
+			this.hierarchy[ h ].useQuaternion    = true;
+			this.hierarchy[ h ].matrixAutoUpdate = true;
+
+			if ( this.hierarchy[ h ].prevKey === undefined ) {
+
+				this.hierarchy[ h ].prevKey = { pos: 0, rot: 0, scl: 0 };
+				this.hierarchy[ h ].nextKey = { pos: 0, rot: 0, scl: 0 };
+
+			}
+
+			this.hierarchy[ h ].prevKey.pos = this.data.hierarchy[ h ].keys[ 0 ];
+			this.hierarchy[ h ].prevKey.rot = this.data.hierarchy[ h ].keys[ 0 ];
+			this.hierarchy[ h ].prevKey.scl = this.data.hierarchy[ h ].keys[ 0 ];
+
+			this.hierarchy[ h ].nextKey.pos = this.getNextKeyWith( "pos", h, 1 );
+			this.hierarchy[ h ].nextKey.rot = this.getNextKeyWith( "rot", h, 1 );
+			this.hierarchy[ h ].nextKey.scl = this.getNextKeyWith( "scl", h, 1 );
+		}
+
+		this.update();
+
+		THREE.AnimationHandler.add( this );
+
+	}
+
+};
+
+
+/*
+ * Pause
+ */
+
+THREE.Animation.prototype.pause = function() {
+
+	THREE.AnimationHandler.remove( this );
+
+	// todo
+}
+
+
+/*
+ * Stop
+ */
+
+THREE.Animation.prototype.stop = function() {
+
+	this.isPlaying = false;
+	THREE.AnimationHandler.remove( this );
+}
+
+
+/*
+ * Update
+ */
+
+THREE.Animation.prototype.update = function( time ) {
+
+	// TODO: add input time
+
+	// early out
+
+	if( !this.isPlaying ) return;
+
+
+	// vars
+
+	var types = [ "pos", "rot", "scl" ];
+	var scale;
+	var relative;
+	var vector;
+	var prevXYZ, nextXYZ;
+	var object;
+	var frame;
+	var JIThierarchy = this.data.JIT.hierarchy;
+
+	// update
+
+	var currentTime         = new Date().getTime() * 0.001 - this.startTime + this.offset;
+	var unloopedCurrentTime = currentTime;
+
+
+	// looped?
+
+	if ( currentTime > this.data.length ) {
+
+		while( currentTime > this.data.length ) {
+
+			currentTime -= this.data.length;
+
+		}
+
+		this.startTime = new Date().getTime() * 0.001 - currentTime;
+		currentTime    = new Date().getTime() * 0.001 - this.startTime;
+
+	}
+
+	frame = Math.min( parseInt( currentTime * this.data.fps ), parseInt( this.data.length * this.data.fps ) );
+
+	// update
+
+	for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
+
+		object = this.hierarchy[ h ];
+
+		if ( JIThierarchy[ h ][ frame ] !== undefined ) {
+
+			object.skinMatrix = JIThierarchy[ h ][ frame ];
+			object.matrixAutoUpdate = false;
+			object.matrixNeedsUpdate = false;
+
+			object.skinMatrix.flattenToArrayOffset( this.root.boneMatrices, h * 16 );
+
+		} else {
+
+			for ( var t = 0; t < 3; t++ ) {
+
+				// get keys
+
+				var type    = types[ t ];
+				var prevKey = object.prevKey[ type ];
+				var nextKey = object.nextKey[ type ];
+
+				// switch keys?
+
+				if ( nextKey.time < unloopedCurrentTime ) {
+
+					// did we loop?
+
+					if ( currentTime < unloopedCurrentTime ) {
+
+						if ( this.loop ) {
+
+							prevKey = this.data.hierarchy[ h ].keys[ 0 ];
+							nextKey = this.getNextKeyWith( type, h, 1 );
+
+						} else {
+
+							this.stop();
+							return;
+
+						}
+
+					} else {
+
+						do {
+
+							prevKey = nextKey;
+							nextKey = this.getNextKeyWith( type, h, nextKey.index + 1 );
+
+						} while( nextKey.time < currentTime )
+
+					}
+
+					object.prevKey[ type ] = prevKey;
+					object.nextKey[ type ] = nextKey;
+
+				}
+
+				// interpolate rot (quaternion slerp)
+
+				object.matrixAutoUpdate = true;
+				object.matrixNeedsUpdate = true;
+
+				scale = ( currentTime - prevKey.time ) / ( nextKey.time - prevKey.time );
+				prevXYZ = prevKey[ type ];
+				nextXYZ = nextKey[ type ];
+
+				if ( type === "rot" ) {
+
+					if ( scale < 0 || scale > 1 ) {
+
+						console.log( "Scale out of bounds:" + scale ); 
+						scale = scale < 0 ? 0 : 1;
+
+					}
+
+					THREE.Quaternion.slerp( prevXYZ, nextXYZ, object.quaternion, scale );
+
+				}
+
+				// lerp pos/scl 
+
+				else {
+
+					vector   = type === "pos" ? object.position : object.scale; 
+					vector.x = prevXYZ[ 0 ] + ( nextXYZ[ 0 ] - prevXYZ[ 0 ] ) * scale;
+					vector.y = prevXYZ[ 1 ] + ( nextXYZ[ 1 ] - prevXYZ[ 1 ] ) * scale;
+					vector.z = prevXYZ[ 2 ] + ( nextXYZ[ 2 ] - prevXYZ[ 2 ] ) * scale;
+
+				}
+
+			}
+
+		}
+
+	}
+
+	// update JIT?
+
+	if ( JIThierarchy[ 0 ][ frame ] === undefined ) {
+
+		this.hierarchy[ 0 ].update( undefined, true );
+
+		for ( var h = 0; h < this.hierarchy.length; h++ ) {
+
+			JIThierarchy[ h ][ frame ] = this.hierarchy[ h ].skinMatrix.clone();
+
+		}
+
+	}
+
+};
+
+
+/*
+ * Update Object
+ */
+
+THREE.Animation.prototype.updateObject = function( h, currentTime, unloopedCurrentTime ) {}
+
+
+THREE.Animation.prototype.getNextKeyWith = function( type, h, key ) {
+
+	var keys = this.data.hierarchy[ h ].keys;
+
+	for ( ; key < keys.length; key++ ) {
+
+		if ( keys[ key ][ type ] !== undefined ) {
+
+			return keys[ key ];
+
+		}
+
+	}
+
+	return this.data.hierarchy[ h ].keys[ 0 ];
+
+}

+ 98 - 0
src/animation/AnimationHandler.js

@@ -0,0 +1,98 @@
+/**
+ * @author mikael emtinger / http://gomo.se/
+ */
+
+THREE.AnimationHandler = (function() {
+	
+	var playing = [];
+	var that    = {};
+	
+	
+	//--- update ---
+	
+	that.update = function( time ) {
+		
+		for( var i = 0; i < playing.length; i++ )
+			playing[ i ].update( time );
+
+	};
+	
+	
+	//--- add ---
+	
+	that.add = function( animation ) {
+		
+		if( playing.indexOf( animation ) === -1 )
+			playing.push( animation );
+
+	};
+	
+	
+	//--- remove ---
+	
+	that.remove = function( animation ) {
+		
+		var index = playing.indexOf( animation ); 
+		
+		if( index !== -1 )
+			playing.splice( childIndex, 1 );
+
+	};
+	
+	
+	//--- init data ---
+	
+	that.initData = function( data ) {
+		
+		if( data.initialized === true )
+			return;
+		
+		// loop through all keys		
+		
+		for( var h = 0; h < data.hierarchy.length; h++ ) {
+			
+			for( var k = 0; k < data.hierarchy[ h ].keys.length; k++ ) {
+			
+				// remove minus times
+				
+				if( data.hierarchy[ h ].keys[ k ].time < 0 )
+					data.hierarchy[ h ].keys[ k ].time = 0;
+			
+			
+				// set index
+				
+				data.hierarchy[ h ].keys[ k ].index = k;
+		
+			
+				// create quaternions
+			
+				if( data.hierarchy[ h ].keys[ k ].rot !== undefined &&
+				  !( data.hierarchy[ h ].keys[ k ].rot instanceof THREE.Quaternion ) ) {
+					
+					var quat = data.hierarchy[ h ].keys[ k ].rot;
+					data.hierarchy[ h ].keys[ k ].rot = new THREE.Quaternion( quat[0], quat[1], quat[2], quat[3] ); 
+
+				}	
+			}
+		}
+		
+		
+		// JIT
+
+		var lengthInFrames = parseInt( data.length * data.fps, 10 );
+		
+		data.JIT = {};
+		data.JIT.hierarchy = [];
+		
+		for( var h = 0; h < data.hierarchy.length; h++ )
+			data.JIT.hierarchy.push( new Array( lengthInFrames ));
+		
+		
+		// done
+		
+		data.initialized = true;
+
+	};
+	
+	return that;
+}());

+ 164 - 21
src/cameras/Camera.js

@@ -1,31 +1,39 @@
 /**
 /**
  * @author mr.doob / http://mrdoob.com/
  * @author mr.doob / http://mrdoob.com/
+ * @author mikael emtinger / http://gomo.se/
  */
  */
 
 
-THREE.Camera = function ( fov, aspect, near, far ) {
+THREE.Camera = function( fov, aspect, near, far, target ) {
 
 
-	this.fov = fov;
-	this.aspect = aspect;
-	this.near = near;
-	this.far = far;
+	THREE.Object3D.call( this );
 
 
-	this.position = new THREE.Vector3();
-	this.target = { position: new THREE.Vector3() };
+	this.fov = fov || 50;
+	this.aspect = aspect || 1.0;
+	this.near = near || 0.1;
+	this.far = far || 2000;
 
 
-	this.autoUpdateMatrix = true;
+	this.screenCenterX = 0;
+	this.screenCenterY = 0;
 
 
-	this.projectionMatrix = null;
-	this.matrix = new THREE.Matrix4();
+	this.target = target || new THREE.Object3D();
+	this.useTarget = true;
 
 
 	this.up = new THREE.Vector3( 0, 1, 0 );
 	this.up = new THREE.Vector3( 0, 1, 0 );
 
 
+	this.inverseMatrix     = new THREE.Matrix4();
+	this.projectionMatrix = null;
+
+	// movement
+
 	this.tmpVec = new THREE.Vector3();
 	this.tmpVec = new THREE.Vector3();
 
 
-	this.translateX = function ( amount ) {
+	this.translateX = function ( amount, nofly ) {
 
 
 		this.tmpVec.sub( this.target.position, this.position ).normalize().multiplyScalar( amount );
 		this.tmpVec.sub( this.target.position, this.position ).normalize().multiplyScalar( amount );
 		this.tmpVec.crossSelf( this.up );
 		this.tmpVec.crossSelf( this.up );
 
 
+		if ( nofly ) this.tmpVec.y = 0;
+
 		this.position.addSelf( this.tmpVec );
 		this.position.addSelf( this.tmpVec );
 		this.target.position.addSelf( this.tmpVec );
 		this.target.position.addSelf( this.tmpVec );
 
 
@@ -37,37 +45,172 @@ THREE.Camera = function ( fov, aspect, near, far ) {
 	};
 	};
 	*/
 	*/
 
 
-	this.translateZ = function ( amount ) {
+	this.translateZ = function ( amount, nofly ) {
 
 
 		this.tmpVec.sub( this.target.position, this.position ).normalize().multiplyScalar( amount );
 		this.tmpVec.sub( this.target.position, this.position ).normalize().multiplyScalar( amount );
 
 
+		if ( nofly ) this.tmpVec.y = 0;
+
 		this.position.subSelf( this.tmpVec );
 		this.position.subSelf( this.tmpVec );
 		this.target.position.subSelf( this.tmpVec );
 		this.target.position.subSelf( this.tmpVec );
 
 
 	};
 	};
 
 
-	this.updateMatrix = function () {
+	this.updateProjectionMatrix();
+
+}
+
+THREE.Camera.prototype = new THREE.Object3D();
+THREE.Camera.prototype.constructor = THREE.Camera;
+THREE.Camera.prototype.supr = THREE.Object3D.prototype;
+
+
+/*
+ * Update projection matrix
+ *
+ * TODO: make it work also for ortho camera
+*/
+
+THREE.Camera.prototype.updateProjectionMatrix = function() {
+
+	this.projectionMatrix = THREE.Matrix4.makePerspective( this.fov, this.aspect, this.near, this.far );
+
+}
+
+
+/*
+ * Update
+ */
+
+THREE.Camera.prototype.update = function( parentMatrixWorld, forceUpdate, camera ) {
+
+	if( this.useTarget ) {
+
+		// local
 
 
 		this.matrix.lookAt( this.position, this.target.position, this.up );
 		this.matrix.lookAt( this.position, this.target.position, this.up );
 
 
-	};
 
 
-	this.updateProjectionMatrix = function () {
+		// global
 
 
-		this.projectionMatrix = THREE.Matrix4.makePerspective( this.fov, this.aspect, this.near, this.far );
+		if( parentMatrixWorld ) {
 
 
-	};
+			this.matrixWorld.multiply( parentMatrixWorld, this.matrix );
 
 
-	this.updateProjectionMatrix();
+		} else {
+
+			this.matrixWorld.copy( this.matrix );
+
+		}
+
+		THREE.Matrix4.makeInvert( this.matrixWorld, this.inverseMatrix );
+		//THREE.Matrix4.makeInvertTo( this.matrixWorld, this.inverseMatrix );
+
+		forceUpdate = true;
+
+	} else {
+
+		if( this.matrixAutoUpdate )
+			forceUpdate |= this.updateMatrix();
+
+		if( forceUpdate || this.matrixNeedsUpdate ) {
+
+			if( parentMatrixWorld ) {
+
+				this.matrixWorld.multiply( parentMatrixWorld, this.matrix );
+
+			} else {
+
+				this.matrixWorld.copy( this.matrix );
+
+			}
+
+			this.matrixNeedsUpdate = false;
+			forceUpdate              = true;
+
+			THREE.Matrix4.makeInvert( this.matrixWorld, this.inverseMatrix );
+			//THREE.Matrix4.makeInvertTo( this.matrixWorld, this.inverseMatrix );
+
+		}
+
+	}
+
+	// update children
+
+	for ( var i = 0; i < this.children.length; i++ ) {
+
+		this.children[ i ].update( this.matrixWorld, forceUpdate, camera );
+
+	}
 
 
 };
 };
 
 
-THREE.Camera.prototype = {
 
 
-	toString: function () {
+/*
+ * FrustumContains
+ * Checks object against projected image (as opposed to ordinary frustum check)
+ *
+ * TODO: make it work also for ortho camera
+ */
+
+THREE.Camera.prototype.frustumContains = function( object3D ) {
+
+	// object pos
+
+	var vx0 = object3D.matrixWorld.n14,
+	vy0 = object3D.matrixWorld.n24,
+	vz0 = object3D.matrixWorld.n34;
 
 
-		return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';
+	// check z
+
+	var inverse = this.inverseMatrix;
+	var radius = object3D.boundRadius * object3D.boundRadiusScale;
+	var vz1 = ( inverse.n31 * vx0 + inverse.n32 * vy0 + inverse.n33 * vz0 + inverse.n34 );
+
+	if( vz1 - radius > - this.near ) {
+
+		return false;
 
 
 	}
 	}
 
 
+	if( vz1 + radius < - this.far ) {
+
+		return false;
+
+	}
+
+	// check x
+
+	vz1 -= radius;
+
+	var perspective      = this.projectionMatrix;
+	var ooZ              = 1 / ( perspective.n43 * vz1 );
+	var ooZscreenCenterX = ooZ * this.screenCenterX;
+	var vx1              = ( inverse.n11 * vx0 + inverse.n12 * vy0 + inverse.n13 * vz0 + inverse.n14 ) * perspective.n11 * ooZscreenCenterX;
+	radius               = perspective.n11 * radius * ooZscreenCenterX;
+
+	if( vx1 + radius < -this.screenCenterX )
+		return false;
+
+	if( vx1 - radius > this.screenCenterX )
+		return false;
+
+
+	// check y
+
+	var vy1 = ( inverse.n21 * vx0 + inverse.n22 * vy0 + inverse.n23 * vz0 + inverse.n24 ) * perspective.n22 * ooZ * this.screenCenterY;
+
+	if( vy1 + radius < -this.screenCenterY )
+		return false;
+
+	if( vy1 - radius > this.screenCenterY )
+		return false;
+
+
+	// inside
+
+	object3D.positionScreen.set( vx1, vy1, vz1, radius );
+
+	return true;
+
 };
 };

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