Browse Source

Merge remote-tracking branch 'upstream/dev' into helpers-docs

Casey Grun 10 years ago
parent
commit
ed9d6a79b8
100 changed files with 3595 additions and 1640 deletions
  1. 1 1
      LICENSE
  2. 1 1
      bower.json
  3. 418 269
      build/three.js
  4. 108 107
      build/three.min.js
  5. 83 0
      docs/api/cameras/CubeCamera.html
  6. 1 1
      docs/api/constants/ShadowingTypes.html
  7. 1 2
      docs/api/constants/Textures.html
  8. 45 22
      docs/api/core/Object3D.html
  9. 6 6
      docs/api/examples/cameras/CombinedCamera.html
  10. 1 1
      docs/api/extras/ImageUtils.html
  11. 0 57
      docs/api/extras/cameras/CubeCamera.html
  12. 2 2
      docs/api/lights/SpotLight.html
  13. 15 15
      docs/api/materials/LineDashedMaterial.html
  14. 5 4
      docs/api/materials/Material.html
  15. 28 26
      docs/api/materials/MeshBasicMaterial.html
  16. 6 0
      docs/api/materials/MeshDepthMaterial.html
  17. 1 1
      docs/api/materials/MeshFaceMaterial.html
  18. 67 44
      docs/api/materials/MeshLambertMaterial.html
  19. 8 8
      docs/api/materials/MeshNormalMaterial.html
  20. 95 68
      docs/api/materials/MeshPhongMaterial.html
  21. 3 1
      docs/api/materials/PointCloudMaterial.html
  22. 35 28
      docs/api/materials/ShaderMaterial.html
  23. 11 10
      docs/api/materials/SpriteCanvasMaterial.html
  24. 13 45
      docs/api/materials/SpriteMaterial.html
  25. 4 4
      docs/api/math/Box2.html
  26. 5 5
      docs/api/math/Box3.html
  27. 14 0
      docs/api/math/Euler.html
  28. 10 0
      docs/api/math/Matrix4.html
  29. 2 2
      docs/api/math/Triangle.html
  30. 3 5
      docs/api/objects/PointCloud.html
  31. 81 82
      docs/api/renderers/CanvasRenderer.html
  32. 84 1
      docs/api/renderers/WebGLRenderTarget.html
  33. 19 11
      docs/api/renderers/WebGLRenderTargetCube.html
  34. 27 52
      docs/api/renderers/WebGLRenderer.html
  35. 1 1
      docs/api/renderers/webgl/WebGLProgram.html
  36. 12 1
      docs/api/textures/CompressedTexture.html
  37. 1 1
      docs/api/textures/DataTexture.html
  38. 6 2
      docs/api/textures/Texture.html
  39. 81 72
      docs/index.html
  40. 2 6
      docs/list.js
  41. 4 4
      docs/manual/introduction/Creating-a-scene.html
  42. 5 1
      docs/page.css
  43. 535 0
      docs/scenes/js/material.js
  44. 124 0
      docs/scenes/material-browser.html
  45. 12 1
      editor/css/dark.css
  46. 12 1
      editor/css/light.css
  47. 10 1
      editor/css/main.css
  48. 172 0
      editor/examples/camera.app.json
  49. 99 0
      editor/examples/particles.app.json
  50. 137 0
      editor/examples/pong.app.json
  51. 16 13
      editor/index.html
  52. 117 4
      editor/js/Editor.js
  53. 31 6
      editor/js/Menubar.Add.js
  54. 6 2
      editor/js/Menubar.Edit.js
  55. 60 0
      editor/js/Menubar.Examples.js
  56. 71 12
      editor/js/Menubar.File.js
  57. 1 1
      editor/js/Menubar.Play.js
  58. 34 0
      editor/js/Menubar.View.js
  59. 1 0
      editor/js/Menubar.js
  60. 10 3
      editor/js/Player.js
  61. 91 0
      editor/js/Script.js
  62. 1 1
      editor/js/Sidebar.Material.js
  63. 3 3
      editor/js/Sidebar.Object3D.js
  64. 1 1
      editor/js/Sidebar.Scene.js
  65. 0 46
      editor/js/Sidebar.Script.Editor.js
  66. 80 13
      editor/js/Sidebar.Script.js
  67. 27 17
      editor/js/Viewport.js
  68. 128 46
      editor/js/libs/app.js
  69. 22 14
      editor/js/libs/codemirror/codemirror.css
  70. 344 229
      editor/js/libs/codemirror/codemirror.js
  71. 8 8
      editor/js/libs/codemirror/mode/javascript.js
  72. 31 0
      editor/js/libs/codemirror/theme/monokai.css
  73. 11 0
      editor/js/libs/jszip.min.js
  74. 0 75
      editor/js/libs/ui.editor.js
  75. 14 3
      editor/js/libs/ui.js
  76. 2 137
      editor/js/libs/ui.three.js
  77. 1 0
      examples/canvas_ascii_effect.html
  78. 1 1
      examples/canvas_camera_orthographic.html
  79. 1 1
      examples/canvas_camera_orthographic2.html
  80. 1 0
      examples/canvas_effects_stereo.html
  81. 1 0
      examples/canvas_geometry_birds.html
  82. 1 1
      examples/canvas_geometry_cube.html
  83. 1 1
      examples/canvas_geometry_earth.html
  84. 1 0
      examples/canvas_geometry_hierarchy.html
  85. 1 0
      examples/canvas_geometry_nurbs.html
  86. 1 1
      examples/canvas_geometry_panorama.html
  87. 1 1
      examples/canvas_geometry_panorama_fisheye.html
  88. 1 0
      examples/canvas_geometry_shapes.html
  89. 1 0
      examples/canvas_geometry_terrain.html
  90. 1 1
      examples/canvas_geometry_text.html
  91. 17 5
      examples/canvas_interactive_cubes.html
  92. 17 5
      examples/canvas_interactive_cubes_tween.html
  93. 6 5
      examples/canvas_interactive_particles.html
  94. 6 5
      examples/canvas_interactive_voxelpainter.html
  95. 1 0
      examples/canvas_lights_pointlights.html
  96. 1 0
      examples/canvas_lines.html
  97. 2 3
      examples/canvas_lines_colors.html
  98. 2 3
      examples/canvas_lines_colors_2d.html
  99. 2 1
      examples/canvas_lines_dashed.html
  100. 1 0
      examples/canvas_lines_sphere.html

+ 1 - 1
LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright © 2010-2014 three.js authors
+Copyright © 2010-2015 three.js authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

+ 1 - 1
bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "three.js",
-	"version": "0.0.69",
+	"version": "0.0.70",
 	"homepage": "http://threejs.org/",
 	"description": "JavaScript 3D library",
 	"main": "build/three.js",

File diff suppressed because it is too large
+ 418 - 269
build/three.js


File diff suppressed because it is too large
+ 108 - 107
build/three.min.js


+ 83 - 0
docs/api/cameras/CubeCamera.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<script src="../../list.js"></script>
+		<script src="../../page.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">Creates 6 cameras that render to a [page:WebGLRenderTargetCube].</div>
+
+		<h2>Examples</h2>
+		
+		<div>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</div>
+		<div>[example:webgl_materials_cubemap_dynamic2 materials / cubemap / dynamic2 ]</div>
+		<div>[example:webgl_materials_cubemap_dynamic2 shading / physical ]</div>
+		
+		<code>//Create cube camera
+		var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
+		scene.add( cubeCamera );
+		
+		//Create car
+		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeCamera.renderTarget } );
+		var car = new Mesh( carGeometry, chromeMaterial );
+		scene.add( car );
+		
+		//Update the render target cube
+		car.setVisible( false );
+		cubeCamera.position.copy( car.position );
+		cubeCamera.updateCubeMap( renderer, scene );
+
+		//Render the scene
+		car.setVisible( true );
+		renderer.render( scene, camera );
+		</code>
+		
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([page:number near], [page:number far], [page:number cubeResolution])</h3>
+		<div>
+		near -- The near clipping distance. <br />
+		far -- The far clipping distance <br />
+		cubeResolution -- Sets the width of the cube.
+		</div>
+		<div>
+		Constructs a CubeCamera that contains 6 [page:PerspectiveCamera PerspectiveCameras] that then
+		render to a [page:WebGLRenderTargetCube]
+		</div>
+
+
+		<h2>Properties</h2>
+
+
+
+		<h3>[property:WebGLRenderTargetCube renderTarget]</h3>
+		<div>
+		The cube texture that gets generated.
+		</div> 
+
+		<h2>Methods</h2>
+
+
+
+		<h3>[method:todo updateCubeMap]([page:todo renderer], [page:todo scene])</h3>
+		<div>
+		renderer -- The current WebGL renderer <br />
+		scene -- The current scene
+		</div>
+		<div>
+		Call this to update the renderTarget.
+		</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

+ 1 - 1
docs/api/constants/ShadowingTypes.html

@@ -7,7 +7,7 @@
 		<link type="text/css" rel="stylesheet" href="../../page.css" />
 	</head>
 	<body>
-		<h1>Shadowing Type Contants</h1>
+		<h1>Shadowing Type Constants</h1>
 
 		<h2>Shadow Map</h2>
 		<div>

+ 1 - 2
docs/api/constants/Textures.html

@@ -21,8 +21,7 @@
 		THREE.UVMapping<br />
 		THREE.CubeReflectionMapping<br />
 		THREE.CubeRefractionMapping<br />
-		THREE.SphericalReflectionMapping<br />
-		THREE.SphericalRefractionMapping
+		THREE.SphericalReflectionMapping
 		</div>
 
 		<h2>Wrapping Modes</h2>

+ 45 - 22
docs/api/core/Object3D.html

@@ -25,7 +25,7 @@
 
 		<h3>[property:Integer id]</h3>
 		<div>
-		Unique number for this object instance.
+		readonly – Unique number for this object instance.
 		</div>
 
 		<h3>[property:String uuid]</h3>
@@ -59,11 +59,6 @@
 		Object's local rotation (<a href="https://en.wikipedia.org/wiki/Euler_angles" target="_blank">Euler angles</a>), in radians.
 		</div>
 
-		<h3>[property:String eulerOrder]</h3>
-		<div>
-		Order of axis for Euler angles.
-		</div>
-
 		<h3>[property:Vector3 scale]</h3>
 		<div>
 		Object's local scale.
@@ -81,53 +76,64 @@
 
 		<h3>[property:Quaternion quaternion]</h3>
 		<div>
-		Object's local rotation as [page:Quaternion Quaternion]. Only used when useQuaternion is set to true.
-		</div>
-
-		<h3>[property:Boolean useQuaternion]</h3>
-		<div>
-		Use quaternion instead of Euler angles for specifying local rotation.
-		</div>
-
-		<h3>[property:Float renderDepth]</h3>
-		<div>
-		Override depth-sorting order if non *null*.
+		Object's local rotation as [page:Quaternion Quaternion].
 		</div>
 
 		<h3>[property:Boolean visible]</h3>
 		<div>
 		Object gets rendered if *true*.
 		</div>
+		<div>
+		default – true
+		</div>
 
 		<h3>[property:Boolean castShadow]</h3>
 		<div>
 		Gets rendered into shadow map.
 		</div>
+		<div>
+		default – false
+		</div>
 
 		<h3>[property:Boolean receiveShadow]</h3>
 		<div>
 		Material gets baked in shadow receiving.
 		</div>
+		<div>
+		default – false
+		</div>
 
 		<h3>[property:Boolean frustumCulled]</h3>
 		<div>
 		When this is set, it checks every frame if the object is in the frustum of the camera. Otherwise the object gets drawn every frame even if it isn't visible.
 		</div>
+		<div>
+		default – true
+		</div>
 
 		<h3>[property:Boolean matrixAutoUpdate]</h3>
 		<div>
 		When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and also recalculates the matrixWorld property.
 		</div>
+		<div>
+		default – true
+		</div>
 
 		<h3>[property:Boolean matrixWorldNeedsUpdate]</h3>
 		<div>
 		When this is set, it calculates the matrixWorld in that frame and resets this property to false.
 		</div>
+		<div>
+		default – false
+		</div>
 
 		<h3>[property:Boolean rotationAutoUpdate]</h3>
 		<div>
 		When this is set, then the rotationMatrix gets calculated every frame.
 		</div>
+		<div>
+		default – true
+		</div>
 
 		<h3>[property:object userData]</h3>
 		<div>
@@ -200,29 +206,46 @@
 		Rotates object to face point in space.
 		</div>
 
-		<h3>[method:null add]( [page:Object3D object] )</h3>
+		<h3>[method:null add]( [page:Object3D object], ... )</h3>
 		<div>
 		object - An object.<br />
 		</div>
 		<div>
-		Adds *object* as child of this object.
+		Adds *object* as child of this object. An arbitrary number of objects may be added.
 		</div>
 
-		<h3>[method:null remove]( [page:Object3D object] )</h3>
+		<h3>[method:null remove]( [page:Object3D object], ... )</h3>
 		<div>
 		object - An object.<br />
 		</div>
 		<div>
-		Removes *object* as child of this object.
+		Removes *object* as child of this object. An arbitrary number of objects may be removed.
 		</div>
 
 		<h3>[method:null traverse]( [page:Function callback] )</h3>
 		<div>
-		callback - An Function with as first argument an object3D object.<br />
+		callback - A function with as first argument an object3D object.<br />
 		</div>
 		<div>
 		Executes the callback on this object and all descendants.
 		</div>
+		
+		<h3>[method:null traverseVisible]( [page:Function callback] )</h3>
+		<div>
+		callback - A function with as first argument an object3D object.<br />
+		</div>
+		<div>
+		Like traverse, but the callback will only be executed for visible objects.
+		Descendants of invisible objects are not traversed.
+		</div>
+		
+		<h3>[method:null traverseAncestors]( [page:Function callback] )</h3>
+		<div>
+		callback - A function with as first argument an object3D object.<br />
+		</div>
+		<div>
+		Executes the callback on this object and all ancestors.
+		</div>
 
 		<h3>[method:null updateMatrix]()</h3>
 		<div>

+ 6 - 6
docs/api/extras/cameras/CombinedCamera.html → docs/api/examples/cameras/CombinedCamera.html

@@ -11,10 +11,10 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A general perpose camera, for setting FOV, Lens Focal Length,
+		<div class="desc">A general purpose camera, for setting FOV, Lens Focal Length,
  		and switching between perspective and orthographic views easily.
  		Use this only if you do not wish to manage
- 		both a Orthographic and Perspective Camera</div>
+ 		both an Orthographic and Perspective Camera</div>
 
 
 		<h2>Constructor</h2>
@@ -69,14 +69,14 @@
 		Gets or sets the zoom factor of the camera.
 		</div> 
 
-		<h3>[property:number far]</h3>
+		<h3>[property:number near]</h3>
 		<div>
-		Gets camera frustum far plane.
+		Gets camera frustum near plane.
 		</div> 
 
-		<h3>[property:number near]</h3>
+		<h3>[property:number far]</h3>
 		<div>
-		Gets camera frustum near plane.
+		Gets camera frustum far plane.
 		</div> 
 
 		<h3>[property:OrthographicCamera cameraO]</h3>

+ 1 - 1
docs/api/extras/ImageUtils.html

@@ -58,7 +58,7 @@
 		<h3>[method:todo loadTexture]([page:String url], [page:UVMapping mapping], [page:Function onLoad], [page:Function onError])</h3>
 		<div>
 		url -- the url of the texture<br />
-		mapping -- Can be an instance of [page:UVMapping THREE.UVMapping], [page:CubeReflectionMapping THREE.CubeReflectionMapping], [page:SphericalReflectionMapping THREE.SphericalReflectionMapping] or [page:SphericalRefractionMapping THREE.SphericalRefractionMapping]. Describes how the image is applied to the object.<br />Use undefined instead of null as a default value. See mapping property of [page:Texture texture] for more details.
+		mapping -- Can be an instance of [page:UVMapping THREE.UVMapping], [page:CubeReflectionMapping THREE.CubeReflectionMapping] or [page:SphericalReflectionMapping THREE.SphericalReflectionMapping]. Describes how the image is applied to the object.<br />Use undefined instead of null as a default value. See mapping property of [page:Texture texture] for more details. <br/>
 		onLoad -- callback function<br />
 		onError -- callback function
 		</div>

+ 0 - 57
docs/api/extras/cameras/CubeCamera.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<script src="../../../list.js"></script>
-		<script src="../../../page.js"></script>
-		<link type="text/css" rel="stylesheet" href="../../../page.css" />
-	</head>
-	<body>
-		[page:Object3D] &rarr;
-
-		<h1>[name]</h1>
-
-		<div class="desc">todo</div>
-
-
-		<h2>Constructor</h2>
-
-
-		<h3>[name]([page:todo near], [page:todo far], [page:todo cubeResolution])</h3>
-		<div>
-		near -- todo <br />
-		far -- todo <br />
-		cubeResolution -- todo
-		</div>
-		<div>
-		todo
-		</div>
-
-
-		<h2>Properties</h2>
-
-
-
-		<h3>[property:WebGLRenderTargetCube renderTarget]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h2>Methods</h2>
-
-
-
-		<h3>[method:todo updateCubeMap]([page:todo renderer], [page:todo scene])</h3>
-		<div>
-		renderer -- todo <br />
-		scene -- todo
-		</div>
-		<div>
-		todo
-		</div>
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>

+ 2 - 2
docs/api/lights/SpotLight.html

@@ -42,8 +42,8 @@ scene.add( spotLight );</code>
 		<div>
 		[page:Integer hex] — Numeric value of the RGB component of the color. <br />
 		[page:Float intensity] — Numeric value of the light's strength/intensity. <br />
-		distance -- todo <br />
-		angle -- todo <br />
+		distance -- Maximum distance from origin where light will shine whose intensity is attenuated linearly based on distance from origin. <br />
+		angle -- Maximum angle of light dispersion from its direction whose upper bound is Math.PI/2.  <br />
 		exponent -- todo
 		</div>
 		<div>

+ 15 - 15
docs/api/materials/LineDashedMaterial.html

@@ -34,37 +34,37 @@
 
 
 
-		<h3>[property:number scale]</h3>
-		<div>
-		The scale of the dashed part of a line.
-		</div> 
-
 		<h3>[property:Color color]</h3>
 		<div>
 		Sets the color of the line. Default is 0xffffff.
 		</div> 
 
-		<h3>[property:boolean vertexColors]</h3>
-		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
-		<div>This setting might not have any effect when used with certain renderers.</div>
+		<h3>[property:number linewidth]</h3>
+		<div>Controls line thickness. Default is 1.</div>
+		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+
+		<h3>[property:number scale]</h3>
+		<div>
+		The scale of the dashed part of a line.
+		</div> 
 
 		<h3>[property:number dashSize]</h3>
 		<div>
 		The size of the dash. This is both the gap with the stroke. Default is 3.
 		</div> 
 
-		<h3>[property:boolean fog]</h3>
-		<div>Define whether the material color is affected by global fog settings.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
-
 		<h3>[property:number gapSize]</h3>
 		<div>
 		The size of the gap. Default is 1.
 		</div> 
 
-		<h3>[property:number linewidth]</h3>
-		<div>Controls line thickness. Default is 1.</div>
-		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+		<h3>[property:boolean vertexColors]</h3>
+		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
+		<div>This setting might not have any effect when used with certain renderers.</div>
+
+		<h3>[property:boolean fog]</h3>
+		<div>Define whether the material color is affected by global fog settings.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
 
 		<h2>Methods</h2>
 

+ 5 - 4
docs/api/materials/Material.html

@@ -53,14 +53,15 @@
 		</div>
 		<div>Default is *false*.</div>
 
-		<h3>[property:Blending blending]</h3>
+		<h3>.[page:Blending blending]</h3>
 		<div>
-		Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending].
+		Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values.
+
 		</div>
 
-		<h3>[property:Integer blendSrc]</h3>
+		<h3>.[page:Integer blendSrc]</h3>
 		<div>
-		Blending source. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation SrcAlphaFactor]
+		Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.
 		</div>
 
 		<h3>[property:Integer blendDst]</h3>

+ 28 - 26
docs/api/materials/MeshBasicMaterial.html

@@ -14,6 +14,7 @@
 		<div class="desc">A material for drawing geometries in a simple shaded (flat or wireframe) way.</div>
 		<div class="desc">The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshBasicMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -23,17 +24,18 @@
 		<div>parameters is an object with one or more properties defining the material's appearance.</div>
 		<div>
 		color — geometry color in hexadecimal. Default is 0xffffff.<br />
