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

.github/ISSUE_TEMPLATE.md

@@ -6,7 +6,7 @@
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r82
+- [ ] r84
 - [ ] ...
 
 ##### Browser

.gitignore

@@ -3,4 +3,6 @@
 .project
 node_modules
 .idea/
+.vscode/
 npm-debug.log
+

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright © 2010-2016 three.js authors
+Copyright © 2010-2017 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

bower.json

@@ -0,0 +1,26 @@
+{
+	"name": "three.js",
+	"homepage": "http://threejs.org/",
+	"description": "JavaScript 3D library",
+	"main": "build/three.js",
+	"keywords": [
+		"three",
+		"threejs",
+		"three.js",
+		"3D",
+		"webgl"
+	],
+	"license": "MIT",
+	"ignore": [
+		"**/.*",
+		"*.md",
+		"/docs",
+		"/editor",
+		"/examples/*",
+		"!/examples/js",
+		"/src",
+		"/test",
+		"/utils",
+		"/LICENSE"
+	]
+}

docs/api/Polyfills.html

@@ -41,6 +41,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/polyfills.js src/polyfills.js]
 	</body>
 </html>

docs/api/animation/AnimationUtils.html

@@ -18,12 +18,12 @@
 
     <h3>[method:Array arraySlice]( array, from, to )</h3>
     <div>
-    Convert an array to a specific type.
+    This is the same as  Array.prototype.slice, but also works on typed arrays.
     </div>
 
     <h3>[method:Array convertArray]( array, type, forceClone )</h3>
     <div>
-    This is the same as  Array.prototype.slice, but also works on typed arrays.
+    Convert an array to a specific type.
     </div>
 
     <h3>[method:Boolean isTypedArray]( object )</h3>

docs/api/audio/AudioListener.html

@@ -93,7 +93,7 @@
 		Return the volume.
 		</div>
 
-		<h3>[method:null getMasterVolume]( [page:Number value] )</h3>
+		<h3>[method:null setMasterVolume]( [page:Number value] )</h3>
 		<div>
 		Set the volume.
 		</div>

docs/api/extras/SceneUtils.html

@@ -16,14 +16,14 @@
 		<h2>Methods</h2>
 
 
-		<h3>[method:Object3D createMultiMaterialObject]( [page:Geometry geometry], [page:Array materials] )</h3>
+		<h3>[method:Group createMultiMaterialObject]( [page:Geometry geometry], [page:Array materials] )</h3>
 		<div>
-		geometry -- The geometry for the Object. <br />
+		geometry -- The geometry for the set of materials. <br />
 		materials -- The materials for the object.
 		</div>
 		<div>
-		Creates an new Object3D an new mesh for each material defined in materials. Beware that this is not the same as MultiMaterial which defines multiple material for 1 mesh.<br />
-		This is mostly useful for object that need a material and a wireframe implementation.
+		Creates a new Group that contains a new mesh for each material defined in materials. Beware that this is not the same as MultiMaterial which defines multiple material for 1 mesh.<br />
+		This is mostly useful for objects that need both a material and a wireframe implementation.
 		</div>
 
 		<h3>[method:null attach]( [page:Object3D child], [page:Object3D scene], [page:Object3D parent] )</h3>

docs/api/extras/core/Path.html

@@ -92,7 +92,7 @@ var path = new THREE.Path(vectors);
 
 
 		<h3>[method:null bezierCurveTo]( [page:Float cp1X], [page:Float cp1Y], [page:Float cp2X], [page:Float cp2Y], [page:Float x], [page:Float y] )</h3>
-		<div>This creates a bezier curve from [page:.currentPoint] with cp1X, cp1Y and cp1X, cp1Y as control points and updates [page:.currentPoint] to x and y.</div>
+		<div>This creates a bezier curve from [page:.currentPoint] with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates [page:.currentPoint] to x and y.</div>
 
 		<h3>[method:null fromPoints]( [page:Array vector2s] )</h3>
 		<div>

docs/api/extras/core/ShapePath.html

@@ -86,6 +86,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/Path.js src/extras/core/Path.js]
 	</body>
 </html>

docs/api/geometries/BoxBufferGeometry.html

@@ -67,6 +67,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/BoxGeometry.js src/geometries/BoxGeometry.js]
 	</body>
 </html>

docs/api/geometries/CircleBufferGeometry.html

@@ -53,6 +53,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/CircleGeometry.js src/geometries/CircleGeometry.js]
 	</body>
 </html>

docs/api/geometries/ConeBufferGeometry.html

@@ -61,6 +61,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/ConeGeometry.js src/geometries/ConeGeometry.js]
 	</body>
 </html>

docs/api/geometries/CylinderBufferGeometry.html

@@ -62,6 +62,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/CylinderGeometry.js src/geometries/CylinderGeometry.js]
 	</body>
 </html>

docs/api/geometries/DodecahedronBufferGeometry.html

@@ -49,6 +49,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/DodecahedronGeometry.js src/geometries/DodecahedronGeometry.js]
 	</body>
 </html>

docs/api/geometries/ExtrudeGeometry.html

@@ -1,145 +1,145 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		[page:Geometry] &rarr;
-
-		<h1>[name]</h1>
-
-		<div class="desc">Creates extruded geometry from a path shape.</div>
-
-		<iframe id="scene" src="scenes/geometry-browser.html#ExtrudeGeometry"></iframe>
-
-		<script>
-
-		// iOS iframe auto-resize workaround
-
-		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
-
-			var scene = document.getElementById( 'scene' );
-
-			scene.style.width = getComputedStyle( scene ).width;
-			scene.style.height = getComputedStyle( scene ).height;
-			scene.setAttribute( 'scrolling', 'no' );
-
-		}
-
-		</script>
-
-		<h2>Example</h2>
-
-
-		<code>
-		var length = 12, width = 8;
-
-		var shape = new THREE.Shape();
-		shape.moveTo( 0,0 );
-		shape.lineTo( 0, width );
-		shape.lineTo( length, width );
-		shape.lineTo( length, 0 );
-		shape.lineTo( 0, 0 );
-
-		var extrudeSettings = {
-			steps: 2,
-			amount: 16,
-			bevelEnabled: true,
-			bevelThickness: 1,
-			bevelSize: 1,
-			bevelSegments: 1
-		};
-
-		var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
-		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		var mesh = new THREE.Mesh( geometry, material ) ;
-		scene.add( mesh );
-		</code>
-
-
-		<h2>Constructor</h2>
-
-
-		<h3>[name]([page:Array shapes], [page:Object options])</h3>
-		<div>
-		shapes — Shape or an array of shapes. <br />
-		options — Object that can contain the following parameters.
-
-			<ul>
-				<li>curveSegments —  int. number of points on the curves</li>
-				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-				<li>amount —  int. Depth to extrude the shape</li>
-				<li>bevelEnabled —  bool. turn on bevel</li>
-				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-				<li>bevelSize —  float. how far from shape outline is bevel</li>
-				<li>bevelSegments —  int. number of bevel layers</li>
-				<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if frames aren't defined)</li>
-				<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
-				<li>material —  int. material index for front and back faces</li>
-				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-				<li>UVGenerator —  Object. object that provides UV generator functions</li>
-			</ul>
-
-		</div>
-		<div>
-		This object extrudes an 2D shape to an 3D geometry.
-		</div>
-
-
-		<h2>Properties</h2>
-
-
-		<h2>Methods</h2>
-
-		<h3>[method:null addShapeList]([page:Array shapes], [page:Object options])</h3>
-		<div>
-			shapes — An Array of shapes to add. <br />
-			options — Object that can contain the following parameters.
-			<ul>
-				<li>curveSegments —  int. number of points on the curves</li>
-				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-				<li>amount —  int. Depth to extrude the shape</li>
-				<li>bevelEnabled —  bool. turn on bevel</li>
-				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-				<li>bevelSize —  float. how far from shape outline is bevel</li>
-				<li>bevelSegments —  int. number of bevel layers</li>
-				<li>extrudePath —  THREE.Curve. curve to extrude shape along</li>
-				<li>frames —  Object.  containing arrays of tangents, normals, binormals</li>
-				<li>material —  int. material index for front and back faces</li>
-				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-				<li>UVGenerator —  Object. object that provides UV generator functions</li>
-			</ul>
-		</div>
-		<div>Adds the shapes to the list to extrude.</div>
-
-		<h3>[method:null addShape]([page:Shape shape], [page:Object options])</h3>
-		<div>
-			shape — A shape to add. <br />
-			options — Object that can contain the following parameters.
-			<ul>
-				<li>curveSegments —  int. number of points on the curves</li>
-				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-				<li>amount —  int. Depth to extrude the shape</li>
-				<li>bevelEnabled —  bool. turn on bevel</li>
-				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-				<li>bevelSize —  float. how far from shape outline is bevel</li>
-				<li>bevelSegments —  int. number of bevel layers</li>
-				<li>extrudePath —  THREE.Curve. curve to extrude shape along</li>
-				<li>frames —  Object.  containing arrays of tangents, normals, binormals</li>
-				<li>material —  int. material index for front and back faces</li>
-				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-				<li>UVGenerator —  Object. object that provides UV generator functions</li>
-			</ul>
-		</div>
-		<div>Add the shape to the list to extrude.</div>
-
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Geometry] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">Creates extruded geometry from a path shape.</div>
+
+		<iframe id="scene" src="scenes/geometry-browser.html#ExtrudeGeometry"></iframe>
+
+		<script>
+
+		// iOS iframe auto-resize workaround
+
+		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
+
+			var scene = document.getElementById( 'scene' );
+
+			scene.style.width = getComputedStyle( scene ).width;
+			scene.style.height = getComputedStyle( scene ).height;
+			scene.setAttribute( 'scrolling', 'no' );
+
+		}
+
+		</script>
+
+		<h2>Example</h2>
+
+
+		<code>
+		var length = 12, width = 8;
+
+		var shape = new THREE.Shape();
+		shape.moveTo( 0,0 );
+		shape.lineTo( 0, width );
+		shape.lineTo( length, width );
+		shape.lineTo( length, 0 );
+		shape.lineTo( 0, 0 );
+
+		var extrudeSettings = {
+			steps: 2,
+			amount: 16,
+			bevelEnabled: true,
+			bevelThickness: 1,
+			bevelSize: 1,
+			bevelSegments: 1
+		};
+
+		var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var mesh = new THREE.Mesh( geometry, material ) ;
+		scene.add( mesh );
+		</code>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([page:Array shapes], [page:Object options])</h3>
+		<div>
+		shapes — Shape or an array of shapes. <br />
+		options — Object that can contain the following parameters.
+
+			<ul>
+				<li>curveSegments — int. Number of points on the curves. Default is 12.</li>
+				<li>steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.</li>
+				<li>amount — int. Depth to extrude the shape. Default is 100.</li>
+				<li>bevelEnabled — bool. Apply beveling to the shape. Default is true.</li>
+				<li>bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.</li>
+				<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
+				<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
+				<li>extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded (creates Frames if frames aren't defined).</li>
+				<li>frames — An instance of THREE.TubeGeometry.FrenetFrames containing arrays of tangents, normals, binormals for each step along the extrudePath. </li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
+
+		</div>
+		<div>
+			This object extrudes a 2D shape to a 3D geometry.
+		</div>
+
+		<div>
+			When creating a Mesh with this geometry, if you'd like to have a separate material used for its face 
+			and its extruded sides, you can use an instance of THREE.MultiMaterial. The first material will be 
+			applied to the face; the second material will be applied to the sides.
+		</div>
+
+
+		<h2>Properties</h2>
+
+
+		<h2>Methods</h2>
+
+		<h3>[method:null addShapeList]([page:Array shapes], [page:Object options])</h3>
+		<div>
+			shapes — An Array of shapes to add. <br />
+			options — Object that can contain the following parameters.
+			<ul>
+				<li>curveSegments — int. Number of points on the curves. Default is 12.</li>
+				<li>steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.</li>
+				<li>amount — int. Depth to extrude the shape. Default is 100.</li>
+				<li>bevelEnabled — bool. Apply beveling to the shape. Default is true.</li>
+				<li>bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.</li>
+				<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
+				<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
+				<li>extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded (creates Frames if frames aren't defined).</li>
+				<li>frames — An instance of THREE.TubeGeometry.FrenetFrames containing arrays of tangents, normals, binormals for each step along the extrudePath. </li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
+		</div>
+		<div>Adds the shapes to the list to extrude.</div>
+
+		<h3>[method:null addShape]([page:Shape shape], [page:Object options])</h3>
+		<div>
+			shape — A shape to add. <br />
+			options — Object that can contain the following parameters.
+			<ul>
+				<li>curveSegments — int. Number of points on the curves. Default is 12.</li>
+				<li>steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.</li>
+				<li>amount — int. Depth to extrude the shape. Default is 100.</li>
+				<li>bevelEnabled — bool. Apply beveling to the shape. Default is true.</li>
+				<li>bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.</li>
+				<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
+				<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
+				<li>extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded (creates Frames if frames aren't defined).</li>
+				<li>frames — An instance of THREE.TubeGeometry.FrenetFrames containing arrays of tangents, normals, binormals for each step along the extrudePath. </li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
+		</div>
+		<div>Add the shape to the list to extrude.</div>
+
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

docs/api/geometries/IcosahedronBufferGeometry.html

@@ -48,6 +48,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/IcosahedronGeometry.js src/geometries/IcosahedronGeometry.js]
 	</body>
 </html>

docs/api/geometries/LatheBufferGeometry.html

@@ -60,6 +60,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/LatheGeometry.js src/geometries/LatheGeometry.js]
 	</body>
 </html>

docs/api/geometries/OctahedronBufferGeometry.html

@@ -48,6 +48,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/OctahedronGeometry.js src/geometries/OctahedronGeometry.js]
 	</body>
 </html>

docs/api/geometries/ParametricBufferGeometry.html

@@ -55,6 +55,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/ParametricGeometry.js src/geometries/ParametricGeometry.js]
 	</body>
 </html>

docs/api/geometries/PlaneBufferGeometry.html

@@ -58,6 +58,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/PlaneGeometry.js src/geometries/PlaneGeometry.js]
 	</body>
 </html>

docs/api/geometries/PolyhedronBufferGeometry.html

@@ -59,6 +59,6 @@ var geometry = new THREE.PolyhedronBufferGeometry( verticesOfCube, indicesOfFace
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/PolyhedronGeometry.js src/geometries/PolyhedronGeometry.js]
 	</body>
 </html>

docs/api/geometries/RingBufferGeometry.html

@@ -54,6 +54,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/RingGeometry.js src/geometries/RingGeometry.js]
 	</body>
 </html>

docs/api/geometries/ShapeBufferGeometry.html

@@ -66,6 +66,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/ShapeGeometry.js src/geometries/ShapeGeometry.js]
 	</body>
 </html>

docs/api/geometries/SphereBufferGeometry.html

@@ -66,6 +66,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/SphereGeometry.js src/geometries/SphereGeometry.js]
 	</body>
 </html>

docs/api/geometries/TetrahedronBufferGeometry.html

@@ -49,6 +49,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TetrahedronGeometry.js src/geometries/TetrahedronGeometry.js]
 	</body>
 </html>

docs/api/geometries/TextGeometry.html

@@ -1,138 +1,139 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
 		<meta charset="utf-8" />
-		<base href="../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		[page:ExtrudeGeometry] &rarr;
-
-		<h1>[name]</h1>
-
-		<div class="desc">This object creates a 3D object of text as a single object.</div>
-
-		<iframe id="scene" src="scenes/geometry-browser.html#TextGeometry"></iframe>
-
-		<script>
-
-		// iOS iframe auto-resize workaround
-
-		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
-
-			var scene = document.getElementById( 'scene' );
-
-			scene.style.width = getComputedStyle( scene ).width;
-			scene.style.height = getComputedStyle( scene ).height;
-			scene.setAttribute( 'scrolling', 'no' );
-
-		}
-
-		</script>
-
-		<h2>Example</h2>
-
-		<div>
-		[example:webgl_geometry_text geometry / text ]<br/>
-		[example:webgl_geometry_text2 geometry / text2 ]
-		</div>
-
-		<h2>Constructor</h2>
-
-		<h3>[name]([page:String text], [page:Object parameters])</h3>
-		<div>
-		text — The text that needs to be shown. <br />
-		parameters — Object that can contains the following parameters.
-		<ul>
-			<li>font — THREE.Font.</li>
-			<li>size — Float. Size of the text.</li>
-			<li>height — Float. Thickness to extrude text.  Default is 50.</li>
-			<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
-			<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
-			<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
-			<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
-		</ul>
-		</div>
-
-		<h2>Available Fonts</h2>
-
-		<div>
-		TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
-		Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
-		</div>
-		<table>
-			<tr>
-				<th>Font</th>
-				<th>Weight</th>
-				<th>Style</th>
-				<th>File Path</th>
-			</tr>
-			<tr>
-				<td>helvetiker</td>
-				<td>normal</td>
-				<td>normal</td>
-				<td>/examples/fonts/helvetiker_regular.typeface.json</td>
-			</tr>
-			<tr>
-				<td>helvetiker</td>
-				<td>bold</td>
-				<td>normal</td>
-				<td>/examples/fonts/helvetiker_bold.typeface.json</td>
-			</tr>
-			<tr>
-				<td>optimer</td>
-				<td>normal</td>
-				<td>normal</td>
-				<td>/examples/fonts/optimer_regular.typeface.json</td>
-			</tr>
-			<tr>
-				<td>optimer</td>
-				<td>bold</td>
-				<td>normal</td>
-				<td>/examples/fonts/optimer_bold.typeface.json</td>
-			</tr>
-			<tr>
-				<td>gentilis</td>
-				<td>normal</td>
-				<td>normal</td>
-				<td>/examples/fonts/gentilis_regular.typeface.json</td>
-			</tr>
-			<tr>
-				<td>gentilis</td>
-				<td>bold</td>
-				<td>normal</td>
-				<td>/examples/fonts/gentilis_bold.typeface.json</td>
-			</tr>
-			<tr>
-				<td>droid sans</td>
-				<td>normal</td>
-				<td>normal</td>
-				<td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
-			</tr>
-			<tr>
-				<td>droid sans</td>
-				<td>bold</td>
-				<td>normal</td>
-				<td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
-			</tr>
-			<tr>
-				<td>droid serif</td>
-				<td>normal</td>
-				<td>normal</td>
-				<td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
-			</tr>
-			<tr>
-				<td>droid serif</td>
-				<td>bold</td>
-				<td>normal</td>
-				<td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
-			</tr>
-		</table>
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:ExtrudeGeometry] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">This object creates a 3D object of text as a single object.</div>
+
+		<iframe id="scene" src="scenes/geometry-browser.html#TextGeometry"></iframe>
+
+		<script>
+
+		// iOS iframe auto-resize workaround
+
+		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
+
+			var scene = document.getElementById( 'scene' );
+
+			scene.style.width = getComputedStyle( scene ).width;
+			scene.style.height = getComputedStyle( scene ).height;
+			scene.setAttribute( 'scrolling', 'no' );
+
+		}
+
+		</script>
+
+		<h2>Example</h2>
+
+		<div>
+		[example:webgl_geometry_text geometry / text ]<br/>
+		[example:webgl_geometry_text2 geometry / text2 ]
+		</div>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]([page:String text], [page:Object parameters])</h3>
+		<div>
+		text — The text that needs to be shown. <br />
+		parameters — Object that can contains the following parameters.
+		<ul>
+			<li>font — THREE.Font.</li>
+			<li>size — Float. Size of the text.</li>
+			<li>height — Float. Thickness to extrude text.  Default is 50.</li>
+			<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
+			<li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
+			<li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
+			<li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
+			<li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
+		</ul>
+		</div>
+
+		<h2>Available Fonts</h2>
+
+		<div>
+		TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
+		Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
+		</div>
+		<table>
+			<tr>
+				<th>Font</th>
+				<th>Weight</th>
+				<th>Style</th>
+				<th>File Path</th>
+			</tr>
+			<tr>
+				<td>helvetiker</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/helvetiker_regular.typeface.json</td>
+			</tr>
+			<tr>
+				<td>helvetiker</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/helvetiker_bold.typeface.json</td>
+			</tr>
+			<tr>
+				<td>optimer</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/optimer_regular.typeface.json</td>
+			</tr>
+			<tr>
+				<td>optimer</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/optimer_bold.typeface.json</td>
+			</tr>
+			<tr>
+				<td>gentilis</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/gentilis_regular.typeface.json</td>
+			</tr>
+			<tr>
+				<td>gentilis</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/gentilis_bold.typeface.json</td>
+			</tr>
+			<tr>
+				<td>droid sans</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
+			</tr>
+			<tr>
+				<td>droid sans</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
+			</tr>
+			<tr>
+				<td>droid serif</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
+			</tr>
+			<tr>
+				<td>droid serif</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
+			</tr>
+		</table>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

docs/api/geometries/TorusBufferGeometry.html

@@ -59,6 +59,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TorusGeometry.js src/geometries/TorusGeometry.js]
 	</body>
 </html>

docs/api/geometries/TorusKnotBufferGeometry.html

@@ -62,6 +62,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TorusKnotGeometry.js src/geometries/TorusKnotGeometry.js]
 	</body>
 </html>

docs/api/geometries/TubeBufferGeometry.html

@@ -35,25 +35,24 @@
 		<h2>Example</h2>
 
 		<code>
-		var CustomSinCurve = THREE.Curve.create(
+		function CustomSinCurve( scale ){
 
-			function ( scale ) { //custom curve constructor
+			this.scale = ( scale === undefined ) ? 1 : scale;
 
-				this.scale = ( scale === undefined ) ? 1 : scale;
-
-			},
+		}
 
-			function ( t ) { //getPoint: t is between 0-1
+		CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
+		CustomSinCurve.prototype.constructor = CustomSinCurve;
 
-				var tx = t * 3 - 1.5;
-				var ty = Math.sin( 2 * Math.PI * t );
-				var tz = 0;
+		CustomSinCurve.prototype.getPoint = function ( t ) {
 
-				return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+			var tx = t * 3 - 1.5;
+			var ty = Math.sin( 2 * Math.PI * t );
+			var tz = 0;
 
-			}
+			return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
-		);
+		};
 
 		var path = new CustomSinCurve( 10 );
 		var geometry = new THREE.TubeBufferGeometry( path, 20, 2, 8, false );
@@ -99,6 +98,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js src/geometries/TubeGeometry.js]
 	</body>
 </html>

docs/api/geometries/TubeGeometry.html

@@ -35,25 +35,24 @@
 		<h2>Example</h2>
 
 		<code>
-		var CustomSinCurve = THREE.Curve.create(
+		function CustomSinCurve( scale ){
 
-			function ( scale ) { //custom curve constructor
+			this.scale = ( scale === undefined ) ? 1 : scale;
 
-				this.scale = ( scale === undefined ) ? 1 : scale;
-
-			},
+		}
 
-			function ( t ) { //getPoint: t is between 0-1
+		CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
+		CustomSinCurve.prototype.constructor = CustomSinCurve;
 
-				var tx = t * 3 - 1.5;
-				var ty = Math.sin( 2 * Math.PI * t );
-				var tz = 0;
+		CustomSinCurve.prototype.getPoint = function ( t ) {
 
-				return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+			var tx = t * 3 - 1.5;
+			var ty = Math.sin( 2 * Math.PI * t );
+			var tz = 0;
 
-			}
+			return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
-		);
+		};
 
 		var path = new CustomSinCurve( 10 );
 		var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );

docs/api/extras/helpers/ArrowHelper.html → docs/api/helpers/ArrowHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/AxisHelper.html → docs/api/helpers/AxisHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/BoxHelper.html → docs/api/helpers/BoxHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -40,7 +40,7 @@
 
 		<h3>[name]( [page:Object3D object], [page:Color color] )</h3>
 		<div>
-		[page:Object3D object]  -- the object3D to show the world-axis-aligned boundingbox.<br />
+		[page:Object3D object]  -- (optional) the object3D to show the world-axis-aligned boundingbox.<br />
 		[page:Color color] --  (optional) hexadecimal value that defines the box's color. Default is 0xffff00.<br /><br />
 
 		Creates a new wireframe box that bounds the passed object. Internally this uses [page:Box3.setFromObject]

docs/api/extras/helpers/CameraHelper.html → docs/api/helpers/CameraHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -24,8 +24,7 @@
 
 		<code>
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-var helper = new THREE.CameraHelper( cameraPerspective );
+var helper = new THREE.CameraHelper( camera );
 scene.add( helper );
 		</code>
 

docs/api/extras/helpers/DirectionalLightHelper.html → docs/api/helpers/DirectionalLightHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/FaceNormalsHelper.html → docs/api/helpers/FaceNormalsHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/GridHelper.html → docs/api/helpers/GridHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/HemisphereLightHelper.html → docs/api/helpers/HemisphereLightHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/PointLightHelper.html → docs/api/helpers/PointLightHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/PolarGridHelper.html → docs/api/helpers/PolarGridHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/RectAreaLightHelper.html → docs/api/helpers/RectAreaLightHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/SkeletonHelper.html → docs/api/helpers/SkeletonHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/SpotLightHelper.html → docs/api/helpers/SpotLightHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/extras/helpers/VertexNormalsHelper.html → docs/api/helpers/VertexNormalsHelper.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../../" />
+		<base href="../../" />
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />

docs/api/lights/RectAreaLight.html

@@ -52,12 +52,12 @@ scene.add(rectLight)
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [page:Integer color], [page:Float intensity], [page:Float distance], [page:Radians angle], [page:Float penumbra], [page:Float decay] )</h3>
+		<h3>[name]( [page:Integer color], [page:Float intensity], [page:Float width], [page:Float height] )</h3>
 		<div>
 			[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
-			[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
+			[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br />
 			[page:Float width] - (optional) width of the light. Default is 10.<br />
-			[page:Float height] - (optional) height of the light. Default is 10.
+			[page:Float height] - (optional) height of the light. Default is 10.<br /><br />
 
 			Creates a new [name].
 		</div>
@@ -96,7 +96,7 @@ scene.add(rectLight)
 
 		<h3>[property:Boolean isRectAreaLight]</h3>
 		<div>
-			Used to check whether this or derived classes are spot lights. Default is *true*.<br /><br />
+			Used to check whether this or derived classes are RectAreaLights. Default is *true*.<br /><br />
 
 			You should not change this, as it used internally for optimisation.
 		</div>

docs/api/materials/MultiMaterial.html

@@ -42,12 +42,12 @@
 //The following will create a cube with a different material applied to each side
 var materials = [
 
-    new THREE.MeshBasicMaterial( { color: 0xff0000 ) } ), // right
-    new THREE.MeshBasicMaterial( { color: 0x0000ff ) } ), // left
-    new THREE.MeshBasicMaterial( { color: 0x00ff00 ) } ), // top
-    new THREE.MeshBasicMaterial( { color: 0xffff00 ) } ), // bottom
-    new THREE.MeshBasicMaterial( { color: 0x00ffff ) } ), // back
-    new THREE.MeshBasicMaterial( { color: 0xff00ff ) } )  // front
+    new THREE.MeshBasicMaterial( { color: 0xff0000 } ), // right
+    new THREE.MeshBasicMaterial( { color: 0x0000ff } ), // left
+    new THREE.MeshBasicMaterial( { color: 0x00ff00 } ), // top
+    new THREE.MeshBasicMaterial( { color: 0xffff00 } ), // bottom
+    new THREE.MeshBasicMaterial( { color: 0x00ffff } ), // back
+    new THREE.MeshBasicMaterial( { color: 0xff00ff } )  // front
 
 ];
 

docs/api/materials/PointsMaterial.html

@@ -44,13 +44,13 @@ for ( var i = 0; i < 10000; i ++ ) {
 	star.y = THREE.Math.randFloatSpread( 2000 );
 	star.z = THREE.Math.randFloatSpread( 2000 );
 
-	geometry.vertices.push( star );
+	starsGeometry.vertices.push( star )
 
 }
 
 var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )
 
-var starField = new THREE.Points( geometry, starsMaterial );
+var starField = new THREE.Points( starsGeometry, starsMaterial );
 
 scene.add( starField );
 		</code>

docs/api/math/Box3.html

@@ -167,7 +167,7 @@
 			[page:Vector3 optionalTarget] — (optional) if specified, the result will be copied into this Vector3,
 			otherwise a new Vector3 will be created. <br /><br />
 
-		Returns the width and height of this box.
+		Returns the width, height and depth of this box.
 		</div>
 
 		<h3>[method:Box3 intersect]( [page:Box3 box] )</h3>

docs/api/math/Euler.html

@@ -10,11 +10,12 @@
 	<body>
 		<h1>[name]</h1>
 
-		<div class="desc">A class representing [link:http://en.wikipedia.org/wiki/Euler_angles Euler Angles].<br /><br />
+		<div class="desc">
+			A class representing [link:http://en.wikipedia.org/wiki/Euler_angles Euler Angles].<br /><br />
 
-		Euler angles describe a rotational transformation by rotating an object on its various
-		axes in specified amounts per axis, and a specified axis order.
-	</div>
+			Euler angles describe a rotational transformation by rotating an object on its various
+			axes in specified amounts per axis, and a specified axis order.
+		</div>
 
 		<h2>Example</h2>
 
@@ -51,9 +52,23 @@
 		<div>
 			The order in which to apply rotations. Default is 'XYZ', which means that the object will first be
 			rotated around its X axis, then its Y axis and finally its Z axis. Other possibilities are:
-			'YZX', 'ZXY', 'XZY', 'YXZ' and 'ZYX'. Note that these must be in upper case.<br /><br />
+			'YZX', 'ZXY', 'XZY', 'YXZ' and 'ZYX'. These must be in upper case.<br /><br />
 
-			If this is changed, [page:.onChangeCallback onChangeCallback] will be called.
+			Three.js uses <em>intrinsic</em> (Tait-Bryan) ordering, also known as <em>yaw</em>, <em>pitch</em>
+			and <em>roll</em>. This means that rotations are performed with respect to the <em>local</em>
+			coordinate system. That is, for order 'XYZ', the rotation is first around world-X, then around
+			local-Y (which may now be different from the world Y-axis), then local-Z (which may be different
+			from the world Z-axis).<br /><br />
+
+			Some implementations may use <em>extrinsic</em> (proper) ordering, in which case rotations are performed
+			with respect to the <em>world</em> coordinate system, so that for order 'XYZ', the rotations
+			are around world-X, world-Y, and world-Z.<br /><br />
+
+			Converting between the two types is relatively straightforward, you just need to reverse the order
+			and the rotation, so that an intrinsic (three.js) Euler rotation of angles a, b, c about XYZ
+			will be equivalent to to an extrinsic Euler rotation of angles c, b, a about ZYX.<br /><br />
+
+			If the order is changed, [page:.onChangeCallback onChangeCallback] will be called.
 		</div>
 
 		<h3>[property:Float x]</h3>

docs/api/math/Matrix3.html

@@ -39,7 +39,7 @@ m.elements = [ 11, 21, 31,
 		and internally all calculations are performed using column-major ordering. However, as the actual ordering
 		makes no difference mathematically and most people are used to thinking about matrices in row-major order,
 		the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
-		code, you'll have to take the transpose of any matrices outlined here to make sense of the calculations.
+		code, you'll have to take the [link:https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
 		</div>
 
 		<h2>Constructor</h2>

docs/api/math/Matrix4.html

@@ -40,7 +40,7 @@
 			[page:Camera Cameras] have two additional matrix4s:
 			<ul>
 				<li>
-					[page:Object3D.matrixWorldInverse]: The inverse of the [page:Object3D.matrixWorld] descibed above.
+					[page:Object3D.matrixWorldInverse]: The inverse of the [page:Object3D.matrixWorld] described above.
 				</li>
 				<li>
 					[page:Object3D.projectionMatrix]:
@@ -48,13 +48,6 @@
 			</ul>
 		</div>
 
-
-		<h2>Example</h2>
-
-		<code>
-var m = new Matrix4();
-		</code>
-
 		<h2>A Note on Row-Major and Column-Major Ordering</h2>
 		<div>
 			The [page:set]() method takes arguments in [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major]
@@ -62,21 +55,25 @@ var m = new Matrix4();
 
 			This means that calling
 		<code>
+var m = new Matrix4();
+
 m.set( 11, 12, 13, 14,
        21, 22, 23, 24,
-       31, 32, 33, 34 );
+       31, 32, 33, 34,
+       41, 42, 43, 44 );
 
 		</code>
 		will result in the [page:.elements elements] array containing:
 		<code>
 m.elements = [ 11, 21, 31, 41,
                12, 22, 32, 42,
-               13, 23, 33, 43 ];
+               13, 23, 33, 43,
+               14, 24, 34, 44 ];
 		</code>
 		and internally all calculations are performed using column-major ordering. However, as the actual ordering
 		makes no difference mathematically and most people are used to thinking about matrices in row-major order,
 		the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
-		code, you'll have to take the transpose of any matrices outlined here to make sense of the calculations.
+		code, you'll have to take the [link: https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
 		</div>
 
 

docs/api/objects/Line.html

@@ -17,8 +17,8 @@
 
 			This is nearly the same
 			as [page:LineSegments]; the only difference is that it is rendered using
-			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINES]
-			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP]
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP]
+			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINES]
 
 		</div>
 

docs/api/objects/LineLoop.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Line] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">
+			A continuous line that connects back to the start.<br /><br />
+
+			This is nearly the same	as [page:Line]; the only difference is that it is rendered using
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_LOOP]
+			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP],
+			which draws a straight line to the next vertex, and connects the last vertex back to the first.
+		</div>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:Geometry geometry], [page:Material material] )</h3>
+
+		<div>
+		[page:Geometry geometry] — List of vertices representing points on the line loop.<br />
+		[page:Material material] — Material for the line. Default is [page:LineBasicMaterial LineBasicMaterial].
+		</div>
+
+		<div>If no material is supplied, a randomized line material will be created and assigned to the object.</div>
+
+
+		<h2>Properties</h2>
+		<div>See the base [page:Line] class for common properties.</div>
+
+		<h3>[property:Boolean isLineLoop]</h3>
+		<div>
+			Used to check whether this or derived classes are line loops. Default is *true*.<br /><br />
+
+			You should not change this, as it used internally for optimisation.
+		</div>
+
+
+		<h2>Methods</h2>
+		<div>See the base [page:Line] class for common methods.</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

docs/api/objects/LineSegments.html

@@ -16,8 +16,8 @@
 			A series of lines drawn between pairs of vertices.<br /><br />
 
 			This is nearly the same	as [page:Line]; the only difference is that it is rendered using
-			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP]
-			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINES]
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINES]
+			instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements gl.LINE_STRIP].
 		</div>
 
 

docs/api/objects/Mesh.html