+		map — Sets the texture map. Default is null <br />
+		lightMap — Set light map. Default is null.<br />
+		specularMap — Set specular map. Default is null.<br />
+		alphaMap — Set alpha map. Default is null.<br />
+		envMap — Set env map. Default is null.<br />
+		fog — Define whether the material color is affected by global fog settings. Default is true.<br />
+		shading — Define shading type. Default is THREE.SmoothShading.<br />
 		wireframe — render geometry as wireframe. Default is false.<br />
 		wireframeLinewidth — Line thickness. Default is 1.<br />
 		wireframeLinecap — Define appearance of line ends. Default is 'round'.<br />
 		wireframeLinejoin — Define appearance of line joints. Default is 'round'.<br />
-		shading — Define shading type. Default is THREE.SmoothShading.<br />
 		vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
-		fog — Define whether the material color is affected by global fog settings. Default is true.<br />
-		lightMap — Set light map. Default is null.<br />
-		specularMap — Set specular map. Default is null.<br />
-		alphaMap — Set alpha map. Default is null.<br />
-		envMap — Set env map. Default is null.<br />
 		skinning — Define whether the material uses skinning. Default is false.<br />
 		morphTargets — Define whether the material uses morphTargets. Default is false.
 		</div>
@@ -43,6 +45,26 @@
 		<h3>[property:Integer color]</h3>
 		<div>Sets the color of the geometry. Default is 0xffffff.</div>
 		
+		<h3>[property:Texture lightMap]</h3>
+		<div>Set light map. Default is null.</div>
+
+		<h3>[property:Texture specularMap]</h3>
+		<div>Set specular map. Default is null.</div>
+
+		<h3>[property:Texture alphaMap]</h3>
+		<div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
+		<div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
+
+		<h3>[property:TextureCube envMap]</h3>
+		<div>Set env map. Default is null.</div>
+
+		<h3>[property:Boolean fog]</h3>
+		<div>Define whether the material color is affected by global fog settings.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+
+		<h3>[property:String shading]</h3>
+		<div>Define shading type. Default is THREE.SmoothShading.</div>
+
 		<h3>[property:Boolean wireframe]</h3>
 		<div>Render geometry as wireframe. Default is false (i.e. render as flat polygons).</div>
 
@@ -58,30 +80,10 @@
 		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
 		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
 		
-		<h3>[property:String shading]</h3>
-		<div>Define shading type. Default is THREE.SmoothShading.</div>
-
 		<h3>[property:Integer vertexColors]</h3>
 		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
 		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
 
-		<h3>[property:Boolean fog]</h3>
-		<div>Define whether the material color is affected by global fog settings.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
-
-		<h3>[property:Texture lightMap]</h3>
-		<div>Set light map. Default is null.</div>
-
-		<h3>[property:Texture specularMap]</h3>
-		<div>Set specular map. Default is null.</div>
-
-		<h3>[property:Texture alphaMap]</h3>
-		<div>The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null.</div>
-		<div>Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.</div>
-
-		<h3>[property:TextureCube envMap]</h3>
-		<div>Set env map. Default is null.</div>
-
 		<h3>[property:Boolean skinning]</h3>
 		<div>Define whether the material uses skinning. Default is false.</div>
 	

+ 6 - 0
docs/api/materials/MeshDepthMaterial.html

@@ -12,6 +12,8 @@
 		<h1>[name]</h1>
 
 		<div class="desc">A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.</div>
+		
+		<iframe src='../../scenes/material-browser.html#MeshDepthMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -21,6 +23,7 @@
 		parameters is an object with one or more properties defining the material's appearance. 
 		</div>
 		<div>
+		morphTargets -- Define whether the material uses morphTargets. Default is false.<br/>
 		wireframe -- Render geometry as wireframe. Default is false (i.e. render as smooth shaded).<br/>
 		wireframeLinewidth -- Controls wireframe thickness. Default is 1.<br/>
 		</div>
@@ -29,6 +32,9 @@
 		<h2>Properties</h2>
 
 
+		<h3>[property:boolean morphTargets]</h3>
+		<div>Define whether the material uses morphTargets. Default is false.</div> 
+
 		<h3>[property:boolean wireframe]</h3>
 		<div>Render geometry as wireframe. Default is false (i.e. render as smooth shaded).</div> 
 		

+ 1 - 1
docs/api/materials/MeshFaceMaterial.html

@@ -10,7 +10,7 @@
 		<h1>[name]</h1>
 
 		<div class="desc">
-		A Material to define multiple materials for the same geometry.
+		A Material to define multiple materials for the same geometry. 
 		The geometry decides which material is used for which faces by the [page:Face3 faces materialindex].
 		The materialindex corresponds with the index of the material in the materials array.
 		</div>

+ 67 - 44
docs/api/materials/MeshLambertMaterial.html

@@ -12,7 +12,8 @@
 		<h1>[name]</h1>
 
 		<div class="desc">A material for non-shiny (Lambertian) surfaces, evaluated per vertex.</div>
-
+		
+		<iframe src='../../scenes/material-browser.html#MeshLambertMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -21,6 +22,23 @@
 		<div>
 		parameters -- parameters is an object with one or more properties defining the material's appearance.
 		</div>
+		<div>
+		color — Line color in hexadecimal. Default is 0xffffff.<br />
+		map — Sets the texture map. Default is null <br />
+		lightMap — Set light map. Default is null.<br />
+		specularMap — Set specular map. Default is null.<br />
+		alphaMap — Set alpha map. Default is null.<br />
+		envMap — Set env map. Default is null.<br />
+		fog — Define whether the material color is affected by global fog settings. Default is false.
+		shading — How the triangles of a curved surface are rendered. Default is [page:Materials THREE.SmoothShading].<br/>
+		wireframe — Render geometry as wireframe. Default is false (i.e. render as smooth shaded).<br/>
+		wireframeLinewidth — Controls wireframe thickness. Default is 1.<br/>
+		wireframeLinecap — Define appearance of line ends. Default is 'round'.<br />
+		wireframeLinejoin — Define appearance of line joints. Default is 'round'.<br />
+		vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
+		skinning — Define whether the material uses skinning. Default is false.<br />
+		morphTargets — Define whether the material uses morphTargets. Default is false.<br/>
+		</div>
 
 
 		<h2>Properties</h2>
@@ -40,34 +58,20 @@
 		<div>
 		Emissive (light) color of the material, essentially a solid color unaffected by other lighting. Default is black.<br />
 		</div>
-
-		<h3>[property:Integer shading]</h3>
-		<div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
-
-		<div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading], [page:Materials THREE.NoShading].</div>
 		
-		<h3>[property:Boolean wireframe]</h3>
-		<div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
-		
-		<h3>[property:Float wireframeLinewidth]</h3>
-		<div>Line thickness for wireframe mode. Default is *1.0*.</div>
-		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
-
-		<h3>[property:String wireframeLinecap]</h3>
-		<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
-
-		<h3>[property:String wireframeLinejoin]</h3>
-		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
-
-		<h3>[property:Integer vertexColors]</h3>
-		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+		<h3>[property:boolean wrapAround]</h3>
+		<div>
+			Define whether the diffuse lighting wraps around the model or not. This option adds a little more (tintable) light
+			onto the side of the object in relation to a light.
+		</div>
 
-		<h3>[property:Boolean fog]</h3>
-		<div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+		<h3>[property:Vector3 wrapRGB]</h3>
+		<div>
+			Decide how much of the wrap around values get used if the wrapAround option is set. The x, y, z values correspond
+			to the r, g, b values respectively. The typical range is of each is from 0 to 1. For example setting all of the
+			vector values to 0.5 will add a moderate amount of light to the side of the model. Changing *b* to 1 will
+			tint the light on the side to be more blue. Defaults to *(1,1,1)*.
+		</div> 
 
 		<h3>[property:Texture map]</h3>
 		<div>Set color texture map. Default is null.</div>
@@ -85,38 +89,57 @@
 		<h3>[property:TextureCube envMap]</h3>
 		<div>Set env map. Default is null.</div>
 
+		<h3>[property:Integer combine]</h3>
+		<div>How to combine the result of the surface's color with the environment map, if any.</div> 
+		 
+		<div>Options are [page:Textures THREE.Multiply] (default), [page:Textures THREE.MixOperation], [page:Textures THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
+		 
 		<h3>[property:Float reflectivity]</h3>
 		<div>How much the environment map affects the surface; also see "combine".</div> 
 
 		<h3>[property:Float refractionRatio]</h3>
 		<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
 
-		<h3>[property:Integer combine]</h3>
-		<div>How to combine the result of the surface's color with the environment map, if any.</div> 
-		 
-		<div>Options are [page:Textures THREE.Multiply] (default), [page:Textures THREE.MixOperation], [page:Textures THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
-		 
+		<h3>[property:Boolean fog]</h3>
+		<div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+
+		<h3>[property:Integer shading]</h3>
+		<div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
+
+		<div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading], [page:Materials THREE.NoShading].</div>
+		
+		<h3>[property:Boolean wireframe]</h3>
+		<div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
+		
+		<h3>[property:Float wireframeLinewidth]</h3>
+		<div>Line thickness for wireframe mode. Default is *1.0*.</div>
+		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+
+		<h3>[property:String wireframeLinecap]</h3>
+		<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+
+		<h3>[property:String wireframeLinejoin]</h3>
+		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+
+		<h3>[property:Integer vertexColors]</h3>
+		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+
 		<h3>[property:Boolean skinning]</h3>
 		<div>Define whether the material uses skinning. Default is *false*.</div>
 	
 		<h3>[property:Boolean morphTargets]</h3>
 		<div>Define whether the material uses morphTargets. Default is *false*.</div>	
 
-
-		<h3>[property:Vector3 wrapRGB]</h3>
-		<div>
-		todo
-		</div> 
-
 		<h3>[property:boolean morphNormals]</h3>
 		<div>
-		todo
-		</div> 
+			Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
+			to the shader. Default is *false*.
+		</div>
 
-		<h3>[property:boolean wrapAround]</h3>
-		<div>
-		todo
-		</div> 
 
 		<h2>Methods</h2>
 

+ 8 - 8
docs/api/materials/MeshNormalMaterial.html

@@ -12,6 +12,8 @@
 		<h1>[name]</h1>
 
 		<div class="desc">A material that maps the normal vectors to RGB colors.</div>
+		
+		<iframe src='../../scenes/material-browser.html#MeshNormalMaterial'></iframe>
 
 
 		<h2>Constructor</h2>
@@ -22,26 +24,21 @@
 		parameters is an object with one or more properties defining the material's appearance. 
 		</div>
 		<div>
-		morphTargets -- Define whether the material uses morphTargets. Default is false.<br/>
-		shading --  How the triangles of a curved surface are rendered. Default is [page:Materials THREE.SmoothShading].<br/>
+		shading --  How the triangles of a curved surface are rendered. Default is [page:Materials THREE.FlatShading].<br/>
 		wireframe -- Render geometry as wireframe. Default is false (i.e. render as smooth shaded).<br/>
 		wireframeLinewidth -- Controls wireframe thickness. Default is 1.<br/>
+		morphTargets -- Define whether the material uses morphTargets. Default is false.<br/>
 		</div>
 
 
 		<h2>Properties</h2>
 
 
-
-		<h3>[property:boolean morphTargets]</h3>
-		<div>Define whether the material uses morphTargets. Default is false.</div> 
-
 		<h3>[property:number shading]</h3>
 		<div>
 			How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.<br/><br/>
-			Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading]
+			Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading](default)
 		</div>
-		
 
 		<h3>[property:boolean wireframe]</h3>
 		<div>
@@ -54,6 +51,9 @@
 			Due to limitations in the ANGLE layer, on Windows platforms linewidth will always be 1 regardless of the set value.
 		</div> 
 
+		<h3>[property:boolean morphTargets]</h3>
+		<div>Define whether the material uses morphTargets. Default is false.</div> 
+
 		<h2>Methods</h2>
 
 

+ 95 - 68
docs/api/materials/MeshPhongMaterial.html

@@ -13,6 +13,7 @@
 
 		<div class="desc">A material for shiny surfaces, evaluated per pixel.</div>
 
+		<iframe src='../../scenes/material-browser.html#MeshPhongMaterial'></iframe>
 
 		<h2>Constructor</h2>
 
@@ -22,6 +23,23 @@
 		parameters -- an object with one or more of the material's properties defining the its appearance.
 		</div>
 		<div>
+		color — geometry color in hexadecimal. Default is 0xffffff.<br />
+		map — Sets the texture map. Default is null <br />
+		lightMap — Set light map. Default is null.<br />
+		specularMap — Set specular map. Default is null.<br />
+		alphaMap — Set alpha map. Default is null.<br />
+		envMap — Set env map. Default is null.<br />
+		fog — Define whether the material color is affected by global fog settings. Default is true.<br />
+		shading — Define shading type. Default is THREE.SmoothShading.<br />
+		wireframe — render geometry as wireframe. Default is false.<br />
+		wireframeLinewidth — Line thickness. Default is 1.<br />
+		wireframeLinecap — Define appearance of line ends. Default is 'round'.<br />
+		wireframeLinejoin — Define appearance of line joints. Default is 'round'.<br />
+		vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
+		skinning — Define whether the material uses skinning. Default is false.<br />
+		morphTargets — Define whether the material uses morphTargets. Default is false.
+		</div>
+		<div>
 		Example:<br>
 		materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
 	
@@ -54,33 +72,26 @@
 		<h3>[property:Float shininess]</h3>
 		<div>How shiny the specular highlight is; a higher value gives a sharper highlight. Default is *30*.</div>
 
-		<h3>[property:Integer shading]</h3>
-		<div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
-
-		<div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading], [page:Materials THREE.NoShading].</div>
-		
-		<h3>[property:Boolean wireframe]</h3>
-		<div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
-		
-		<h3>[property:Float wireframeLinewidth]</h3>
-		<div>Line thickness for wireframe mode. Default is *1.0*.</div>
-		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
-
-		<h3>[property:String wireframeLinecap]</h3>
-		<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
-
-		<h3>[property:String wireframeLinejoin]</h3>
-		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
+		<h3>[property:boolean metal]</h3>
+		<div>
+			If set to true the shader multiplies the specular highlight by the underlying color of the object, making
+			it appear to be more metal-like and darker. If set to false the specular highlight is added ontop of the
+			underlying colors.
+		</div> 
 
-		<h3>[property:Integer vertexColors]</h3>
-		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+		<h3>[property:boolean wrapAround]</h3>
+		<div>
+			Define whether the diffuse lighting wraps around the model or not. This option adds a little more (tintable) light
+			onto the side of the object in relation to a light.
+		</div>
 
-		<h3>[property:Boolean fog]</h3>
-		<div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
-		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+		<h3>[property:Vector3 wrapRGB]</h3>
+		<div>
+			Decide how much of the wrap around values get used if the wrapAround option is set. The x, y, z values correspond
+			to the r, g, b values respectively. The typical range is of each is from 0 to 1. For example setting all of the
+			vector values to 0.5 will add a moderate amount of light to the side of the model. Changing *b* to 1 will
+			tint the light on the side to be more blue. Defaults to (1,1,1).
+		</div>
 
 		<h3>[property:Texture map]</h3>
 		<div>Set color texture map. Default is null.</div>
@@ -88,6 +99,29 @@
 		<h3>[property:Texture lightMap]</h3>
 		<div>Set light map. Default is null.</div>
 
+		<h3>[property:Texture bumpMap]</h3>
+		<div>
+			The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights.
+			Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will
+			be ignored.
+		</div>
+		
+		<h3>[property:Float bumpScale]</h3>
+		<div>
+			How much the bump map affects the material. Typical ranges are 0-1. Default is 1.
+		</div>
+
+		<h3>[property:Texture normalMap]</h3>
+		<div>
+			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
+			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+		</div>
+		
+		<h3>[property:Vector2 normalScale]</h3>
+		<div>
+			How much the normal map affects the material. Typical ranges are 0-1. Default is (1,1).
+		</div> 
+
 		<h3>[property:Texture specularMap]</h3>
 		<div>The specular map value affects both how much the specular surface highlight contributes and how much of the environment map affects the surface. Default is null.</div>
 
@@ -97,64 +131,57 @@
 
 		<h3>[property:TextureCube envMap]</h3>
 		<div>Set env map. Default is null.</div>
-
-		<h3>[property:Float reflectivity]</h3>
-		<div>How much the environment map affects the surface; also see "combine".</div> 
-
-		<h3>[property:Float refractionRatio]</h3>
-		<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
-
+		
 		<h3>[property:Integer combine]</h3>
 		<div>How to combine the result of the surface's color with the environment map, if any.</div> 
 		 
 		<div>Options are [page:Textures THREE.MultiplyOperation] (default), [page:Textures THREE.MixOperation], [page:Textures THREE.AddOperation]. If mix is chosen, the reflectivity is used to blend between the two colors.</div>
 		 
-		<h3>[property:Boolean skinning]</h3>
-		<div>Define whether the material uses skinning. Default is *false*.</div>
-	
-		<h3>[property:Boolean morphTargets]</h3>
-		<div>Define whether the material uses morphTargets. Default is *false*.</div>	
+		<h3>[property:Float reflectivity]</h3>
+		<div>How much the environment map affects the surface; also see "combine".</div> 
 
+		<h3>[property:Float refractionRatio]</h3>
+		<div>The index of refraction for an environment map using [page:Textures THREE.CubeRefractionMapping]. Default is *0.98*.</div>
 
-		<h3>[property:Vector2 normalScale]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:Boolean fog]</h3>
+		<div>Define whether the material color is affected by global fog settings. Default is *true*.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
 
-		<h3>[property:boolean morphNormals]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:Integer shading]</h3>
+		<div>How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.</div>
 
-		<h3>[property:boolean metal]</h3>
-		<div>
-		todo
-		</div> 
+		<div>Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading], [page:Materials THREE.NoShading].</div>
+		
+		<h3>[property:Boolean wireframe]</h3>
+		<div>Whether the triangles' edges are displayed instead of surfaces. Default is *false*.</div>
+		
+		<h3>[property:Float wireframeLinewidth]</h3>
+		<div>Line thickness for wireframe mode. Default is *1.0*.</div>
+		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
 
-		<h3>[property:number bumpScale]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:String wireframeLinecap]</h3>
+		<div>Define appearance of line ends. Possible values are "butt", "round" and "square". Default is 'round'.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
 
-		<h3>[property:boolean wrapAround]</h3>
-		<div>
-		todo
-		</div>
+		<h3>[property:String wireframeLinejoin]</h3>
+		<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
 
-		<h3>[property:object normalMap]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:Integer vertexColors]</h3>
+		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
 
-		<h3>[property:object bumpMap]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:Boolean skinning]</h3>
+		<div>Define whether the material uses skinning. Default is *false*.</div>
+	
+		<h3>[property:Boolean morphTargets]</h3>
+		<div>Define whether the material uses morphTargets. Default is *false*.</div>	
 
-		<h3>[property:Vector3 wrapRGB]</h3>
+		<h3>[property:boolean morphNormals]</h3>
 		<div>
-		todo
-		</div> 
+			Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
+			to the shader. Default is *false*.
+		</div>
 
 		<h2>Methods</h2>
 

+ 3 - 1
docs/api/materials/PointCloudMaterial.html

@@ -48,7 +48,9 @@
 		<div>Specify whether particles' size will get smaller with the distance. Default is true.</div>
 
 		<h3>[property:Boolean vertexColors]</h3>
-
+		<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
+		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
+		
 		<h3>[property:Boolean fog]</h3>
 		<div>Define whether the material color is affected by global fog settings.</div>
 		<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>

+ 35 - 28
docs/api/materials/ShaderMaterial.html

@@ -210,7 +210,15 @@
 		<div>
 		parameters -- An object containing various parameters setting up shaders and their uniforms.
 		</div>
-
+		<div>
+		shading — Define shading type. Default is THREE.SmoothShading.<br />
+		fog — Define whether the material color is affected by global fog settings. Default is true.<br />
+		wireframe — render geometry as wireframe. Default is false.<br />
+		wireframeLinewidth — Line thickness. Default is 1.<br />
+		vertexColors — Define how the vertices gets colored. Default is THREE.NoColors.<br />
+		skinning — Define whether the material uses skinning. Default is false.<br />
+		morphTargets — Define whether the material uses morphTargets. Default is false.
+		</div>
 
 		<h2>Properties</h2>
 
@@ -254,37 +262,42 @@
 		in the GLSL code.
 		</div>
 
-		<h3>[property:String fragmentShader]</h3>
-		<div>
-		Fragment shader GLSL code.  This is the actual code for the shader. In the example above, the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed as a string directly or loaded via AJAX instead.
-		</div>
-
 		<h3>[property:String vertexShader]</h3>
 		<div>
 		Vertex shader GLSL code.  This is the actual code for the shader. In the example above, the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed as a string directly or loaded via AJAX instead.
 		</div>
 