@@ -14,7 +14,7 @@
 
 		<div class="desc">
 			Class representing triangular [link:https://en.wikipedia.org/wiki/Polygon_mesh polygon mesh] based objects.
-		  Also serves as a base for other classes such as [page:MorphAnimMesh] and [page:SkinnedMesh].
+		  Also serves as a base for other classes such as [page:MorphBlendMesh] and [page:SkinnedMesh].
 		</div>
 
 

docs/index.html

@@ -249,7 +249,6 @@
 			var MEMBER_DELIMITER = '.';
 			var nameCategoryMap = {};
 			var sections = [];
-			var selected = null;
 
 			var content = document.getElementById( 'content' );
 
@@ -339,11 +338,10 @@
 
 				var v = filterInput.value;
 				if( v !== '' ) {
-					window.history.replaceState( {} , '', '?q=' + v );
+					window.history.replaceState( {} , '', '?q=' + v + window.location.hash );
 				} else {
-					window.history.replaceState( {} , '', window.location.pathname );
+					window.history.replaceState( {} , '', window.location.pathname + window.location.hash );
 				}
-				if( selected ) window.location.hash = selected;
 
 				var exp = new RegExp( filterInput.value, 'gi' );
 				for( var j in nameCategoryMap ) {
@@ -400,7 +398,6 @@
 
 				var title = 'three.js - documentation - ' + section + ' - ' + name;
 				var url = encodeUrl(section) + DELIMITER + encodeUrl( category ) + DELIMITER + encodeUrl(name) + (!!member ? MEMBER_DELIMITER + encodeUrl(member) : '');
-				selected = url;
 
 				window.location.hash = url;
 				window.document.title = title;

docs/list.js

@@ -1,18 +1,21 @@
 var list = {
 
 	"Manual": {
-		"Introduction": [
+		"Getting Started": [
 			[ "Creating a scene", "manual/introduction/Creating-a-scene" ],
 			[ "Detecting WebGL and browser compatibility", "manual/introduction/Detecting-WebGL-and-browser-compatibility" ],
-			[ "Matrix transformations", "manual/introduction/Matrix-transformations" ],
-			[ "How to update things", "manual/introduction/How-to-update-things" ],
-			[ "Useful links", "manual/introduction/Useful-links" ],
+			[ "How to run things locally", "manual/introduction/How-to-run-thing-locally" ],
 			[ "Drawing Lines", "manual/introduction/Drawing-lines" ],
 			[ "Creating Text", "manual/introduction/Creating-text" ],
-			[ "Code Style Guide", "manual/introduction/Code-style-guide" ],
 			[ "Migration Guide", "manual/introduction/Migration-guide" ],
-			[ "How to run things locally", "manual/introduction/How-to-run-thing-locally" ],
-			[ "FAQ", "manual/introduction/FAQ" ]
+			[ "Code Style Guide", "manual/introduction/Code-style-guide" ],
+			[ "FAQ", "manual/introduction/FAQ" ],
+			[ "Useful links", "manual/introduction/Useful-links" ]
+		],
+
+		"Next Steps": [
+				[ "How to update things", "manual/introduction/How-to-update-things" ],
+			[ "Matrix transformations", "manual/introduction/Matrix-transformations" ]
 		],
 
 		"Build Tools": [
@@ -123,23 +126,6 @@ var list = {
 			[ "SplineCurve", "api/extras/curves/SplineCurve" ]
 		],
 
-		"Extras / Helpers": [
-			[ "ArrowHelper", "api/extras/helpers/ArrowHelper" ],
-			[ "AxisHelper", "api/extras/helpers/AxisHelper" ],
-			[ "BoxHelper", "api/extras/helpers/BoxHelper" ],
-			[ "CameraHelper", "api/extras/helpers/CameraHelper" ],
-			[ "DirectionalLightHelper", "api/extras/helpers/DirectionalLightHelper" ],
-			[ "FaceNormalsHelper", "api/extras/helpers/FaceNormalsHelper" ],
-			[ "GridHelper", "api/extras/helpers/GridHelper" ],
-			[ "PolarGridHelper", "api/extras/helpers/PolarGridHelper"],
-			[ "HemisphereLightHelper", "api/extras/helpers/HemisphereLightHelper" ],
-			[ "PointLightHelper", "api/extras/helpers/PointLightHelper" ],
-			[ "RectAreaLightHelper", "api/extras/helpers/RectAreaLightHelper" ],
-			[ "SkeletonHelper", "api/extras/helpers/SkeletonHelper" ],
-			[ "SpotLightHelper", "api/extras/helpers/SpotLightHelper" ],
-			[ "VertexNormalsHelper", "api/extras/helpers/VertexNormalsHelper" ]
-		],
-
 		"Extras / Objects": [
 			[ "ImmediateRenderObject", "api/extras/objects/ImmediateRenderObject" ],
 			[ "MorphBlendMesh", "api/extras/objects/MorphBlendMesh" ]
@@ -188,6 +174,23 @@ var list = {
 			[ "WireframeGeometry", "api/geometries/WireframeGeometry" ]
 		],
 
+		"Helpers": [
+			[ "ArrowHelper", "api/helpers/ArrowHelper" ],
+			[ "AxisHelper", "api/helpers/AxisHelper" ],
+			[ "BoxHelper", "api/helpers/BoxHelper" ],
+			[ "CameraHelper", "api/helpers/CameraHelper" ],
+			[ "DirectionalLightHelper", "api/helpers/DirectionalLightHelper" ],
+			[ "FaceNormalsHelper", "api/helpers/FaceNormalsHelper" ],
+			[ "GridHelper", "api/helpers/GridHelper" ],
+			[ "PolarGridHelper", "api/helpers/PolarGridHelper" ],
+			[ "HemisphereLightHelper", "api/helpers/HemisphereLightHelper" ],
+			[ "PointLightHelper", "api/helpers/PointLightHelper" ],
+			[ "RectAreaLightHelper", "api/helpers/RectAreaLightHelper" ],
+			[ "SkeletonHelper", "api/helpers/SkeletonHelper" ],
+			[ "SpotLightHelper", "api/helpers/SpotLightHelper" ],
+			[ "VertexNormalsHelper", "api/helpers/VertexNormalsHelper" ]
+		],
+
 		"Lights": [
 			[ "AmbientLight", "api/lights/AmbientLight" ],
 			[ "DirectionalLight", "api/lights/DirectionalLight" ],
@@ -283,6 +286,7 @@ var list = {
 			[ "Group", "api/objects/Group" ],
 			[ "LensFlare", "api/objects/LensFlare" ],
 			[ "Line", "api/objects/Line" ],
+			[ "LineLoop", "api/objects/LineLoop" ],
 			[ "LineSegments", "api/objects/LineSegments" ],
 			[ "LOD", "api/objects/LOD" ],
 			[ "Mesh", "api/objects/Mesh" ],
@@ -357,7 +361,7 @@ var list = {
 
 	"Developer Reference": {
 		"Polyfills": [
-			[ "Polyfills", "api/polyfills" ]
+			[ "Polyfills", "api/Polyfills" ]
 		],
 
 		"WebGLRenderer": [

docs/manual/buildTools/Testing-with-NPM.html

@@ -187,7 +187,7 @@ The THREE object should be able to construct a Vector3 with default of x=0: 0ms
 			<ol>
 				<li>
 					Write a test for the expected behaviour of your code, and place it under test/.
-					[linkk:https://github.com/air/encounter/blob/master/test/Physics-test.js Here] is an example from a real project.
+					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js Here] is an example from a real project.
 				</li>
 
 				<li>

docs/manual/introduction/Creating-text.html

@@ -9,44 +9,79 @@
 	</head>
 	<body>
 		<h1>[name]</h1>
+		<div>
+			<p>
+				There are often times when you might need to use text in your three.js application - here are
+				a couple of ways that you can do so.
+			</p>
+		</div>
+
+		<h2>1. DOM + CSS</h2>
+		<div>
+			<p>
+				Using HTML is generally the easiest and fastest manner to add text. This is the method
+				used for descriptive overlays in most three.js examples.
+			</p>
+			<p>You can add content to a</p>
+			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
+
+			<p>
+				and use CSS markup to position absolutely at a position above all others with a
+				z-index especially if you are running three.js full screen.
+			</p>
+
+			<code>
+#info {
+	position: absolute;
+	top: 10px;
+	width: 100%;
+	text-align: center;
+	z-index: 100;
+	display:block;
+}
+			</code>
+
+		</div>
+
+
+
+		<h2>2. Draw text to canvas and use as a [page:Texture]</h2>
+		<div>
+			<p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
+		</div>
+
+
+		<h2>3. Create a model in your favourite 3D application and export to three.js</h2>
+		<div>
+			<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
+		</div>
+
+
+
+		<h2>4. Procedural Text Geometry</h2>
+		<div>
+			<p>
+				Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d
+				text geometries. However, font data files in THREE.js JSON format need to be loaded
+				before this will work.
+				See the [page:TextGeometry] page for examples of JSON fonts.
+			</p>
+			<p>A Text Geometry can then be created with </p>
+			<code>new THREE.TextGeometry( text, parameters );</code>
+
+			<h3>Examples</h3>
+			[example:webgl_geometry_text WebGL / geometry / text]<br />
+			[example:canvas_geometry_text canvas / geometry / text]<br />
+			[example:webgl_shadowmap WebGL / shadowmap]
+
+			<p>
+				If Typeface is down, or you want to use a font that is not there, there's a tutorial
+				with a python script for blender that allows you to export text to Three.js's JSON format:
+				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
+				</p>
+
+		</div>
 
-<p>There are often times when you might need to use text in your Three.js application. Here's are some options you may consider when you wish to add Text.</p>
-
-<h2>1. DOM + CSS</h2>
-
-<p>Using HTML could simply be the easiest and fastest manner to add text. This is commonly used for descriptive overlays in three.js examples.</p>
-
-<p>You can add content to a
-<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code></p>
-
-<p>and use css markup to position absolutely at a position above all others with a z-index especially if you are running three.js full screen.</p>
-
-<p><code>#info {
-position: absolute;
-top: 10px;
-width: 100%;
-text-align: center;
-z-index: 100;
-display:block;
-}</code></p>
-
-<h2>2. Draw text to canvas and use as Texture</h2>
-
-<p>Use this method if you wish to draw text easily on a plane in your three.js scene. This technique can be seen utilized in the <a href="http://plumegraph.org/">Civilian Casualties in Afghanistan</a> visualization.</p>
-
-<h2>3. Create a 3d model in your 3d application and export to three.js</h2>
-
-<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
-
-<h2>4. Procedural Text Geometry</h2>
-
-<p>Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d text geometries. However, font data files <a href="http://typeface.neocracy.org/fonts.html">http://typeface.neocracy.org/fonts.html</a> in the typeface.js format needs to be loaded.</p>
-
-<p>A Text Geometry can then be created with <code>new THREE.TextGeometry( text, parameters );</code></p>
-
-<p>For examples, see <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html</a>, <a href="https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html</a> and <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html</a></p>
-
-<p>If Typeface is down, or you want to use a font that is not there, there's a tutorial with a python script for blender that allows you to export text to Three.js's JSON format: <a href="http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html">http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html</a></p>
 
 
 	</body>

docs/manual/introduction/Detecting-WebGL-and-browser-compatibility.html

@@ -10,22 +10,24 @@
 	<body>
 		<h1>[name]</h1><br />
 		<p>
-			Even those this is becming less and less of a problem, some devices or browsers may not support WebGL.
-			Here is how to check if it is supported and display a warning to the user if it is not.
+			Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL.
+			The following method allows you to check if it is supported and display a message to the user if it is not.
 		</p>
 
-		<h2>A solution</h2>
-
-		<p>In order to detect webgl compatibility and gracefully inform the user you can add <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js">https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js</a> to your javascript and use this example to avoid even attempting to render anything:</p>
+		<p>
+			Add	[link:https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js]
+			to your javascript and run the following before attempting to render anything.
+		</p>
 
-		<pre><code>if (Detector.webgl) {
-		    init();
-		    animate();
-		} else {
-		    var warning = Detector.getWebGLErrorMessage();
-		    document.getElementById('container').appendChild(warning);
-		}
-		</code></pre>
+<code>
+if (Detector.webgl) {
+    init();
+    animate();
+} else {
+    var warning = Detector.getWebGLErrorMessage();
+    document.getElementById('container').appendChild(warning);
+}
+</code>
 
 
 	</body>

docs/manual/introduction/Drawing-lines.html

@@ -9,49 +9,56 @@
 	</head>
 	<body>
 		<h1>[name]</h1>
+		<div>
+			<p>
+				Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
+				First we need to setup the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
+			</p>
 
-		<p>Let's say you want to draw a line or a circle, not a wireframe geometry.
-First we need to setup Renderer, Scene and camera (<a href="Getting%20Started">see Getting Started</a>).</p>
+			<p>Here is the code that we will use:</p>
+			<code>
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
 
-<p>Here is the code that we will use:</p>
+var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
+camera.position.set(0, 0, 100);
+camera.lookAt(new THREE.Vector3(0, 0, 0));
 
-<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> renderer <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.WebGLRenderer</span>();
-		<span class="pl-smi">renderer</span>.<span class="pl-en">setSize</span>(<span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>);
-		<span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">appendChild</span>(<span class="pl-smi">renderer</span>.<span class="pl-smi">domElement</span>);
-		<span class="pl-k">var</span> camera <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.PerspectiveCamera</span>(<span class="pl-c1">45</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span> <span class="pl-k">/</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>, <span class="pl-c1">1</span>, <span class="pl-c1">500</span>);
-		<span class="pl-smi">camera</span>.<span class="pl-smi">position</span>.<span class="pl-c1">set</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">100</span>);
-		<span class="pl-smi">camera</span>.<span class="pl-en">lookAt</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
-		<span class="pl-k">var</span> scene <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Scene</span>();</pre></div>
+var scene = new THREE.Scene();
+			</code>
+			<p>Next thing we will do is define a material. For lines we have to use [page:LineBasicMaterial] or [page:LineDashedMaterial].</p>
+			<code>
+//create a blue LineBasicMaterial
+var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+			</code>
 
-<p>Next thing we will do is define a material. For lines we have to use <code>LineBasicMaterial</code>.</p>
+			<p>
+				After material we will need a [page:Geometry] or [page:BufferGeometry] with some vertices
+				(it's recommended to use a BufferGeometry as it's more performant, however for simplicity we'll use a Geometry here):
+			</p>
 
-<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> material <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.LineBasicMaterial</span>({
-				color<span class="pl-k">:</span> <span class="pl-c1">0x0000ff</span>
-		});
-</pre></div>
+			<code>
+var geometry = new THREE.Geometry();
+geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
+geometry.vertices.push(new THREE.Vector3(0, 10, 0));
+geometry.vertices.push(new THREE.Vector3(10, 0, 0));
+			</code>
 
-<p>After material we will need a <code>Geometry</code> with some vertices:</p>
+			<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
 
-<div class="highlight highlight-source-js"><pre>        <span class="pl-k">var</span> geometry <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Geometry</span>();
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-k">-</span><span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">10</span>, <span class="pl-c1">0</span>));
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));</pre></div>
+			<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
+			<code>
+var line = new THREE.Line(geometry, material);
+			</code>
+			<p>All that's left is to add it to the scene and call [page:WebGLRenderer.render render].</p>
 
-<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
+			<code>
+scene.add(line);
+renderer.render(scene, camera);
+			</code>
 
-<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
-
-<div class="highlight highlight-source-js"><pre>
-		<span class="pl-k">var</span> line <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Line</span>(geometry, material);
-</pre></div>
-
-<p>All that's left is to add it to the scene and call <code>render</code>.</p>
-
-<div class="highlight highlight-source-js"><pre>
-		<span class="pl-smi">scene</span>.<span class="pl-c1">add</span>(line);
-		<span class="pl-smi">renderer</span>.<span class="pl-en">render</span>(scene, camera);
-</pre></div>
-
-<p>You should now be seeing a arrow pointing upwards, made from two blue lines.</p>
+			<p>You should now be seeing an arrow pointing upwards, made from two blue lines.</p>
+		</div>
 	</body>
 </html>

docs/manual/introduction/FAQ.html

@@ -12,7 +12,7 @@
 
 		<h2>Which Import Format/Exporter is best supported?</h2>
 		<div>
-TODO 
+TODO
 		</div>
 
 		<h2>Why are there meta viewport tags in examples?</h2>

docs/manual/introduction/How-to-run-thing-locally.html

@@ -8,107 +8,183 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</h1><br />
-		<p>If you use just procedural geometries and don't load any textures, webpages should work straight from the file system, just double-click on HTML file in a file manager and it should appear working in the browser (accessed as <code>file:///example</code>).</p>
+		<h1>[name]</h1>
+		<div>
+			If you use just procedural geometries and don't load any textures, webpages should work
+			straight from the file system, just double-click on HTML file in a file manager and it
+			should appear working in the browser (you'll see <em>file:///yourFile.html</em> in the address bar).
+		</div>
 
 		<h2>Content loaded from external files</h2>
-
-		<p>If you load models or textures from external files, due to browsers' "<a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>" security restrictions, loading from a file system will fail with a security exception.</p>
-
-		<p>There are two ways how to solve this:</p>
-
-		<ol>
-		<li><p>Change security for local files in a browser (access page as <code>file:///example</code>)</p></li>
-		<li><p>Run files from a local server (access page as <code>http://localhost/example</code>)</p></li>
-		</ol>
-
-		<p>If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. You may want to create a separate browser profile / shortcut used just for local development to be safe.</p>
-
-		<hr>
-
-		<h3>Change local files security policy</h3>
-
-		<h4>Safari</h4>
-
-		<p>Enable the develop menu using the preferences panel, under Advanced -&gt; "Show develop menu in menu bar"</p>
-
-		<p>Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behaviour with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing &amp; debugging using safari.</p>
-
-		<h4>Chrome</h4>
-
-		<p>Close all running Chrome instances first. The important word here is 'all'.</p>
-
-		<p>On Windows, you may check for Chrome instances using the Windows Task Manager. Alternatively, if you see a Chrome icon in the system tray, then you may open its context menu and click 'Exit'. This should close all Chrome instances.</p>
-
-		<p>Then start the Chrome executable with a command line flag:</p>
-
-		<pre><code>chrome --allow-file-access-from-files
-		</code></pre>
-
-		<p>On Windows, probably the easiest is probably to create a special shortcut icon which has added the flag given above (right-click on shortcut -&gt; properties -&gt; target).</p>
-
-		<p>On Mac OSX, you can do this with</p>
-
-		<pre><code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
-		</code></pre>
-
-		<h4>Firefox</h4>
-
-		<ol>
-		<li>Go to <code>about:config</code>
-		</li>
-		<li>Find <code>security.fileuri.strict_origin_policy</code> parameter</li>
-		<li>Set it to <code>false</code>
-		</li>
-		</ol>
-
-		<hr>
-
-		<h3>Run local server</h3>
-
-		<p>The simplest probably is to use Python's built-in http server. </p>
-
-		<p>If you have <a href="http://python.org/">Python</a> installed, it should be enough to run this from a command line:</p>
-
-		<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 2.x</span>
-		python -m SimpleHTTPServer</pre></div>
-
-		<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 3.x</span>
-		python -m http.server</pre></div>
-
-		<p>This will serve files from the current directory at localhost under port 8000:</p>
-
-		<p>http://localhost:8000/</p>
-
-		<p>If you have Ruby installed, you can get the same result running this instead:</p>
-
-		<div class="highlight highlight-source-shell"><pre>ruby -r webrick -e <span class="pl-s"><span class="pl-pds">"</span>s = WEBrick::HTTPServer.new(:Port =&gt; 8000, :DocumentRoot =&gt; Dir.pwd); trap('INT') { s.shutdown }; s.start<span class="pl-pds">"</span></span></pre></div>
-
-		<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
-
-		<div class="highlight highlight-source-shell"><pre>php -S localhost:8000</pre></div>
-
-		<p>Node.js has a simple HTTP server package. To install:</p>
-
-		<div class="highlight highlight-source-shell"><pre>npm install http-server -g</pre></div>
-
-		<p>To run:</p>
-
-		<div class="highlight highlight-source-shell"><pre>http-server <span class="pl-c1">.</span></pre></div>
-
-		<p>Other simple alternatives are <a href="http://stackoverflow.com/q/12905426/24874">discussed here</a> on Stack Overflow.</p>
-
-		<p>Of course, you can use any other regular full-fledged web server like <a href="http://www.apachefriends.org/en/xampp.html">Apache</a> or <a href="http://nginx.org/">nginx</a>.</p>
-
-		<p>Example with lighttpd, which is a very lightweight general purpose webserver (on MAC OSX):</p>
-
-		<ol>
-		<li>Install it via homebrew <code>brew install lighttpd</code>
-		</li>
-		<li>Create a configuration file called lighttpd.conf in the directory where you want to run your webserver. There is a sample in <a href="http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration">this</a> page.</li>
-		<li>In the conf file, change the server.document-root with the directory you want to serve</li>
-		<li>Start it with <code>lighttpd -f lighttpd.conf</code>
-		</li>
-		<li>Navigate to http://localhost:3000/ and it will serve static files from the directory you chose.</li>
-		</ol>	</body>
+		<div>
+			<p>
+				If you load models or textures from external files, due to browsers' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
+			 	security restrictions, loading from a file system will fail with a security exception.
+		 	</p>
+
+			<p>There are two ways to solve this:</p>
+
+			<ol>
+				<li>
+					Change security for local files in a browser. This allows you to access your page as: <code>file:///yourFile.html</code>
+				</li>
+				<li>
+					Run files from a local web server. This allows you to access your page as: <code>http://localhost/yourFile.html</code>
+				</li>
+			</ol>
+
+			<p>
+				If you use option 1, be aware that you may open yourself to some vulnerabilities if using
+				the same browser for a regular web surfing. You may want to create a separate browser
+				profile / shortcut used just for local development to be safe. Let's go over each option in turn.
+			</p>
+		</div>
+
+		<h2>Change local files security policy</h2>
+		<div>
+			<h4>Safari</h4>
+			<div>
+				<p>
+					Enable the develop menu using the preferences panel, under Advanced -&gt; "Show develop menu
+					in menu bar".
+				</p>
+
+				<p>
+					Then from the safari "Develop" menu, select "Disable local file restrictions", it is also
+					worth noting safari has some odd behaviour with caches, so it is advisable to use the
+					"Disable caches" option in the same menu; if you are editing &amp; debugging using safari.
+				</p>
+			</div>
+
+
+			<h4>Chrome</h4>
+			<div>
+				<p>Close all running Chrome instances first. The important word here is 'all'.</p>
+
+				<p>
+					On Windows, you may check for Chrome instances using the Windows Task Manager.
+					Alternatively, if you see a Chrome icon in the system tray, then you may open its context
+					menu and click 'Exit'. This should close all Chrome instances.
+				</p>
+
+				<p>Then start the Chrome executable with a command line flag:</p>
+
+				<code>chrome --allow-file-access-from-files</code>
+
+				<p>
+					On Windows, probably the easiest is probably to create a special shortcut icon which has
+					added the flag given above (right-click on shortcut -&gt; properties -&gt; target).
+				</p>
+
+				<p>On Mac OSX, you can do this with</p>
+
+				<code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files</code>
+			</div>
+
+			<h4>Firefox</h4>
+			<div>
+				<ol>
+				<li>
+					In the address bar, type <code>about:config</code>
+				</li>
+				<li>
+					Find the <code>security.fileuri.strict_origin_policy</code> parameter
+				</li>
+				<li>
+					Set it to <em>false</em>
+				</li>
+				</ol>
+			</div>
+
+		</div>
+
+
+		<h2>Run a local server</h2>
+		<div>
+			<p>
+				Many programming languages have simple HTTP servers built in. They are not as full featured as
+				production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
+				three.js application.
+			</p>
+
+			<h4>Running a Python server</h4>
+			<div>
+				<p>
+					If you have [link:http://python.org/ Python] installed, it should be enough to run this
+					from a command line (from your working directory):
+				</p>
+				<code>
+//Python 2.x
+python -m SimpleHTTPServer
+
+//Python 3.x
+python -m http.server
+				</code>
+
+				<p>This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:</p>
+
+				<code>http://localhost:8000/</code>
+			</div>
+
+			<h4>Running a Ruby server</h4>
+			<div>
+				<p>If you have Ruby installed, you can get the same result running this instead:</p>
+				<code>
+ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
+				</code>
+			</div>
+
+			<h4>Running a PHP server</h4>
+			<div>
+				<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
+				<code>php -S localhost:8000</code>
+			</div>
+
+			<h4>Running a Node.js server</h4>
+			<div>
+				<p>Node.js has a simple HTTP server package. To install:</p>
+				<code>npm install http-server -g</code>
+
+				<p>To run (from your local directory):</p>
+				<code>http-server . -p 8000</code>
+			</div>
+
+			<h4>Running lighttpd on Mac</h4>
+			<div>
+				<p>
+					Lighttpd is a very lightweight general purpose webserver. We'll cover installing it on OSX with
+					HomeBrew here. Unlike the other servers discussed here, lighttpd is a full fledged production
+					ready server.
+				</p>
+
+				<ol>
+					<li>
+						Install it via homebrew
+						<code>brew install lighttpd</code>
+					</li>
+					<li>
+						Create a configuration file called lighttpd.conf in the directory where you want to run
+						your webserver. There is a sample [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
+					 </li>
+					<li>
+						In the conf file, change the server.document-root to the directory you want to serve files from.
+					</li>
+					<li>
+						Start it with
+						<code>lighttpd -f lighttpd.conf</code>
+					</li>
+					<li>
+						Navigate to http://localhost:3000/ and it will serve static files from the directory you
+						chose.
+					</li>
+				</ol>
+			</div>
+
+			<p>
+				Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
+				on Stack Overflow.
+			</p>
+		</div>
+
+	</body>
 </html>

docs/manual/introduction/How-to-update-things.html

@@ -9,127 +9,244 @@
 	</head>
 	<body>
 		<h1>[name]</h1>
-		<p>All objects by default automatically update their matrices.</p>
-
-		<p>However, if you know object will be static, you can disable this and update transform matrix manually just when needed.</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">object</span>.<span class="pl-smi">matrixAutoUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">false</span>;
-		<span class="pl-smi">object</span>.<span class="pl-en">updateMatrix</span>();</pre></div>
+		<div>
+			<p>All objects by default automatically update their matrices if they have been added to the scene with</p>
+			<code>
+var object = new THREE.Object3D;
+scene.add( object );
+			</code>
+			or if they are the child of another object that has been added to the scene:
+			<code>
+var object1 = new THREE.Object3D;
+var object2 = new THREE.Object3D;
+
+object1.add( object2 );
+scene.add( object1 ); //object1 and object2 will automatically update their matrices
+			</code>
+		</div>
+
+		<p>However, if you know object will be static, you can disable this and update the transform matrix manually just when needed.</p>
+
+		<code>
+object.matrixAutoUpdate  = false;
+object.updateMatrix();
+		</code>
 
 		<h2>Geometries</h2>
+		<div>
+			<h3>[page:BufferGeometry]</h3>
+			<div>
+				<p>
+					BufferGeometries store information (such as vertex positions, face indices, normals, colors,
+					UVs, and any custom attributes) in [page:BufferAttribute buffers] - that is,
+					[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
+					This makes them generally faster than standard Geometries, at the cost of being somewhat harder to
+					work with.
+				</p>
+				<p>
+					With regards to updating BufferGeometries, the most important thing to understand is that
+					you cannot resize buffers (this is very costly,	basically the equivalent to creating a new geometry).
+					You can however update the content of buffers.
+				</p>
+				<p>
+					This means that if you know an attribute of you BufferGeometry will grow, say the number of vertices,
+					you must pre-allocate a buffer large enough to hold any new vertices that may be created. Of
+					course, this also means that there will be a maximum size for your BufferGeometry - there is
+					no way to create a BufferGeometry that can efficiently be extended indefinitely.
+				</p>
+				<p>
+					We'll use the example of a line that gets extended at render time. We'll allocate space
+					in the buffer for 500 vertices but draw only two at first, using [page:BufferGeometry.drawRange].
+				</p>
+				<code>
+var MAX_POINTS = 500;
+
+// geometry
+var geometry = new THREE.BufferGeometry();
+
+// attributes
+var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
+geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+// draw range
+drawCount = 2; // draw the first 2 points, only
+geometry.setDrawRange( 0, drawCount );
+
+// material
+var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );
+
+// line
+line = new THREE.Line( geometry,  material );
+scene.add( line );
+				</code>
+			 	<p>
+					Next we'll randomly add points to the line using a pattern like:
+				</p>
+				<code>
+var positions = line.geometry.attributes.position.array;
+
+var x = y = z = index = 0;
+
+for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
+
+    positions[ index ++ ] = x;
+    positions[ index ++ ] = y;
+    positions[ index ++ ] = z;
+
+    x += ( Math.random() - 0.5 ) * 30;
+    y += ( Math.random() - 0.5 ) * 30;
+    z += ( Math.random() - 0.5 ) * 30;
+
+}
+				</code>
+				<p>
+					If you want to change the <em>number of points</em> rendered after the first render, do this:
+				</p>
+				<code>
+line.geometry.setDrawRange( 0, newValue );
+				</code>
+				<p>
+					If you want to change the position data values after the first render, you need to
+					set the needsUpdate flag like so:
+				</p>
+				<code>
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
+				</code>
+
+				<p>
+					[link:http://jsfiddle.net/w67tzfhx/ Here is a fiddle] showing an animated line which you can adapt to your use case.
+				</p>
+
+				<h4>Examples:</h4>
+					[example:webgl_custom_attributes WebGL / custom / attributes]<br />
+					[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
+
+
+			</div>
+
+			<h3>[page:Geometry]</h3>
+			<div>
+				<p>
+					The following flag control updating of various geometry attributes. Set flags only
+					for attributes that you need to update, updates are costly. Once buffers
+					change, these flags reset automatically back to false. You need to keep setting them to
+					true if you wanna keep updating buffers. Note that this applies only to [page:Geometry]
+					and not to [page:BufferGeometry].
+				</p>
+				<code>
+var geometry = new THREE.Geometry();
+geometry.verticesNeedUpdate = true;
+geometry.elementsNeedUpdate = true;
+geometry.morphTargetsNeedUpdate = true;
+geometry.uvsNeedUpdate = true;
+geometry.normalsNeedUpdate = true;
+geometry.colorsNeedUpdate = true;
+geometry.tangentsNeedUpdate = true;
+				</code>
+
+				<p>
+					In versions prior to [link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] meshes
+					additionally need the <em>dynamic</em> flag enabled (to keep internal typed arrays):
+				</p>
+
+				<code>
+		//removed after r66
+		geometry.dynamic = true;
+				</code>
+
+				<h4>Example:</h4>
+					[example:webgl_geometry_dynamic WebGL / geometry / dynamic]<br />
+			</div>
+
+		</div>
 
-		<p>You can only update content of buffers, you cannot resize buffers (this is very costly, basically equivalent to creating new geometry). </p>
-
-		<p>You can emulate resizing by pre-allocating larger buffer and then keeping unneeded vertices collapsed / hidden.</p>
-
-		<p>Set flags only for attributes that you need to update, updates are costly. Once buffers change, these flags reset automatically back to <code>false</code>. You need to keep setting them to <code>true</code> if you wanna keep updating buffers.</p>
-
-		<p>r49</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">verticesNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">elementsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">morphTargetsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">uvsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">normalsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">colorsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">tangentsNeedUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
-
-		<p>pre-r49</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyVertices</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyMorphTargets</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyElements</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyUvs</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyNormals</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyTangents</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;
-		<span class="pl-smi">geometry</span>.<span class="pl-smi">__dirtyColors</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
-
-		<p>In versions prior to <a href="https://github.com/mrdoob/three.js/releases/tag/r66">r66</a> meshes additionally need the <code>dynamic</code> flag enabled (to keep internal typed arrays).</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">geometry</span>.<span class="pl-smi">dynamic</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
-
-		<p>Custom attributes (in <code>MeshShaderMaterial</code>):</p>
-
-		<div class="highlight highlight-source-js"><pre>attributes[ <span class="pl-s"><span class="pl-pds">"</span>attributeName<span class="pl-pds">"</span></span> ].<span class="pl-smi">needsUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
-
-		<p>Other objects like <code>ParticleSystem</code>, <code>Ribbon</code>, <code>Line</code> just need "dirty" flags.</p>
-
-		<p>Examples:</p>
-
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_dynamic.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_dynamic.html</a></p>
 
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html</a></p>
 
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes_particles.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes_particles.html</a></p>
 
 		<h2>Materials</h2>
+		<div>
+			<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.</p>
 
-		<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to shader every frame.</p>
+			<p>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
 
-		<p>Also GL state related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
+			<p>Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).</p>
 
-		<p>Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).</p>
+			<p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
+			<ul>
+				<li>numbers and types of uniforms</li>
+				<li>numbers and types of lights</li>
+				<li>presence or not of
+					<ul>
+						<li>texture</li>
+						<li>fog</li>
+						<li>vertex colors</li>
+						<li>skinning</li>
+						<li>morphing</li>
+						<li>shadow map</li>
+						<li>alpha test</li>
+					</ul>
+				</li>
+			</ul>
 
-		<p>Properties that can't be easily changed in runtime (once material is rendered at least once):</p>
+			<p>Changes in these require building of new shader program. You'll need to set</p>
+			<code>material.needsUpdate = true</code>
 
-		<ul>
-		<li>numbers and types of uniforms</li>
-		<li>numbers and types of lights</li>
-		<li>presence or not of
+			<p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
 
-		<ul>
-		<li>texture</li>
-		<li>fog</li>
-		<li>vertex colors</li>
-		<li>skinning</li>
-		<li>morphing</li>
-		<li>shadow map</li>
-		<li>alpha test</li>
-		</ul>
-		</li>
-		</ul>
+			<p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
 
-		<p>Changes in these require building of new shader program. You'll need to set <code>material.needsUpdate</code> flag to <code>true</code>. </p>
+			<p>You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials). </p>
 
-		<p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
+			<h3>If you need to have different configurations of materials during runtime:</h3>
+			<p>If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car). </p>
 
-		<p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
+			<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
 
-		<p>You can change freely material used for geometry chunk, you cannot change how object is divided into chunks (according to face materials). </p>
+			<h3>Examples:</h3>
+			[example:webgl_materials_cars WebGL / materials / cars]<br />
+			[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+		</div>
 
-		<p>If you need to have different configurations of materials during runtime, if number of materials / chunks is small, you could pre-divide object beforehand (e.g. hair / face / body / upper clothes / trousers for human, front / sides / top / glass / tire / interior for car). </p>
-
-		<p>If number is large (e.g. each face could be potentially different), consider different solution, using attributes / textures to drive different per-face look.</p>
-
-		<p>Examples:</p>
-
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cars.html</a></p>
-
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_dof.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_dof.html</a></p>
 
 		<h2>Textures</h2>
-
-		<p>Image, canvas, video and data textures need to have flag set:</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">texture</span>.<span class="pl-smi">needsUpdate</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>;</pre></div>
-
-		<p>Render targets update automatically.</p>
-
-		<p>Examples:</p>
-
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html</a></p>
-
-		<p><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_rtt.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_rtt.html</a></p>
-
-		<h2>
-		<a id="user-content-cameras" class="anchor" href="#cameras" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Cameras</h2>
-
-		<p>Camera position and target is updated automatically.</p>
-
-		<p>If you need to change <code>fov</code>, <code>aspect</code>, <code>near</code>, <code>far</code> you need to recompute projection matrix:</p>
-
-		<div class="highlight highlight-source-js"><pre><span class="pl-smi">camera</span>.<span class="pl-smi">aspect</span> <span class="pl-k">=</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span> <span class="pl-k">/</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>;
-		<span class="pl-smi">camera</span>.<span class="pl-en">updateProjectionMatrix</span>();</pre></div>
-
+		<div>
+			<p>Image, canvas, video and data textures need to have the following flag set if they are changed:</p>
+			<code>
+				texture.needsUpdate = true;
+			</code>
+			<p>Render targets update automatically.</p>
+
+			<h3>Examples:</h3>
+			[example:webgl_materials_video WebGL / materials / video]<br />
+			[example:webgl_rtt WebGL / rtt]
+
+		</div>
+
+
+		<h2>Cameras</h2>
+		<div>
+			<p>A camera's position and target is updated automatically. If you need to change</p>
+			<ul>
+				<li>
+					fov
+				</li>
+				<li>
+					aspect
+				</li>
+				<li>
+					near
+				</li>
+				<li>
+					far
+				</li>
+			</ul>
+			<p>
+				then you'll need to recompute the projection matrix:
+			</p>
+			<code>
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+			</code>
+		</div>
 	</body>
 </html>

docs/manual/introduction/Useful-links.html

@@ -11,55 +11,96 @@
 		<h1>[name]</h1><br />
 
 		<div class="desc">
-			The following is a collection of links that you might find useful when learning Three.<br />
+			The following is a collection of links that you might find useful when learning three.js.<br />
 			If you find something that you'd like to add here, or think that one of the links below is no longer
 			relevant or working, feel free to click the 'edit' button in the top right and make some changes!<br /><br />
 
 			Note also that as three.js is under rapid development, a lot of these links will contain information that is
-			out of date - if something isn't working as you'd expect or one of these links says it should,
-			check the browser console for warning, the relevant docs pages and especially the [page:DeprecatedList].
+			out of date - if something isn't working as you'd expect or as one of these links says it should,
+			check the browser console for warnings or errors, the relevant docs pages and especially the [page:DeprecatedList].<br /><br />
+
+			In addition to this page, mrdoob maintains a collection of links related to three.js over on Google+.
+			Check them out <a href="https://plus.google.com/+ThreejsOrg">here</a>.
 		</div>
 
-		<h2>More documentation</h2>
+		<h2>Help forums</h2>
+		<div>
+			Three.js officially uses [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
+			If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
+		</div>
+
+		<h2>Tutorials and courses</h2>
+
+		<h4>Getting started with three.js</h4>
 		<ul>
 			<li>
-				[link:http://threejsdoc.appspot.com/doc/index.html threejsdoc] - useful because it links every API element to to every official example that uses it.
+				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
 			</li>
 			<li>
-				[link:http://ushiroad.com/3j/ Three.js walking map] - a graphical breakdown of the structure of a three.js scene.
+				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
 			</li>
+		</ul>
+
+		<h4>More extensive / advanced articles and courses</h4>
+		<ul>
 			<li>
-				[link:http://www.reddit.com/r/threejs/ Three.js] subreddit.
+				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 			</li>
 			<li>
-				[link:http://www.reddit.com/r/webgl/ WebGL] subreddit.
+				<a href="https://medium.com/@soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857">Glossy spheres in three.js</a>.
 			</li>
+		 <li>
+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
+			 and uses three.js as its coding tool.
+		 </li>
+		 <li>
+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
+		 </li>
+			 <li>
+			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
+		 </li>
+		 <li>
+			 [link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			 by [link:https://github.com/BKcore BKcore]
+		 </li>
 		</ul>
 
-		<h2>News and Updates</h2>
+		<h4>Tutorials in other languages</h4>
 		<ul>
 			<li>
-				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritaive news source for WebGL.
+				[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
 			</li>
 			<li>
-				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
-			</li>
+		 	 [link:http://www.senaeh.de/einstieg-in-webgl-mit-three-js/ Einstieg in WebGL mit three.js] - three.js tutorial in German
+		  </li>
+
 		</ul>
 
-		<h2>Articles</h2>
+
+		<h2>More documentation</h2>
 		<ul>
 			<li>
-				[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-				by [link:https://github.com/BKcore BKcore]
+				[link:http://threejsdoc.appspot.com/doc/index.html threejsdoc] - less descriptive than the official docs here, however this is
+				useful because it links every API element to every official three.js [link:https://threejs.org/examples/ example] that uses it.
 			</li>
 			<li>
+				[link:http://ushiroad.com/3j/ Three.js walking map] - a graphical breakdown of the structure of a three.js scene.
+			</li>
+		</ul>
 
+		<h2>News and Updates</h2>
+		<ul>
+			<li>
+				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 			</li>
 			<li>
-
+				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
 			</li>
 			<li>
-
+				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
+			</li>
+			<li>
+				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
 			</li>
 		</ul>
 
@@ -70,11 +111,11 @@
 				examples built using three.js r60.
 			</li>
 			<li>
-				[link:https://threejs.org/examples/ Official three.js Examples] - these examples are
+				[link:https://threejs.org/examples/ Official three.js examples] - these examples are
 				maintained as part of the three.js repository, and always use the latest version of three.js.
 			</li>
 			<li>
-				[link:https://rawgit.com/mrdoob/three.js/dev/examples/ Official three.js Examples] (dev branch) -
+				[link:https://rawgit.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
 				Same as the above, except these use the dev branch of three.js,	and are used to check that
 				everything is working as three.js being is developed.
 			</li>
@@ -98,26 +139,6 @@
 		</li>
 	 </ul>
 
-	 <h2>Tutorials and courses</h2>
-	 <ul>
-		 <li>
-			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
-			 and uses three.js as it coding tool.
-		 </li>
-		 <li>
-			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
-		 </li>
-		 <li>
-			 [link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
-		 </li>
-		 <li>
-			 [link:http://www.senaeh.de/einstieg-in-webgl-mit-three-js/ Einstieg in WebGL mit three.js] - three.js tutorial in German
-		 </li>
-		 <li>
-			 [link:http://learningthreejs.com/ Learning Three.js] – blog where each post is dedicated to teaching an aspect of three.js
-		 </li>
-	 </ul>
-
 	 <h2>Old Links</h2>
 	 <div>
 		These links are kept for historical purposes - you may still find them useful, but be warned that
@@ -147,10 +168,10 @@
 			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
 		</li>
 		<li>
-			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by https://github.com/BKcore BKcore]
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
 		</li>
 		<li>
-			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ On the twelfth day of Xmas, take a whirlwind look at Three.js]
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 			by [link:http://github.com/nrocy Paul King]
 		</li>
 	 </ul>

docs/scenes/js/geometry.js

@@ -91,25 +91,24 @@ function updateGroupGeometry( mesh, geometry ) {
 
 }
 
-var CustomSinCurve = THREE.Curve.create(
+function CustomSinCurve( scale ){
 
-	function ( scale ) {
+	this.scale = ( scale === undefined ) ? 1 : scale;
 
-		this.scale = ( scale === undefined ) ? 1 : scale;
+}
 
-	},
+CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
+CustomSinCurve.prototype.constructor = CustomSinCurve;
 
-	function ( t ) {
+CustomSinCurve.prototype.getPoint = function ( t ) {
 
-		var tx = t * 3 - 1.5;
-		var ty = Math.sin( 2 * Math.PI * t );
-		var tz = 0;
+	var tx = t * 3 - 1.5;
+	var ty = Math.sin( 2 * Math.PI * t );
+	var tz = 0;
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
 
-	}
-
-);
+};
 
 // heart shape
 
@@ -925,7 +924,8 @@ var guis = {
 			weight : "regular",
 			bevelEnabled : false,
 			bevelThickness : 1,
-			bevelSize : 0.5
+			bevelSize : 0.5,
+			bevelSegments : 3
 		};
 
 		var fonts = [
@@ -951,7 +951,8 @@ var guis = {
 					curveSegments: data.curveSegments,
 					bevelEnabled: data.bevelEnabled,
 					bevelThickness: data.bevelThickness,
-					bevelSize: data.bevelSize
+					bevelSize: data.bevelSize,
+					bevelSegments: data.bevelSegments
 				} );
 				geometry.center();
 
@@ -975,6 +976,7 @@ var guis = {
 		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
 		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
 		folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
+		folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
 
 		generateGeometry();
 

editor/examples/arkanoid.app.json

@@ -4,7 +4,6 @@
 	},
 	"project": {
 		"shadows": true,
-		"editable": true,
 		"vr": false
 	},
 	"camera": {
@@ -205,4 +204,4 @@
 				"source": "var ball = this.getObjectByName( 'Ball' );\n\nvar direction = new THREE.Vector3();\ndirection.x = Math.random() - 0.5;\ndirection.z = - 0.5;\ndirection.normalize();\n\nvar speed = new THREE.Vector3();\n\n//\n\nvar group = new THREE.Group();\nthis.add( group );\n\nvar paddle = this.getObjectByName( 'Paddle' );\npaddle.material.visible = false;\ngroup.add( paddle );\n\nvar brick = this.getObjectByName( 'Brick' );\n\nfor ( var j = 0; j < 8; j ++ ) {\n\n\tvar material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );\n\n\tfor ( var i = 0; i < 12; i ++ ) {\n\t\t\n\t\tvar object = brick.clone();\n\t\tobject.position.x = i * 22 - 120;\n\t\tobject.position.z = j * 14 - 120;\n\t\tgroup.add( object );\n\n\t\tvar cylinder = object.getObjectByName( 'Cylinder' );\n\t\tcylinder.material = material;\n\n\t}\n\t\n}\n\nbrick.visible = false;\nbrick.material.visible = false;\n\n//\n\nvar raycaster = new THREE.Raycaster();\n\nfunction update( event ) {\n\t\n\tif ( ball.position.x < - 150 || ball.position.x > 150 ) direction.x = - direction.x;\n\tif ( ball.position.z < - 200 || ball.position.z > 200 ) direction.z = - direction.z;\n\n\tball.position.x = Math.max( - 150, Math.min( 150, ball.position.x ) );\n\tball.position.z = Math.max( - 200, Math.min( 200, ball.position.z ) );\n\t\n\tball.position.add( speed.copy( direction ).multiplyScalar( event.delta / 4 ) );\n\t\n\traycaster.set( ball.position, direction );\n\t\n\tvar intersections = raycaster.intersectObjects( group.children );\n\t\n\tif ( intersections.length > 0 ) {\n\t\n\t\tvar intersection = intersections[ 0 ];\n\t\t\n\t\tif ( intersection.distance < 5 ) {\n\t\t\t\n\t\t\tif ( intersection.object !== paddle ) {\n\n\t\t\t\tgroup.remove( intersection.object );\n\t\t\t\t\n\t\t\t}\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}"
 			}]
 	}
-}
+}

editor/examples/camera.app.json

@@ -4,7 +4,6 @@
 	},
 	"project": {
 		"shadows": true,
-		"editable": true,
 		"vr": false
 	},
 	"camera": {
@@ -187,4 +186,4 @@
 				"source": "function 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}"
 			}]
 	}
-}
+}

editor/examples/particles.app.json

@@ -4,7 +4,6 @@
 	},
 	"project": {
 		"shadows": true,
-		"editable": true,
 		"vr": false
 	},
 	"camera": {
@@ -97,4 +96,4 @@
 				"source": "var original = this.getObjectByName( 'Particle' );\n\nvar particles = [];\n\nfor ( var i = 0; i < 100; i ++ ) {\n\n\tvar particle = original.clone();\n\tparticle.userData.velocity = new THREE.Vector3();\n\tthis.add( particle );\n\n\tparticles.push( particle );\n\n}\n\nfunction update( event ) {\n\t\n\tvar particle = particles.shift();\n\tparticles.push( particle );\n\t\t\n\tvar velocity = particle.userData.velocity;\n\tvelocity.x = Math.random() - 0.5;\n\tvelocity.y = Math.random() + 1;\n\tvelocity.z = Math.random() - 0.5;\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.098;\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}"
 			}]
 	}
-}
+}

editor/examples/pong.app.json

@@ -4,7 +4,6 @@
 	},
 	"project": {
 		"shadows": false,
-		"editable": false,
 		"vr": false
 	},
 	"camera": {

editor/index.html

@@ -9,7 +9,7 @@
 		<link href="css/main.css" rel="stylesheet" />
 		<link id="theme" href="css/light.css" rel="stylesheet" />
 
-		<script src="../build/three.min.js"></script>
+		<script src="../build/three.js"></script>
 		<script src="../examples/js/libs/system.min.js"></script>
 
 		<script src="../examples/js/controls/EditorControls.js"></script>

editor/js/Config.js

@@ -13,12 +13,9 @@ var Config = function ( name ) {
 		'project/renderer/gammaInput': false,
 		'project/renderer/gammaOutput': false,
 		'project/renderer/shadows': true,
-		'project/editable': false,
 		'project/vr': false,
 
-		'settings/history': false,
-
-		'ui/sidebar/animation/collapsed': true
+		'settings/history': false
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {

editor/js/Editor.js

@@ -500,7 +500,6 @@ Editor.prototype = {
 				gammaInput: this.config.getKey( 'project/renderer/gammaInput' ),
 				gammaOutput: this.config.getKey( 'project/renderer/gammaOutput' ),
 				shadows: this.config.getKey( 'project/renderer/shadows' ),
-				editable: this.config.getKey( 'project/editable' ),
 				vr: this.config.getKey( 'project/vr' )
 			},
 			camera: this.camera.toJSON(),

editor/js/Loader.js

@@ -155,15 +155,15 @@ var Loader = function ( editor ) {
 
 				break;
 
+			case 'glb':
 			case 'gltf':
 
 				reader.addEventListener( 'load', function ( event ) {
 
 					var contents = event.target.result;
-					var json = JSON.parse( contents );
 
 					var loader = new THREE.GLTFLoader();
-					loader.parse( json, function ( result ) {
+					loader.parse( contents, function ( result ) {
 
 						result.scene.name = filename;
 						editor.execute( new AddObjectCommand( result.scene ) );
@@ -171,7 +171,7 @@ var Loader = function ( editor ) {
 					} );
 
 				}, false );
-				reader.readAsText( file );
+				reader.readAsArrayBuffer( file );
 
 				break;
 

editor/js/Script.js

@@ -84,7 +84,7 @@ var Script = function ( editor ) {
 
 				if ( value !== currentScript.source ) {
 
-					editor.execute( new SetScriptValueCommand( currentObject, currentScript, 'source', value, codemirror.getCursor() ) );
+					editor.execute( new SetScriptValueCommand( currentObject, currentScript, 'source', value, codemirror.getCursor(), codemirror.getScrollInfo() ) );
 
 				}
 				return;
@@ -422,7 +422,7 @@ var Script = function ( editor ) {
 
 	} );
 
-	signals.refreshScriptEditor.add( function ( object, script, cursorPosition ) {
+	signals.refreshScriptEditor.add( function ( object, script, cursorPosition, scrollInfo ) {
 
 		if ( currentScript !== script ) return;
 
@@ -435,6 +435,7 @@ var Script = function ( editor ) {
 		if ( cursorPosition !== undefined ) {
 
 			codemirror.setCursor( cursorPosition );
+			codemirror.scrollTo( scrollInfo.left, scrollInfo.top );
 
 		}
 		codemirror.setHistory( history ); // setting the history to previous state

editor/js/Sidebar.Animation.js

@@ -9,16 +9,11 @@ Sidebar.Animation = function ( editor ) {
 	var options = {};
 	var possibleAnimations = {};
 
-	var container = new UI.CollapsiblePanel();
-	container.setCollapsed( editor.config.getKey( 'ui/sidebar/animation/collapsed' ) );
-	container.onCollapsedChange( function ( boolean ) {
-
-		editor.config.setKey( 'ui/sidebar/animation/collapsed', boolean );
-
-	} );
+	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
-	container.addStatic( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );
+	container.add( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );
+	container.add( new UI.Break() );
 	container.add( new UI.Break() );
 
 	var animationsRow = new UI.Row();

editor/js/Sidebar.Project.js

@@ -101,20 +101,6 @@ Sidebar.Project = function ( editor ) {
 
 	container.add( rendererPropertiesRow );
 
-	// Editable
-
-	var editableRow = new UI.Row();
-	var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
-
-		config.setKey( 'project/editable', this.getValue() );
-
-	} );
-
-	editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) );
-	editableRow.add( editable );
-
-	container.add( editableRow );
-
 	// VR
 
 	var vrRow = new UI.Row();

editor/js/Viewport.js

@@ -36,7 +36,7 @@ var Viewport = function ( editor ) {
 
 	// helpers
 
-	var grid = new THREE.GridHelper( 30, 60 );
+	var grid = new THREE.GridHelper( 60, 60 );
 	sceneHelpers.add( grid );
 
 	//
@@ -295,12 +295,12 @@ var Viewport = function ( editor ) {
 
 			case 'css/light.css':
 				sceneHelpers.remove( grid );
-				grid = new THREE.GridHelper( 30, 60, 0x444444, 0x888888 );
+				grid = new THREE.GridHelper( 60, 60, 0x444444, 0x888888 );
 				sceneHelpers.add( grid );
 				break;
 			case 'css/dark.css':
 				sceneHelpers.remove( grid );
-				grid = new THREE.GridHelper( 30, 60, 0xbbbbbb, 0x888888 );
+				grid = new THREE.GridHelper( 60, 60, 0xbbbbbb, 0x888888 );
 				sceneHelpers.add( grid );
 				break;
 

editor/js/commands/SetScriptValueCommand.js

@@ -9,10 +9,11 @@
  * @param attributeName string
  * @param newValue string, object
  * @param cursorPosition javascript object with format {line: 2, ch: 3}
+ * @param scrollInfo javascript object with values {left, top, width, height, clientWidth, clientHeight}
  * @constructor
  */
 
-var SetScriptValueCommand = function ( object, script, attributeName, newValue, cursorPosition ) {
+var SetScriptValueCommand = function ( object, script, attributeName, newValue, cursorPosition, scrollInfo ) {
 
 	Command.call( this );
 
@@ -27,6 +28,7 @@ var SetScriptValueCommand = function ( object, script, attributeName, newValue,
 	this.oldValue = ( script !== undefined ) ? script[ this.attributeName ] : undefined;
 	this.newValue = newValue;
 	this.cursorPosition = cursorPosition;
+	this.scrollInfo = scrollInfo;
 
 };
 
@@ -37,7 +39,7 @@ SetScriptValueCommand.prototype = {
 		this.script[ this.attributeName ] = this.newValue;
 
 		this.editor.signals.scriptChanged.dispatch();
-		this.editor.signals.refreshScriptEditor.dispatch( this.object, this.script, this.cursorPosition );
+		this.editor.signals.refreshScriptEditor.dispatch( this.object, this.script, this.cursorPosition, this.scrollInfo );
 
 	},
 
@@ -46,13 +48,14 @@ SetScriptValueCommand.prototype = {
 		this.script[ this.attributeName ] = this.oldValue;
 
 		this.editor.signals.scriptChanged.dispatch();
-		this.editor.signals.refreshScriptEditor.dispatch( this.object, this.script, this.cursorPosition );
+		this.editor.signals.refreshScriptEditor.dispatch( this.object, this.script, this.cursorPosition, this.scrollInfo );
 
 	},
 
 	update: function ( cmd ) {
 
 		this.cursorPosition = cmd.cursorPosition;
+		this.scrollInfo = cmd.scrollInfo;
 		this.newValue = cmd.newValue;
 
 	},
@@ -67,6 +70,7 @@ SetScriptValueCommand.prototype = {
 		output.oldValue = this.oldValue;
 		output.newValue = this.newValue;
 		output.cursorPosition = this.cursorPosition;
+		output.scrollInfo = this.scrollInfo;
 
 		return output;
 
@@ -82,6 +86,7 @@ SetScriptValueCommand.prototype = {
 		this.object = this.editor.objectByUuid( json.objectUuid );
 		this.script = this.editor.scripts[ json.objectUuid ][ json.index ];
 		this.cursorPosition = json.cursorPosition;
+		this.scrollInfo = json.scrollInfo;
 
 	}
 

editor/js/libs/app.js

@@ -6,8 +6,6 @@ var APP = {
 
 	Player: function () {
 
-		var scope = this;
-
 		var loader = new THREE.ObjectLoader();
 		var camera, scene, renderer;
 

editor/js/libs/app/index.html

@@ -6,26 +6,26 @@
 		<meta name="generator" content="Three.js Editor">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-		body {
-			font-family: Helvetica, Arial, sans-serif;
-			font-size: 12px;
-			background-color: #000;
-			margin: 0px;
-			overflow: hidden;
-		}
-		#edit {
-			position: absolute;
-			bottom: 20px;
-			right: 20px;
-			padding: 8px;
-			color: #555;
-			background-color: #fff;
-			opacity: 0.5;
-		}
-		#edit:hover {
-			cursor: pointer;
-			opacity: 1;
-		}
+			body {
+				font-family: Helvetica, Arial, sans-serif;
+				font-size: 12px;
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#edit {
+				position: absolute;
+				bottom: 20px;
+				right: 20px;
+				padding: 8px;
+				text-decoration: none;
+				background-color: #fff;
+				color: #555;
+				opacity: 0.5;
+			}
+			#edit:hover {
+				opacity: 1;
+			}
 		</style>
 	</head>
 	<body ontouchstart="">
@@ -37,34 +37,26 @@
 			var loader = new THREE.FileLoader();
 			loader.load( 'app.json', function ( text ) {
 
-				var json = JSON.parse( text );
-
 				var player = new APP.Player();
-				player.load( json );
+				player.load( JSON.parse( text ) );
 				player.setSize( window.innerWidth, window.innerHeight );
 				player.play();
 
 				document.body.appendChild( player.dom );
 
-				if ( json.project.editable === true ) {
+				window.addEventListener( 'resize', function () {
+					player.setSize( window.innerWidth, window.innerHeight );
+				} );
 
-					var button = document.createElement( 'div' );
+				if ( location.search === '?edit' ) {
+					var button = document.createElement( 'a' );
 					button.id = 'edit';
+					button.href = 'https://threejs.org/editor/#file=' + location.href.split( '/' ).slice( 0, - 1 ).join( '/' ) + '/app.json';
+					button.target = '_blank';
 					button.textContent = 'EDIT';
-					button.addEventListener( 'click', function ( event ) {
-
-						var url = location.href.split( '/' ).slice( 0, - 1 ).join( '/' );
-						window.open( 'http://threejs.org/editor/#file=' + url + '/app.json' );
-
-					}, false );
 					document.body.appendChild( button );
-
 				}
 
-				window.addEventListener( 'resize', function () {
-					player.setSize( window.innerWidth, window.innerHeight );
-				} );
-
 			} );
 
 		</script>

editor/js/libs/ui.js

@@ -216,131 +216,6 @@ UI.Panel = function () {
 UI.Panel.prototype = Object.create( UI.Element.prototype );
 UI.Panel.prototype.constructor = UI.Panel;
 
-
-// Collapsible Panel
-
-UI.CollapsiblePanel = function () {
-
-	UI.Panel.call( this );
-
-	this.setClass( 'Panel Collapsible' );
-
-	var scope = this;
-
-	this.static = new UI.Panel();
-	this.static.setClass( 'Static' );
-	this.static.onClick( function () {
-
-		scope.toggle();
-
-	} );
-	this.dom.appendChild( this.static.dom );
-
-	this.contents = new UI.Panel();
-	this.contents.setClass( 'Content' );
-	this.dom.appendChild( this.contents.dom );
-
-	var button = new UI.Panel();
-	button.setClass( 'Button' );
-	this.static.add( button );
-
-	this.isCollapsed = false;
-
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype = Object.create( UI.Panel.prototype );
-UI.CollapsiblePanel.prototype.constructor = UI.CollapsiblePanel;
-
-UI.CollapsiblePanel.prototype.addStatic = function () {
-
-	this.static.add.apply( this.static, arguments );
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.removeStatic = function () {
-
-	this.static.remove.apply( this.static, arguments );
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.clearStatic = function () {
-
-	this.static.clear();
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.add = function () {
-
-	this.contents.add.apply( this.contents, arguments );
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.remove = function () {
-
-	this.contents.remove.apply( this.contents, arguments );
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.clear = function () {
-
-	this.contents.clear();
-	return this;
-
-};
-
-UI.CollapsiblePanel.prototype.toggle = function() {
-
-	this.setCollapsed( ! this.isCollapsed );
-
-};
-
-UI.CollapsiblePanel.prototype.collapse = function() {
-
-	this.setCollapsed( true );
-
-};
-
-UI.CollapsiblePanel.prototype.expand = function() {
-
-	this.setCollapsed( false );
-
-};
-
-UI.CollapsiblePanel.prototype.setCollapsed = function( boolean ) {
-
-	if ( boolean ) {
-
-		this.dom.classList.add( 'collapsed' );
-
-	} else {
-
-		this.dom.classList.remove( 'collapsed' );
-
-	}
-
-	this.isCollapsed = boolean;
-
-	if ( this.onCollapsedChangeCallback !== undefined ) {
-
-		this.onCollapsedChangeCallback( boolean );
-
-	}
-
-};
-
-UI.CollapsiblePanel.prototype.onCollapsedChange = function ( callback ) {
-
-	this.onCollapsedChangeCallback = callback;
-
-};
-
 // Text
 
 UI.Text = function ( text ) {
@@ -987,10 +862,10 @@ UI.Integer.prototype.setValue = function ( value ) {
 
 };
 
-UI.Number.prototype.setStep = function ( step ) {
-
-	this.step = step;
-
+UI.Integer.prototype.setStep = function ( step ) {
+	
+	this.step = parseInt( step ); 
+	
 	return this;
 
 };

examples/files.js

@@ -232,6 +232,7 @@ var files = {
 		"webgl_shadowmap_pointlight",
 		"webgl_shadowmap_viewer",
 		"webgl_shadowmesh",
+		"webgl_simple_gi",
 		"webgl_skinning_simple",
 		"webgl_sprites",
 		"webgl_terrain_dynamic",
@@ -272,6 +273,7 @@ var files = {
 	],
 	"webvr": [
 		"webvr_cubes",
+		"webvr_daydream",
 		"webvr_panorama",
 		"webvr_rollercoaster",
 		"webvr_shadow",

examples/index.html

@@ -379,11 +379,10 @@
 
 			var v = filterInput.value;
 			if( v !== '' ) {
-				window.history.replaceState( {} , '', '?q=' + v );
+				window.history.replaceState( {} , '', '?q=' + v + window.location.hash );
 			} else {
-				window.history.replaceState( {} , '', window.location.pathname );
+				window.history.replaceState( {} , '', window.location.pathname + window.location.hash );
 			}
-			if( selected ) window.location.hash = selected;
 
 			var exp = new RegExp( v, 'gi' );
 

examples/js/CurveExtras.js

@@ -3,329 +3,361 @@
  * @author zz85
  *
  * Formulas collected from various sources
- *	http://mathworld.wolfram.com/HeartCurve.html
- *	http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
- *	http://en.wikipedia.org/wiki/Viviani%27s_curve
- *	http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
- *	http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
- *	http://prideout.net/blog/?p=44
+ * http://mathworld.wolfram.com/HeartCurve.html
+ * http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
+ * http://en.wikipedia.org/wiki/Viviani%27s_curve
+ * http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
+ * http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
+ * http://prideout.net/blog/?p=44
  */
 
-// Lets define some curves
-THREE.Curves = {};
+( function( Curves ) {
 
+	// GrannyKnot
 
- THREE.Curves.GrannyKnot = THREE.Curve.create( function() {},
+	function GrannyKnot() {}
 
-	 function( t ) {
+	GrannyKnot.prototype = Object.create( THREE.Curve.prototype );
+	GrannyKnot.prototype.constructor = GrannyKnot;
+
+	GrannyKnot.prototype.getPoint = function( t ) {
 
 		t = 2 * Math.PI * t;
 
 		var x = - 0.22 * Math.cos( t ) - 1.28 * Math.sin( t ) - 0.44 * Math.cos( 3 * t ) - 0.78 * Math.sin( 3 * t );
 		var y = - 0.1 * Math.cos( 2 * t ) - 0.27 * Math.sin( 2 * t ) + 0.38 * Math.cos( 4 * t ) + 0.46 * Math.sin( 4 * t );
 		var z = 0.7 * Math.cos( 3 * t ) - 0.4 * Math.sin( 3 * t );
-		return new THREE.Vector3( x, y, z ).multiplyScalar( 20 );
-
-	}
-);
 
-THREE.Curves.HeartCurve = THREE.Curve.create(
+		return new THREE.Vector3( x, y, z ).multiplyScalar( 20 );
 
-function( s ) {
+	};
 
-	this.scale = ( s === undefined ) ? 5 : s;
+	// HeartCurve
 
-},
+	function HeartCurve( s ) {
 
-function( t ) {
+		this.scale = ( s === undefined ) ? 5 : s;
 
-	t *= 2 * Math.PI;
+	}
 
-	var tx = 16 * Math.pow( Math.sin( t ), 3 );
-	var ty = 13 * Math.cos( t ) - 5 * Math.cos( 2 * t ) - 2 * Math.cos( 3 * t ) - Math.cos( 4 * t ), tz = 0;
+	HeartCurve.prototype = Object.create( THREE.Curve.prototype );
+	HeartCurve.prototype.constructor = HeartCurve;
 
-	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+	HeartCurve.prototype.getPoint = function( t ) {
 
-}
+		t *= 2 * Math.PI;
 
-);
+		var x = 16 * Math.pow( Math.sin( t ), 3 );
+		var y = 13 * Math.cos( t ) - 5 * Math.cos( 2 * t ) - 2 * Math.cos( 3 * t ) - Math.cos( 4 * t );
+		var z = 0;
 
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
+	};
 
-// Viviani's Curve
-THREE.Curves.VivianiCurve = THREE.Curve.create(
+	// Viviani's Curve
 
-	function( radius ) {
+	function VivianiCurve( radius ) {
 
 		this.radius = radius;
 
-	},
+	}
 
-	function( t ) {
+	VivianiCurve.prototype = Object.create( THREE.Curve.prototype );
+	VivianiCurve.prototype.constructor = VivianiCurve;
 
-		t = t * 4 * Math.PI; // Normalized to 0..1
-		var a = this.radius / 2;
-		var tx = a * ( 1 + Math.cos( t ) ),
-			ty = a * Math.sin( t ),
-			tz = 2 * a * Math.sin( t / 2 );
+	VivianiCurve.prototype.getPoint = function( t ) {
 
-		return new THREE.Vector3( tx, ty, tz );
+		t = t * 4 * Math.PI; // normalized to 0..1
+		var a = this.radius / 2;
 
-	}
+		var x = a * ( 1 + Math.cos( t ) );
+		var y = a * Math.sin( t );
+		var z = 2 * a * Math.sin( t / 2 );
 
-);
+		return new THREE.Vector3( x, y, z );
 
+	};
 
-THREE.Curves.KnotCurve = THREE.Curve.create(
+	// KnotCurve
 
-	function() {
+	function KnotCurve() {}
 
-	},
+	KnotCurve.prototype = Object.create( THREE.Curve.prototype );
+	KnotCurve.prototype.constructor = KnotCurve;
 
-	function( t ) {
+	KnotCurve.prototype.getPoint = function( t ) {
 
 		t *= 2 * Math.PI;
 
 		var R = 10;
 		var s = 50;
-		var tx = s * Math.sin( t ),
-			ty = Math.cos( t ) * ( R + s * Math.cos( t ) ),
-			tz = Math.sin( t ) * ( R + s * Math.cos( t ) );
 
-		return new THREE.Vector3( tx, ty, tz );
+		var x = s * Math.sin( t );
+		var y = Math.cos( t ) * ( R + s * Math.cos( t ) );
+		var z = Math.sin( t ) * ( R + s * Math.cos( t ) );
 
-	}
+		return new THREE.Vector3( x, y, z );
 
-);
+	};
 
-THREE.Curves.HelixCurve = THREE.Curve.create(
+	// HelixCurve
 
-	function() {
+	function HelixCurve() {}
 
-	},
+	HelixCurve.prototype = Object.create( THREE.Curve.prototype );
+	HelixCurve.prototype.constructor = HelixCurve;
 
-	function( t ) {
+	HelixCurve.prototype.getPoint = function( t ) {
 
 		var a = 30; // radius
-		var b = 150; //height
+		var b = 150; // height
+
 		var t2 = 2 * Math.PI * t * b / 30;
-		var tx = Math.cos( t2 ) * a,
-			ty = Math.sin( t2 ) * a,
-			tz = b * t;
 
-		return new THREE.Vector3( tx, ty, tz );
+		var x = Math.cos( t2 ) * a;
+		var y = Math.sin( t2 ) * a;
+		var z = b * t;
 
-	}
+		return new THREE.Vector3( x, y, z );
 
-);
+	};
 
-THREE.Curves.TrefoilKnot = THREE.Curve.create(
+	// TrefoilKnot
 
-	function( s ) {
+	function TrefoilKnot( s ) {
 
 		this.scale = ( s === undefined ) ? 10 : s;
 
-	},
+	}
 
-	function( t ) {
+	TrefoilKnot.prototype = Object.create( THREE.Curve.prototype );
+	TrefoilKnot.prototype.constructor = TrefoilKnot;
+
+	TrefoilKnot.prototype.getPoint = function( t ) {
 
 		t *= Math.PI * 2;
-		var tx = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t ),
-			ty = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t ),
-			tz = Math.sin( 3 * t );
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+		var x = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t );
+		var y = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t );
+		var z = Math.sin( 3 * t );
 
-	}
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-);
+	};
 
-THREE.Curves.TorusKnot = THREE.Curve.create(
+	// TorusKnot
 
-	function( s ) {
+	function TorusKnot( s ) {
 
 		this.scale = ( s === undefined ) ? 10 : s;
 
-	},
+	}
 
-	function( t ) {
+	TorusKnot.prototype = Object.create( THREE.Curve.prototype );
+	TorusKnot.prototype.constructor = TorusKnot;
 
-		var p = 3,
-			q = 4;
-		t *= Math.PI * 2;
-		var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t ),
-			ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t ),
-			tz = Math.sin( q * t );
+	TorusKnot.prototype.getPoint = function( t ) {
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+		var p = 3;
+		var q = 4;
 
-	}
+		t *= Math.PI * 2;
 
-);
+		var x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		var y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		var z = Math.sin( q * t );
 
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-THREE.Curves.CinquefoilKnot = THREE.Curve.create(
+	};
 
-	function( s ) {
+	// CinquefoilKnot
+
+	function CinquefoilKnot( s ) {
 
 		this.scale = ( s === undefined ) ? 10 : s;
 
-	},
+	}
 
-	function( t ) {
+	CinquefoilKnot.prototype = Object.create( THREE.Curve.prototype );
+	CinquefoilKnot.prototype.constructor = CinquefoilKnot;
 
-		var p = 2,
-			q = 5;
-		t *= Math.PI * 2;
-		var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t ),
-			ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t ),
-			tz = Math.sin( q * t );
+	CinquefoilKnot.prototype.getPoint = function( t ) {
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+		var p = 2;
+		var q = 5;
 
-	}
+		t *= Math.PI * 2;
+
+		var x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		var y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		var z = Math.sin( q * t );
 
-);
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
+	};
 
-THREE.Curves.TrefoilPolynomialKnot = THREE.Curve.create(
+	// TrefoilPolynomialKnot
 
-	function( s ) {
+	function TrefoilPolynomialKnot( s ) {
 
 		this.scale = ( s === undefined ) ? 10 : s;
 
-	},
+	}
+
+	TrefoilPolynomialKnot.prototype = Object.create( THREE.Curve.prototype );
+	TrefoilPolynomialKnot.prototype.constructor = TrefoilPolynomialKnot;
 
-	function( t ) {
+	TrefoilPolynomialKnot.prototype.getPoint = function( t ) {
 
 		t = t * 4 - 2;
-		var tx = Math.pow( t, 3 ) - 3 * t,
-			ty = Math.pow( t, 4 ) - 4 * t * t,
-			tz = 1 / 5 * Math.pow( t, 5 ) - 2 * t;
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+		var x = Math.pow( t, 3 ) - 3 * t;
+		var y = Math.pow( t, 4 ) - 4 * t * t;
+		var z = 1 / 5 * Math.pow( t, 5 ) - 2 * t;
 
-	}
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-);
+	};
 
-// var scaleTo = function(x, y) {
-//   var r = y - x;
-//   return function(t) {
-//     t * r + x;
-//   };
-// }
-var scaleTo = function( x, y, t ) {
+	var scaleTo = function( x, y, t ) {
 
-	var r = y - x;
-	return t * r + x;
+		var r = y - x;
+		return t * r + x;
 
-};
+	};
 
-THREE.Curves.FigureEightPolynomialKnot = THREE.Curve.create(
+	// FigureEightPolynomialKnot
 
-	function( s ) {
+	function FigureEightPolynomialKnot( s ) {
 
 		this.scale = ( s === undefined ) ? 1 : s;
 
-	},
+	}
+
+	FigureEightPolynomialKnot.prototype = Object.create( THREE.Curve.prototype );
+	FigureEightPolynomialKnot.prototype.constructor = FigureEightPolynomialKnot;
 
-	function( t ) {
+	FigureEightPolynomialKnot.prototype.getPoint = function( t ) {
 
 		t = scaleTo( - 4, 4, t );
-		var tx = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 ),
-			ty = Math.pow( t, 4 ) - 13 * t * t,
-			tz = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
 
-		return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+		var x = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 );
+		var y = Math.pow( t, 4 ) - 13 * t * t;
+		var z = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
 
-	}
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-);
+	};
 
-THREE.Curves.DecoratedTorusKnot4a = THREE.Curve.create(
+	// DecoratedTorusKnot4a
 
-	function( s ) {
+	function DecoratedTorusKnot4a( s ) {
 
 		this.scale = ( s === undefined ) ? 40 : s;
 
-	},
+	}
+
+	DecoratedTorusKnot4a.prototype = Object.create( THREE.Curve.prototype );
+	DecoratedTorusKnot4a.prototype.constructor = DecoratedTorusKnot4a;
 
-	function( t ) {
+	DecoratedTorusKnot4a.prototype.getPoint = function( t ) {
 
 		t *= Math.PI * 2;
-		var
-		x = Math.cos( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) ),
-			y = Math.sin( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) ),
-			z = 0.35 * Math.sin( 5 * t );
 
-		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
+		var x = Math.cos( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		var y = Math.sin( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		var z = 0.35 * Math.sin( 5 * t );
 
-	}
-
-);
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
+	};
 
-THREE.Curves.DecoratedTorusKnot4b = THREE.Curve.create(
+	// DecoratedTorusKnot4b
 
-	function( s ) {
+	function DecoratedTorusKnot4b( s ) {
 
 		this.scale = ( s === undefined ) ? 40 : s;
 
-	},
+	}
+
+	DecoratedTorusKnot4b.prototype = Object.create( THREE.Curve.prototype );
+	DecoratedTorusKnot4b.prototype.constructor = DecoratedTorusKnot4b;
 
-	function( t ) {
+	DecoratedTorusKnot4b.prototype.getPoint = function( t ) {
 
 		var fi = t * Math.PI * 2;
-		var x = Math.cos( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) ),
-			y = Math.sin( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) ),
-			z = 0.2 * Math.sin( 9 * fi );
-
-		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-	}
+		var x = Math.cos( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		var y = Math.sin( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		var z = 0.2 * Math.sin( 9 * fi );
 
-);
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
+	};
 
-THREE.Curves.DecoratedTorusKnot5a = THREE.Curve.create(
+	// DecoratedTorusKnot5a
 
-	function( s ) {
+	function DecoratedTorusKnot5a( s ) {
 
 		this.scale = ( s === undefined ) ? 40 : s;
 
-	},
+	}
+
+	DecoratedTorusKnot5a.prototype = Object.create( THREE.Curve.prototype );
+	DecoratedTorusKnot5a.prototype.constructor = DecoratedTorusKnot5a;
 
-	function( t ) {
+	DecoratedTorusKnot5a.prototype.getPoint = function( t ) {
 
 		var fi = t * Math.PI * 2;
-		var x = Math.cos( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) ),
-			y = Math.sin( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) ),
-			z = 0.2 * Math.sin( 20 * fi );
 
-		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
+		var x = Math.cos( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		var y = Math.sin( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		var z = 0.2 * Math.sin( 20 * fi );
 
-	}
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-);
+	};
 
-THREE.Curves.DecoratedTorusKnot5c = THREE.Curve.create(
+	// DecoratedTorusKnot5c
 
-	function( s ) {
+	function DecoratedTorusKnot5c( s ) {
 
 		this.scale = ( s === undefined ) ? 40 : s;
 
-	},
+	}
+
+	DecoratedTorusKnot5c.prototype = Object.create( THREE.Curve.prototype );
+	DecoratedTorusKnot5c.prototype.constructor = DecoratedTorusKnot5c;
 
-	function( t ) {
+	DecoratedTorusKnot5c.prototype.getPoint = function( t ) {
 
 		var fi = t * Math.PI * 2;
-		var x = Math.cos( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) ),
-			y = Math.sin( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) ),
-			z = 0.35 * Math.sin( 15 * fi );
 
-		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
+		var x = Math.cos( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		var y = Math.sin( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		var z = 0.35 * Math.sin( 15 * fi );
 
-	}
+		return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
 
-);
+	};
+
+	// export
+
+	Curves.GrannyKnot = GrannyKnot;
+	Curves.HeartCurve = HeartCurve;
+	Curves.VivianiCurve = VivianiCurve;
+	Curves.KnotCurve = KnotCurve;
+	Curves.HelixCurve = HelixCurve;
+	Curves.TrefoilKnot = TrefoilKnot;
+	Curves.TorusKnot = TorusKnot;
+	Curves.CinquefoilKnot = CinquefoilKnot;
+	Curves.TrefoilPolynomialKnot = TrefoilPolynomialKnot;
+	Curves.FigureEightPolynomialKnot = FigureEightPolynomialKnot;
+	Curves.DecoratedTorusKnot4a = DecoratedTorusKnot4a;
+	Curves.DecoratedTorusKnot4b = DecoratedTorusKnot4b;
+	Curves.DecoratedTorusKnot5a = DecoratedTorusKnot5a;
+	Curves.DecoratedTorusKnot5c = DecoratedTorusKnot5c;
+
+} ) ( THREE.Curves = THREE.Curves || {} );

examples/js/Mirror.js

@@ -2,56 +2,6 @@
  * @author Slayvin / http://slayvin.net
  */
 
-THREE.ShaderLib[ 'mirror' ] = {
-
-	uniforms: {
-		"mirrorColor": { value: new THREE.Color( 0x7F7F7F ) },
-		"mirrorSampler": { value: null },
-		"textureMatrix" : { value: new THREE.Matrix4() }
-	},
-
-	vertexShader: [
-
-		"uniform mat4 textureMatrix;",
-
-		"varying vec4 mirrorCoord;",
-
-		"void main() {",
-
-			"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-			"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-			"mirrorCoord = textureMatrix * worldPosition;",
-
-			"gl_Position = projectionMatrix * mvPosition;",
-
-		"}"
-
-	].join( "\n" ),
-
-	fragmentShader: [
-
-		"uniform vec3 mirrorColor;",
-		"uniform sampler2D mirrorSampler;",
-
-		"varying vec4 mirrorCoord;",
-
-		"float blendOverlay(float base, float blend) {",
-			"return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );",
-		"}",
-
-		"void main() {",
-
-			"vec4 color = texture2DProj(mirrorSampler, mirrorCoord);",
-			"color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);",
-
-			"gl_FragColor = color;",
-
-		"}"
-
-	].join( "\n" )
-
-};
-
 THREE.Mirror = function ( renderer, camera, options ) {
 
 	THREE.Object3D.call( this );
@@ -78,25 +28,6 @@ THREE.Mirror = function ( renderer, camera, options ) {
 	this.lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
 	this.clipPlane = new THREE.Vector4();
 
-	// For debug only, show the normal and plane of the mirror
-	var debugMode = options.debugMode !== undefined ? options.debugMode : false;
-
-	if ( debugMode ) {
-
-		var arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, 0 ), 10, 0xffff80 );
-		var planeGeometry = new THREE.Geometry();
-		planeGeometry.vertices.push( new THREE.Vector3( - 10, - 10, 0 ) );
-		planeGeometry.vertices.push( new THREE.Vector3( 10, - 10, 0 ) );
-		planeGeometry.vertices.push( new THREE.Vector3( 10, 10, 0 ) );
-		planeGeometry.vertices.push( new THREE.Vector3( - 10, 10, 0 ) );
-		planeGeometry.vertices.push( planeGeometry.vertices[ 0 ] );
-		var plane = new THREE.Line( planeGeometry, new THREE.LineBasicMaterial( { color: 0xffff80 } ) );
-
-		this.add( arrow );
-		this.add( plane );
-
-	}
-
 	if ( camera instanceof THREE.PerspectiveCamera ) {
 
 		this.camera = camera;
@@ -118,7 +49,47 @@ THREE.Mirror = function ( renderer, camera, options ) {
 	this.renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
 	this.renderTarget2 = new THREE.WebGLRenderTarget( width, height, parameters );
 
-	var mirrorShader = THREE.ShaderLib[ "mirror" ];
+	var mirrorShader = {
+
+		uniforms: {
+			mirrorColor: { value: new THREE.Color( 0x7F7F7F ) },
+			mirrorSampler: { value: null },
+			textureMatrix: { value: new THREE.Matrix4() }
+		},
+
+		vertexShader: [
+			'uniform mat4 textureMatrix;',
+			'varying vec4 mirrorCoord;',
+
+			'void main() {',
+
+			'	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
+			'	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
+			'	mirrorCoord = textureMatrix * worldPosition;',
+
+			'	gl_Position = projectionMatrix * mvPosition;',
+
+			'}'
+		].join( '\n' ),
+
+		fragmentShader: [
+			'uniform vec3 mirrorColor;',
+			'uniform sampler2D mirrorSampler;',
+			'varying vec4 mirrorCoord;',
+
+			'float blendOverlay(float base, float blend) {',
+			'	return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );',
+			'}',
+
+			'void main() {',
+			'	vec4 color = texture2DProj(mirrorSampler, mirrorCoord);',
+			'	color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);',
+			'	gl_FragColor = color;',
+			'}'
+		].join( '\n' )
+
+	};
+
 	var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
 
 	this.material = new THREE.ShaderMaterial( {
@@ -146,157 +117,164 @@ THREE.Mirror = function ( renderer, camera, options ) {
 };
 
 THREE.Mirror.prototype = Object.create( THREE.Object3D.prototype );
-THREE.Mirror.prototype.constructor = THREE.Mirror;
 
-THREE.Mirror.prototype.renderWithMirror = function ( otherMirror ) {
+Object.assign( THREE.Mirror.prototype, {
 
-	// update the mirror matrix to mirror the current view
-	this.updateTextureMatrix();
-	this.matrixNeedsUpdate = false;
+	constructor: THREE.Mirror,
 
-	// set the camera of the other mirror so the mirrored view is the reference view
-	var tempCamera = otherMirror.camera;
-	otherMirror.camera = this.mirrorCamera;
+	renderWithMirror: function ( otherMirror ) {
 
-	// render the other mirror in temp texture
-	otherMirror.renderTemp();
-	otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture;
+		// update the mirror matrix to mirror the current view
+		this.updateTextureMatrix();
+		this.matrixNeedsUpdate = false;
 
-	// render the current mirror
-	this.render();
-	this.matrixNeedsUpdate = true;
+		// set the camera of the other mirror so the mirrored view is the reference view
+		var tempCamera = otherMirror.camera;
+		otherMirror.camera = this.mirrorCamera;
 
-	// restore material and camera of other mirror
-	otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
-	otherMirror.camera = tempCamera;
+		// render the other mirror in temp texture
+		otherMirror.renderTemp();
+		otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture;
 
-	// restore texture matrix of other mirror
-	otherMirror.updateTextureMatrix();
+		// render the current mirror
+		this.render();
+		this.matrixNeedsUpdate = true;
 
-};
+		// restore material and camera of other mirror
+		otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
+		otherMirror.camera = tempCamera;
 
-THREE.Mirror.prototype.updateTextureMatrix = function () {
+		// restore texture matrix of other mirror
+		otherMirror.updateTextureMatrix();
 
-	this.updateMatrixWorld();
-	this.camera.updateMatrixWorld();
+	},
 
-	this.mirrorWorldPosition.setFromMatrixPosition( this.matrixWorld );
-	this.cameraWorldPosition.setFromMatrixPosition( this.camera.matrixWorld );
+	updateTextureMatrix: function () {
 
-	this.rotationMatrix.extractRotation( this.matrixWorld );
+		this.updateMatrixWorld();
+		this.camera.updateMatrixWorld();
 
-	this.normal.set( 0, 0, 1 );
-	this.normal.applyMatrix4( this.rotationMatrix );
+		this.mirrorWorldPosition.setFromMatrixPosition( this.matrixWorld );
+		this.cameraWorldPosition.setFromMatrixPosition( this.camera.matrixWorld );
 
-	var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition );
-	view.reflect( this.normal ).negate();
-	view.add( this.mirrorWorldPosition );
+		this.rotationMatrix.extractRotation( this.matrixWorld );
 
-	this.rotationMatrix.extractRotation( this.camera.matrixWorld );
+		this.normal.set( 0, 0, 1 );
+		this.normal.applyMatrix4( this.rotationMatrix );
 
-	this.lookAtPosition.set( 0, 0, - 1 );
-	this.lookAtPosition.applyMatrix4( this.rotationMatrix );
-	this.lookAtPosition.add( this.cameraWorldPosition );
+		var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition );
+		view.reflect( this.normal ).negate();
+		view.add( this.mirrorWorldPosition );
 
-	var target = this.mirrorWorldPosition.clone().sub( this.lookAtPosition );
-	target.reflect( this.normal ).negate();
-	target.add( this.mirrorWorldPosition );
+		this.rotationMatrix.extractRotation( this.camera.matrixWorld );
 
-	this.up.set( 0, - 1, 0 );
-	this.up.applyMatrix4( this.rotationMatrix );
-	this.up.reflect( this.normal ).negate();
+		this.lookAtPosition.set( 0, 0, - 1 );
+		this.lookAtPosition.applyMatrix4( this.rotationMatrix );
+		this.lookAtPosition.add( this.cameraWorldPosition );
 
-	this.mirrorCamera.position.copy( view );
-	this.mirrorCamera.up = this.up;
-	this.mirrorCamera.lookAt( target );
+		var target = this.mirrorWorldPosition.clone().sub( this.lookAtPosition );
+		target.reflect( this.normal ).negate();
+		target.add( this.mirrorWorldPosition );
 
-	this.mirrorCamera.updateProjectionMatrix();
-	this.mirrorCamera.updateMatrixWorld();
-	this.mirrorCamera.matrixWorldInverse.getInverse( this.mirrorCamera.matrixWorld );
+		this.up.set( 0, - 1, 0 );
+		this.up.applyMatrix4( this.rotationMatrix );
+		this.up.reflect( this.normal ).negate();
 
-	// Update the texture matrix
-	this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5,
-							0.0, 0.5, 0.0, 0.5,
-							0.0, 0.0, 0.5, 0.5,
-							0.0, 0.0, 0.0, 1.0 );
-	this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix );
-	this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse );
+		this.mirrorCamera.position.copy( view );
+		this.mirrorCamera.up = this.up;
+		this.mirrorCamera.lookAt( target );
 
-	// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-	// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-	this.mirrorPlane.setFromNormalAndCoplanarPoint( this.normal, this.mirrorWorldPosition );
-	this.mirrorPlane.applyMatrix4( this.mirrorCamera.matrixWorldInverse );
+		this.mirrorCamera.updateProjectionMatrix();
+		this.mirrorCamera.updateMatrixWorld();
+		this.mirrorCamera.matrixWorldInverse.getInverse( this.mirrorCamera.matrixWorld );
 
-	this.clipPlane.set( this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant );
+		// Update the texture matrix
+		this.textureMatrix.set(
+			0.5, 0.0, 0.0, 0.5,
+			0.0, 0.5, 0.0, 0.5,
+			0.0, 0.0, 0.5, 0.5,
+			0.0, 0.0, 0.0, 1.0
+		);
+		this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix );
+		this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse );
 
-	var q = new THREE.Vector4();
-	var projectionMatrix = this.mirrorCamera.projectionMatrix;
+		// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+		// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+		this.mirrorPlane.setFromNormalAndCoplanarPoint( this.normal, this.mirrorWorldPosition );
+		this.mirrorPlane.applyMatrix4( this.mirrorCamera.matrixWorldInverse );
 
-	q.x = ( Math.sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
-	q.y = ( Math.sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
-	q.z = - 1.0;
-	q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
+		this.clipPlane.set( this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant );
 
-	// Calculate the scaled plane vector
-	var c = new THREE.Vector4();
-	c = this.clipPlane.multiplyScalar( 2.0 / this.clipPlane.dot( q ) );
+		var q = new THREE.Vector4();
+		var projectionMatrix = this.mirrorCamera.projectionMatrix;
 
-	// Replacing the third row of the projection matrix
-	projectionMatrix.elements[ 2 ] = c.x;
-	projectionMatrix.elements[ 6 ] = c.y;
-	projectionMatrix.elements[ 10 ] = c.z + 1.0 - this.clipBias;
-	projectionMatrix.elements[ 14 ] = c.w;
+		q.x = ( Math.sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
+		q.y = ( Math.sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
+		q.z = - 1.0;
+		q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
 
-};
+		// Calculate the scaled plane vector
+		var c = new THREE.Vector4();
+		c = this.clipPlane.multiplyScalar( 2.0 / this.clipPlane.dot( q ) );
 
-THREE.Mirror.prototype.render = function () {
+		// Replacing the third row of the projection matrix
+		projectionMatrix.elements[ 2 ] = c.x;
+		projectionMatrix.elements[ 6 ] = c.y;
+		projectionMatrix.elements[ 10 ] = c.z + 1.0 - this.clipBias;
+		projectionMatrix.elements[ 14 ] = c.w;
 
-	if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
+	},
 
-	this.matrixNeedsUpdate = true;
+	render: function () {
 
-	// Render the mirrored view of the current scene into the target texture
-	var scene = this;
+		if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
 
-	while ( scene.parent !== null ) {
+		this.matrixNeedsUpdate = true;
 
-		scene = scene.parent;
+		// Render the mirrored view of the current scene into the target texture
+		var scene = this;
 
-	}
+		while ( scene.parent !== null ) {
 
-	if ( scene !== undefined && scene instanceof THREE.Scene ) {
+			scene = scene.parent;
 
-		// We can't render ourself to ourself
-		var visible = this.material.visible;
-		this.material.visible = false;
+		}
 
-		this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );
+		if ( scene !== undefined && scene instanceof THREE.Scene ) {
 
-		this.material.visible = visible;
+			// We can't render ourself to ourself
+			var visible = this.material.visible;
+			this.material.visible = false;
 
-	}
+			this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );
 
-};
+			this.material.visible = visible;
 
-THREE.Mirror.prototype.renderTemp = function () {
+		}
 
-	if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
+	},
 
-	this.matrixNeedsUpdate = true;
+	renderTemp: function () {
 
-	// Render the mirrored view of the current scene into the target texture
-	var scene = this;
+		if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
 
-	while ( scene.parent !== null ) {
+		this.matrixNeedsUpdate = true;
 
-		scene = scene.parent;
+		// Render the mirrored view of the current scene into the target texture
+		var scene = this;
 
-	}
+		while ( scene.parent !== null ) {
+
+			scene = scene.parent;
 
-	if ( scene !== undefined && scene instanceof THREE.Scene ) {
+		}
 
-		this.renderer.render( scene, this.mirrorCamera, this.renderTarget2, true );
+		if ( scene !== undefined && scene instanceof THREE.Scene ) {
+
+			this.renderer.render( scene, this.mirrorCamera, this.renderTarget2, true );
+
+		}
 
 	}
 
-};
+} );

examples/js/ParametricGeometries.js

@@ -5,7 +5,6 @@
  *
  */
 
-
 THREE.ParametricGeometries = {
 
 	klein: function ( v, u ) {
@@ -181,33 +180,31 @@ THREE.ParametricGeometries.TorusKnotGeometry = function ( radius, tube, segments
 	this.p = p || 2;
 	this.q = q || 3;
 
-	var TorusKnotCurve = THREE.Curve.create(
+	function TorusKnotCurve() {}
 
-		function() {
-		},
+	TorusKnotCurve.prototype = Object.create( THREE.Curve.prototype );
+	TorusKnotCurve.prototype.constructor = TorusKnotCurve;
 
-		function( t ) {
+	TorusKnotCurve.prototype.getPoint = function( t ){
 
-			t *= Math.PI * 2;
+		t *= Math.PI * 2;
 
-			var r = 0.5;
+		var r = 0.5;
 
-			var tx = ( 1 + r * Math.cos( q * t ) ) * Math.cos( p * t ),
-				ty = ( 1 + r * Math.cos( q * t ) ) * Math.sin( p * t ),
-				tz = r * Math.sin( q * t );
+		var x = ( 1 + r * Math.cos( q * t ) ) * Math.cos( p * t );
+		var y = ( 1 + r * Math.cos( q * t ) ) * Math.sin( p * t );
+		var z = r * Math.sin( q * t );
 
-			return new THREE.Vector3( tx, ty, tz ).multiplyScalar( radius );
+		return new THREE.Vector3( x, y, z ).multiplyScalar( radius );
 
-		}
+	};
 
-	);
 	var segments = segmentsT;
 	var radiusSegments = segmentsR;
 	var extrudePath = new TorusKnotCurve();
 
 	THREE.ParametricGeometries.TubeGeometry.call( this, extrudePath, segments, tube, radiusSegments, true, false );
 
-
 };
 
 THREE.ParametricGeometries.TorusKnotGeometry.prototype = Object.create( THREE.Geometry.prototype );

examples/js/ShaderSkin.js

@@ -266,6 +266,7 @@ THREE.ShaderSkin = {
 			THREE.ShaderChunk[ "common" ],
 			THREE.ShaderChunk[ "lights_pars" ],
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
+			THREE.ShaderChunk[ "fog_pars_vertex" ],
 
 			"void main() {",
 
@@ -281,6 +282,7 @@ THREE.ShaderSkin = {
 				"gl_Position = projectionMatrix * mvPosition;",
 
 				THREE.ShaderChunk[ "shadowmap_vertex" ],
+				THREE.ShaderChunk[ "fog_vertex" ],
 
 			"}"
 
@@ -569,6 +571,7 @@ THREE.ShaderSkin = {
 			"varying vec3 vViewPosition;",
 
 			THREE.ShaderChunk[ "common" ],
+			THREE.ShaderChunk[ "fog_pars_vertex" ],
 
 			"void main() {",
 
@@ -597,7 +600,10 @@ THREE.ShaderSkin = {
 
 				"#endif",
 
-			"}"
+				THREE.ShaderChunk[ "fog_vertex" ],
+
+			"}",
+
 
 		].join( "\n" ),
 

examples/js/ShaderTerrain.js

@@ -268,6 +268,7 @@ THREE.ShaderTerrain = {
 			"varying vec3 vViewPosition;",
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
+			THREE.ShaderChunk[ "fog_pars_vertex" ],
 
 			"void main() {",
 
@@ -312,6 +313,7 @@ THREE.ShaderTerrain = {
 				"vNormal = normalMatrix * normalTex;",
 
 				THREE.ShaderChunk[ "shadowmap_vertex" ],
+				THREE.ShaderChunk[ "fog_vertex" ],
 
 			"}"
 

examples/js/SkyShader.js

@@ -14,202 +14,197 @@
  * Three.js integration by zz85 http://twitter.com/blurspline
 */
 
-THREE.ShaderLib[ 'sky' ] = {
-
-	uniforms: {
-
-		luminance: { value: 1 },
-		turbidity: { value: 2 },
-		rayleigh: { value: 1 },
-		mieCoefficient: { value: 0.005 },
-		mieDirectionalG: { value: 0.8 },
-		sunPosition: { value: new THREE.Vector3() }
-
-	},
+THREE.Sky = function () {
 
-	vertexShader: [
+	var skyShader = {
 
-		"uniform vec3 sunPosition;",
-		"uniform float rayleigh;",
-		"uniform float turbidity;",
-		"uniform float mieCoefficient;",
+		uniforms: {
+			luminance: { value: 1 },
+			turbidity: { value: 2 },
+			rayleigh: { value: 1 },
+			mieCoefficient: { value: 0.005 },
+			mieDirectionalG: { value: 0.8 },
+			sunPosition: { value: new THREE.Vector3() }
+		},
 
-		"varying vec3 vWorldPosition;",
-		"varying vec3 vSunDirection;",
-		"varying float vSunfade;",
-		"varying vec3 vBetaR;",
-		"varying vec3 vBetaM;",
-		"varying float vSunE;",
+		vertexShader: [
+			'uniform vec3 sunPosition;',
+			'uniform float rayleigh;',
+			'uniform float turbidity;',
+			'uniform float mieCoefficient;',
 
-		"const vec3 up = vec3(0.0, 1.0, 0.0);",
+			'varying vec3 vWorldPosition;',
+			'varying vec3 vSunDirection;',
+			'varying float vSunfade;',
+			'varying vec3 vBetaR;',
+			'varying vec3 vBetaM;',
+			'varying float vSunE;',
 
-		// constants for atmospheric scattering
-		"const float e = 2.71828182845904523536028747135266249775724709369995957;",
-		"const float pi = 3.141592653589793238462643383279502884197169;",
+			'const vec3 up = vec3( 0.0, 1.0, 0.0 );',
 
-		// mie stuff
-		// K coefficient for the primaries
-		"const float v = 4.0;",
-		"const vec3 K = vec3(0.686, 0.678, 0.666);",
+			// constants for atmospheric scattering
+			'const float e = 2.71828182845904523536028747135266249775724709369995957;',
+			'const float pi = 3.141592653589793238462643383279502884197169;',
 
-		// see http://blenderartists.org/forum/showthread.php?321110-Shaders-and-Skybox-madness
-		// A simplied version of the total Reayleigh scattering to works on browsers that use ANGLE
-		"const vec3 simplifiedRayleigh = 0.0005 / vec3(94, 40, 18);",
+			// wavelength of used primaries, according to preetham
+			'const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );',
+			// this pre-calcuation replaces older TotalRayleigh(vec3 lambda) function:
+			// (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn))
+			'const vec3 totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );',
 
-		// wavelength of used primaries, according to preetham
-		"const vec3 lambda = vec3(680E-9, 550E-9, 450E-9);",
+			// mie stuff
+			// K coefficient for the primaries
+			'const float v = 4.0;',
+			'const vec3 K = vec3( 0.686, 0.678, 0.666 );',
+			// MieConst = pi * pow( ( 2.0 * pi ) / lambda, vec3( v - 2.0 ) ) * K
+			'const vec3 MieConst = vec3( 1.8399918514433978E14, 2.7798023919660528E14, 4.0790479543861094E14 );',
 
-		// earth shadow hack
-		"const float cutoffAngle = pi/1.95;",
-		"const float steepness = 1.5;",
-		"const float EE = 1000.0;",
+			// earth shadow hack
+			// cutoffAngle = pi / 1.95;
+			'const float cutoffAngle = 1.6110731556870734;',
+			'const float steepness = 1.5;',
+			'const float EE = 1000.0;',
 
-		"float sunIntensity(float zenithAngleCos)",
-		"{",
-			"zenithAngleCos = clamp(zenithAngleCos, -1.0, 1.0);",
-			"return EE * max(0.0, 1.0 - pow(e, -((cutoffAngle - acos(zenithAngleCos))/steepness)));",
-		"}",
+			'float sunIntensity( float zenithAngleCos ) {',
+			'	zenithAngleCos = clamp( zenithAngleCos, -1.0, 1.0 );',
+			'	return EE * max( 0.0, 1.0 - pow( e, -( ( cutoffAngle - acos( zenithAngleCos ) ) / steepness ) ) );',
+			'}',
 
-		"vec3 totalMie(vec3 lambda, float T)",
-		"{",
-			"float c = (0.2 * T ) * 10E-18;",
-			"return 0.434 * c * pi * pow((2.0 * pi) / lambda, vec3(v - 2.0)) * K;",
-		"}",
+			'vec3 totalMie( float T ) {',
+			'	float c = ( 0.2 * T ) * 10E-18;',
+			'	return 0.434 * c * MieConst;',
+			'}',
 
-		"void main() {",
+			'void main() {',
 
-			"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-			"vWorldPosition = worldPosition.xyz;",
+			'	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
+			'	vWorldPosition = worldPosition.xyz;',
 
-			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+			'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
 
-			"vSunDirection = normalize(sunPosition);",
+			'	vSunDirection = normalize( sunPosition );',
 
-			"vSunE = sunIntensity(dot(vSunDirection, up));",
+			'	vSunE = sunIntensity( dot( vSunDirection, up ) );',
 
-			"vSunfade = 1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);",
+			'	vSunfade = 1.0 - clamp( 1.0 - exp( ( sunPosition.y / 450000.0 ) ), 0.0, 1.0 );',
 
-			"float rayleighCoefficient = rayleigh - (1.0 * (1.0-vSunfade));",
+			'	float rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );',
 
 			// extinction (absorbtion + out scattering)
 			// rayleigh coefficients
-			"vBetaR = simplifiedRayleigh * rayleighCoefficient;",
+			'	vBetaR = totalRayleigh * rayleighCoefficient;',
 
 			// mie coefficients
-			"vBetaM = totalMie(lambda, turbidity) * mieCoefficient;",
-
-		"}"
+			'	vBetaM = totalMie( turbidity ) * mieCoefficient;',
 
-	].join( "\n" ),
+			'}'
+		].join( '\n' ),
 
-	fragmentShader: [
+		fragmentShader: [
+			'varying vec3 vWorldPosition;',
+			'varying vec3 vSunDirection;',
+			'varying float vSunfade;',
+			'varying vec3 vBetaR;',
+			'varying vec3 vBetaM;',
+			'varying float vSunE;',
 
-		"varying vec3 vWorldPosition;",
-		"varying vec3 vSunDirection;",
-		"varying float vSunfade;",
-		"varying vec3 vBetaR;",
-		"varying vec3 vBetaM;",
-		"varying float vSunE;",
+			'uniform float luminance;',
+			'uniform float mieDirectionalG;',
 
-		"uniform float luminance;",
-		"uniform float mieDirectionalG;",
+			'const vec3 cameraPos = vec3( 0.0, 0.0, 0.0 );',
 
-		"const vec3 cameraPos = vec3(0., 0., 0.);",
+			// constants for atmospheric scattering
+			'const float pi = 3.141592653589793238462643383279502884197169;',
 
-		// constants for atmospheric scattering
-		"const float pi = 3.141592653589793238462643383279502884197169;",
+			'const float n = 1.0003;', // refractive index of air
+			'const float N = 2.545E25;', // number of molecules per unit volume for air at
+										// 288.15K and 1013mb (sea level -45 celsius)
 
-		"const float n = 1.0003;", // refractive index of air
-		"const float N = 2.545E25;", // number of molecules per unit volume for air at
-									// 288.15K and 1013mb (sea level -45 celsius)
+			// optical length at zenith for molecules
+			'const float rayleighZenithLength = 8.4E3;',
+			'const float mieZenithLength = 1.25E3;',
+			'const vec3 up = vec3( 0.0, 1.0, 0.0 );',
+			// 66 arc seconds -> degrees, and the cosine of that
+			'const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;',
 
-		// optical length at zenith for molecules
-		"const float rayleighZenithLength = 8.4E3;",
-		"const float mieZenithLength = 1.25E3;",
-		"const vec3 up = vec3(0.0, 1.0, 0.0);",
+			// 3.0 / ( 16.0 * pi )
+			'const float THREE_OVER_SIXTEENPI = 0.05968310365946075;',
+			// 1.0 / ( 4.0 * pi )
+			'const float ONE_OVER_FOURPI = 0.07957747154594767;',
 
-		"const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;",
-		// 66 arc seconds -> degrees, and the cosine of that
+			'float rayleighPhase( float cosTheta ) {',
+			'	return THREE_OVER_SIXTEENPI * ( 1.0 + pow( cosTheta, 2.0 ) );',
+			'}',
 
-		"float rayleighPhase(float cosTheta)",
-		"{",
-			"return (3.0 / (16.0*pi)) * (1.0 + pow(cosTheta, 2.0));",
-		"}",
+			'float hgPhase( float cosTheta, float g ) {',
+			'	float g2 = pow( g, 2.0 );',
+			'	float inverse = 1.0 / pow( 1.0 - 2.0 * g * cosTheta + g2, 1.5 );',
+			'	return ONE_OVER_FOURPI * ( ( 1.0 - g2 ) * inverse );',
+			'}',
 
-		"float hgPhase(float cosTheta, float g)",
-		"{",
-			"return (1.0 / (4.0*pi)) * ((1.0 - pow(g, 2.0)) / pow(1.0 - 2.0*g*cosTheta + pow(g, 2.0), 1.5));",
-		"}",
+			// Filmic ToneMapping http://filmicgames.com/archives/75
+			'const float A = 0.15;',
+			'const float B = 0.50;',
+			'const float C = 0.10;',
+			'const float D = 0.20;',
+			'const float E = 0.02;',
+			'const float F = 0.30;',
 
-		// Filmic ToneMapping http://filmicgames.com/archives/75
-		"const float A = 0.15;",
-		"const float B = 0.50;",
-		"const float C = 0.10;",
-		"const float D = 0.20;",
-		"const float E = 0.02;",
-		"const float F = 0.30;",
+			'const float whiteScale = 1.0748724675633854;', // 1.0 / Uncharted2Tonemap(1000.0)
 
-		"const float whiteScale = 1.0748724675633854;", // 1.0 / Uncharted2Tonemap(1000.0)
+			'vec3 Uncharted2Tonemap( vec3 x ) {',
+			'	return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;',
+			'}',
 
-		"vec3 Uncharted2Tonemap(vec3 x)",
-		"{",
-		   "return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;",
-		"}",
 
-
-		"void main() ",
-		"{",
+			'void main() {',
 			// optical length
 			// cutoff angle at 90 to avoid singularity in next formula.
-			"float zenithAngle = acos(max(0.0, dot(up, normalize(vWorldPosition - cameraPos))));",
-			"float sR = rayleighZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));",
-			"float sM = mieZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));",
+			'	float zenithAngle = acos( max( 0.0, dot( up, normalize( vWorldPosition - cameraPos ) ) ) );',
+			'	float inverse = 1.0 / ( cos( zenithAngle ) + 0.15 * pow( 93.885 - ( ( zenithAngle * 180.0 ) / pi ), -1.253 ) );',
+			'	float sR = rayleighZenithLength * inverse;',
+			'	float sM = mieZenithLength * inverse;',
 
 			// combined extinction factor
-			"vec3 Fex = exp(-(vBetaR * sR + vBetaM * sM));",
+			'	vec3 Fex = exp( -( vBetaR * sR + vBetaM * sM ) );',
 
 			// in scattering
-			"float cosTheta = dot(normalize(vWorldPosition - cameraPos), vSunDirection);",
+			'	float cosTheta = dot( normalize( vWorldPosition - cameraPos ), vSunDirection );',
 
-			"float rPhase = rayleighPhase(cosTheta*0.5+0.5);",
-			"vec3 betaRTheta = vBetaR * rPhase;",
+			'	float rPhase = rayleighPhase( cosTheta * 0.5 + 0.5 );',
+			'	vec3 betaRTheta = vBetaR * rPhase;',
 
-			"float mPhase = hgPhase(cosTheta, mieDirectionalG);",
-			"vec3 betaMTheta = vBetaM * mPhase;",
+			'	float mPhase = hgPhase( cosTheta, mieDirectionalG );',
+			'	vec3 betaMTheta = vBetaM * mPhase;',
 
-			"vec3 Lin = pow(vSunE * ((betaRTheta + betaMTheta) / (vBetaR + vBetaM)) * (1.0 - Fex),vec3(1.5));",
-			"Lin *= mix(vec3(1.0),pow(vSunE * ((betaRTheta + betaMTheta) / (vBetaR + vBetaM)) * Fex,vec3(1.0/2.0)),clamp(pow(1.0-dot(up, vSunDirection),5.0),0.0,1.0));",
+			'	vec3 Lin = pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * ( 1.0 - Fex ), vec3( 1.5 ) );',
+			'	Lin *= mix( vec3( 1.0 ), pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * Fex, vec3( 1.0 / 2.0 ) ), clamp( pow( 1.0 - dot( up, vSunDirection ), 5.0 ), 0.0, 1.0 ) );',
 
-			//nightsky
-			"vec3 direction = normalize(vWorldPosition - cameraPos);",
-			"float theta = acos(direction.y); // elevation --> y-axis, [-pi/2, pi/2]",
-			"float phi = atan(direction.z, direction.x); // azimuth --> x-axis [-pi/2, pi/2]",
-			"vec2 uv = vec2(phi, theta) / vec2(2.0*pi, pi) + vec2(0.5, 0.0);",
-			"vec3 L0 = vec3(0.1) * Fex;",
+			// nightsky
+			'	vec3 direction = normalize( vWorldPosition - cameraPos );',
+			'	float theta = acos( direction.y ); // elevation --> y-axis, [-pi/2, pi/2]',
+			'	float phi = atan( direction.z, direction.x ); // azimuth --> x-axis [-pi/2, pi/2]',
+			'	vec2 uv = vec2( phi, theta ) / vec2( 2.0 * pi, pi ) + vec2( 0.5, 0.0 );',
+			'	vec3 L0 = vec3( 0.1 ) * Fex;',
 
 			// composition + solar disc
-			"float sundisk = smoothstep(sunAngularDiameterCos,sunAngularDiameterCos+0.00002,cosTheta);",
-			"L0 += (vSunE * 19000.0 * Fex)*sundisk;",
-
-			"vec3 texColor = (Lin+L0) * 0.04 + vec3(0.0, 0.0003, 0.00075);",
+			'	float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );',
+			'	L0 += ( vSunE * 19000.0 * Fex ) * sundisk;',
 
-			"vec3 curr = Uncharted2Tonemap((log2(2.0/pow(luminance,4.0)))*texColor);",
-			"vec3 color = curr*whiteScale;",
+			'	vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );',
 
-			"vec3 retColor = pow(color,vec3(1.0/(1.2+(1.2*vSunfade))));",
+			'	vec3 curr = Uncharted2Tonemap( ( log2( 2.0 / pow( luminance, 4.0 ) ) ) * texColor );',
+			'	vec3 color = curr * whiteScale;',
 
-			"gl_FragColor.rgb = retColor;",
+			'	vec3 retColor = pow( color, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
 
-			"gl_FragColor.a = 1.0;",
-		"}"
+			'	gl_FragColor = vec4( retColor, 1.0 );',
 
-	].join( "\n" )
+			'}'
+		].join( '\n' )
 
-};
-
-THREE.Sky = function () {
+	};
 
-	var skyShader = THREE.ShaderLib[ "sky" ];
 	var skyUniforms = THREE.UniformsUtils.clone( skyShader.uniforms );
 
 	var skyMat = new THREE.ShaderMaterial( {

examples/js/WaterShader.js

@@ -7,116 +7,12 @@
  * @author Jonas Wagner / http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
  */
 
-THREE.ShaderLib[ 'water' ] = {
-
-	uniforms: THREE.UniformsUtils.merge( [
-		THREE.UniformsLib[ "fog" ], {
-			"normalSampler":    { value: null },
-			"mirrorSampler":    { value: null },
-			"alpha":            { value: 1.0 },
-			"time":             { value: 0.0 },
-			"distortionScale":  { value: 20.0 },
-			"noiseScale":       { value: 1.0 },
-			"textureMatrix" :   { value: new THREE.Matrix4() },
-			"sunColor":         { value: new THREE.Color( 0x7F7F7F ) },
-			"sunDirection":     { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
-			"eye":              { value: new THREE.Vector3() },
-			"waterColor":       { value: new THREE.Color( 0x555555 ) }
-		}
-	] ),
-
-	vertexShader: [
-		'uniform mat4 textureMatrix;',
-		'uniform float time;',
-
-		'varying vec4 mirrorCoord;',
-		'varying vec3 worldPosition;',
-
-		'void main()',
-		'{',
-		'	mirrorCoord = modelMatrix * vec4( position, 1.0 );',
-		'	worldPosition = mirrorCoord.xyz;',
-		'	mirrorCoord = textureMatrix * mirrorCoord;',
-		'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
-		'}'
-	].join( '\n' ),
-
-	fragmentShader: [
-		'precision highp float;',
-
-		'uniform sampler2D mirrorSampler;',
-		'uniform float alpha;',
-		'uniform float time;',
-		'uniform float distortionScale;',
-		'uniform sampler2D normalSampler;',
-		'uniform vec3 sunColor;',
-		'uniform vec3 sunDirection;',
-		'uniform vec3 eye;',
-		'uniform vec3 waterColor;',
-
-		'varying vec4 mirrorCoord;',
-		'varying vec3 worldPosition;',
-
-		'vec4 getNoise( vec2 uv )',
-		'{',
-		'	vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);',
-		'	vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );',
-		'	vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );',
-		'	vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );',
-		'	vec4 noise = texture2D( normalSampler, uv0 ) +',
-		'		texture2D( normalSampler, uv1 ) +',
-		'		texture2D( normalSampler, uv2 ) +',
-		'		texture2D( normalSampler, uv3 );',
-		'	return noise * 0.5 - 1.0;',
-		'}',
-
-		'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor )',
-		'{',
-		'	vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );',
-		'	float direction = max( 0.0, dot( eyeDirection, reflection ) );',
-		'	specularColor += pow( direction, shiny ) * sunColor * spec;',
-		'	diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;',
-		'}',
-
-		THREE.ShaderChunk[ "common" ],
-		THREE.ShaderChunk[ "fog_pars_fragment" ],
-
-		'void main()',
-		'{',
-		'	vec4 noise = getNoise( worldPosition.xz );',
-		'	vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );',
-
-		'	vec3 diffuseLight = vec3(0.0);',
-		'	vec3 specularLight = vec3(0.0);',
-
-		'	vec3 worldToEye = eye-worldPosition;',
-		'	vec3 eyeDirection = normalize( worldToEye );',
-		'	sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );',
-
-		'	float distance = length(worldToEye);',
-
-		'	vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;',
-		'	vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.z + distortion ) );',
-
-		'	float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );',
-		'	float rf0 = 0.3;',
-		'	float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );',
-		'	vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;',
-		'	vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance );',
-		'	vec3 outgoingLight = albedo;',
-			THREE.ShaderChunk[ "fog_fragment" ],
-		'	gl_FragColor = vec4( outgoingLight, alpha );',
-		'}'
-	].join( '\n' )
-
-};
-
 THREE.Water = function ( renderer, camera, scene, options ) {
 
 	THREE.Object3D.call( this );
 	this.name = 'water_' + this.id;
 
-	function optionalParameter ( value, defaultValue ) {
+	function optionalParameter( value, defaultValue ) {
 
 		return value !== undefined ? value : defaultValue;
 
@@ -168,7 +64,115 @@ THREE.Water = function ( renderer, camera, scene, options ) {
 	this.renderTarget = new THREE.WebGLRenderTarget( width, height );
 	this.renderTarget2 = new THREE.WebGLRenderTarget( width, height );
 
-	var mirrorShader = THREE.ShaderLib[ "water" ];
+	var mirrorShader = {
+
+		uniforms: THREE.UniformsUtils.merge( [
+			THREE.UniformsLib[ 'fog' ],
+			{
+				normalSampler: { value: null },
+				mirrorSampler: { value: null },
+				alpha: { value: 1.0 },
+				time: { value: 0.0 },
+				distortionScale: { value: 20.0 },
+				noiseScale: { value: 1.0 },
+				textureMatrix: { value: new THREE.Matrix4() },
+				sunColor: { value: new THREE.Color( 0x7F7F7F ) },
+				sunDirection: { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
+				eye: { value: new THREE.Vector3() },
+				waterColor: { value: new THREE.Color( 0x555555 ) }
+			}
+		] ),
+
+		vertexShader: [
+			'uniform mat4 textureMatrix;',
+			'uniform float time;',
+
+			'varying vec4 mirrorCoord;',
+			'varying vec3 worldPosition;',
+
+			THREE.ShaderChunk[ 'fog_pars_vertex' ],
+
+			'void main() {',
+			'	mirrorCoord = modelMatrix * vec4( position, 1.0 );',
+			'	worldPosition = mirrorCoord.xyz;',
+			'	mirrorCoord = textureMatrix * mirrorCoord;',
+			'	vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );',
+			'	gl_Position = projectionMatrix * mvPosition;',
+
+			THREE.ShaderChunk[ 'fog_vertex' ],
+
+			'}'
+		].join( '\n' ),
+
+		fragmentShader: [
+			'precision highp float;',
+
+			'uniform sampler2D mirrorSampler;',
+			'uniform float alpha;',
+			'uniform float time;',
+			'uniform float distortionScale;',
+			'uniform sampler2D normalSampler;',
+			'uniform vec3 sunColor;',
+			'uniform vec3 sunDirection;',
+			'uniform vec3 eye;',
+			'uniform vec3 waterColor;',
+
+			'varying vec4 mirrorCoord;',
+			'varying vec3 worldPosition;',
+
+			'vec4 getNoise( vec2 uv ) {',
+			'	vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);',
+			'	vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );',
+			'	vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );',
+			'	vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );',
+			'	vec4 noise = texture2D( normalSampler, uv0 ) +',
+			'		texture2D( normalSampler, uv1 ) +',
+			'		texture2D( normalSampler, uv2 ) +',
+			'		texture2D( normalSampler, uv3 );',
+			'	return noise * 0.5 - 1.0;',
+			'}',
+
+			'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {',
+			'	vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );',
+			'	float direction = max( 0.0, dot( eyeDirection, reflection ) );',
+			'	specularColor += pow( direction, shiny ) * sunColor * spec;',
+			'	diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;',
+			'}',
+
+			THREE.ShaderChunk[ 'common' ],
+			THREE.ShaderChunk[ 'fog_pars_fragment' ],
+
+			'void main() {',
+			'	vec4 noise = getNoise( worldPosition.xz );',
+			'	vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );',
+
+			'	vec3 diffuseLight = vec3(0.0);',
+			'	vec3 specularLight = vec3(0.0);',
+
+			'	vec3 worldToEye = eye-worldPosition;',
+			'	vec3 eyeDirection = normalize( worldToEye );',
+			'	sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );',
+
+			'	float distance = length(worldToEye);',
+
+			'	vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;',
+			'	vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.z + distortion ) );',
+
+			'	float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );',
+			'	float rf0 = 0.3;',
+			'	float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );',
+			'	vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;',
+			'	vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance );',
+			'	vec3 outgoingLight = albedo;',
+			'	gl_FragColor = vec4( outgoingLight, alpha );',
+
+			THREE.ShaderChunk[ 'fog_fragment' ],
+
+			'}'
+		].join( '\n' )
+
+	};
+
 	var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
 
 	this.material = new THREE.ShaderMaterial( {
@@ -212,12 +216,6 @@ THREE.Water.prototype.constructor = THREE.Water;
 
 THREE.Water.prototype.updateTextureMatrix = function () {
 
-	function sign( x ) {
-
-		return x ? x < 0 ? - 1 : 1 : 0;
-
-	}
-
 	this.updateMatrixWorld();
 	this.camera.updateMatrixWorld();
 
@@ -257,10 +255,12 @@ THREE.Water.prototype.updateTextureMatrix = function () {
 	this.mirrorCamera.matrixWorldInverse.getInverse( this.mirrorCamera.matrixWorld );
 
 	// Update the texture matrix
-	this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5,
-							0.0, 0.5, 0.0, 0.5,
-							0.0, 0.0, 0.5, 0.5,
-							0.0, 0.0, 0.0, 1.0 );
+	this.textureMatrix.set(
+		0.5, 0.0, 0.0, 0.5,
+		0.0, 0.5, 0.0, 0.5,
+		0.0, 0.0, 0.5, 0.5,
+		0.0, 0.0, 0.0, 1.0
+	);
 	this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix );
 	this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse );
 
@@ -274,8 +274,8 @@ THREE.Water.prototype.updateTextureMatrix = function () {
 	var q = new THREE.Vector4();
 	var projectionMatrix = this.mirrorCamera.projectionMatrix;
 
-	q.x = ( sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
-	q.y = ( sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
+	q.x = ( Math.sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
+	q.y = ( Math.sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
 	q.z = - 1.0;
 	q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
 

examples/js/animation/CCDIKSolver.js

@@ -99,6 +99,7 @@ THREE.CCDIKSolver.prototype = {
 		var effectorVec = new THREE.Vector3();
 		var linkPos = new THREE.Vector3();
 		var invLinkQ = new THREE.Quaternion();
+		var linkScale = new THREE.Vector3();
 		var axis = new THREE.Vector3();
 
 		var bones = this.mesh.skeleton.bones;
@@ -142,8 +143,8 @@ THREE.CCDIKSolver.prototype = {
 
 					// don't use getWorldPosition/Quaternion() here for the performance
 					// because they call updateMatrixWorld( true ) inside.
-					linkPos.setFromMatrixPosition( link.matrixWorld );
-					invLinkQ.setFromRotationMatrix( link.matrixWorld ).inverse();
+					link.matrixWorld.decompose( linkPos, invLinkQ, linkScale );
+					invLinkQ.inverse();
 					effectorPos.setFromMatrixPosition( effector.matrixWorld );
 
 					// work in link world

examples/js/effects/OutlineEffect.js

@@ -75,12 +75,14 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 	var vertexShaderChunk = [
 
+		"#include <fog_pars_vertex>",
+
 		"uniform float outlineThickness;",
 
 		"vec4 calculateOutline( vec4 pos, vec3 objectNormal, vec4 skinned ) {",
 
 		"	float thickness = outlineThickness;",
-		"	float ratio = 1.0;", // TODO: support outline thickness ratio for each vertex
+		"	const float ratio = 1.0;", // TODO: support outline thickness ratio for each vertex
 		"	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + objectNormal, 1.0 );",
 		// NOTE: subtract pos2 from pos because BackSide objectNormal is negative
 		"	vec4 norm = normalize( pos - pos2 );",
@@ -105,11 +107,17 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 		"#endif",
 
+		"#ifdef DECLARE_TRANSFORMED",
+		"	vec3 transformed = vec3( position );",
+		"#endif",
+
 		"#ifdef USE_SKINNING",
 		"	gl_Position = calculateOutline( gl_Position, objectNormal, skinned );",
 		"#else",
 		"	gl_Position = calculateOutline( gl_Position, objectNormal, vec4( transformed, 1.0 ) );",
-		"#endif"
+		"#endif",
+
+		"#include <fog_vertex>"
 
 	].join( "\n" );
 
@@ -143,6 +151,21 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 			originalUniforms = shader.uniforms;
 			originalVertexShader = shader.vertexShader;
 
+		} else if ( originalMaterial.isRawShaderMaterial === true ) {
+
+			originalUniforms = originalMaterial.uniforms;
+			originalVertexShader = originalMaterial.vertexShader;
+
+			if ( ! /attribute\s+vec3\s+position\s*;/.test( originalVertexShader ) ||
+			     ! /attribute\s+vec3\s+normal\s*;/.test( originalVertexShader ) ) {
+
+				console.warn( 'THREE.OutlineEffect requires both vec3 position and normal attributes in vertex shader, ' +
+				              'does not draw outline for ' + originalMaterial.name + '(uuid:' + originalMaterial.uuid + ') material.' );
+
+				return invisibleMaterial;
+
+			}
+
 		} else if ( originalMaterial.isShaderMaterial === true ) {
 
 			originalUniforms = originalMaterial.uniforms;
@@ -167,7 +190,13 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 					// TODO: consider safer way
 					.replace( /#include\s+<[\w_]*light[\w_]*>/g, '' );
 
+		var defines = {};
+
+		if ( ! /vec3\s+transformed\s*=/.test( originalVertexShader ) &&
+		     ! /#include\s+<begin_vertex>/.test( originalVertexShader ) ) defines.DECLARE_TRANSFORMED = true;
+
 		var material = new THREE.ShaderMaterial( {
+			defines: defines,
 			uniforms: uniforms,
 			vertexShader: vertexShader,
 			fragmentShader: fragmentShader,
@@ -219,7 +248,7 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 		var outlineMaterial = data.material;
 		data.used = true;
 
-		var uuid= outlineMaterial !== invisibleMaterial ? outlineMaterial.uuid : object.uuid;
+		var uuid = outlineMaterial !== invisibleMaterial ? outlineMaterial.uuid : object.uuid;
 		originalMaterials[ uuid ] = object.material;
 
 		if ( object.material.isMultiMaterial === true ) {

examples/js/effects/VREffect.js

@@ -6,10 +6,9 @@
  *
  * Firefox: http://mozvr.com/downloads/
  * Chromium: https://webvr.info/get-chrome
- *
  */
 
-THREE.VREffect = function( renderer, onError ) {
+THREE.VREffect = function ( renderer, onError ) {
 
 	var vrDisplay, vrDisplays;
 	var eyeTranslationL = new THREE.Vector3();
@@ -42,7 +41,7 @@ THREE.VREffect = function( renderer, onError ) {
 
 	if ( navigator.getVRDisplays ) {
 
-		navigator.getVRDisplays().then( gotVRDisplays ).catch( function() {
+		navigator.getVRDisplays().then( gotVRDisplays ).catch( function () {
 
 			console.warn( 'THREE.VREffect: Unable to get VR Displays' );
 
@@ -53,7 +52,6 @@ THREE.VREffect = function( renderer, onError ) {
 	//
 
 	this.isPresenting = false;
-	this.scale = 1;
 
 	var scope = this;
 
@@ -61,26 +59,26 @@ THREE.VREffect = function( renderer, onError ) {
 	var rendererUpdateStyle = false;
 	var rendererPixelRatio = renderer.getPixelRatio();
 
-	this.getVRDisplay = function() {
+	this.getVRDisplay = function () {
 
 		return vrDisplay;
 
 	};
 
-	this.setVRDisplay = function( value ) {
+	this.setVRDisplay = function ( value ) {
 
 		vrDisplay = value;
 
 	};
 
-	this.getVRDisplays = function() {
+	this.getVRDisplays = function () {
 
 		console.warn( 'THREE.VREffect: getVRDisplays() is being deprecated.' );
 		return vrDisplays;
 
 	};
 
-	this.setSize = function( width, height, updateStyle ) {
+	this.setSize = function ( width, height, updateStyle ) {
 
 		rendererSize = { width: width, height: height };
 		rendererUpdateStyle = updateStyle;
@@ -138,9 +136,9 @@ THREE.VREffect = function( renderer, onError ) {
 
 	window.addEventListener( 'vrdisplaypresentchange', onVRDisplayPresentChange, false );
 
-	this.setFullScreen = function( boolean ) {
+	this.setFullScreen = function ( boolean ) {
 
-		return new Promise( function( resolve, reject ) {
+		return new Promise( function ( resolve, reject ) {
 
 			if ( vrDisplay === undefined ) {
 
@@ -170,19 +168,19 @@ THREE.VREffect = function( renderer, onError ) {
 
 	};
 
-	this.requestPresent = function() {
+	this.requestPresent = function () {
 
 		return this.setFullScreen( true );
 
 	};
 
-	this.exitPresent = function() {
+	this.exitPresent = function () {
 
 		return this.setFullScreen( false );
 
 	};
 
-	this.requestAnimationFrame = function( f ) {
+	this.requestAnimationFrame = function ( f ) {
 
 		if ( vrDisplay !== undefined ) {
 
@@ -196,7 +194,7 @@ THREE.VREffect = function( renderer, onError ) {
 
 	};
 
-	this.cancelAnimationFrame = function( h ) {
+	this.cancelAnimationFrame = function ( h ) {
 
 		if ( vrDisplay !== undefined ) {
 
@@ -210,7 +208,7 @@ THREE.VREffect = function( renderer, onError ) {
 
 	};
 
-	this.submitFrame = function() {
+	this.submitFrame = function () {
 
 		if ( vrDisplay !== undefined && scope.isPresenting ) {
 
@@ -230,7 +228,7 @@ THREE.VREffect = function( renderer, onError ) {
 	var cameraR = new THREE.PerspectiveCamera();
 	cameraR.layers.enable( 2 );
 
-	this.render = function( scene, camera, renderTarget, forceClear ) {
+	this.render = function ( scene, camera, renderTarget, forceClear ) {
 
 		if ( vrDisplay && scope.isPresenting ) {
 
@@ -307,11 +305,13 @@ THREE.VREffect = function( renderer, onError ) {
 			if ( camera.parent === null ) camera.updateMatrixWorld();
 
 			camera.matrixWorld.decompose( cameraL.position, cameraL.quaternion, cameraL.scale );
-			camera.matrixWorld.decompose( cameraR.position, cameraR.quaternion, cameraR.scale );
 
-			var scale = this.scale;
-			cameraL.translateOnAxis( eyeTranslationL, scale );
-			cameraR.translateOnAxis( eyeTranslationR, scale );
+			cameraR.position.copy( cameraL.position );
+			cameraR.quaternion.copy( cameraL.quaternion );
+			cameraR.scale.copy( cameraL.scale );
+
+			cameraL.translateOnAxis( eyeTranslationL, cameraL.scale.x );
+			cameraR.translateOnAxis( eyeTranslationR, cameraR.scale.x );
 
 			if ( vrDisplay.getFrameData ) {
 
@@ -394,7 +394,7 @@ THREE.VREffect = function( renderer, onError ) {
 
 	};
 
-	this.dispose = function() {
+	this.dispose = function () {
 
 		window.removeEventListener( 'vrdisplaypresentchange', onVRDisplayPresentChange, false );
 
@@ -454,7 +454,6 @@ THREE.VREffect = function( renderer, onError ) {
 		m[ 3 * 4 + 3 ] = 0.0;
 
 		mobj.transpose();
-
 		return mobj;
 
 	}

examples/js/exporters/OBJExporter.js

@@ -20,7 +20,7 @@ THREE.OBJExporter.prototype = {
 		var normal = new THREE.Vector3();
 		var uv = new THREE.Vector2();
 
-		var i, j, l, m, face = [];
+		var i, j, k, l, m, face = [];
 
 		var parseMesh = function ( mesh ) {
 

examples/js/loaders/AssimpJSONLoader.js

@@ -125,7 +125,7 @@ THREE.AssimpJSONLoader.prototype = {
 
 		}
 
-		geometry.setIndex( new ( indices.length > 65535 ? THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute )( indices, 1 ) );
+		geometry.setIndex( indices );
 		geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
 		if ( normals.length > 0 ) {