-
-		<h3>[property:Boolean lights]</h3>
+		<h3>[property:String fragmentShader]</h3>
 		<div>
-		Defines whether this material uses lighting; true to pass uniform data related to lighting to this shader
+		Fragment shader GLSL code.  This is the actual code for the shader. In the example above, the *vertexShader* and *fragmentShader* code is extracted from the DOM; it could be passed as a string directly or loaded via AJAX instead.
 		</div>
 
-		<h3>[property:Boolean morphTargets]</h3>
+		<h3>[property:Number shading]</h3>
 		<div>
-		Defines whether the material uses morphTargets; true morphTarget attributes to this shader
+		Define shading type, which determines whether normals are smoothed between vertices; possible values are [page:Materials THREE.SmoothShading] or [page:Materials THREE.FlatShading]. Default is THREE.SmoothShading.
 		</div>
 
-		<h3>[property:Boolean morphNormals]</h3>
-		<div>
-		Defines whether the material uses morphNormals; true to pass morphNormal attributes to this shader
-		</div>
+		<h3>[property:Number linewidth]</h3>
+		<div>Controls line thickness; only effective if the material is attached to a [page:Line]. Default is 1.</div>
+		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
 
 		<h3>[property:Boolean wireframe]</h3>
 		<div>
 		Render geometry as wireframe (using GL_LINES instead of GL_TRIANGLES). Default is false (i.e. render as flat polygons).
 		</div>
 
+		<h3>[property:Number wireframeLinewidth]</h3>
+		<div>Controls wireframe thickness; only effective if the material is attached to a [page:Mesh] and *wireframe* is true. Default is 1.</div>
+		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+
+		<h3>[property:Boolean fog]</h3>
+		<div>Define whether the material color is affected by global fog settings; true to pass fog uniforms to the shader. Default is false.</div>
+
+		<h3>[property:Boolean lights]</h3>
+		<div>
+		Defines whether this material uses lighting; true to pass uniform data related to lighting to this shader
+		</div>
+
 		<h3>[property:Number vertexColors]</h3>
 		<div>
 		Define how the vertices are colored, by defining how the *colors* attribute gets populated. Possible values are [page:Materials THREE.NoColors], [page:Materials THREE.FaceColors] and [page:Materials THREE.VertexColors]. Default is THREE.NoColors.
@@ -295,22 +308,16 @@
 		Define whether the material uses skinning; true to pass skinning attributes to the shader. Default is false.
 		</div>
 
-		<h3>[property:Boolean fog]</h3>
-		<div>Define whether the material color is affected by global fog settings; true to pass fog uniforms to the shader. Default is false.</div>
-
-
-		<h3>[property:Number shading]</h3>
+		<h3>[property:Boolean morphTargets]</h3>
 		<div>
-		Define shading type, which determines whether normals are smoothed between vertices; possible values are [page:Materials THREE.SmoothShading] or [page:Materials THREE.FlatShading]. Default is THREE.SmoothShading.
+		Defines whether the material uses morphTargets; true morphTarget attributes to this shader
 		</div>
 
-		<h3>[property:Number linewidth]</h3>
-		<div>Controls line thickness; only effective if the material is attached to a [page:Line]. Default is 1.</div>
-		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
-
-		<h3>[property:Number wireframeLinewidth]</h3>
-		<div>Controls wireframe thickness; only effective if the material is attached to a [page:Mesh] and *wireframe* is true. Default is 1.</div>
-		<div>Due to limitations in the <a href="https://code.google.com/p/angleproject/" target="_blank">ANGLE layer</a>, on Windows platforms linewidth will always be 1 regardless of the set value.</div>
+		<h3>[property:boolean morphNormals]</h3>
+		<div>
+			Defines whether the material uses morphNormals. Set as true to pass morphNormal attributes from the [page:Geometry]
+			to the shader. Default is *false*.
+		</div>
 
 		<h3>[property:WebGLProgram program]</h3>
 		<div>

+ 11 - 10
docs/api/materials/SpriteCanvasMaterial.html

@@ -11,18 +11,19 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">todo</div>
+		<div class="desc">Create a material that can draw custom sprites using a 2d canvas.</div>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:todo parameters])</h3>
+		<h3>[name]( [page:Object parameters] )</h3>
 		<div>
-		parameters -- todo
+		parameters is an object that can be used to set up the default properties
 		</div>
 		<div>
-		todo
+		color - the color of the sprite<br/>
+		program - the program used to draw the sprite
 		</div>
 
 
@@ -32,20 +33,20 @@
 
 		<h3>[property:Color color]</h3>
 		<div>
-		todo
-		</div> 
+		The color of the sprite. The material will set up the color for the context before calling the material's program.
+		</div>
 
 		<h2>Methods</h2>
 
 
 
-		<h3>[method:todo program]([page:todo context], [page:todo color])</h3>
+		<h3>[method:null program]([page:CanvasRenderingContext2D context], [page:Color color])</h3>
 		<div>
-		context -- todo <br />
-		color -- todo
+		context -- The canvas context <br />
+		color -- The color of the sprite
 		</div>
 		<div>
-		todo
+			Define a program that will use the context to draw the sprite.
 		</div>
 
 		<h2>Source</h2>

+ 13 - 45
docs/api/materials/SpriteMaterial.html

@@ -11,70 +11,38 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">todo</div>
+		<div class="desc">A material for a [page:Sprite].</div>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:todo parameters])</h3>
+		<h3>[name]( [page:Object parameters] )</h3>
 		<div>
-		parameters -- todo
+		parameters -- an object defining the the default properties
 		</div>
 		<div>
-		todo
+		color - color of the sprite<br/>
+		map - the texture map<br/>
+		rotation - the rotation of the sprite
+		fog - whether or not to use the scene fog<br/>
 		</div>
 
 
 		<h2>Properties</h2>
 
 
+		<h3>[property:Color color]</h3>
+		<div>The texture is multiplied by this color. The default is 0xffffff</div> 
 
 		<h3>[property:Texture map]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:Vector2 uvScale]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:boolean sizeAttenuation]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:Color color]</h3>
-		<div>
-		todo
-		</div> 
+		<div>The texture map. Default is null.</div> 
 
-		<h3>[property:Vector2 uvOffset]</h3>
-		<div>
-		todo
-		</div> 
+		<h3>[property:Radians rotation]</h3>
+		<div>The rotation of the sprite in radians. Default is 0.</div>
 
 		<h3>[property:boolean fog]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:boolean useScreenCoordinates]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:boolean scaleByViewport]</h3>
-		<div>
-		todo
-		</div> 
-
-		<h3>[property:Vector2 alignment]</h3>
-		<div>
-		todo
-		</div> 
-
+		<div>Whether or not this material affected by the scene's fog. Default is false</div>
 
 		<h2>Source</h2>
 

+ 4 - 4
docs/api/math/Box2.html

@@ -29,14 +29,14 @@
 
 
 
-		<h3>[property:Vector2 max]</h3>
+		<h3>[property:Vector2 min]</h3>
 		<div>
-		Upper (x, y) boundary of this box.
+		Lower (x, y) boundary of this box.
 		</div> 
 
-		<h3>[property:Vector2 min]</h3>
+		<h3>[property:Vector2 max]</h3>
 		<div>
-		Lower (x, y) boundary of this box.
+		Upper (x, y) boundary of this box.
 		</div> 
 
 		<h2>Methods</h2>

+ 5 - 5
docs/api/math/Box3.html

@@ -28,16 +28,16 @@
 
 
 
-		<h3>[property:Vector3 max]</h3>
-		<div>
-		Upper (x, y, z) boundary of this box.
-		</div> 
-
 		<h3>[property:Vector3 min]</h3>
 		<div>
 		Lower (x, y, z) boundary of this box.
 		</div>
 
+		<h3>[property:Vector3 max]</h3>
+		<div>
+		Upper (x, y, z) boundary of this box.
+		</div> 
+
 		<h2>Methods</h2>
 
 

+ 14 - 0
docs/api/math/Euler.html

@@ -91,6 +91,20 @@
     WARNING: this discards revolution information.
     </div>
 
+    <h3>[method:Euler setFromVector3]([page:Vector3 vector], [page:String order]) [page:Euler this]</h3>
+    <div>
+    vector -- [page:Vector3].
+    order -- [page:string] Order of axes, defaults to 'XYZ' (must be upper case)
+    </div>
+    <div>
+    Optionally Vector3 to the XYZ parameters of Euler, and order to the Euler's order property.
+    </div>
+
+    <h3>[method:Vector3 toVector3]()</h3>
+    <div>
+    Returns the Euler's XYZ properties as a Vector3.
+    </div>
+
     <h3>[method:Euler fromArray]([page:Array array]) [page:Euler this]</h3>
     <div>
     array -- [page:Array] of length 3 or 4. array[3] is an optional order argument.

+ 10 - 0
docs/api/math/Matrix4.html

@@ -71,6 +71,16 @@
 		Copies the translation component of the supplied matrix *m* into this matrix translation component.
 		</div>
 
+		<h3>[method:Matrix4 makeBasis]( [page:Vector3 xAxis], [page:Vector3 zAxis], [page:Vector3 zAxis] ) [page:Matrix4 this]</h3>
+		<div>
+		Creates the basis matrix consisting of the three provided axis vectors.  Returns the current matrix.
+		</div>
+
+		<h3>[method:Matrix4 extractBasis]( [page:Vector3 xAxis], [page:Vector3 zAxis], [page:Vector3 zAxis] ) [page:Matrix4 this]</h3>
+		<div>
+		Extracts basis of into the three axis vectors provided.  Returns the current matrix.
+		</div>
+
 		<h3>[method:Matrix4 extractRotation]( [page:Matrix4 m] ) [page:Matrix4 this]</h3>
 		<div>
 		Extracts the rotation of the supplied matrix *m* into this matrix rotation component.

+ 2 - 2
docs/api/math/Triangle.html

@@ -35,12 +35,12 @@
 		The first [page:Vector3] of the triangle.
 		</div>
 		
-		<h3>[property:Vector3 c]</h3>
+		<h3>[property:Vector3 b]</h3>
 		<div>
 		The second [page:Vector3] of the triangle.
 		</div>
 
-		<h3>[property:Vector3 b]</h3>
+		<h3>[property:Vector3 c]</h3>
 		<div>
 		The third [page:Vector3] of the triangle.
 		</div>

+ 3 - 5
docs/api/objects/PointCloud.html

@@ -16,7 +16,6 @@
 
 		<h2>Constructor</h2>
 
-
 		<h3>[name]( [page:Geometry geometry], [page:Material material] )</h3>
 
 		<div>
@@ -24,6 +23,7 @@
 		material — An instance of [page:Material] (optional).
 		</div>
 
+
 		<h2>Properties</h2>
 
 		<h3>[property:Geometry geometry]</h3>
@@ -34,10 +34,6 @@
 
 		<div>An instance of [page:Material], defining the object's appearance. Default is a [page:PointCloudMaterial] with randomised colour.</div>
 
-		<h3>[property:boolean sortParticles]</h3>
-		<div>
-		When set, then the particles should be depth sorted (from far to near), based on camera, in the renderer every frame.
-		</div>
 
 		<h2>Methods</h2>
 
@@ -46,8 +42,10 @@
 		This creates a clone of the particle system.
 		</div>
 
+
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+
 	</body>
 </html>

+ 81 - 82
docs/api/renderers/CanvasRenderer.html

@@ -9,35 +9,36 @@
 	<body>
 		<h1>[name]</h1>
 
-		<div class="desc">The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL,
-                  but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.</div>
-		<div class="desc">This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:</div>
-		<code>
-		function webglAvailable() {
-			try {
-				var canvas = document.createElement( 'canvas' );
-				return !!( window.WebGLRenderingContext && (
-					canvas.getContext( 'webgl' ) ||
-					canvas.getContext( 'experimental-webgl' ) )
-				);
-			} catch ( e ) {
-				return false;
-			}
-		}
-
-		if ( webglAvailable() ) {
-			renderer = new THREE.WebGLRenderer();
-		} else {
-			renderer = new THREE.CanvasRenderer();
-		}
-		</code>
 		<div class="desc">
+			The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL, but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.<br /><br />
+			This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
+
+			<code>
+			function webglAvailable() {
+				try {
+					var canvas = document.createElement( 'canvas' );
+					return !!( window.WebGLRenderingContext && (
+						canvas.getContext( 'webgl' ) ||
+						canvas.getContext( 'experimental-webgl' ) )
+					);
+				} catch ( e ) {
+					return false;
+				}
+			}
+
+			if ( webglAvailable() ) {
+				renderer = new THREE.WebGLRenderer();
+			} else {
+				renderer = new THREE.CanvasRenderer();
+			}
+			</code>
+
 			Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 &lt;canvas&gt; tag.
-			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br />
+			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
+
 			Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
 		</div>
 
-
 		<h2>Constructor</h2>
 
 
@@ -45,114 +46,112 @@
         <div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
 
 		<div>
-		canvas — A [page:Canvas] where the renderer draws its output.<br />
-		devicePixelRatio — The device its pixelRatio.<br />
+		canvas — A [page:Canvas] where the renderer draws its output.
 		</div>
 
 
 		<h2>Properties</h2>
 
+    <h3>[property:Object info]</h3>
 
-        <h3>[property:Object info]</h3>
-
-		<div>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
 		<div>
-		<ul>
-			<li>render:
-				<ul>
-					<li>vertices</li>
-					<li>faces</li>
-				</ul>
-			</li>
-		</ul>
+			An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
+			<ul>
+				<li>render:
+					<ul>
+						<li>vertices</li>
+						<li>faces</li>
+					</ul>
+				</li>
+			</ul>
 		</div>
 
-        <h3>[property:DOMElement domElement]</h3>
-
-		<div>A [page:Canvas] where the renderer draws its output.<br />
-		This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.</div>
+    <h3>[property:DOMElement domElement]</h3>
 
-		<h3>[property:number devicePixelRatio]</h3>
 		<div>
-		The pixel ration of the devices.
-		</div> 
+			A [page:Canvas] where the renderer draws its output.<br />
+			This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
+		</div>
 
 		<h3>[property:Boolean autoClear]</h3>
 		<div>
-        Defines whether the renderer should automatically clear its output before rendering.
-        </div>
+      Defines whether the renderer should automatically clear its output before rendering.
+    </div>
 
 		<h3>[property:Boolean sortObjects]</h3>
 		<div>
-        Defines whether the renderer should sort objects. Default is true.
-        </div>
-		<div>
-        Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
-        </div>
+      Defines whether the renderer should sort objects. Default is true.<br />
+      Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
+    </div>
 
 		<h3>[property:boolean sortElements]</h3>
 		<div>
-		Defines whether the renderer should sort the face of each object. Default is true.
-		</div> 
-
-		<h2>Methods</h2>
+			Defines whether the renderer should sort the face of each object. Default is true.
+		</div>
 
 
-		<h3>[method:number getMaxAnisotropy]()</h3>
-		<div>
-		This returns the anisotropy level of the textures.
-		</div>
+		<h2>Methods</h2>
 
-		<h3>[method:todo render]( [page:Scene scene], [page:Camera camera])</h3>
+		<h3>[method:null render]([page:Scene scene], [page:Camera camera])</h3>
 		<div>
-		scene -- The scene to render. <br />
-		camera -- the camera to view the scene.
+			scene -- The scene to render. <br />
+			camera -- the camera to view the scene.
 		</div>
 		<div>
         Render a scene using a camera.
 		</div>
 
-		<h3>[method:todo clear]()</h3>
+		<h3>[method:null clear]()</h3>
 		<div>
-		Tells the renderer to clear its color drawing buffer with the clearcolor.
+			Tells the renderer to clear its color drawing buffer with the clearcolor.
 		</div>
 
-		<h3>[method:todo setClearColor]([page:Color color], [page:number alpha])</h3>
+		<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
 		<div>
-		color -- The color to clear the canvas with. <br />
-		alpha -- The alpha channel to clear the canvas with.
+			color -- The color to clear the canvas with. <br />
+			alpha -- The alpha channel to clear the canvas with.
 		</div>
 		<div>
-		This set the clearColor and the clearAlpha.
+			This set the clearColor and the clearAlpha.
 		</div>
 
-		<h3>[method:todo setFaceCulling]()</h3>
+
+		<h3>[method:null setSize]([page:Number width], [page:Number height])</h3>
 		<div>
-		Empty function to keep compability with [page:WebglRenderer].
+			width -- The width of the drawing canvas. <br />
+			height -- The height of the drawing canvas.
 		</div>
-
-		<h3>[method:todo supportsVertexTextures]()</h3>
 		<div>
-		Empty function to keep compability with [page:WebglRenderer].
+			This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
 		</div>
 
-		<h3>[method:todo setSize]([page:Number width], [page:Number height], [page:boolean updateStyle])</h3>
+		<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
 		<div>
-		width -- The width of the drawing canvas. <br />
-		height -- The height of the drawing canvas. <br />
-		updateStyle -- If set, update the css of the canvas too.
+			hex -- The the hexadecimal value of the color to clear the canvas with. <br />
+	    alpha -- The alpha channel to clear the canvas with.
 		</div>
 		<div>
-		This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
+			This set the clearColor and the clearAlpha.
 		</div>
 
-		<h3>[method:todo setClearColorHex]([page:number hex], [page:number alpha])</h3>
+		<h3>[method:number getClearColorHex]()</h3>
 		<div>
-		hex -- The the hexadecimal value of the color to clear the canvas with. <br />
-        alpha -- The alpha channel to clear the canvas with.
+			Returns the [page:number hex] color.
 		</div>
+
+		<h3>[method:number getClearAlpha]()</h3>
+		<div>
+			Returns the alpha value.
+		</div>
+
+		<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
 		<div>
-		This set the clearColor and the clearAlpha.
+			[method:null clearColor]()<br/>
+			[method:null clearDepth]()<br/>
+			[method:null clearStencil]()<br/>
+			[method:null setFaceCulling]()<br/>
+			[method:null supportsVertexTextures]()<br/>
+			[method:number getMaxAnisotropy]() - returns 1 <br/>
 		</div>
 
 		<h2>Source</h2>

+ 84 - 1
docs/api/renderers/WebGLRenderTarget.html

@@ -19,7 +19,7 @@
 		<div>
 		width -- The width of the renderTarget. <br />
 		height -- The height of the renderTarget. <br />
-		options -- The options of the renderTarget. They are alot like the options of a texture.
+		options -- The options sets the properties of the render target.
 		</div>
 		<div>
 		Creates a new renderTarget with a certain width and height.
@@ -27,9 +27,92 @@
 
 		<h2>Properties</h2>
 
+		<h3>[property:number wrapS]</h3>
+		<div>
+		The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
+		</div>
 
+		<h3>[property:number wrapT]</h3>
+		<div>
+		The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
+		</div>
+		
+		<h3>[property:number magFilter]</h3>
+		<div>
+		How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.
+		</div>
 
+		<h3>[property:number minFilter]</h3>
+		<div>
+		How the texture is sampled when a texel covers less than one pixel. The default is THREE.LinearMipMapLinearFilter, which uses mipmapping and a trilinear filter. Other choices are THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, and THREE.LinearMipMapNearestFilter. These vary whether the nearest texel or nearest four texels are retrieved on the nearest mipmap or nearest two mipmaps. Interpolation occurs among the samples retrieved.
+		</div>
+		
+		<h3>[property:number anisotropy]</h3>
+		<div>
+		The number of samples taken along the axis through the pixel that has the highest density of texels. By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used. Use renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
+		</div>
+		
+		<h3>[property:Vector2 repeat]</h3>
+		<div>
+		How many times the texture is repeated across the surface, in each direction U and V.
+		</div>
+
+		<h3>[property:Vector2 offset]</h3>
+		<div>
+		How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.
+		</div>
+		
+		<h3>[property:number format]</h3>
+		<div>
+		The default is THREE.RGBAFormat for the texture. Other formats are: THREE.AlphaFormat, THREE.RGBFormat, THREE.LuminanceFormat, and THREE.LuminanceAlphaFormat. There are also compressed texture formats, if the S3TC extension is supported: THREE.RGB_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT3_Format, and THREE.RGBA_S3TC_DXT5_Format.
+		</div>
+
+		<h3>[property:number type]</h3>
+		<div>
+		The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.
+		</div>
+		
+		<h3>[property:boolean depthBuffer]</h3>
+		<div>
+		Renders to the depth buffer. Default is true.
+		</div>
+		
+		<h3>[property:boolean stencilBuffer]</h3>
+		<div>
+		Renders to the stencil buffer. Default is true.
+		</div>
+
+		<h3>[property:boolean generateMipmaps]</h3>
+		<div>
+		Whether to generate mipmaps (if possible) for a texture. True by default.
+		</div>
+
+		<h3>[property:WebGLRenderTarget shareDepthFrom]</h3>
+		<div>
+		Shares the depth from another WebGLRenderTarget. Default is null.
+		</div>
+
+		
 		<h2>Methods</h2>
+		
+		<h3>[method:null setSize]( [page:Number width], [page:Number height] )</h3>
+		<div>
+		Sets the size of the renderTarget.
+		</div>
+		
+		<h3>[method:RenderTarget clone]()</h3>
+		<div>
+		Creates a copy of the render target.
+		</div>
+		
+		<h3>[method:null dispose]()</h3>
+		<div>
+		Dispatches a dispose event.
+		</div>
+		
+		
+		
+		
 
 		<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
 

+ 19 - 11
docs/api/renderers/WebGLRenderTargetCube.html

@@ -7,34 +7,42 @@
 		<link type="text/css" rel="stylesheet" href="../../page.css" />
 	</head>
 	<body>
+		[page:WebGLRenderTarget] &rarr;
+		
 		<h1>[name]</h1>
 
-		<div class="desc">todo</div>
+		<div class="desc">[page:CubeCamera] uses this as its [page:WebGLRenderTarget]</div>
+
+		<h2>Examples</h2>
+		
+		<div>See [page:CubeCamera] for examples.</div>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:todo width], [page:todo height], [page:todo options])</h3>
-		<div>
-		width -- todo <br />
-		height -- todo <br />
-		options -- todo
-		</div>
+		<h3>[name]([page:Number width], [page:Number height], [page:Object options])</h3>
 		<div>
-		todo
+		width -- The width of the renderTarget. <br />
+		height -- The height of the renderTarget. <br />
+		options -- The options sets the properties of the render target.
 		</div>
 
 
-		<h3>[name]()</h3>
-
-
 		<h2>Properties</h2>
 
+		<h3>[property:integer activeCubeFace]</h3>
+		<div>
+		The activeCubeFace property corresponds to a cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) and is
+		used and set internally by the [page:CubeCamera].
+		</div>
+
+		<h3>See [page:WebGLRenderTarget] for inherited properties</h3>
 
 
 		<h2>Methods</h2>
 
+		<h3>See [page:WebGLRenderTarget] for inherited methods</h3>
 
 
 		<h2>Source</h2>

+ 27 - 52
docs/api/renderers/WebGLRenderer.html

@@ -150,47 +150,42 @@
 		<h3>[property:ShadowMapPlugin shadowMapPlugin]</h3>
 		<div>
 		This contains the reference to the shadowMapPlugin.
-		</div> 
-
+		</div>
 
-		<h3>[property:number devicePixelRatio]</h3>
-		<div>
-		The pixel ration of the devices. 
-		</div> 
 
 		<h2>Methods</h2>
 
-		<h3>[method:todo getContext]()</h3>
+		<h3>[method:WebGLRenderingContext getContext]()</h3>
 		<div>
 		Return the WebGL context.
 		</div>
 
-		<h3>[method:todo supportsVertexTextures]()</h3>
+		<h3>[method:Boolean supportsVertexTextures]()</h3>
 		<div>
 		Return a [page:Boolean] true if the context supports vertex textures.
 		</div>
 
 
-		<h3>[method:todo setSize]( [page:Integer width], [page:Integer height] )</h3>
+		<h3>[method:null setSize]( [page:Integer width], [page:Integer height] )</h3>
 		<div>Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).</div>
 
-		<h3>[method:todo setViewport]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
+		<h3>[method:null setViewport]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
 		<div>Sets the viewport to render from (x, y) to (x + width, y + height).</div>
 
 
-		<h3>[method:todo setScissor]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
+		<h3>[method:null setScissor]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
 		<div>Sets the scissor area from (x, y) to (x + width, y + height).</div>
 
-		<h3>[method:todo enableScissorTest]( [page:Boolean enable] )</h3>
+		<h3>[method:null enableScissorTest]( [page:Boolean enable] )</h3>
 		<div>Enable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.</div>
 
-		<h3>[method:todo setClearColor]( [page:Color color], [page:Float alpha] )</h3>
+		<h3>[method:null setClearColor]( [page:Color color], [page:Float alpha] )</h3>
 		<div>Sets the clear color and opacity.</div>
 
 		<code>// Creates a renderer with red background
 		var renderer = new THREE.WebGLRenderer();
-		renderer.setSize(200, 100);
-		renderer.setClearColor(0xff0000, 1);
+		renderer.setSize( 200, 100 );
+		renderer.setClearColor( 0xff0000 );
 		</code>
 
 		<h3>[method:Color getClearColor]()</h3>
@@ -199,11 +194,11 @@
 		<h3>[method:Float getClearAlpha]()</h3>
 		<div>Returns a [page:Float float] with the current clear alpha. Ranges from 0 to 1.</div>
 
-		<h3>[method:todo clear]( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
+		<h3>[method:null clear]( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
 		<div>Tells the renderer to clear its color, depth or stencil drawing buffer(s).</div>
 		<div>Arguments default to true.</div>
 
-		<h3>[method:todo renderBufferImmediate]( [page:Object3D object], [page:shaderprogram program], [page:Material shading] )</h3>
+		<h3>[method:null renderBufferImmediate]( [page:Object3D object], [page:shaderprogram program], [page:Material shading] )</h3>
 		<div>object — an instance of [page:Object3D]]<br />
 		program — an instance of shaderProgram<br />
 		shading — an instance of Material<br />
@@ -213,45 +208,25 @@
 		</div>
 
 
-		<h3>[method:todo renderBufferDirect]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
+		<h3>[method:null renderBufferDirect]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
 		<div>Render a buffer geometry group using the camera and with the correct material.</div>
 
 
-		<h3>[method:todo renderBuffer]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
+		<h3>[method:null renderBuffer]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
 		<div>Render a geometry group using the camera and with the correct material.</div>
 
 
-		<h3>[method:todo render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
+		<h3>[method:null render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
 		<div>Render a scene using a camera.</div>
 		<div>The render is done to the renderTarget (if specified) or to the canvas as usual.</div>
 		<div>If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.</div>
 		<div>Even with forceClear set to true you can prevent certain buffers being cleared by setting either the .autoClearColor, .autoClearStencil or .autoClearDepth properties to false.</div>
 
-		<h3>[method:todo renderImmediateObject]( camera, lights, fog, material, object )</h3>
+		<h3>[method:null renderImmediateObject]( camera, lights, fog, material, object )</h3>
 		<div>Renders an immediate Object using a camera.</div>
 
 
-		<h3>[method:todo initWebGLObjects]( [page:Scene scene] )</h3>
-		<div>
-		[page:Scene scene] -- The scene to initialize.
-		</div>
-		<div>
-		This method initializes the scene. This means adding and removing all objects from the scene and updating them to make sure we have the correct webgl buffers. 
-		</div>
-
-
-		<h3>[method:todo initMaterial]( [page:Material material], [page:Array lights], [page:Fog fog], [page:Object3D object])</h3>
-		<div>
-		[page:Material material] -- The material to initialize.<br />
-		[page:Array lights] -- An array of lights that influence the material.<br />
-		[page:Fog fog] -- The fog of the scene.<br />
-		[page:Object3D object] -- The object of the material that needs init.
-		</div>
-		<div>
-		This method initializes the material as a webgl program to be used.
-		</div>
-
-		<h3>[method:todo setFaceCulling]( cullFace, frontFace )</h3>
+		<h3>[method:null setFaceCulling]( cullFace, frontFace )</h3>
 		<div>
 		[page:String cullFace] —- "back", "front", "front_and_back", or false.<br />
 		[page:String frontFace] —- "ccw" or "cw<br />
@@ -260,7 +235,7 @@
 		<div>If cullFace is false, culling will be disabled.</div>
 
 
-		<h3>[method:todo setDepthTest]( [page:boolean depthTest] )</h3>
+		<h3>[method:null setDepthTest]( [page:boolean depthTest] )</h3>
 		<div>
 		depthTest -- The boolean to decide if depth of a fragment needs to be tested against the depth buffer . <br />
 		</div>
@@ -268,7 +243,7 @@
 		This sets, based on depthTest, whether or not the depth data needs to be tested against the depth buffer.
 		</div>
 
-		<h3>[method:todo setDepthWrite]( [page:boolean depthWrite] )</h3>
+		<h3>[method:null setDepthWrite]( [page:boolean depthWrite] )</h3>
 		<div>
 		depthWrite -- The boolean to decide if depth of a fragment needs to be kept. <br />
 		</div>
@@ -277,7 +252,7 @@
 		</div>
 
 
-		<h3>[method:todo setBlending]( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )</h3>
+		<h3>[method:null setBlending]( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )</h3>
 		<div>
 		blending -- A number indicating the blending mode. Possible value are THREE.NoBlending, THREE.NormalBlending, THREE.AdditiveBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending or THREE.CustomBlending <br />
 		blendEquation -- When blending is THREE.CustomBlending, then you can set the blendEquation. Possible values are THREE.AddEquation, THREE.SubtractEquation or THREE.ReverseSubtractEquation.<br />
@@ -287,8 +262,8 @@
 		<div>
 		This method sets the correct blending.
 		</div>
-		
-		<h3>[method:todo setTexture]( [page:Texture texture], [page:number slot] )</h3>
+
+		<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
 		<div>
 		texture -- The [page:Texture texture] that needs to be set.<br />
 		slot -- The number indicating which slot should be used by the texture.
@@ -296,8 +271,8 @@
 		<div>
 		This method sets the correct texture to the correct slot for the wegl shader. The slot number can be found as a value of the uniform of the sampler.
 		</div>
-		
-		<h3>[method:todo setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
+
+		<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
 		<div>
 		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
 		</div>
@@ -320,9 +295,9 @@
 		This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".
 		</div>
 
-		<h3>[method:todo setMaterialFaces]([page:Material material])</h3>
+		<h3>[method:null setMaterialFaces]([page:Material material])</h3>
 		<div>
-		material -- The [page:Material material] with side that shouldn't be culled.  
+		material -- The [page:Material material] with side that shouldn't be culled.
 		</div>
 		<div>
 		This sets which side needs to be culled in the webgl renderer.
@@ -338,7 +313,7 @@
 		This method returns true if the webgl implementation supports float textures.
 		</div>
 
-		<h3>[method:todo clearTarget]([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil])</h3>
+		<h3>[method:null clearTarget]([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil])</h3>
 		<div>
 		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be cleared.<br />
 		color -- If set, then the color gets cleared. <br />

+ 1 - 1
docs/api/renderers/webgl/WebGLProgram.html

@@ -31,7 +31,7 @@
 		// = inverse transpose of modelViewMatrix
 		uniform mat3 normalMatrix;
 
-		// = camera.position
+		// = camera position in world space
 		uniform vec3 cameraPosition;
 		</code>
 		<code>

+ 12 - 1
docs/api/textures/CompressedTexture.html

@@ -26,7 +26,7 @@
 		height -- The height of the biggest mipmap <br />
 		format -- The format used in the mipmaps <br />
 		type -- The type used in the mipmaps <br />
-		mapping --  How the image is applied to the object. An object type of THREE.UVMapping() is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; THREE.SphericalReflectionMapping, a spherical reflection map projection; and THREE.SphericalRefractionMapping.<br />
+		mapping --  How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.<br />
 		wrapS -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
 		wrapT -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
 		magFilter -- How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texels.<br />
@@ -39,6 +39,17 @@
 
 		<h2>Properties</h2>
 
+		<h3>[property:boolean flipY]</h3>
+		
+		<div>
+			False by default. Flipping textures does not work for compressed textures.
+		</div>
+
+		<h3>[property:boolean generateMipmaps]</h3>
+		
+		<div>
+			False by default. Mipmaps can't be generated for compressed textures
+		</div>
 
 
 		<h2>Methods</h2>

+ 1 - 1
docs/api/textures/DataTexture.html

@@ -26,7 +26,7 @@
 		height -- The height of the image. <br />
 		format -- The default is THREE.RGBAFormat for the texture. Other formats are: THREE.AlphaFormat, THREE.RGBFormat, THREE.LuminanceFormat, and THREE.LuminanceAlphaFormat. There are also compressed texture formats, if the S3TC extension is supported: THREE.RGB_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT3_Format, and THREE.RGBA_S3TC_DXT5_Format.<br />
 		type -- The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.<br />
-		mapping -- How the image is applied to the object. An object type of THREE.UVMapping() is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; THREE.SphericalReflectionMapping, a spherical reflection map projection; and THREE.SphericalRefractionMapping.<br />
+		mapping -- How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.<br />
 		wrapS -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
 		wrapT -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
 		magFilter -- How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.<br />

+ 6 - 2
docs/api/textures/Texture.html

@@ -40,7 +40,7 @@
 
 		<h3>[property:object mapping]</h3>
 		<div>
-		How the image is applied to the object. An object type of THREE.UVMapping() is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; THREE.SphericalReflectionMapping, a spherical reflection map projection; and THREE.SphericalRefractionMapping.
+		How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.
 		</div>
 
 		<h3>[property:number wrapS]</h3>
@@ -52,6 +52,10 @@
 		<div>
 		The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
 		</div>
+		
+		<div>
+		NOTE: tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not Three.js.
+		</div>
 
 		<h3>[property:number magFilter]</h3>
 		<div>
@@ -105,7 +109,7 @@
 
 		<h3>[property:boolean flipY]</h3>
 		<div>
-		False by default, set this to true if the texture needs to be flipped vertically.
+		True by default. Flips the image's Y axis to match the WebGL texture coordinate space.
 		</div>
 
 		<h3>[property:array mipmaps]</h3>

+ 81 - 72
docs/index.html

@@ -2,9 +2,10 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>three.js - documentation</title>
+		<title>three.js / documentation</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
+
 			@font-face {
 				font-family: 'inconsolata';
 				src: url('files/inconsolata.woff') format('woff');
@@ -12,7 +13,9 @@
 				font-style: normal;
 			}
 
-			*{ box-sizing: border-box;}
+			*{
+				box-sizing: border-box;
+			}
 
 			html {
 				height: 100%;
@@ -20,8 +23,7 @@
 
 			body {
 				background-color: #ffffff;
-				margin: 0;
-				padding: 0 0 0 260px;
+				margin: 0px;
 				height: 100%;
 				color: #555;
 				font-family: 'inconsolata';
@@ -30,21 +32,7 @@
 				overflow: hidden;
 			}
 
-			a {
-				color: #2194CE;
-				text-decoration: none;
-			}
-
-			#panel	{
-				position: fixed;
-				left: 0px;
-				width: 260px;
-				height: 100%;
-				overflow: auto;
-				background: #fafafa;
-			}
-
-				#panel h1 {
+				h1 {
 					margin-top: 30px;
 					margin-bottom: 40px;
 					margin-left: 20px;
@@ -52,7 +40,7 @@
 					font-weight: normal;
 				}
 
-				#panel h2 {
+				h2 {
 					color: #454545;
 					font-size: 18px;
 					font-weight: normal;
@@ -61,7 +49,7 @@
 					margin-left: 20px;
 				}
 
-				#panel h3 {
+				h3 {
 					color: #666;
 					font-size: 16px;
 					font-weight: normal;
@@ -70,6 +58,20 @@
 					margin-left: 20px;
 				}
 
+			a {
+				color: #2194CE;
+				text-decoration: none;
+			}
+
+			#panel {
+				position: fixed;
+				left: 0px;
+				width: 260px;
+				height: 100%;
+				overflow: auto;
+				background: #fafafa;
+			}
+
 				#panel ul {
 					list-style-type: none;
 					padding: 0px;
@@ -77,8 +79,10 @@
 				}
 
 			#viewer {
+				position: absolute;
 				border: 0px;
-				width: 100%;
+				left: 260px;
+				width: calc(100% - 260px);
 				height: 100%;
 				overflow: auto;
 			}
@@ -90,6 +94,7 @@
 			.filterBlock p {
 				margin: 0;
 			}
+
 			#filterInput {
 				width: 100%;
 				padding: 5px;
@@ -98,11 +103,13 @@
 				outline: none;
 				border: 1px solid #dedede;
 			}
+
 			#filterInput:focus{
 				border: 1px solid #2194CE;
 			}
+
 			#clearFilterButton {
-				position: absolute; 
+				position: absolute;
 				right: 6px;
 				top: 50%;
 				margin-top: -8px;
@@ -115,40 +122,52 @@
 				padding-top: 7px;
 				opacity: .5;
 			}
-			#clearFilterButton:hover{
+
+			#clearFilterButton:hover {
 				opacity: 1;
 			}
-			.filtered{
+
+			.filtered {
 				display: none;
 			}
-			#panel li b{
+
+			#panel li b {
 				font-weight: bold;
 			}
-			#expandButton{
+
+			/* mobile */
+
+			#expandButton {
 				display: none;
 				position: absolute;
 				right: 20px;
 				top: 12px;
 				width: 32px;
 				height: 32px;
-				background-color: #2194CE;
-			}
-			#expandButton span{
-				height: 3px;
-				background-color: white;
-				width: 16px;
-				position: absolute;
-				left: 8px;
-				top: 8px;
-			}
-			#expandButton span:nth-child(1) {
-				top: 14px;
-			}
-			#expandButton span:nth-child(2) {
-				top: 20px;
-				width: 12px;
 			}
+
+				#expandButton span {
+					height: 2px;
+					background-color: #2194CE;
+					width: 16px;
+					position: absolute;
+					left: 8px;
+					top: 10px;
+				}
+
+				#expandButton span:nth-child(1) {
+					top: 16px;
+				}
+
+				#expandButton span:nth-child(2) {
+					top: 22px;
+				}
+
 			@media all and ( max-width: 640px ) {
+				h1{
+					margin-top: 20px;
+					margin-bottom: 20px;
+				}
 				#panel{
 					position: absolute;
 					left: 0;
@@ -161,17 +180,21 @@
 					border-bottom: 1px solid #dedede;
 				}
 				#content{
-					overflow: auto;
 					position: absolute;
 					left: 0;
-					top: 120px;
+					top: 90px;
 					right: 0;
 					bottom: 0;
+					font-size: 17px;
+					line-height: 22px;
+					overflow: auto;
 				}
 				#viewer{
 					position: absolute;
 					left: 0;
-					top: 48px;
+					top: 56px;
+					width: 100%;
+					height: calc(100% - 56px);
 				}
 				#expandButton{
 					display: block;
@@ -179,29 +202,23 @@
 				#panel.collapsed{
 					height: 56px;
 				}
-				#panel h1{
-					margin-top: 20px;
-					margin-bottom: 20px;
-				}
-				#content{
-					top: 90px;
-				}
 			}
 		</style>
 	</head>
 	<body>
 
 		<div id="panel" class="collapsed">
-			<a id="expandButton" href="#" >
-				<span></span><span></span><span></span>
-			</a>
 			<h1><a href="http://threejs.org">three.js</a> / docs</h1>
+			<a id="expandButton" href="#">
+				<span></span>
+				<span></span>
+				<span></span>
+			</a>
 			<div class="filterBlock" >
 				<input type="text" id="filterInput" placeholder="Type to filter"/>
 				<a href="#" id="clearFilterButton" >x</a>
 			</div>
-			<div id="content" >
-			</div>
+			<div id="content"></div>
 		</div>
 		<iframe id="viewer"></iframe>
 
@@ -210,23 +227,15 @@
 			var panel = document.getElementById( 'panel' );
 			var viewer = document.getElementById( 'viewer' );
 
-			var clearFilterButton = document.getElementById( 'clearFilterButton' );
-			var filterInput = document.getElementById( 'filterInput' );
-			//filterInput.focus();
-
-			panel.addEventListener( 'click', function( e ) {
-				//filterInput.focus();
-				e.preventDefault();
-			} );
-
-			document.getElementById( 'expandButton' ).addEventListener( 'click', function( e ) {
+			var expandButton = document.getElementById( 'expandButton' );
+			expandButton.addEventListener( 'click', function ( event ) {
 				panel.classList.toggle( 'collapsed' );
-				if( !panel.classList.contains( 'collapsed' ) ) {
-					//filterInput.focus();
-				}
-				e.preventDefault();
+				event.preventDefault();
 			} );
 
+			var filterInput = document.getElementById( 'filterInput' );
+			var clearFilterButton = document.getElementById( 'clearFilterButton' );
+
 			var DELIMITER = '/';
 			var MEMBER_DELIMITER = '.';
 			var nameCategoryMap = {};

+ 2 - 6
docs/list.js

@@ -19,6 +19,7 @@ var list = {
 
 		"Cameras": [
 			[ "Camera", "api/cameras/Camera" ],
+			[ "CubeCamera", "api/cameras/CubeCamera" ],
 			[ "OrthographicCamera", "api/cameras/OrthographicCamera" ],
 			[ "PerspectiveCamera", "api/cameras/PerspectiveCamera" ]
 		],
@@ -169,12 +170,6 @@ var list = {
 			[ "AnimationMorphTarget", "api/extras/animation/AnimationMorphTarget" ]
 		],
 
-		"Extras / Cameras": [
-			[ "CombinedCamera", "api/extras/cameras/CombinedCamera" ],
-			[ "CubeCamera", "api/extras/cameras/CubeCamera" ]
-		],
-
-
 		"Extras / Core": [
 			[ "Curve", "api/extras/core/Curve" ],
 			[ "CurvePath", "api/extras/core/CurvePath" ],
@@ -243,6 +238,7 @@ var list = {
 		],
 
 		"Examples" : [
+			[ "CombinedCamera", "api/examples/cameras/CombinedCamera" ],
 			[ "LookupTable", "api/examples/Lut" ]
 
 		]

+ 4 - 4
docs/manual/introduction/Creating-a-scene.html

@@ -9,13 +9,13 @@
 	<body>
 		<h1>[name]</h1>
 
-		<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page, if you get stuck, and need help.</div>
+		<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
 
 		<h2>What is Three.js?</h2>
 
-		<div>If you're reading this, you probably have some understanding of what Three.js is, and what it helps you with, but let's try to describe it briefly anyway.</div>
+		<div>Let's try to describe it briefly:</div>
 
-		<div>Three.js is a library that makes WebGL - 3D in the browser - very easy. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.</div>
+		<div>Three.js is a library that makes WebGL - 3D in the browser - easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.</div>
 
 		<h2>Before we start</h2>
 		<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.min.js">three.min.js</a> in the js/ directory, and open it in your browser.</div>
@@ -53,7 +53,7 @@
 		document.body.appendChild( renderer.domElement );
 		</code>
 
-		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js, but we'll go more into that later. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
+		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
 
 		<div>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</div>
 

+ 5 - 1
docs/page.css

@@ -66,7 +66,11 @@ code {
 	overflow: auto;
 }
 
-
+iframe {
+	width: 100%;
+	height: 420px;
+	border:0;
+}
 
 th {
 	padding: 10px;

+ 535 - 0
docs/scenes/js/material.js

@@ -0,0 +1,535 @@
+/**
+ * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
+ */
+
+var constants = {
+
+	combine: {
+
+		"THREE.MultiplyOperation" : THREE.MultiplyOperation,
+		"THREE.MixOperation" : THREE.MixOperation,
+		"THREE.AddOperation" : THREE.AddOperation
+
+	},
+
+	side : {
+
+		"THREE.FrontSide" : THREE.FrontSide,
+		"THREE.BackSide" : THREE.BackSide,
+		"THREE.DoubleSide" : THREE.DoubleSide
+
+	},
+
+	shading : {
+
+		"THREE.NoShading" : THREE.NoShading,
+		"THREE.FlatShading" : THREE.FlatShading,
+		"THREE.SmoothShading" : THREE.SmoothShading
+
+	},
+
+	colors : {
+
+		"THREE.NoColors" : THREE.NoColors,
+		"THREE.FaceColors" : THREE.FaceColors,
+		"THREE.VertexColors" : THREE.VertexColors
+
+	},
+
+	blendingMode : {
+
+		"THREE.NoBlending" : THREE.NoBlending,
+		"THREE.NormalBlending" : THREE.NormalBlending,
+		"THREE.AdditiveBlending" : THREE.AdditiveBlending,
+		"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
+		"THREE.MultiplyBlending" : THREE.MultiplyBlending,
+		"THREE.CustomBlending" : THREE.CustomBlending
+
+	},
+
+	equations : {
+
+		"THREE.AddEquation" : THREE.AddEquation,
+		"THREE.SubtractEquation" : THREE.SubtractEquation,
+		"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
+
+	},
+
+	destinationFactors : {
+
+		"THREE.ZeroFactor" : THREE.ZeroFactor,
+		"THREE.OneFactor" : THREE.OneFactor,
+		"THREE.SrcColorFactor" : THREE.SrcColorFactor,
+		"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
+		"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
+		"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
+		"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
+		"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
+
+	},
+
+	sourceFactors : {
+
+		"THREE.DstColorFactor" : THREE.DstColorFactor,
+		"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
+		"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
+
+	}
+
+}
+
+function getObjectsKeys( obj ) {
+
+	var keys = [];
+
+	for ( var key in obj ) {
+
+		if ( obj.hasOwnProperty( key ) ) {
+
+			keys.push( key );
+
+		}
+
+	}
+
+	return keys;
+}
+
+var envMaps = (function () {
+
+	var path = "../../examples/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 = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeRefractionMapping );
+	var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
+	reflectionCube.format = THREE.RGBFormat;
+
+	var refractionCube = new THREE.Texture( reflectionCube.image, THREE.CubeRefractionMapping );
+	reflectionCube.format = THREE.RGBFormat;
+
+	return {
+		none : null,
+		reflection : reflectionCube,
+		refraction : refractionCube
+	};
+
+})();
+
+var envMapKeys = getObjectsKeys( envMaps );
+
+var textureMaps = (function () {
+
+	return {
+		none : null,
+		grass : THREE.ImageUtils.loadTexture( "../../examples/textures/terrain/grasslight-thin.jpg" )
+	};
+
+})();
+
+var textureMapKeys = getObjectsKeys( textureMaps );
+
+function generateVertexColors ( geometry ) {
+
+	for ( var i=0, il = geometry.faces.length; i < il; i++ ) {
+
+		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+			i / il * Math.random(),
+			0.5,
+			0.5
+		) );
+		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+			i / il * Math.random(),
+			0.5,
+			0.5
+		) );
+		geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
+			i / il * Math.random(),
+			0.5,
+			0.5
+		) );
+
+		geometry.faces[i].color = new THREE.Color().setHSL(
+			i / il * Math.random(),
+			0.5,
+			0.5
+		);
+
+	}
+
+}
+
+function generateMorphTargets ( mesh, geometry ) {
+
+	var vertices = [], scale;
+
+	for ( var i = 0; i < geometry.vertices.length; i++ ) {
+
+		vertices.push( geometry.vertices[ i ].clone() );
+
+		scale = 1 + Math.random() * 0.3;
+
+		vertices[ vertices.length - 1 ].x *= scale;
+		vertices[ vertices.length - 1 ].y *= scale;
+		vertices[ vertices.length - 1 ].z *= scale;
+
+	}
+
+	geometry.morphTargets.push( { name: "target1", vertices: vertices } );
+
+	geometry.update
+
+}
+
+function handleColorChange ( color ) {
+
+	return function ( value ){
+
+		if (typeof value === "string") {
+
+			value = value.replace('#', '0x');
+
+		}
+
+		color.setHex( value );
+
+    };
+
+}
+
+function needsUpdate ( material, geometry ) {
+
+	return function () {
+
+		material.shading = +material.shading; //Ensure number
+		material.vertexColors = +material.vertexColors; //Ensure number
+		material.side = +material.side; //Ensure number
+		material.needsUpdate = true;
+		geometry.verticesNeedUpdate = true;
+		geometry.normalsNeedUpdate = true;
+		geometry.colorsNeedUpdate = true;
+
+	};
+
+};
+
+function updateMorphs ( torus, material ) {
+
+	return function () {
+
+		torus.updateMorphTargets();
+		material.needsUpdate = true;
+
+	};
+
+}
+
+function updateTexture ( material, materialKey, textures ) {
+
+	return function ( key ) {
+
+		material[materialKey] = textures[key];
+		material.needsUpdate = true;
+
+	};
+
+}
+
+function guiScene ( gui, scene ) {
+
+	var folder = gui.addFolder('Scene');
+
+	var data = {
+		background : "#000000",
+		"ambient light" : ambientLight.color.getHex()
+	}
+
+	var color = new THREE.Color();
+	var colorConvert = handleColorChange( color );
+
+	folder.addColor( data, "background" ).onChange( function ( value ) {
+
+		colorConvert( value );
+
+		renderer.setClearColor( color.getHex() );
+
+	} );
+
+	folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) )
+
+	guiSceneFog( folder, scene );
+
+}
+
+function guiSceneFog ( folder, scene ) {
+
+	var fogFolder = folder.addFolder('scene.fog');
+
+	var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
+
+	var data = {
+		fog : {
+			"THREE.Fog()" : false,
+			"scene.fog.color" : fog.color.getHex()
+		}
+	};
+
+	fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
+
+		if ( useFog ) {
+
+			scene.fog = fog;
+
+		} else {
+
+			scene.fog = null;
+
+		}
+
+	} );
+
+	fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
+
+}
+
+function guiMaterial ( gui, mesh, material, geometry ) {
+
+	var folder = gui.addFolder('THREE.Material');
+
+	folder.add( material, 'transparent' );
+	folder.add( material, 'opacity', 0, 1 );
+	// folder.add( material, 'blending', constants.blendingMode );
+	// folder.add( material, 'blendSrc', constants.destinationFactors );
+	// folder.add( material, 'blendDst', constants.destinationFactors );
+	// folder.add( material, 'blendEquation', constants.equations );
+	folder.add( material, 'depthTest' );
+	folder.add( material, 'depthWrite' );
+	// folder.add( material, 'polygonOffset' );
+	// folder.add( material, 'polygonOffsetFactor' );
+	// folder.add( material, 'polygonOffsetUnits' );
+	folder.add( material, 'alphaTest', 0, 1 );
+	// folder.add( material, 'overdraw', 0, 5 );
+	folder.add( material, 'visible' );
+	folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
+
+}
+
+function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
+
+	var data = {
+		color : material.color.getHex(),
+		envMaps : envMapKeys,
+		map : textureMapKeys,
+		lightMap : textureMapKeys,
+		specularMap : textureMapKeys,
+		alphaMap : textureMapKeys
+	};
+
+	var folder = gui.addFolder('THREE.MeshBasicMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'shading', constants.shading);
+	folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'fog' );
+
+	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
+	folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
+	folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
+	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
+	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'reflectivity', 0, 1 );
+	folder.add( material, 'refractionRatio', 0, 1 );
+	//folder.add( material, 'skinning' );
+
+}
+
+function guiMeshDepthMaterial ( gui, mesh, material, geometry ) {
+
+	var folder = gui.addFolder('THREE.MeshDepthMaterial');
+
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
+
+}
+
+function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
+
+	var folder = gui.addFolder('THREE.MeshNormalMaterial');
+
+	folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
+
+}
+
+function guiLineBasicMaterial ( gui, mesh, material, geometry ) {
+
+	var data = {
+		color : material.color.getHex()
+	};
+
+	var folder = gui.addFolder('THREE.LineBasicMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.add( material, 'linewidth', 0, 10 );
+	folder.add( material, 'linecap', ["butt", "round", "square"] );
+	folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
+	folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'fog' );
+
+}
+
+function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
+
+	var data = {
+		color : material.color.getHex(),
+		ambient : material.ambient.getHex(),
+		emissive : material.emissive.getHex(),
+		envMaps : envMapKeys,
+		map : textureMapKeys,
+		lightMap : textureMapKeys,
+		specularMap : textureMapKeys,
+		alphaMap : textureMapKeys
+	};
+
+	var envObj = {};
+
+	var folder = gui.addFolder('THREE.MeshLambertMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
+	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+	folder.add( material, 'shading', constants.shading ).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'fog' );
+
+	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
+	folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
+	folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
+	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
+	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'reflectivity', 0, 1 );
+	folder.add( material, 'refractionRatio', 0, 1 );
+	//folder.add( material, 'skinning' );
+
+}
+
+function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
+
+	var data = {
+		color : material.color.getHex(),
+		ambient : material.ambient.getHex(),
+		emissive : material.emissive.getHex(),
+		specular : material.specular.getHex(),
+		envMaps : envMapKeys,
+		map : textureMapKeys,
+		lightMap : textureMapKeys,
+		specularMap : textureMapKeys,
+		alphaMap : textureMapKeys
+	};
+
+	var folder = gui.addFolder('THREE.MeshPhongMaterial');
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
+	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+	folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
+
+	folder.add( material, 'shininess', 0, 100);
+	folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'vertexColors', constants.colors);
+	folder.add( material, 'fog' );
+	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
+	folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
+	folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
+	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
+
+}
+
+function chooseFromHash ( gui, mesh, geometry ) {
+
+	var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
+	var material;
+
+	switch (selectedMaterial) {
+
+	case "MeshBasicMaterial" :
+
+		material = new THREE.MeshBasicMaterial({color: 0x2194CE});
+		guiMaterial( gui, mesh, material, geometry );
+		guiMeshBasicMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+
+	case "MeshLambertMaterial" :
+
+		material = new THREE.MeshLambertMaterial({color: 0x2194CE});
+		guiMaterial( gui, mesh, material, geometry );
+		guiMeshLambertMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+
+	case "MeshPhongMaterial" :
+
+		material = new THREE.MeshPhongMaterial({color: 0x2194CE});
+		guiMaterial( gui, mesh, material, geometry );
+		guiMeshPhongMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+
+	case "MeshDepthMaterial" :
+
+		material = new THREE.MeshDepthMaterial({color: 0x2194CE});
+		guiMaterial( gui, mesh, material, geometry );
+		guiMeshDepthMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+
+	case "MeshNormalMaterial" :
+
+		material = new THREE.MeshNormalMaterial();
+		guiMaterial( gui, mesh, material, geometry );
+		guiMeshNormalMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+
+	case "LineBasicMaterial" :
+
+		material = new THREE.LineBasicMaterial({color: 0x2194CE});
+		guiMaterial( gui, mesh, material, geometry );
+		guiLineBasicMaterial( gui, mesh, material, geometry );
+
+		return material;
+
+		break;
+	}
+
+}

+ 124 - 0
docs/scenes/material-browser.html

@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Three.js Material Browser</title>
+		<style>
+			@font-face {
+				font-family: 'inconsolata';
+				src: url('../files/inconsolata.woff') format('woff');
+				font-weight: normal;
+				font-style: normal;
+			}
+			
+			body {
+				margin:0;
+				font-family: 'inconsolata';
+				font-size: 15px;
+				line-height: 18px;
+				overflow: hidden;
+			}
+			
+			canvas { width: 100%; height: 100% }
+			
+			#newWindow {
+				display: block;
+				position: absolute;
+				bottom: 0.3em;
+				left: 0.5em;
+				color: #fff;
+			}
+		</style>
+	</head>
+	<body>
+		
+		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
+		
+		<script src="../../build/three.min.js"></script>
+		<script src='../../examples/js/libs/dat.gui.min.js'></script>
+		<script src='js/material.js'></script>
+		
+		<script>
+			
+			document.getElementById('newWindow').href += window.location.hash;
+			
+			var gui = new dat.GUI();
+			var scene = new THREE.Scene();
+			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
+			camera.position.z = 30;
+			
+			var renderer = new THREE.WebGLRenderer();
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			document.body.appendChild( renderer.domElement );
+
+			var ambientLight = new THREE.AmbientLight( 0x000000 );
+			scene.add( ambientLight );
+
+			var lights = [];
+			lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
+			
+			lights[0].position.set( 0, 200, 0 );
+			lights[1].position.set( 100, 200, 100 );
+			lights[2].position.set( -100, -200, -100 );
+
+			scene.add( lights[0] );
+			scene.add( lights[1] );
+			scene.add( lights[2] );
+
+			guiScene( gui, scene, camera );
+
+			var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
+			var mesh = new THREE.Mesh( geometry );
+			
+			generateVertexColors( geometry );
+			
+			mesh.material = chooseFromHash( gui, mesh, geometry );
+
+			generateMorphTargets( mesh, geometry );
+
+			scene.add( mesh );
+			
+			var prevFog = false;
+			
+			var render = function () {
+				
+				requestAnimationFrame( render );
+
+				var time = Date.now() * 0.001;
+
+				mesh.rotation.x += 0.005;
+				mesh.rotation.y += 0.005;
+				
+				if ( prevFog !== scene.fog ) {
+					
+					mesh.material.needsUpdate = true;
+					prevFog = scene.fog;
+					
+				}
+				
+				if ( mesh.morphTargetInfluences ) {
+					
+					mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
+					
+				}
+
+				renderer.render( scene, camera );
+				
+			};
+			
+			window.addEventListener( 'resize', function () {
+				
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				
+			}, false );
+
+			render();
+			
+		</script>
+	</body>
+</html>

+ 12 - 1
editor/css/dark.css

@@ -37,6 +37,15 @@ input.Number {
 		text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
 	}
 
+#script {
+	position: absolute;
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+	opacity: 0.9;
+}
+
 #player {
 	position: absolute;
 	top: 32px;
@@ -52,6 +61,8 @@ input.Number {
 	background: #111;
 	padding: 0px;
 	margin: 0px;
+	right: 0px;
+	top: 0px;
 }
 
 	#menubar .menu {
@@ -78,7 +89,7 @@ input.Number {
 			display: none;
 			padding: 5px 0px;
 			background: #111;
-			width: 140px;
+			width: 150px;
 		}
 
 		#menubar .menu:hover .options {

+ 12 - 1
editor/css/light.css

@@ -38,6 +38,15 @@ input.Number {
 		text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
 	}
 
+#script {
+	position: absolute;
+	top: 32px;
+	left: 0px;
+	right: 300px;
+	bottom: 32px;
+	opacity: 0.9;
+}
+
 #player {
 	position: absolute;
 	top: 32px;
@@ -53,6 +62,8 @@ input.Number {
 	background: #eee;
 	padding: 0px;
 	margin: 0px;
+	right: 0px;
+	top: 0px;
 }
 
 	#menubar .menu {
@@ -79,7 +90,7 @@ input.Number {
 			display: none;
 			padding: 5px 0px;
 			background: #eee;
-			width: 140px;
+			width: 150px;
 		}
 
 		#menubar .menu:hover .options {

+ 10 - 1
editor/css/main.css

@@ -19,6 +19,7 @@ button {
 }
 
 textarea {
+	tab-size: 4;
 	white-space: pre;
 	word-wrap: normal;
 }
@@ -70,6 +71,14 @@ textarea, input { outline: none; } /* osx */
 		display: none;
 	}
 
+.CodeMirror {
+
+	position: absolute !important;
+	top: 37px;
+	width: 100% !important;
+	height: calc(100% - 37px) !important;
+
+}
 /* scene types */
 
 .type {
@@ -121,4 +130,4 @@ textarea, input { outline: none; } /* osx */
 
 .MeshPhongMaterial {
 	color: #ffaa88;
-}
+}

+ 172 - 0
editor/examples/camera.app.json

@@ -0,0 +1,172 @@
+{
+	"camera": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"object": {
+			"uuid": "F0D8434F-4603-415B-8024-792FE97B9600",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"fov": 50,
+			"aspect": 1.2252042007001167,
+			"near": 0.1,
+			"far": 100000,
+			"matrix": [0.9700406789779663,-5.500052080442686e-10,-0.24294254183769226,0,-0.04822639003396034,0.9800989627838135,-0.19256223738193512,0,0.23810774087905884,0.19850945472717285,0.950735867023468,0,159.0158233642578,132.5708465576172,634.9312744140625,1]
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"geometries": [
+			{
+				"uuid": "D8E200D3-27BC-49F8-A5C5-7384206E70FE",
+				"type": "BoxGeometry",
+				"width": 100,
+				"height": 100,
+				"depth": 100,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "25BA32DB-8B02-4ABA-A77C-69868C464A1A",
+				"type": "CylinderGeometry",
+				"radiusTop": 0,
+				"radiusBottom": 40,
+				"height": 75,
+				"radialSegments": 4,
+				"heightSegments": 1,
+				"openEnded": false
+			},
+			{
+				"uuid": "51BB3E54-D2DF-4576-9953-FB8E940588B5",
+				"type": "PlaneGeometry",
+				"width": 1000,
+				"height": 1000,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "4DECFAB5-6FD1-4D84-9A29-565807B074EA",
+				"type": "IcosahedronGeometry",
+				"radius": 40,
+				"detail": 2
+			}],
+		"materials": [
+			{
+				"uuid": "B5943856-E404-45D9-A427-4774202C2CD0",
+				"type": "MeshPhongMaterial",
+				"color": 37119,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "3F872310-2067-4BE4-9250-5B3F4E43797E",
+				"type": "MeshPhongMaterial",
+				"color": 15859456,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "4AE8130E-B6A8-47BC-ACCF-060973C74044",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "E1826901-7922-4584-A25D-6D487E2C9BBD",
+				"type": "MeshPhongMaterial",
+				"color": 16711680,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			}],
+		"object": {
+			"uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
+			"type": "Scene",
+			"name": "Scene",
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "60B69C58-4201-43FD-815E-AD2EDFBBD0CE",
+					"type": "PerspectiveCamera",
+					"name": "PerspectiveCamera 1",
+					"fov": 50,
+					"aspect": 1,
+					"near": 100,
+					"far": 10000,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,100,400,1]
+				},
+				{
+					"uuid": "26DAAD69-725D-43B7-AF9D-990A99DEF8C5",
+					"type": "Mesh",
+					"name": "Box 1",
+					"geometry": "D8E200D3-27BC-49F8-A5C5-7384206E70FE",
+					"material": "B5943856-E404-45D9-A427-4774202C2CD0",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				},
+				{
+					"uuid": "AAAFF2D6-4725-4AFC-A9FE-26419B11011F",
+					"type": "Mesh",
+					"name": "Cylinder 3",
+					"geometry": "25BA32DB-8B02-4ABA-A77C-69868C464A1A",
+					"material": "3F872310-2067-4BE4-9250-5B3F4E43797E",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-130,-15,0,1]
+				},
+				{
+					"uuid": "A460C230-DC88-4A8F-A3FB-AA0FE735F3ED",
+					"type": "Mesh",
+					"name": "Plane 4",
+					"geometry": "51BB3E54-D2DF-4576-9953-FB8E940588B5",
+					"material": "4AE8130E-B6A8-47BC-ACCF-060973C74044",
+					"matrix": [1,0,0,0,0,0.040785059332847595,-0.9991679191589355,0,0,0.9991679191589355,0.040785059332847595,0,0,-50,0,1]
+				},
+				{
+					"uuid": "3412781E-27CC-43C3-A5DB-54C0C8E42ED6",
+					"type": "PointLight",
+					"name": "PointLight 2",
+					"color": 12773063,
+					"intensity": 1,
+					"distance": 0,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,88.12999725341797,8.3100004196167,125.44999694824219,1]
+				},
+				{
+					"uuid": "E2939A7B-5E40-438A-8C1B-32126FBC6892",
+					"type": "PointLight",
+					"name": "PointLight 1",
+					"color": 9474221,
+					"intensity": 0.75,
+					"distance": 0,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-93.86000061035156,127.12999725341797,-114.30000305175781,1]
+				},
+				{
+					"uuid": "B855E267-A266-4098-ACD6-6A1FDE7B88BA",
+					"type": "Mesh",
+					"name": "Icosahedron 1",
+					"geometry": "4DECFAB5-6FD1-4D84-9A29-565807B074EA",
+					"material": "E1826901-7922-4584-A25D-6D487E2C9BBD",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,130,-10,0,1]
+				}]
+		}
+	},
+	"scripts": {
+		"60B69C58-4201-43FD-815E-AD2EDFBBD0CE": [
+			{
+				"name": "Camera Orbit",
+				"source": "player.setCamera( this );\n\nfunction update( event ) {\n\n\tvar time = event.time * 0.001;\n\n\tthis.position.x = Math.sin( time ) * 400;\n\tthis.position.z = Math.cos( time ) * 400;\n\tthis.lookAt( scene.position );\n\n}"
+			}]
+	}
+}

+ 99 - 0
editor/examples/particles.app.json

@@ -0,0 +1,99 @@
+{
+	"camera": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"object": {
+			"uuid": "D722B468-8D40-4CAB-82D6-944D2D5A8D35",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"fov": 50,
+			"aspect": 1.2237762237762237,
+			"near": 0.1,
+			"far": 100000,
+			"matrix": [0.7071067690849304,-2.468905080377226e-9,-0.7071068286895752,0,-0.2357022613286972,0.9428090453147888,-0.235702246427536,0,0.6666666865348816,0.3333333134651184,0.6666666269302368,0,500,250,500,1]
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"geometries": [
+			{
+				"uuid": "5009F17C-E9D3-4D0E-82A6-2E23159128FB",
+				"type": "PlaneGeometry",
+				"width": 600,
+				"height": 600,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "8693E7B2-0009-4C4C-94C5-8E031557AEC2",
+				"type": "BoxGeometry",
+				"width": 4,
+				"height": 4,
+				"depth": 4,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "6EDB0369-7E11-4B0F-BF98-4BD761846D65",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "D586E672-03FC-4C82-9D6E-CCCF899DDDB1",
+				"type": "MeshBasicMaterial",
+				"color": 16777215
+			}],
+		"object": {
+			"uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
+			"type": "Scene",
+			"name": "Scene",
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "05B57416-1BE5-4A96-BB05-9D9CD112D52B",
+					"type": "Mesh",
+					"name": "Ground",
+					"geometry": "5009F17C-E9D3-4D0E-82A6-2E23159128FB",
+					"material": "6EDB0369-7E11-4B0F-BF98-4BD761846D65",
+					"matrix": [1,0,0,0,0,0.0007962886593304574,-0.9999997019767761,0,0,0.9999997019767761,0.0007962886593304574,0,0,-2,0,1]
+				},
+				{
+					"uuid": "9DFA44C6-C85A-4F2F-9252-E9564C2785C5",
+					"type": "Mesh",
+					"name": "Particle",
+					"geometry": "8693E7B2-0009-4C4C-94C5-8E031557AEC2",
+					"material": "D586E672-03FC-4C82-9D6E-CCCF899DDDB1",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				},
+				{
+					"uuid": "40E5CDA4-0E39-4265-9293-3E9EC3207F61",
+					"type": "PointLight",
+					"name": "PointLight",
+					"color": 16777215,
+					"intensity": 10,
+					"distance": 0,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				}]
+		}
+	},
+	"scripts": {
+		"3741222A-BD8F-401C-A5D2-5A907E891896": [
+			{
+				"name": "Particle Fountain",
+				"source": "var original = this.getObjectByName( 'Particle' );\n\nvar particles = [];\n\nfunction update( event ) {\n\n\tif ( particles.length < 200 ) {\n\n\t\tvar velocity = new THREE.Vector3();\n\t\tvelocity.x = Math.random() * 10 - 5;\n\t\tvelocity.y = Math.random() * 10 + 10;\n\t\tvelocity.z = Math.random() * 10 - 5;\n\n\t\tvar particle = original.clone();\n\t\tparticle.userData.velocity = velocity;\n\t\tparticles.push( particle );\n\n\t\tthis.add( particle );\n\n\t}\n\n\tfor ( var i = 0; i < particles.length; i ++ ) {\n\n\t\tvar particle = particles[ i ];\n\n\t\tvar velocity = particle.userData.velocity;\n\n\t\tvelocity.y -= 0.98;\n\n\t\tparticle.position.add( velocity );\n\n\t\tif ( particle.position.y < 0 ) {\n\n\t\t\tparticle.position.y = 0;\n\n\t\t\tvelocity.y = - velocity.y;\n\t\t\tvelocity.multiplyScalar( 0.6 );\n\n\t\t}\n\n\t}\n\n}"
+			}]
+	}
+}

+ 137 - 0
editor/examples/pong.app.json

@@ -0,0 +1,137 @@
+{
+	"camera": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"object": {
+			"uuid": "E5C76691-3D55-4E26-862E-24BADC21F4D7",
+			"type": "PerspectiveCamera",
+			"name": "Camera",
+			"fov": 50,
+			"aspect": 1.3291139240506329,
+			"near": 0.1,
+			"far": 100000,
+			"matrix": [0.9522120356559753,4.209433246415983e-9,-0.3054378032684326,0,-0.17742955684661865,0.8139731884002686,-0.553142249584198,0,0.24861818552017212,0.5809023976325989,0.7750750780105591,0,186.46363830566406,435.67681884765625,581.3063354492188,1]
+		}
+	},
+	"scene": {
+		"metadata": {
+			"version": 4.3,
+			"type": "Object",
+			"generator": "ObjectExporter"
+		},
+		"geometries": [
+			{
+				"uuid": "77B20ED1-2871-4B14-A652-8F823B2A817E",
+				"type": "PlaneGeometry",
+				"width": 600,
+				"height": 400,
+				"widthSegments": 1,
+				"heightSegments": 1
+			},
+			{
+				"uuid": "7ADE0D01-A56A-4D33-869A-6C360E096EF7",
+				"type": "BoxGeometry",
+				"width": 10,
+				"height": 10,
+				"depth": 10,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			},
+			{
+				"uuid": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+				"type": "BoxGeometry",
+				"width": 20,
+				"height": 20,
+				"depth": 100,
+				"widthSegments": 1,
+				"heightSegments": 1,
+				"depthSegments": 1
+			}],
+		"materials": [
+			{
+				"uuid": "7EDF7C08-6325-418A-BBAB-89341C694730",
+				"type": "MeshPhongMaterial",
+				"color": 16777215,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 16777215,
+				"shininess": 30
+			},
+			{
+				"uuid": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC",
+				"type": "MeshPhongMaterial",
+				"color": 16711680,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			},
+			{
+				"uuid": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+				"type": "MeshPhongMaterial",
+				"color": 2752767,
+				"ambient": 16777215,
+				"emissive": 0,
+				"specular": 1118481,
+				"shininess": 30
+			}],
+		"object": {
+			"uuid": "31517222-A9A7-4EAF-B5F6-60751C0BABA3",
+			"type": "Scene",
+			"name": "Scene",
+			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
+			"children": [
+				{
+					"uuid": "B47D0BFC-D63A-4CBB-985E-9C4DBDF086E4",
+					"type": "Mesh",
+					"name": "Ground",
+					"geometry": "77B20ED1-2871-4B14-A652-8F823B2A817E",
+					"material": "7EDF7C08-6325-418A-BBAB-89341C694730",
+					"matrix": [1,0,0,0,0,0.0007961748051457107,-0.9999997019767761,0,0,0.9999997019767761,0.0007961748051457107,0,0,-10,0,1]
+				},
+				{
+					"uuid": "CE13E58A-4E8B-4F72-9E2E-7DE57C58F989",
+					"type": "Mesh",
+					"name": "Ball",
+					"geometry": "7ADE0D01-A56A-4D33-869A-6C360E096EF7",
+					"material": "B1CAF098-FE36-45E1-BEBE-8D6AC04821CC",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+				},
+				{
+					"uuid": "2AAEA3AA-EC45-492B-B450-10473D1EC6C5",
+					"type": "Mesh",
+					"name": "Pad 1",
+					"geometry": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-240,0,0,1]
+				},
+				{
+					"uuid": "F1DD46A7-6584-4A37-BC76-852C3911077E",
+					"type": "Mesh",
+					"name": "Pad 2",
+					"geometry": "E8C064B6-3454-4739-9E02-3B07B8E70B4C",
+					"material": "FBDBE66D-B613-4741-802D-5AE1DE07DE46",
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,240,0,0,1]
+				},
+				{
+					"uuid": "C62AAE9F-9E51-46A5-BD2B-71BA804FC0B3",
+					"type": "DirectionalLight",
+					"name": "DirectionalLight 3",
+					"color": 16777215,
+					"intensity": 1,
+					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
+				}]
+		}
+	},
+	"scripts": {
+		"31517222-A9A7-4EAF-B5F6-60751C0BABA3": [
+			{
+				"name": "Game logic",
+				"source": "var ball = this.getObjectByName( 'Ball' );\n\nvar position = ball.position;\n\nvar velocity = new THREE.Vector3();\n\nvar direction = new THREE.Vector3();\ndirection.x = Math.random() - 0.5;\ndirection.z = Math.random() - 0.5;\ndirection.normalize();\n\nvar pad1 = this.getObjectByName( 'Pad 1' );\nvar pad2 = this.getObjectByName( 'Pad 2' );\n\nvar raycaster = new THREE.Raycaster();\nvar objects = [ pad1, pad2 ];\n\n//\n\nfunction mousemove( event ) {\n\n\tpad1.position.z = ( event.clientX / player.width ) * 300 - 150;\n\tpad2.position.z = - pad1.position.z;\n\n}\n\nfunction update( event ) {\n\n\tif ( position.x < -300 || position.x > 300 ) {\n\t\t\n\t\tdirection.x = - direction.x;\n\t\t\n\t}\n\n\tif ( position.z < -200 || position.z > 200 ) {\n\t\t\n\t\tdirection.z = - direction.z;\n\t\t\n\t}\n\t\n\traycaster.set( position, direction );\n\t\n\tvar intersections = raycaster.intersectObjects( objects );\n\t\n\tif ( intersections.length > 0 ) {\n\n\t\tvar intersection = intersections[ 0 ];\n\t\t\n\t\tif ( intersection.distance < 10 ) {\n\t\t\t\n\t\t\tdirection.reflect( intersection.face.normal );\n\t\t\t\n\t\t}\n\t\t\n\t}\n\n\tposition.add( velocity.copy( direction ).multiplyScalar( 8 ) );\n\n}"
+			}]
+	}
+}

+ 16 - 13
editor/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js editor</title>
+		<title>three.js / editor</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 	</head>
@@ -36,13 +36,19 @@
 		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
 		<script src="../examples/js/renderers/SVGRenderer.js"></script>
 
+		<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
+		<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
+		<script src="js/libs/codemirror/codemirror.js"></script>
+		<script src="js/libs/codemirror/mode/javascript.js"></script>
+
+		<script src="js/libs/jszip.min.js"></script>
 		<script src="js/libs/signals.min.js"></script>
 		<script src="js/libs/ui.js"></script>
-		<script src="js/libs/ui.editor.js"></script>
 		<script src="js/libs/ui.three.js"></script>
 
 		<script src="js/libs/app.js"></script>
 		<script src="js/Player.js"></script>
+		<script src="js/Script.js"></script>
 
 		<script src="js/Storage.js"></script>
 
@@ -55,6 +61,7 @@
 		<script src="js/Menubar.Add.js"></script>
 		<script src="js/Menubar.Play.js"></script>
 		<script src="js/Menubar.View.js"></script>
+		<script src="js/Menubar.Examples.js"></script>
 		<script src="js/Menubar.Help.js"></script>
 		<script src="js/Menubar.Status.js"></script>
 		<script src="js/Sidebar.js"></script>
@@ -76,7 +83,6 @@
 		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 		<script src="js/Sidebar.Material.js"></script>
 		<script src="js/Sidebar.Script.js"></script>
-		<script src="js/Sidebar.Script.Editor.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
 		<script src="js/Viewport.Info.js"></script>
@@ -97,6 +103,9 @@
 			var viewport = new Viewport( editor );
 			document.body.appendChild( viewport.dom );
 
+			var script = new Script( editor );
+			document.body.appendChild( script.dom );
+
 			var player = new Player( editor );
 			document.body.appendChild( player.dom );
 
@@ -122,10 +131,7 @@
 
 					if ( state !== undefined ) {
 
-						var loader = new THREE.ObjectLoader();
-						var scene = loader.parse( state );
-
-						editor.setScene( scene );
+						editor.fromJSON( state );
 
 					}
 
@@ -159,7 +165,7 @@
 
 						timeout = setTimeout( function () {
 
-							editor.storage.set( editor.scene.toJSON() );
+							editor.storage.set( editor.toJSON() );
 
 							editor.signals.savingFinished.dispatch();
 
@@ -171,12 +177,14 @@
 
 				var signals = editor.signals;
 
+				signals.editorCleared.add( saveState );
 				signals.geometryChanged.add( saveState );
 				signals.objectAdded.add( saveState );
 				signals.objectChanged.add( saveState );
 				signals.objectRemoved.add( saveState );
 				signals.materialChanged.add( saveState );
 				signals.sceneGraphChanged.add( saveState );
+				signals.scriptChanged.add( saveState );
 
 				var showDialog = function ( content ) {
 
@@ -214,11 +222,6 @@
 					case 8: // prevent browser back
 						event.preventDefault();
 						break;
-					case 46: // delete
-						var parent = editor.selected.parent;
-						editor.removeObject( editor.selected );
-						editor.select( parent );
-						break;
 
 				}
 

+ 117 - 4
editor/js/Editor.js

@@ -8,6 +8,10 @@ var Editor = function () {
 
 	this.signals = {
 
+		// script
+
+		editScript: new SIGNALS.Signal(),
+
 		// player
 
 		startPlayer: new SIGNALS.Signal(),
@@ -22,6 +26,8 @@ var Editor = function () {
 
 		// notifications
 
+		editorCleared: new SIGNALS.Signal(),
+
 		savingStarted: new SIGNALS.Signal(),
 		savingFinished: new SIGNALS.Signal(),
 
@@ -49,6 +55,11 @@ var Editor = function () {
 		helperRemoved: new SIGNALS.Signal(),
 
 		materialChanged: new SIGNALS.Signal(),
+
+		scriptAdded: new SIGNALS.Signal(),
+		scriptChanged: new SIGNALS.Signal(),
+		scriptRemoved: new SIGNALS.Signal(),
+
 		fogTypeChanged: new SIGNALS.Signal(),
 		fogColorChanged: new SIGNALS.Signal(),
 		fogParametersChanged: new SIGNALS.Signal(),
@@ -62,7 +73,7 @@ var Editor = function () {
 	this.storage = new Storage();
 	this.loader = new Loader( this );
 
-	this.camera = new THREE.PerspectiveCamera( 50, 1, 0.1, 100000 );
+	this.camera = new THREE.PerspectiveCamera( 50, 1, 1, 100000 );
 	this.camera.name = 'Camera';
 
 	this.scene = new THREE.Scene();
@@ -74,7 +85,7 @@ var Editor = function () {
 	this.geometries = {};
 	this.materials = {};
 	this.textures = {};
-	// this.scripts = {};
+	this.scripts = {};
 
 	this.selected = null;
 	this.helpers = {};
@@ -91,16 +102,19 @@ Editor.prototype = {
 
 	},
 
+	/*
 	showDialog: function ( value ) {
 
 		this.signals.showDialog.dispatch( value );
 
 	},
+	*/
 
 	//
 
 	setScene: function ( scene ) {
 
+		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
 
@@ -152,8 +166,6 @@ Editor.prototype = {
 
 		if ( object.parent === undefined ) return; // avoid deleting the camera or scene
 
-		if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
-
 		var scope = this;
 
 		object.traverse( function ( child ) {
@@ -275,6 +287,38 @@ Editor.prototype = {
 
 	//
 
+	addScript: function ( object, script ) {
+
+		if ( this.scripts[ object.uuid ] === undefined ) {
+
+			this.scripts[ object.uuid ] = [];
+
+		}
+
+		this.scripts[ object.uuid ].push( script );
+
+		this.signals.scriptAdded.dispatch( script );
+
+	},
+
+	removeScript: function ( object, script ) {
+
+		if ( this.scripts[ object.uuid ] === undefined ) return;
+
+		var index = this.scripts[ object.uuid ].indexOf( script );
+
+		if ( index !== - 1 ) {
+
+			this.scripts[ object.uuid ].splice( index, 1 );
+
+		}
+
+		this.signals.scriptRemoved.dispatch( script );
+
+	},
+
+	//
+
 	parent: function ( object, parent ) {
 
 		if ( parent === undefined ) {
@@ -355,6 +399,75 @@ Editor.prototype = {
 
 		this.focus( this.scene.getObjectById( id, true ) );
 
+	},
+
+	clear: function () {
+
+		this.camera.position.set( 500, 250, 500 );
+		this.camera.lookAt( new THREE.Vector3() );
+
+		var objects = this.scene.children;
+
+		while ( objects.length > 0 ) {
+
+			this.removeObject( objects[ 0 ] );
+
+		}
+
+		this.geometries = {};
+		this.materials = {};
+		this.textures = {};
+		this.scripts = {};
+
+		this.deselect();
+
+		this.signals.editorCleared.dispatch();
+
+	},
+
+	//
+
+	fromJSON: function ( json ) {
+
+		var loader = new THREE.ObjectLoader();
+
+		// backwards
+
+		if ( json.scene === undefined ) {
+
+			var scene = loader.parse( json );
+
+			this.setScene( scene );
+
+			return;
+
+		}
+
+		// TODO: Clean this up somehow
+
+		var camera = loader.parse( json.camera );
+
+		this.camera.position.copy( camera.position );
+		this.camera.rotation.copy( camera.rotation );
+		this.camera.aspect = camera.aspect;
+		this.camera.near = camera.near;
+		this.camera.far = camera.far;
+
+		this.setScene( loader.parse( json.scene ) );
+		this.scripts = json.scripts;
+
+	},
+
+	toJSON: function () {
+
+		return {
+
+			camera: this.camera.toJSON(),
+			scene: this.scene.toJSON(),
+			scripts: this.scripts
+
+		};
+
 	}
 
 }

+ 31 - 6
editor/js/Menubar.Add.js

@@ -20,6 +20,15 @@ Menubar.Add = function ( editor ) {
 
 	var meshCount = 0;
 	var lightCount = 0;
+	var cameraCount = 0;
+
+	editor.signals.editorCleared.add( function () {
+
+		meshCount = 0;
+		lightCount = 0;
+		cameraCount = 0;
+
+	} );
 
 	// Group
 
@@ -98,7 +107,7 @@ Menubar.Add = function ( editor ) {
 	option.onClick( function () {
 
 		var radius = 20;
-		var segments = 8;
+		var segments = 32;
 
 		var geometry = new THREE.CircleGeometry( radius, segments );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
@@ -120,7 +129,7 @@ Menubar.Add = function ( editor ) {
 		var radiusTop = 20;
 		var radiusBottom = 20;
 		var height = 100;
-		var radiusSegments = 8;
+		var radiusSegments = 32;
 		var heightSegments = 1;
 		var openEnded = false;
 
@@ -227,10 +236,6 @@ Menubar.Add = function ( editor ) {
 	} );
 	options.add( option );
 
-	//
-
-	options.add( new UI.HorizontalRule() );
-
 	// Sprite
 
 	var option = new UI.Panel();
@@ -358,6 +363,26 @@ Menubar.Add = function ( editor ) {
 	} );
 	options.add( option );
 
+	//
+
+	options.add( new UI.HorizontalRule() );
+
+	// PerspectiveCamera
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'PerspectiveCamera' );
+	option.onClick( function() {
+
+		var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
+		camera.name = 'PerspectiveCamera ' + ( ++ cameraCount );
+
+		editor.addObject( camera );
+		editor.select( camera );
+
+	} );
+	options.add( option );
+
 	return container;
 
 }

+ 6 - 2
editor/js/Menubar.Edit.js

@@ -41,9 +41,13 @@ Menubar.Edit = function ( editor ) {
 	option.setClass( 'option' );
 	option.setTextContent( 'Delete' );
 	option.onClick( function () {
+	
+		var object = editor.selected;
+
+		if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
 
-		var parent = editor.selected.parent;
-		editor.removeObject( editor.selected );
+		var parent = object.parent;
+		editor.removeObject( object );
 		editor.select( parent );
 
 	} );

+ 60 - 0
editor/js/Menubar.Examples.js

@@ -0,0 +1,60 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Menubar.Examples = function ( editor ) {
+
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
+
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'Examples' );
+	container.add( title );
+
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
+
+	// Examples
+
+	var items = [
+		{ title: 'Camera', file: 'camera.app.json' },
+		{ title: 'Particles', file: 'particles.app.json' },
+		{ title: 'Pong', file: 'pong.app.json' }
+	];
+
+	var loader = new THREE.XHRLoader();
+
+	for ( var i = 0; i < items.length; i ++ ) {
+
+		( function ( i ) {
+
+			var item = items[ i ];
+
+			var option = new UI.Panel();
+			option.setClass( 'option' );
+			option.setTextContent( item.title );
+			option.onClick( function () {
+
+				if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
+
+					loader.load( 'examples/' + item.file, function ( text ) {
+
+						editor.clear();
+						editor.fromJSON( JSON.parse( text ) );
+
+					} );
+
+				}
+
+			} );
+			options.add( option );
+
+		} )( i )
+
+	}
+
+	return container;
+
+};

+ 71 - 12
editor/js/Menubar.File.js

@@ -23,18 +23,9 @@ Menubar.File = function ( editor ) {
 	option.setTextContent( 'New' );
 	option.onClick( function () {
 
-		if ( confirm( 'Are you sure?' ) ) {
+		if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
 
-			editor.config.setKey(
-				'camera/position', [ 500, 250, 500 ],
-				'camera/target', [ 0, 0, 0 ]
-			);
-
-			editor.storage.clear( function () {
-
-				location.href = location.pathname;
-
-			} );
+			editor.clear();
 
 		}
 
@@ -192,7 +183,75 @@ Menubar.File = function ( editor ) {
 	option.setTextContent( 'Publish' );
 	option.onClick( function () {
 
-		alert( 'Not yet...' );
+		var camera = editor.camera;
+
+		var zip = new JSZip();
+
+		zip.file( 'index.html', [
+
+			'<!DOCTYPE html>',
+			'<html lang="en">',
+			'	<head>',
+			'		<title>three.js</title>',
+			'		<meta charset="utf-8">',
+			'		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">',
+			'		<style>',
+			'		body {',
+			'			margin: 0px;',
+			'			overflow: hidden;',
+			'		}',
+			'		</style>',
+			'	</head>',
+			'	<body ontouchstart="">',
+			'		<script src="js/three.min.js"></script>',
+			'		<script src="js/app.js"></script>',
+			'		<script>',
+			'',
+			'			var loader = new THREE.XHRLoader();',
+			'			loader.load( \'app.json\', function ( text ) {',
+			'',
+			'				var player = new APP.Player();',
+			'				player.load( JSON.parse( text ) );',
+			'				player.setSize( window.innerWidth, window.innerHeight );',
+			'				player.play();',
+			'',
+			'				document.body.appendChild( player.dom );',
+			'',
+			'			} );',
+			'',
+			'		</script>',
+			'	</body>',
+			'</html>'
+
+		].join( '\n' ) );
+
+		//
+
+		var output = editor.toJSON();
+		output = JSON.stringify( output, null, '\t' );
+		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		zip.file( 'app.json', output );
+
+		//
+
+		var manager = new THREE.LoadingManager( function () {
+
+			location.href = 'data:application/zip;base64,' + zip.generate();
+
+		} );
+
+		var loader = new THREE.XHRLoader( manager );
+		loader.load( 'js/libs/app.js', function ( content ) {
+
+			zip.file( 'js/app.js', content );
+
+		} );
+		loader.load( '../build/three.min.js', function ( content ) {
+
+			zip.file( 'js/three.min.js', content );
+
+		} );
 
 	} );
 	options.add( option );

+ 1 - 1
editor/js/Menubar.Play.js

@@ -20,7 +20,7 @@ Menubar.Play = function ( editor ) {
 
 			isPlaying = true;
 			title.setTextContent( 'Stop' );
-			signals.startPlayer.dispatch( editor.scene.toJSON() );
+			signals.startPlayer.dispatch();
 
 		} else {
 

+ 34 - 0
editor/js/Menubar.View.js

@@ -42,6 +42,40 @@ Menubar.View = function ( editor ) {
 	} );
 	options.add( option );
 
+	//
+
+	options.add( new UI.HorizontalRule() );
+
+	// fullscreen
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Fullscreen' );
+	option.onClick( function () {
+
+		var element = document.body;
+
+		if ( element.requestFullscreen ) {
+
+			element.requestFullscreen();
+
+		} else if ( element.mozRequestFullScreen ) {
+
+			element.mozRequestFullScreen();
+
+		} else if ( element.webkitRequestFullscreen ) {
+
+			element.webkitRequestFullscreen();
+
+		} else if ( element.msRequestFullscreen ) {
+
+			element.msRequestFullscreen();
+
+		}
+
+	} );
+	options.add( option );
+
 	return container;
 
 };

+ 1 - 0
editor/js/Menubar.js

@@ -11,6 +11,7 @@ var Menubar = function ( editor ) {
 	container.add( new Menubar.Edit( editor ) );
 	container.add( new Menubar.Add( editor ) );
 	container.add( new Menubar.Play( editor ) );
+	container.add( new Menubar.Examples( editor ) );
 	container.add( new Menubar.View( editor ) );
 	container.add( new Menubar.Help( editor ) );
 

+ 10 - 3
editor/js/Player.js

@@ -15,12 +15,19 @@ var Player = function ( editor ) {
 
 	var player = new APP.Player();
 
-	signals.startPlayer.add( function ( json ) {
+	window.addEventListener( 'resize', function () {
+
+		if ( player.dom === undefined ) return;
+
+		player.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+
+	} );
+
+	signals.startPlayer.add( function () {
 
 		container.setDisplay( '' );
 
-		player.load( json );
-		player.setCamera( editor.camera );
+		player.load( editor.toJSON() );
 		player.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 		player.play();
 

+ 91 - 0
editor/js/Script.js

@@ -0,0 +1,91 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Script = function ( editor ) {
+
+	var signals = editor.signals;
+
+	var container = new UI.Panel();
+	container.setId( 'script' );
+	container.setPosition( 'absolute' );
+	container.setBackgroundColor( '#272822' );
+	container.setDisplay( 'none' );
+
+	var header = new UI.Panel();
+	header.setPadding( '10px' );
+	container.add( header );
+	
+	var title = new UI.Text().setColor( '#fff' );
+	header.add( title );
+
+	var buttonSVG = ( function () {
+		var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+		svg.setAttribute( 'width', 32 );
+		svg.setAttribute( 'height', 32 );
+		var path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+		path.setAttribute( 'd', 'M 12,12 L 22,22 M 22,12 12,22' );
+		path.setAttribute( 'stroke', '#fff' );
+		svg.appendChild( path );
+		return svg;
+	} )();
+
+	var close = new UI.Element( buttonSVG );
+	close.setPosition( 'absolute' );
+	close.setTop( '3px' );
+	close.setRight( '1px' );
+	close.setCursor( 'pointer' );
+	close.onClick( function () {
+
+		container.setDisplay( 'none' );
+
+	} );
+	header.add( close );
+
+	var delay;
+	var currentScript;
+
+	var codemirror = CodeMirror( container.dom, {
+		value: '',
+		lineNumbers: true,
+		matchBrackets: true,
+		indentWithTabs: true,
+		tabSize: 4,
+		indentUnit: 4
+	} );
+	codemirror.setOption( 'theme', 'monokai' );
+	codemirror.on( 'change', function () {
+
+		clearTimeout( delay );
+		delay = setTimeout( function () {
+
+			currentScript.source = codemirror.getValue();
+
+			signals.scriptChanged.dispatch( currentScript );
+
+		}, 300 );
+
+	});
+
+	//
+	
+	signals.editorCleared.add( function () {
+
+		container.setDisplay( 'none' );
+
+	} );
+
+	signals.editScript.add( function ( object, script ) {
+
+		container.setDisplay( '' );
+
+		currentScript = script;
+
+		title.setValue( object.name + ' / ' + script.name );
+		codemirror.setValue( script.source );
+
+	} );
+
+	return container;
+
+};

+ 1 - 1
editor/js/Sidebar.Material.js

@@ -278,7 +278,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialEnvMapRow = new UI.Panel();
 	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).onChange( update );
+	var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).setColor( '#444' ).onChange( update );
 	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
 	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ) );

+ 3 - 3
editor/js/Sidebar.Object3D.js

@@ -40,7 +40,7 @@ Sidebar.Object3D = function ( editor ) {
 	// name
 
 	var objectNameRow = new UI.Panel();
-	var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( function () {
+	var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 			editor.setObjectName( editor.selected, objectName.getValue() );
 
@@ -54,7 +54,7 @@ Sidebar.Object3D = function ( editor ) {
 	// parent
 
 	var objectParentRow = new UI.Panel();
-	var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var objectParent = new UI.Select().setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
 
 	objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ) );
 	objectParentRow.add( objectParent );
@@ -200,7 +200,7 @@ Sidebar.Object3D = function ( editor ) {
 	container.add( objectVisibleRow );
 
 	// user data
-	
+
 	var timeout;
 
 	var objectUserDataRow = new UI.Panel();

+ 1 - 1
editor/js/Sidebar.Scene.js

@@ -133,7 +133,7 @@ Sidebar.Scene = function ( editor ) {
 
 		var options = [];
 
-		options.push( { value: camera.id, html: '<span class="type ' + camera.type + '"></span> ' + camera.name } );
+		// options.push( { value: camera.id, html: '<span class="type ' + camera.type + '"></span> ' + camera.name } );
 		options.push( { value: scene.id, html: '<span class="type ' + scene.type + '"></span> ' + scene.name } );
 
 		( function addObjects( objects, pad ) {

+ 0 - 46
editor/js/Sidebar.Script.Editor.js

@@ -1,46 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-Sidebar.Script.Editor = function ( editor ) {
-
-	var timeout;
-
-	var scriptSource = new UI.TextArea( 'javascript' ).setWidth( '240px' ).setHeight( '180px' ).setFontSize( '12px' );
-	scriptSource.onKeyUp( function () {
-
-		clearTimeout( timeout );
-
-		timeout = setTimeout( function () {
-
-			var object = editor.selected;
-			var source = scriptSource.getValue();
-
-			try {
-
-				var script = new Function( 'scene', 'time', source ).bind( object.clone() );
-				script( new THREE.Scene(), 0 );
-
-				scriptSource.dom.classList.add( 'success' );
-				scriptSource.dom.classList.remove( 'fail' );
-
-			} catch ( error ) {
-
-				scriptSource.dom.classList.remove( 'success' );
-				scriptSource.dom.classList.add( 'fail' );
-
-				return;
-
-			}
-
-			editor.scripts[ object.uuid ] = [ source ];
-
-			editor.signals.objectChanged.dispatch( object );
-
-		}, 500 );
-
-	} );
-
-	return scriptSource;
-
-}

+ 80 - 13
editor/js/Sidebar.Script.js

@@ -18,28 +18,92 @@ Sidebar.Script = function ( editor ) {
 	container.addStatic( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );
 	container.add( new UI.Break() );
 
-	var source = new Sidebar.Script.Editor( editor );
-	container.add( source );
+	//
 
-	signals.objectSelected.add( function ( object ) {
+	var scriptsContainer = new UI.Panel();
+	container.add( scriptsContainer );
 
-		if ( object !== null ) {
+	var newScript = new UI.Button( 'New' );
+	newScript.onClick( function () {
 
-			container.setDisplay( 'block' );
+		var script = { name: '', source: 'function update( event ) {}' };
+		editor.addScript( editor.selected, script );
+
+	} );
+	container.add( newScript );
+
+	/*
+	var loadScript = new UI.Button( 'Load' );
+	loadScript.setMarginLeft( '4px' );
+	container.add( loadScript );
+	*/
+
+	//
+
+	function update() {
+
+		scriptsContainer.clear();
+
+		var object = editor.selected;
+		var scripts = editor.scripts[ object.uuid ];
+
+		if ( scripts !== undefined ) {
+
+			for ( var i = 0; i < scripts.length; i ++ ) {
+
+				( function ( object, script ) {
+
+					var name = new UI.Input( script.name ).setWidth( '130px' ).setFontSize( '12px' );
+					name.onChange( function () {
+
+						script.name = this.getValue();
+
+						signals.scriptChanged.dispatch();
+
+					} );
+					scriptsContainer.add( name );
 
-			/*
-			var scripts = editor.scripts[ object.uuid ];
+					var edit = new UI.Button( 'Edit' );
+					edit.setMarginLeft( '4px' );
+					edit.onClick( function () {
 
-			if ( scripts !== undefined ) {
+						signals.editScript.dispatch( object, script );
 
-				scriptSource.setValue( scripts[ 0 ] );
+					} );
+					scriptsContainer.add( edit );
 
-			} else {
+					var remove = new UI.Button( 'Remove' );
+					remove.setMarginLeft( '4px' );
+					remove.onClick( function () {
 
-				scriptSource.setValue( '' );
+						if ( confirm( 'Are you sure?' ) ) {
+
+							editor.removeScript( editor.selected, script );
+
+						}
+
+					} );
+					scriptsContainer.add( remove );
+					
+					scriptsContainer.add( new UI.Break() );
+
+				} )( object, scripts[ i ] )
 
 			}
-			*/
+
+		}
+
+	}
+
+	// signals
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			container.setDisplay( 'block' );
+
+			update();
 
 		} else {
 
@@ -49,6 +113,9 @@ Sidebar.Script = function ( editor ) {
 
 	} );
 
+	signals.scriptAdded.add( update );
+	signals.scriptRemoved.add( update );
+
 	return container;
 
-}
+};

+ 27 - 17
editor/js/Viewport.js

@@ -79,16 +79,15 @@ var Viewport = function ( editor ) {
 	// object picking
 
 	var raycaster = new THREE.Raycaster();
+	var mouse = new THREE.Vector2();
 
 	// events
 
 	var getIntersects = function ( point, object ) {
 
-		var vector = new THREE.Vector3();
-		vector.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1, 0.5 );
-		vector.unproject( camera );
+		mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
 
-		raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
+		raycaster.setFromCamera( mouse, camera );
 
 		if ( object instanceof Array ) {
 
@@ -226,6 +225,12 @@ var Viewport = function ( editor ) {
 
 	// signals
 
+	signals.editorCleared.add( function () {
+
+		render();
+
+	} );
+
 	signals.themeChanged.add( function ( value ) {
 
 		switch ( value ) {
@@ -271,6 +276,7 @@ var Viewport = function ( editor ) {
 
 		renderer = createRenderer( type, antialias );
 		renderer.setClearColor( clearColor );
+		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
 		container.dom.appendChild( renderer.domElement );
@@ -323,11 +329,7 @@ var Viewport = function ( editor ) {
 
 			}
 
-			if ( object instanceof THREE.PerspectiveCamera === false ) {
-
-				transformControls.attach( object );
-
-			}
+			transformControls.attach( object );
 
 		}
 
@@ -341,7 +343,13 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	signals.geometryChanged.add( render );
+	signals.geometryChanged.add( function ( geometry ) {
+
+		selectionBox.update( editor.selected );
+
+		render();
+
+	} );
 
 	signals.objectAdded.add( function ( object ) {
 
@@ -363,19 +371,21 @@ var Viewport = function ( editor ) {
 
 		transformControls.update();
 
-		if ( object !== camera ) {
+		if ( object.geometry !== undefined ) {
 
-			if ( object.geometry !== undefined ) {
+			selectionBox.update( object );
 
-				selectionBox.update( object );
+		}
 
-			}
+		if ( object instanceof THREE.PerspectiveCamera ) {
 
-			if ( editor.helpers[ object.id ] !== undefined ) {
+			object.updateProjectionMatrix();
 
-				editor.helpers[ object.id ].update();
+		}
 
-			}
+		if ( editor.helpers[ object.id ] !== undefined ) {
+
+			editor.helpers[ object.id ].update();
 
 		}
 

+ 128 - 46
editor/js/libs/app.js

@@ -2,88 +2,170 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-var APP = {};
+var APP = {
 
-APP.Player = function () {
+	Player: function () {
 
-	var loader = new THREE.ObjectLoader();
-	var camera, scene, renderer;
-	var scripts;
-	
-	this.dom = undefined;
+		var loader = new THREE.ObjectLoader();
+		var camera, scene, renderer;
 
-	this.load = function ( json ) {
+		var scripts = {};
 
-		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		this.dom = undefined;
 
-		scene = loader.parse( json );
+		this.width = 500;
+		this.height = 500;
 
-		/*
-		scripts = [];
+		this.load = function ( json ) {
 
-		scene.traverse( function ( child ) {
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );
 
-			if ( child.script !== undefined ) {
+			camera = loader.parse( json.camera );
+			scene = loader.parse( json.scene );
 
-				var script = new Function( 'scene', 'time', child.script.source ).bind( child );
-				scripts.push( script );
+			scripts = {
+				keydown: [],
+				keyup: [],
+				mousedown: [],
+				mouseup: [],
+				mousemove: [],
+				update: []
+			};
+
+			for ( var uuid in json.scripts ) {
+
+				var object = scene.getObjectByProperty( 'uuid', uuid, true );
+
+				var sources = json.scripts[ uuid ];
+
+				for ( var i = 0; i < sources.length; i ++ ) {
+
+					var script = sources[ i ];
+
+					var events = ( new Function( 'player', 'scene', 'keydown', 'keyup', 'mousedown', 'mouseup', 'mousemove', 'update', script.source + '\nreturn { keydown: keydown, keyup: keyup, mousedown: mousedown, mouseup: mouseup, mousemove: mousemove, update: update };' ).bind( object ) )( this, scene );
+
+					for ( var name in events ) {
+
+						if ( events[ name ] === undefined ) continue;
+
+						if ( scripts[ name ] === undefined ) {
+
+							console.warn( 'APP.Player: event type not supported (', name, ')' );
+							continue;
+
+						}
+
+						scripts[ name ].push( events[ name ].bind( object ) );
+
+					}
+
+				}
 
 			}
 
-		} );
-		*/
+			this.dom = renderer.domElement;
 
-		this.dom = renderer.domElement;
+		};
 
-	};
+		this.setCamera = function ( value ) {
 
-	this.setCamera = function ( master ) {
+			camera = value;
+			camera.aspect = this.width / this.height;
+			camera.updateProjectionMatrix();
 
-		camera = master.clone();
+		};
 
-	};
+		this.setSize = function ( width, height ) {
 
-	this.setSize = function ( width, height ) {
+			this.width = width;
+			this.height = height;
 
-		renderer.setSize( width, height );
+			camera.aspect = this.width / this.height;
+			camera.updateProjectionMatrix();
 
-	};
+			renderer.setSize( width, height );
 
-	var request;
+		};
 
-	var animate = function ( time ) {
+		var dispatch = function ( array, event ) {
 
-		request = requestAnimationFrame( animate );
+			for ( var i = 0, l = array.length; i < l; i ++ ) {
 
-		/*
-		for ( var i = 0; i < scripts.length; i ++ ) {
+				array[ i ]( event );
 
-			scripts[ i ]( scene, time );
+			}
 
-		}
-		*/
+		};
 
-		renderer.render( scene, camera );
+		var request;
 
-	};
+		var animate = function ( time ) {
 
-	this.play = function () {
+			request = requestAnimationFrame( animate );
 
-		request = requestAnimationFrame( animate );
+			dispatch( scripts.update, { time: time } );
 
-	};
+			renderer.render( scene, camera );
 
-	this.stop = function () {
+		};
 
-		cancelAnimationFrame( request );
+		this.play = function () {
 
-	};
+			document.addEventListener( 'keydown', onDocumentKeyDown );
+			document.addEventListener( 'keyup', onDocumentKeyUp );
+			document.addEventListener( 'mousedown', onDocumentMouseDown );
+			document.addEventListener( 'mouseup', onDocumentMouseUp );
+			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-};
+			request = requestAnimationFrame( animate );
+
+		};
+
+		this.stop = function () {
+
+			document.removeEventListener( 'keydown', onDocumentKeyDown );
+			document.removeEventListener( 'keyup', onDocumentKeyUp );
+			document.removeEventListener( 'mousedown', onDocumentMouseDown );
+			document.removeEventListener( 'mouseup', onDocumentMouseUp );
+			document.removeEventListener( 'mousemove', onDocumentMouseMove );
+
+			cancelAnimationFrame( request );
+
+		};
+
+		//
+
+		var onDocumentKeyDown = function ( event ) {
+
+			dispatch( scripts.keydown, event );
+
+		};
+
+		var onDocumentKeyUp = function ( event ) {
+
+			dispatch( scripts.keyup, event );
+
+		};
+
+		var onDocumentMouseDown = function ( event ) {
+
+			dispatch( scripts.mousedown, event );
+
+		};
+
+		var onDocumentMouseUp = function ( event ) {
+
+			dispatch( scripts.mouseup, event );
+
+		};
+
+		var onDocumentMouseMove = function ( event ) {
+
+			dispatch( scripts.mousemove, event );
 
-APP.Script = function ( source ) {
+		};
 
-	this.uuid = THREE.Math.generateUUID();
-	this.source = source;
+	}
 
 };

+ 22 - 14
editor/js/libs/codemirror/codemirror.css

@@ -5,10 +5,6 @@
   font-family: monospace;
   height: 300px;
 }
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
-}
 
 /* PADDING */
 
@@ -52,11 +48,15 @@
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
   width: auto;
   border: 0;
   background: #7e7;
 }
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
 .cm-animate-fat-cursor {
   width: auto;
   border: 0;
@@ -83,7 +83,7 @@
 /* Can style cursor different in overwrite (non-insert) mode */
 div.CodeMirror-overwrite div.CodeMirror-cursor {}
 
-.cm-tab { display: inline-block; }
+.cm-tab { display: inline-block; text-decoration: inherit; }
 
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
@@ -121,6 +121,7 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 .cm-header, .cm-strong {font-weight: bold;}
 .cm-em {font-style: italic;}
 .cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
 
 .cm-s-default .cm-error {color: #f00;}
 .cm-invalidchar {color: #f00;}
@@ -146,6 +147,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 
 .CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px; margin-right: -30px;
@@ -190,7 +192,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
   z-index: 3;
 }
 .CodeMirror-gutter {
@@ -198,13 +199,17 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   height: 100%;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
   display: inline-block;
+  margin-bottom: -30px;
   /* Hack to make IE7 behave */
   *zoom:1;
   *display:inline;
 }
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  height: 100%;
+}
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
@@ -213,6 +218,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-lines {
   cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
 }
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
@@ -250,10 +256,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
-}
-
 .CodeMirror-measure {
   position: absolute;
   width: 100%;
@@ -272,7 +274,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
-  z-index: 1;
+  z-index: 3;
 }
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
@@ -299,3 +301,9 @@ div.CodeMirror-cursors {
     visibility: hidden;
   }
 }
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

File diff suppressed because it is too large
+ 344 - 229
editor/js/libs/codemirror/codemirror.js


+ 8 - 8
editor/js/libs/codemirror/modes/javascript.js → editor/js/libs/codemirror/mode/javascript.js

@@ -19,7 +19,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   var jsonldMode = parserConfig.jsonld;
   var jsonMode = parserConfig.json || jsonldMode;
   var isTS = parserConfig.typescript;
-  var wordRE = parserConfig.wordCharacters || /[\w$]/;
+  var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
 
   // Tokenizer
 
@@ -205,6 +205,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
         ++depth;
       } else if (wordRE.test(ch)) {
         sawSomething = true;
+      } else if (/["'\/]/.test(ch)) {
+        return;
       } else if (sawSomething && !depth) {
         ++pos;
         break;
@@ -391,7 +393,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function maybeoperatorNoComma(type, value, noComma) {
     var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
     var expr = noComma == false ? expression : expressionNoComma;
-    if (value == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
+    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
     if (type == "operator") {
       if (/\+\+|--/.test(value)) return cont(me);
       if (value == "?") return cont(expression, expect(":"), expr);
@@ -417,13 +419,11 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   }
   function arrowBody(type) {
     findFatArrow(cx.stream, cx.state);
-    if (type == "{") return pass(statement);
-    return pass(expression);
+    return pass(type == "{" ? statement : expression);
   }
   function arrowBodyNoComma(type) {
     findFatArrow(cx.stream, cx.state);
-    if (type == "{") return pass(statement);
-    return pass(expressionNoComma);
+    return pass(type == "{" ? statement : expressionNoComma);
   }
   function maybelabel(type) {
     if (type == ":") return cont(poplex, statement);
@@ -592,7 +592,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   }
   function maybeArrayComprehension(type) {
     if (type == "for") return pass(comprehension, expect("]"));
-    if (type == ",") return cont(commasep(expressionNoComma, "]"));
+    if (type == ",") return cont(commasep(maybeexpressionNoComma, "]"));
     return pass(commasep(expressionNoComma, "]"));
   }
   function comprehension(type) {
@@ -658,7 +658,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       else return lexical.indented + (closing ? 0 : indentUnit);
     },
 
-    electricChars: ":{}",
+    electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
     blockCommentStart: jsonMode ? null : "/*",
     blockCommentEnd: jsonMode ? null : "*/",
     lineComment: jsonMode ? null : "//",

+ 31 - 0
editor/js/libs/codemirror/theme/monokai.css

@@ -0,0 +1,31 @@
+/* Based on Sublime Text's Monokai theme */
+
+.cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
+.cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
+.cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
+.cm-s-monokai .CodeMirror-guttermarker { color: white; }
+.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
+.cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
+
+.cm-s-monokai span.cm-comment {color: #75715e;}
+.cm-s-monokai span.cm-atom {color: #ae81ff;}
+.cm-s-monokai span.cm-number {color: #ae81ff;}
+
+.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
+.cm-s-monokai span.cm-keyword {color: #f92672;}
+.cm-s-monokai span.cm-string {color: #e6db74;}
+
+.cm-s-monokai span.cm-variable {color: #a6e22e;}
+.cm-s-monokai span.cm-variable-2 {color: #9effff;}
+.cm-s-monokai span.cm-def {color: #fd971f;}
+.cm-s-monokai span.cm-bracket {color: #f8f8f2;}
+.cm-s-monokai span.cm-tag {color: #f92672;}
+.cm-s-monokai span.cm-link {color: #ae81ff;}
+.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
+
+.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
+.cm-s-monokai .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

File diff suppressed because it is too large
+ 11 - 0
editor/js/libs/jszip.min.js


+ 0 - 75
editor/js/libs/ui.editor.js

@@ -1,75 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-UI.CodeEditor = function ( mode ) {
-
-	UI.Element.call( this );
-
-	var scope = this;
-
-	var dom = document.createElement( 'div' );
-	dom.className = 'CodeEditor';
-
-	var editor = CodeMirror( dom, { mode: mode, indentWithTabs: true, lineWrapping: true, matchBrackets: true } );
-	editor.onKeyUp( 'keyup', function () {
-
-		if ( scope.onKeyUpCallback !== undefined ) {
-
-			scope.onKeyUpCallback();
-
-		}
-
-	});
-
-	this.dom = dom;
-	this.editor = editor;
-
-	return this;
-
-};
-
-UI.CodeEditor.prototype = Object.create( UI.Element.prototype );
-UI.CodeEditor.prototype.constructor = UI.CodeEditor;
-
-UI.CodeEditor.prototype.setWidth = function ( value ) {
-
-	UI.Element.prototype.setWidth.call( this, value );
-
-	this.editor.setSize( this.dom.style.width, this.dom.style.height );
-
-	return this;
-
-};
-
-UI.CodeEditor.prototype.setHeight = function ( value ) {
-
-	UI.Element.prototype.setHeight.call( this, value );
-
-	this.editor.setSize( this.dom.style.width, this.dom.style.height );
-
-	return this;
-
-};
-
-UI.CodeEditor.prototype.getValue = function () {
-
-	return this.editor.getValue();
-
-};
-
-UI.CodeEditor.prototype.setValue = function ( value ) {
-
-	this.editor.setValue( value );
-
-	return this;
-
-};
-
-UI.CodeEditor.prototype.onKeyUp = function ( callback ) {
-
-	this.onKeyUpCallback = callback;
-
-	return this;
-
-};

+ 14 - 3
editor/js/libs/ui.js

@@ -4,7 +4,11 @@
 
 var UI = {};
 
-UI.Element = function () {};
+UI.Element = function ( dom ) {
+
+	this.dom = dom;
+
+};
 
 UI.Element.prototype = {
 
@@ -56,7 +60,7 @@ UI.Element.prototype = {
 
 var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
 'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
-'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor' ];
+'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
 
 properties.forEach( function ( property ) {
 
@@ -307,6 +311,12 @@ UI.Text = function ( text ) {
 UI.Text.prototype = Object.create( UI.Element.prototype );
 UI.Text.prototype.constructor = UI.Text;
 
+UI.Text.prototype.getValue = function () {
+
+	return this.dom.textContent;
+
+};
+
 UI.Text.prototype.setValue = function ( value ) {
 
 	if ( value !== undefined ) {
@@ -322,7 +332,7 @@ UI.Text.prototype.setValue = function ( value ) {
 
 // Input
 
-UI.Input = function () {
+UI.Input = function ( text ) {
 
 	UI.Element.call( this );
 
@@ -340,6 +350,7 @@ UI.Input = function () {
 	}, false );
 
 	this.dom = dom;
+	this.setValue( text );
 
 	return this;
 

+ 2 - 137
editor/js/libs/ui.three.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-UI.Texture = function () {
+UI.Texture = function ( mapping ) {
 
 	UI.Element.call( this );
 
@@ -54,7 +54,7 @@ UI.Texture = function () {
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function( event ) {
 
-					var texture = new THREE.Texture( this );
+					var texture = new THREE.Texture( this, mapping );
 					texture.sourceFile = file.name;
 					texture.needsUpdate = true;
 
@@ -133,138 +133,3 @@ UI.Texture.prototype.onChange = function ( callback ) {
 	return this;
 
 };
-
-
-//
-
-UI.CubeTexture = function () {
-
-	UI.Element.call( this );
-
-	var scope = this;
-
-	var dom = document.createElement( 'span' );
-
-	var input = document.createElement( 'input' );
-	input.type = 'file';
-	input.addEventListener( 'change', function ( event ) {
-
-		loadFile( event.target.files[ 0 ] );
-
-	}, false );
-
-	var canvas = document.createElement( 'canvas' );
-	canvas.width = 32;
-	canvas.height = 16;
-	canvas.style.cursor = 'pointer';
-	canvas.style.marginRight = '5px';
-	canvas.style.border = '1px solid #888';
-	canvas.addEventListener( 'click', function ( event ) {
-
-		input.click();
-
-	}, false );
-	canvas.addEventListener( 'drop', function ( event ) {
-
-		event.preventDefault();
-		event.stopPropagation();
-		loadFile( event.dataTransfer.files[ 0 ] );
-
-	}, false );
-	dom.appendChild( canvas );
-
-	var name = document.createElement( 'input' );
-	name.disabled = true;
-	name.style.width = '64px';
-	name.style.border = '1px solid #ccc';
-	dom.appendChild( name );
-
-	var loadFile = function ( file ) {
-
-		if ( file.type.match( 'image.*' ) ) {
-
-			var reader = new FileReader();
-			reader.addEventListener( 'load', function ( event ) {
-
-				var image = document.createElement( 'img' );
-				image.addEventListener( 'load', function( event ) {
-
-					var array = [ this, this, this, this, this, this ];
-
-					var texture = new THREE.Texture( array, new THREE.CubeReflectionMapping() );
-					texture.sourceFile = file.name;
-					texture.needsUpdate = true;
-
-					scope.setValue( texture );
-
-					if ( scope.onChangeCallback ) scope.onChangeCallback();
-
-				}, false );
-				image.src = event.target.result;
-
-			}, false );
-			reader.readAsDataURL( file );
-
-		}
-
-	};
-
-	this.dom = dom;
-	this.texture = null;
-	this.onChangeCallback = null;
-
-	return this;
-
-};
-
-UI.CubeTexture.prototype = Object.create( UI.Element.prototype );
-UI.CubeTexture.prototype.constructor = UI.CubeTexture;
-
-UI.CubeTexture.prototype.getValue = function () {
-
-	return this.texture;
-
-};
-
-UI.CubeTexture.prototype.setValue = function ( texture ) {
-
-	var canvas = this.dom.children[ 0 ];
-	var name = this.dom.children[ 1 ];
-	var context = canvas.getContext( '2d' );
-
-	if ( texture !== null ) {
-
-		var image = texture.image[ 0 ];
-
-		if ( image !== undefined && image.width > 0 ) {
-
-			name.value = texture.sourceFile;
-
-			var scale = canvas.width / image.width;
-			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
-
-		} else {
-
-			name.value = texture.sourceFile + ' (error)';
-			context.clearRect( 0, 0, canvas.width, canvas.height );
-
-		}
-
-	} else {
-
-		name.value = '';
-		context.clearRect( 0, 0, canvas.width, canvas.height );
-
-	}
-
-	this.texture = texture;
-
-};
-
-UI.CubeTexture.prototype.onChange = function ( callback ) {
-
-	this.onChangeCallback = callback;
-
-	return this;
-
-};

+ 1 - 0
examples/canvas_ascii_effect.html

@@ -82,6 +82,7 @@
 				scene.add( plane );
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( width, height );
 				// container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/canvas_camera_orthographic.html

@@ -111,8 +111,8 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

+ 1 - 1
examples/canvas_camera_orthographic2.html

@@ -180,8 +180,8 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

+ 1 - 0
examples/canvas_effects_stereo.html

@@ -78,6 +78,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xffffff );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 

+ 1 - 0
examples/canvas_geometry_birds.html

@@ -370,6 +370,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xffffff );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

+ 1 - 1
examples/canvas_geometry_cube.html

@@ -91,8 +91,8 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

+ 1 - 1
examples/canvas_geometry_earth.html

@@ -113,8 +113,8 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xffffff );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

+ 1 - 0
examples/canvas_geometry_hierarchy.html

@@ -74,6 +74,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xffffff );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 

+ 1 - 0
examples/canvas_geometry_nurbs.html

@@ -129,6 +129,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/canvas_geometry_panorama.html

@@ -86,8 +86,8 @@
 				scene.add( mesh );
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );

+ 1 - 1
examples/canvas_geometry_panorama_fisheye.html

@@ -95,8 +95,8 @@
 				}
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );

+ 1 - 0
examples/canvas_geometry_shapes.html

@@ -292,6 +292,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortElements = false;
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_geometry_terrain.html

@@ -91,6 +91,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xbfd1e5 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";

+ 1 - 1
examples/canvas_geometry_text.html

@@ -107,8 +107,8 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

+ 17 - 5
examples/canvas_interactive_cubes.html

@@ -29,6 +29,7 @@
 			var particleMaterial;
 
 			var raycaster;
+			var mouse;
 
 			var objects = [];
 
@@ -93,11 +94,12 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -106,6 +108,7 @@
 				container.appendChild( stats.domElement );
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				//
 
@@ -121,16 +124,25 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
+			
+			function onDocumentTouchStart( event ) {
+				
+				event.preventDefault();
+				
+				event.clientX = event.touches[0].clientX;
+				event.clientY = event.touches[0].clientY;
+				onDocumentMouseDown( event );
+
+			}	
 
 			function onDocumentMouseDown( event ) {
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3();
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 

+ 17 - 5
examples/canvas_interactive_cubes_tween.html

@@ -29,6 +29,7 @@
 			var camera, scene, renderer;
 			
 			var raycaster;
+			var mouse;
 
 			init();
 			animate();
@@ -73,11 +74,12 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild(renderer.domElement);
 
 				stats = new Stats();
@@ -86,6 +88,7 @@
 				container.appendChild( stats.domElement );
 
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				//
 
@@ -101,16 +104,25 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
+			
+			function onDocumentTouchStart( event ) {
+				
+				event.preventDefault();
+				
+				event.clientX = event.touches[0].clientX;
+				event.clientY = event.touches[0].clientY;
+				onDocumentMouseDown( event );
+
+			}	
 
 			function onDocumentMouseDown( event ) {
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3();
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

+ 6 - 5
examples/canvas_interactive_particles.html

@@ -28,6 +28,7 @@
 			var camera, scene, renderer;
 
 			var raycaster;
+			var mouse;
 
 			var PI2 = Math.PI * 2;
 
@@ -48,7 +49,7 @@
 
 			}
 
-			var mouse = { x: 0, y: 0 }, INTERSECTED;
+			var INTERSECTED;
 
 			init();
 			animate();
@@ -85,9 +86,11 @@
 				//
 				
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
@@ -147,13 +150,11 @@
 				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
-				// find intersections
-
 				camera.updateMatrixWorld();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
+				// find intersections
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( scene.children );
 

+ 6 - 5
examples/canvas_interactive_voxelpainter.html

@@ -26,7 +26,7 @@
 			var camera, scene, renderer;
 			var plane;
 
-			var vector, raycaster, isShiftDown = false;
+			var mouse, raycaster, isShiftDown = false;
 
 			var cubeGeometry = new THREE.BoxGeometry( 50, 50, 50 );
 			var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
@@ -78,8 +78,8 @@
 
 				//
 
-				vector = new THREE.Vector3();
 				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
 
 				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
 				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
@@ -113,6 +113,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild(renderer.domElement);
 
@@ -141,10 +142,10 @@
 
 				event.preventDefault();
 
-				vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
-				vector.unproject( camera );
+				mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+				mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
 
-				raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 

+ 1 - 0
examples/canvas_lights_pointlights.html

@@ -100,6 +100,7 @@
 				} );
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 

+ 1 - 0
examples/canvas_lines.html

@@ -53,6 +53,7 @@
 				scene = new THREE.Scene();
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 

+ 2 - 3
examples/canvas_lines_colors.html

@@ -80,10 +80,9 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer( { antialias: false } );
-				renderer.setClearColor( 0x000000, 1 );
+				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				var geometry3 = new THREE.Geometry(),

+ 2 - 3
examples/canvas_lines_colors_2d.html

@@ -80,10 +80,9 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.CanvasRenderer( { antialias: false } );
-				renderer.setClearColor( 0x000000, 1 );
+				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
 				container.appendChild( renderer.domElement );
 
 				var geometry3 = new THREE.Geometry(),

+ 2 - 1
examples/canvas_lines_dashed.html

@@ -99,7 +99,8 @@
 				scene.add( object );
 
 				renderer = new THREE.CanvasRenderer();
-				renderer.setClearColor( 0x111111, 1 );
+				renderer.setClearColor( 0x111111 );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
 				var container = document.getElementById( 'container' );

+ 1 - 0
examples/canvas_lines_sphere.html

@@ -56,6 +56,7 @@
 				scene = new THREE.Scene();
 
 				renderer = new THREE.CanvasRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
 

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