Merge branch 'dev' into dev

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

README.md

@@ -13,7 +13,7 @@ The aim of the project is to create an easy to use, lightweight, 3D library. The
 [Examples](http://threejs.org/examples/) —
 [Documentation](http://threejs.org/docs/) —
 [Wiki](https://github.com/mrdoob/three.js/wiki) —
-[Migrating](https://github.com/mrdoob/three.js/wiki/Migration) —
+[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) —
 [Help](http://stackoverflow.com/questions/tagged/three.js)
 
 ### Usage ###

docs/api/Polyfills.html

@@ -11,7 +11,7 @@
 
 		<h1>Polyfills</h1>
 
-		<div class="desc">Three includes polyfills for the following functions and constants.</div>
+		<div class="desc">Three.js includes polyfills for the following functions and constants.</div>
 
 		<h3>[page:Number.EPSILON Number.EPSILON]</h3>
 		<div>

docs/api/cameras/OrthographicCamera.html

@@ -67,8 +67,7 @@ scene.add( camera );</code>
 		<div>
 		Camera frustum far plane. Default is *2000*.<br /><br />
 
-		Note that Three does not currently give warnings for incorrect values here, however the expected
-		range is between the current value of the [page:.far far] plane and infinity.
+		The valid range is between the current value of the [page:.near near] plane and infinity.
 		</div>
 
 		<h3>[property:Boolean isOrthographicCamera]</h3>
@@ -83,10 +82,11 @@ scene.add( camera );</code>
 
 		<h3>[property:Float near]</h3>
 		<div>
-			Camera fustum near plane. Default is *0.1*.<br /><br />
+			Camera frustum near plane. Default is *0.1*.<br /><br />
 
-			Note that Three does not currently give warnings for incorrect values here, however the expected
-			range is between 0 and the current value of the [page:.far far] plane.
+			The valid range is between 0 and the current value of the [page:.far far] plane.
+			Note that, unlike for the [page:PerspectiveCamera], *0* is a valid value for an
+			OrthographicCamera's near plane.
 		</div>
 
 		<h3>[property:Float right]</h3>

docs/api/cameras/PerspectiveCamera.html

@@ -57,8 +57,7 @@ scene.add( camera );</code>
 		<div>
 			Camera frustum far plane. Default is *2000*.<br /><br />
 
-			Note that Three does not currently give warnings for incorrect values here, however the expected
-			range is between the current value of the [page:.far far] plane and infinity.
+			The valid range is between the current value of the [page:.near near] plane and infinity.
 		</div>
 
 		<h3>[property:Float filmGauge]</h3>
@@ -86,10 +85,11 @@ scene.add( camera );</code>
 
 		<h3>[property:Float near]</h3>
 		<div>
-			Camera fustum near plane. Default is *0.1*.<br /><br />
+			Camera frustum near plane. Default is *0.1*.<br /><br />
 
-			Note that Three does not currently give warnings for incorrect values here, however the expected
-			range is between 0 and the current value of the [page:.far far] plane.
+			The valid range is greater than 0 and less than the current value of the [page:.far far] plane.
+			Note that, unlike for the [page:OrthographicCamera], *0* is <em>not</em> a valid value
+			for a PerspectiveCamera's near plane.
 		</div>
 
 		<h3>[property:Object view]</h3>

docs/api/constants/Core.html

@@ -17,7 +17,7 @@
 		</code>
 
 		<div id="rev">
-			The current Three.js [link:https://github.com/mrdoob/three.js/releases revision number].
+			The current three.js [link:https://github.com/mrdoob/three.js/releases revision number].
 		</div>
 
     <h2>Mouse Buttons</h2>

docs/api/core/Object3D.html

@@ -11,7 +11,7 @@
 		<h1>[name]</h1>
 
 		<div class="desc">
-			This is the base class for most objects in Three and provides a set of properties and methods
+			This is the base class for most objects in three.js and provides a set of properties and methods
 			for manipulating objects in 3D space.<br /><br />
 
 			Note that this can be used for grouping objects via the [page:.add]( object ) method
@@ -64,7 +64,7 @@
 		<h3>[property:Boolean matrixAutoUpdate]</h3>
 		<div>
 		When this is set, it calculates the matrix of position, (rotation or quaternion) and
-		scale every frame and also recalculates the matrixWorld property. Default is *true*.
+		scale every frame and also recalculates the matrixWorld property. Default is [page:Object3D.DefaultMatrixAutoUpdate] (true).
 		</div>
 
 		<h3>[property:Matrix4 matrixWorld]</h3>
@@ -132,7 +132,10 @@
 		</div>
 
 		<h3>[property:Vector3 up]</h3>
-		<div>Up direction. Default is [page:Vector3]( 0, 1, 0 ).</div>
+		<div>
+		This is used by the [page:.lookAt lookAt] method, for example, to determine the orientation of the result.<br />
+		Default is [page:Object3D.DefaultUp] - that is, ( 0, 1, 0 ).
+		</div>
 
 		<h3>[property:object userData]</h3>
 		<div>
@@ -152,7 +155,27 @@
 
 
 
+		<h2>Static Properties</h2>
+		<div>
+			Static properties and methods are defined per class rather than per instance of that class.
+			This means that changing [page:Object3D.DefaultUp] or [page:Object3D.DefaultMatrixAutoUpdate]
+			will change the values of [page:.up up] and [page:.matrixAutoUpdate matrixAutoUpdate] for
+			<em>every</em>	instance of Object3D (or derived classes)	created after the change has
+			been made (already created Object3Ds will not be affected).
+		</div>
+
+		<h3>[property:Vector3 DefaultUp]</h3>
+		<div>
+			The default [page:.up up] direction for objects, also used as the default position for [page:DirectionalLight],
+			[page:HemisphereLight] and [page:Spotlight] (which creates lights shining from the top down).<br />
+			Set to (0, 1, 0) by default.
+		</div>
+
+		<h3>[property:Vector3 DefaultMatrixAutoUpdate]</h3>
+		<div>
+			The default setting for [page.matrixAutoUpdate matrixAutoUpdate] for newly created Object3Ds.<br />
 
+		</div>
 
 
 		<h2>Methods</h2>

docs/api/core/bufferAttributeTypes/BufferAttributeTypes.html

@@ -13,7 +13,7 @@
 		<h1>BufferAttribute Types</h1>
 
 		<div class="desc">
-		There are nine types of [page:BufferAttribute] available in Three. These correspond to the JavaScript
+		There are nine types of [page:BufferAttribute] available in three.js. These correspond to the JavaScript
 		[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax Typed Arrays].
 		</div>
 

docs/api/deprecated/DeprecatedList.html

@@ -11,7 +11,7 @@
 		<h1>Deprecated API List</h1>
 
 		<div>
-			As Three.js has a rapidly evolving interface, you may come across examples that
+			As three.js has a rapidly evolving interface, you may come across examples that
 			suggest the use of API elements that are no longer part of the core.<br /><br />
 
 			Below is a list of such elements, along with info regarding their replacements.
@@ -34,6 +34,8 @@
 		<h3>[page:AudioAnalyser]</h3>
 		<div>AudioAnalyser.getData() has been renamed to [page:AudioAnalyser.getFrequencyData]().</div>
 
+		<h3>[page:BinaryTextureLoader]</h3>
+		<div>BinaryTextureLoader has been renamed to [page:DataTextureLoader].</div>
 
 
 
@@ -117,7 +119,7 @@
 		<h2>Core</h2>
 
 		<h3>[page:EventDispatcher]</h3>
-		<div>EventDispatcher.apply has been has been removed. Inherit or Object.assign the prototype to mix-in instead.</div>
+		<div>EventDispatcher.apply has been removed. Inherit or Object.assign the prototype to mix-in instead.</div>
 
 		<h3>[page:Raycaster]</h3>
 		<div>Raycaster.params.PointCloud has been renamed to [page:Raycaster.params.Points].</div>
@@ -125,9 +127,9 @@
 
 		<h3>[page:Uniform]</h3>
 		<div>
-			Uniform.dynamic has been has been removed. Use object.onBeforeRender() instead.<br /><br />
+			Uniform.dynamic has been removed. Use object.onBeforeRender() instead.<br /><br />
 
-			Uniform.onUpdate has been has been removed. Use object.onBeforeRender() instead.
+			Uniform.onUpdate has been removed. Use object.onBeforeRender() instead.
 		</div>
 
 
@@ -316,8 +318,7 @@
 
 			Matrix4.setRotationFromQuaternion() has been renamed to [page:Matrix4.makeRotationFromQuaternion]( quaternion ).<br /><br />
 
-			Matrix4.multiplyVector3() has been has been removed. Use vector.applyMatrix4( matrix )
-			or vector.applyProjection( matrix ) instead.<br /><br />
+			Matrix4.multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead.<br /><br />
 
 			Matrix4.multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead.<br /><br />
 
@@ -355,6 +356,10 @@
 			Ray.isIntersectionSphere has been renamed to [page:Ray.intersectsSphere].
 		</div>
 
+		<h3>[page:Vector2]</h3>
+		<div>
+			Vector2.fromAttribute() has been renamed to [page:Vector2.fromBufferAttribute]().
+		</div>
 
 		<h3>[page:Vector3]</h3>
 		<div>
@@ -366,12 +371,24 @@
 
 			Vector3.getScaleFromMatrix() has been renamed to [page:Vector3.setFromMatrixScale]().<br /><br />
 
-			Vector3.getColumnFromMatrix() has been renamed to [page:Vector3.setFromMatrixColumn]().
+			Vector3.getColumnFromMatrix() has been renamed to [page:Vector3.setFromMatrixColumn]().<br /><br />
+
+			Vector3.applyProjection() has been removed. Use [page:Vector3.applyMatrix4]() instead.<br /><br />
+
+			Vector3.fromAttribute() has been renamed to [page:Vector3.fromBufferAttribute]().
+		</div>
+
+		<h3>[page:Vector4]</h3>
+		<div>
+			Vector4.fromAttribute() has been renamed to [page:Vector4.fromBufferAttribute]().
 		</div>
 
 		<h3>[page:Vertex]</h3>
 		<div>Vertex has been removed. Use [page:Vector3] instead.</div>
 
+		<h3>[page:Spline]</h3>
+		<div>Spline has been removed. Use [page:CatmullRomCurve3] instead.</div>
+
 
 
 
@@ -568,6 +585,9 @@
 		</div>
 
 
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/Three.Legacy.js src/Three.Legacy.js]
 
 
 		</body>

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/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 );

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/lights/DirectionalLight.html

@@ -24,7 +24,7 @@
 		<h2>A Note about Position, Target and rotation</h2>
 		<div>
 			A common point of confusion for directional lights is that setting the rotation has no effect.
-			This is because Three's DirectionalLight is the equivalent to what is often called a 'Target
+			This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target
 			Direct Light' in other applications.<br /><br />
 
 			This means that its direction is calculated as pointing
@@ -54,7 +54,6 @@
 		<code>
 // White directional light at half intensity shining from the top.
 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-directionalLight.position.set( 0, 1, 0 );
 scene.add( directionalLight );
 	</code>
 

docs/api/lights/PointLight.html

@@ -95,7 +95,8 @@ scene.add( light );
 
 		<h3>[property:LightShadow shadow]</h3>
 		<div>
-			A [page:LightShadow] used to calculate shadows for this light.<br />
+			A [page:LightShadow] used to calculate shadows for this light.<br /><br />
+
 			 The lightShadow's [page:LightShadow.camera camera]
 			is set to a  [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
 			[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]

docs/api/lights/shadows/DirectionalLightShadow.html

@@ -12,22 +12,86 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:DirectionalLight DirectionalLights] for calculating shadows.<br /><br />
 
-		<h2>Constructor</h2>
+			Unlike the other shadow classes, this uses an [page:OrthographicCamera] to calculate the shadows,
+			rather than a [page:PerspectiveCamera]. This is because light rays from a [page:DirectionalLight]
+			are parallel.
+		</div>
+
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a DirectionalLight and turn on shadows for the light
+var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
+light.position.set( 0, 1, 0 ); 			//default; light shining from top
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
 
-		The constructor creates an [page:OrthographicCamera OrthographicCamera] to manage the shadow's view of the world.
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
+		<h2>Constructor</h2>
+		<h3>[name]( )</h3>
+		<div>
+			Creates a new [name]. This is not intended to be called directly - it is called
+			internally by [page:DirectionalLight].
+		</div>
 
 		<h2>Properties</h2>
+		<div>
+			See the base [page:LightShadow LightShadow] class for common properties.
+		</div>
 
-		See the base [page:LightShadow LightShadow] class for common properties.
+		<h3>[property:Camera camera]</h3>
+		<div>
+			The light's view of the world. This is used to generate a depth map of the scene; objects behind
+			other objects from the light's perspective will be in shadow.<br /><br />
 
-		<h2>Methods</h2>
+			The default is an [page:OrthographicCamera] with [page:OrthographicCamera.left left] and
+			[page:OrthographicCamera.bottom bottom] set to -5,  [page:OrthographicCamera.right right]
+			and  [page:OrthographicCamera.top top] set to 5, the [page:OrthographicCamera.near near]
+			clipping plane at 0.5 and the [page:OrthographicCamera.far far] clipping plane at 500.
+		</div>
 
-		See the base [page:LightShadow LightShadow] class for common methods.
+
+		<h2>Methods</h2>
+		<div>
+			See the base [page:LightShadow LightShadow] class for common methods.
+		</div>
 
 		<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/lights/[name].js src/lights/[name].js]
 	</body>
 </html>

docs/api/lights/shadows/LightShadow.html

@@ -11,65 +11,131 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:PointLight PointLights] for calculating shadows, and also serves as
+			a base class for the other shadow classes.
+		</div>
 
-		<h2>Constructor</h2>
 
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a PointLight and turn on shadows for the light
+var light = new THREE.PointLight( 0xffffff, 1, 100 );
+light.position.set( 0, 10, 0 );
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
+
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
+		<h2>Constructor</h2>
 
 		<h3>[name]( [page:Camera camera] )</h3>
 		<div>
-		[page:Camera camera] — The shadow's view of the world.
+		[page:Camera camera] - the light's view of the world.<br /><br />
+
+		Create a new [name]. This is not intended to be called directly - it is called
+		internally by [page:PointLight] or used as a base class by other light shadows.
 		</div>
 
 		<h2>Properties</h2>
 
 		<h3>[property:Camera camera]</h3>
 		<div>
-			The shadow's view of the world.
+			The light's view of the world. This is used to generate a depth map of the scene; objects behind
+			other objects from the light's perspective will be in shadow.
 		</div>
 
 		<h3>[property:Float bias]</h3>
 		<div>
 			Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow.<br />
-			Default — *0*.
+			The default is 0. Very tiny adjustments here (in the order of 0.0001) may help reduce artefacts in shadows
 		</div>
 
-		<h3>[property:Float radius]</h3>
+		<h3>[property:WebGLRenderTarget map]</h3>
 		<div>
-			TODO<br />
-			Default - *0*.
+			The depth map generated using the internal camera; a location beyond a pixel's depth is
+			in shadow. Computed internally during rendering.
 		</div>
 
+
 		<h3>[property:Vector2 mapSize]</h3>
 		<div>
-			The width and height of the shadow map stored in a [page:Vector2 Vector2].<br />
-			Default — *( 512, 512 )*.
+			A [Page:Vector2] defining the width and height of the shadow map.<br /><br />
+
+			Higher values give better quality shadows at the cost of computation time. Values must be
+			powers of 2, up to the [page:WebGLRenderer.capabilities].maxTextureSize for a given device,
+			although the width and height don't have to be the same (so, for example, (512, 1024) is valid).
+			The default is *( 512, 512 )*.
 		</div>
 
-		<h3>[property:WebGLRenderTarget map]</h3>
+
+		<h3>[property:Matrix4 matrix]</h3>
 		<div>
-			The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
+			Model to shadow camera space, to compute location and depth in shadow map. Stored
+			in a [page:Matrix4 Matrix4]. This is computed internally during rendering.
 		</div>
 
-		<h3>[property:Matrix4 matrix]</h3>
+		<h3>[property:Float radius]</h3>
 		<div>
-			Model to shadow camera space, to compute location and depth in shadow map. Stored in a [page:Matrix4 Matrix4]. Computed internally during rendering.
+			Setting this this to values greater than 1 will blur the edges of the shadow.<br />
+
+			High values will cause unwanted banding effects in the shadows - a greater [page:.mapSize mapSize]
+			will allow for a higher value to be used here before these effects become visible.<br /><br />
+
+			Note that this has no effect if the [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer BasicShadowMap].
 		</div>
 
 
 		<h2>Methods</h2>
 		<h3>[method:LightShadow copy]( [page:LightShadow source] )</h3>
 		<div>
-		Copies value of *source* to this LightShadow object.
+		Copies value of all the properties from the [page:LightShadow source] to this
+		SpotLight.
 		</div>
 
 		<h3>[method:LightShadow clone]()</h3>
 		<div>
-		It returns a clone of LightShadow.
+		Creates a new LightShadow with the same properties as this one.
+		</div>
+
+		<h3>[method:Object toJSON]()</h3>
+		<div>
+		Serialize this LightShadow.
 		</div>
 
 		<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/lights/[name].js src/lights/[name].js]
 	</body>
 </html>

docs/api/lights/shadows/RectAreaLightShadow.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/lights/[name].js src/lights/[name].js]
 	</body>
 </html>

docs/api/lights/shadows/SpotLightShadow.html

@@ -12,27 +12,86 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">TODO</div>
+		<div class="desc">
+			This used internally by [page:SpotLight SpotLights] for calculating shadows.
+		</div>
+
+		<h2>Example</h2>
+		<div>
+			<code>
+//Create a WebGLRenderer and turn on shadows in the renderer
+var renderer = new THREE.WebGLRenderer();
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a SpotLight and turn on shadows for the light
+var light = new THREE.SpotLight( 0xffffff );
+light.castShadow = true;            // default false
+scene.add( light );
+
+//Set up shadow properties for the light
+light.shadow.mapSize.width = 512;  // default
+light.shadow.mapSize.height = 512; // default
+light.shadow.camera.near = 0.5;       // default
+light.shadow.camera.far = 500      // default
+
+//Create a sphere that cast shadows (but does not receive them)
+var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
+var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
+var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
+var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
+var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+scene.add( plane );
+
+//Create a helper for the shadow camera (optional)
+var helper = new THREE.CameraHelper( light.shadow.camera );
+scene.add( helper );
+			</code>
+		</div>
+
 
 		<h2>Constructor</h2>
 
 		The constructor creates a [page:PerspectiveCamera PerspectiveCamera] to manage the shadow's view of the world.
 
 		<h2>Properties</h2>
-
 		See the base [page:LightShadow LightShadow] class for common properties.
 
-		<h2>Methods</h2>
 
+	 <h3>[property:Camera camera]</h3>
+	 <div>
+		 The light's view of the world. This is used to generate a depth map of the scene; objects behind
+		 other objects from the light's perspective will be in shadow.<br /><br />
+
+		 The default is a  [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
+	  [page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
+		clipping plane at 0.5 and	[page:PerspectiveCamera.far far] clipping plane at 500.
+	 </div>
+
+	 <h3>[property:Boolean isSpotLightShadow]</h3>
+	 <div>
+		 Used to check whether this or derived classes are spot light shadows. Default is *true*.<br /><br />
+
+		 You should not change this, as it used internally for optimisation.
+	 </div>
+
+		<h2>Methods</h2>
 		See the base [page:LightShadow LightShadow] class for common methods.
 
 		<h3>[method:SpotLightShadow update]( [page:SpotLight light] )</h3>
 		<div>
-		Updates the internal perspective camera.
+		Updates the internal perspective [page:.camera camera] based on the passed in [page:SpotLight light].
 		</div>
 
 		<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/lights/[name].js src/lights/[name].js]
 	</body>
 </html>

docs/api/loaders/BinaryTextureLoader.html

@@ -1,62 +0,0 @@
-<!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>
-		<h1>[name]</h1>
-
-		<div class="desc">
-		Abstract base class to load generic binary textures formats (rgbe, hdr, ...).
-		This uses the [page:FileLoader] internally for loading files.
-		</div>
-
-		<h2>Examples</h2>
-
-		<div>
-			See the [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/RGBELoader.js RGBELoader]
-			for an example of a derived class.
-		</div>
-
-		<h2>Constructor</h2>
-
-		<h3>[name]( [page:LoadingManager manager] )</h3>
-		<div>
-		[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use.
-		Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
-
-		Creates a new [name].
-		</div>
-
-
-		<h2>Properties</h2>
-
-		<h3>[property:LoadingManager manager]</h3>
-		<div>
-		The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
-		</div>
-
-
-		<h2>Methods</h2>
-
-		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
-		<div>
-		[page:String url] — the path or URL to the file. This can also be a
-			[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
-		[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br />
-		[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — Will be called when load errors.<br />
-		</div>
-		<div>
-		Begin loading from url and pass the loaded texture to onLoad.
-		</div>
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>

docs/api/loaders/DataTextureLoader.html

@@ -10,9 +10,54 @@
 	<body>
 		<h1>[name]</h1>
 
-		<div class="desc">This is an alias for the [page:BinaryTextureLoader BinaryTextureLoader].
-			See that page for details.
+		<div class="desc">
+		Abstract base class to load generic binary textures formats (rgbe, hdr, ...).
+		This uses the [page:FileLoader] internally for loading files, and creates a new
+		[page:DataTexture].
 		</div>
 
+		<h2>Examples</h2>
+
+		<div>
+			See the [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/RGBELoader.js RGBELoader]
+			for an example of a derived class.
+		</div>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:LoadingManager manager] )</h3>
+		<div>
+		[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use.
+		Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
+
+		Creates a new [name].
+		</div>
+
+
+		<h2>Properties</h2>
+
+		<h3>[property:LoadingManager manager]</h3>
+		<div>
+		The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
+		</div>
+
+
+		<h2>Methods</h2>
+
+		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
+		<div>
+		[page:String url] — the path or URL to the file. This can also be a
+			[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
+		[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br />
+		[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+		[page:Function onError] — Will be called when load errors.<br />
+		</div>
+		<div>
+		Begin loading from url and pass the loaded texture to onLoad.
+		</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 	</body>
 </html>

docs/api/loaders/DefaultLoadingManager.html → docs/api/loaders/managers/DefaultLoadingManager.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" />
@@ -70,6 +70,6 @@ THREE.DefaultLoadingManager.onError = function ( url ) {
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/loadingManager.js loadingManager.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
 	</body>
 </html>

docs/api/loaders/LoadingManager.html → docs/api/loaders/managers/LoadingManager.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta charset="utf-8" />
-		<base href="../../" />
+		<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" />
@@ -150,6 +150,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/loaders/LoadingManager.js src/loaders/LoadingManager.js]
 	</body>
 </html>

docs/api/materials/Material.html

@@ -256,7 +256,7 @@
 		<h3>[method:null toJSON]( [page:object meta] )</h3>
 		<div>
 		meta -- object containing metadata such as textures or images for the material.<br />
-		Convert the material to Three JSON format.
+		Convert the material to three.js JSON format.
 		</div>
 
 		<h3>[method:null update]()</h3>

docs/api/materials/MeshStandardMaterial.html

@@ -48,7 +48,7 @@
 				</li>
 			</ul>
 
-			Technical details of the approach used in Three (and most other PBR systems) can be found is this
+			Technical details of the approach used in three.js (and most other PBR systems) can be found is this
 			[link:https://disney-animation.s3.amazonaws.com/library/s2012_pbs_disney_brdf_notes_v2.pdf paper from Disney] (pdf),
 			by Brent Burley.
 		</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
 
 ];
 
@@ -100,7 +100,7 @@ scene.add( cubeMesh );
 		<h3>[method:null toJSON]( [page:object meta] )</h3>
 		<div>
 		meta -- object containing metadata such as textures or images for the material.<br />
-		Convert the material to Three JSON format.
+		Convert the material to three.js JSON format.
 		</div>
 		<h2>Source</h2>
 

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/Color.html

@@ -51,7 +51,7 @@ var color = new THREE.Color( 1, 0, 0 );
 		[page:Float g] - (optional) The green component of the color if it is defined.<br />
 		[page:Float b] - (optional) The blue component of the color if it is defined.<br /><br />
 
-		Note that standard method of specifying color in Three is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
+		Note that standard method of specifying color in three.js is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
 		throughout the rest of the documentation.<br /><br />
 
 		When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color.<br />

docs/api/math/Matrix3.html

@@ -38,8 +38,8 @@ m.elements = [ 11, 21, 31,
 		</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.
+		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 [link:https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
 		</div>
 
 		<h2>Constructor</h2>
@@ -78,7 +78,7 @@ m.elements = [ 11, 21, 31,
 
 		Multiplies (applies) this matrix to every 3D vector in the [page:BufferAttribute attribute].
 		</div>
-		
+
 
 		<h3>[method:Matrix3 clone]()</h3>
 		<div>Creates a new Matrix3 and with identical elements to this one.</div>

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.
+		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 [link: https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
 		</div>
 
 

docs/api/math/Spline.html

@@ -1,101 +0,0 @@
-<!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>
-		<h1>[name]</h1>
-
-		<div class="desc">
-			Class representing a [link:https://en.wikipedia.org/wiki/Spline_(mathematics) spline].<br /><br />
-		</div>
-
-		<h2>Examples</h2>
-		<div>
-			[example:webgl_lines_splines WebGL / lines / splines]<br />
-			[example:webgl_lines_dashed WebGL / lines / dashed]<br />
-			[example:software_sandbox Software / sandbox]<br />
-			[example:canvas_lines_dashed Canvas / lines / dashed]
-		</div>
-
-
-		<h2>Constructor</h2>
-
-		<h3>[name]( [page:Array points] )</h3>
-
-		<div>
-			Initialises the spline with [page:Array points], which are the [page:Vector3 Vector3s]
-			 through which the spline will pass.
-		 </div>
-
-
-		<h2>Properties</h2>
-
-		<h3>[property:Array points]</h3>
-
-
-		<h2>Methods</h2>
-
-		<h3>[method:Array getControlPointsArray]( )</h3>
-		<div>
-			Returns an array with triplets of [ x, y, z ] coordinates that correspond to the
-			current control points.
-		</div>
-
-		<h3>[method:Vector3 getPoint]( [page:Integer k] )</h3>
-		<div>
-			[page:Integer k] — point index<br /><br />
-
-			Return the interpolated point at [page:Integer k].
-		</div>
-
-		<h3>[method:Object getLength]( [page:Integer nSubDivisions] )</h3>
-		<div>
-			[page:Integer nSubDivisions] — number of subdivisions between control points. Default is *100*.<br /><br />
-
-
-			Returns an object with the two properties. The property <strong>[page:Number total]</strong> contains
-			the length of the spline when using [page:Integer nSubDivisions]. The property [page:Array chunkLength]
-			contains an array with the total length from the beginning of the spline to the end of that chunk.
-		</div>
-
-		<h3>[method:null initFromArray]( [page:Array a] )</h3>
-		<div>
-			[page:Array a] — array of the form
-			<code>
-				var a = [ [x1, y1, z1], [x2, y2, z2], ...  ];
-			</code>
-			from which to initialise the points array.<br /><br />
-
-			Initialises using the data in the array as a series of points. Each value in *a* must
-				be another array with three values, where a[n] is v, the value for the *nth* point,
-				and v[0], v[1] and v[2] are the x, y and z coordinates of that point n, respectively.
-		</div>
-
-		<h3>[method:Vector3 interpolate]( p0, p1, p2, p3, t, t2, t3 )</h3>
-		<div>
-
-		</div>
-
-		<h3>[method:null reparametrizeByArcLength]( [page:Float samplingCoef] )</h3>
-		<div>
-			[page:Float samplingCoef] — how many intermediate values to use between spline points<br /><br />
-
-			Modifies the spline so that it looks similar to the original but has its points distributed
-			in such way that moving along the spline it's done at a more or less constant speed.
-			The points should also appear more uniformly spread along the curve.
-			This is done by resampling the original spline, with the density of sampling controlled by [page:Float samplingCoef].
-			Here it's interesting to note that denser sampling is not necessarily better:
-			if sampling is too high, you may get weird kinks in curvature.
-		</div>
-
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>

docs/api/math/Vector2.html

@@ -21,7 +21,7 @@
 					A point in 2D space (i.e. a position on a plane).
 				</li>
 				<li>
-					A direction and length across a plane. In Three the length will always be the
+					A direction and length across a plane. In three.js the length will always be the
 					[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
 					(straight-line distance) from (0, 0) to (x, y) and the direction is also
 					measured from (0, 0) towards (x, y).
@@ -32,7 +32,7 @@
 			</ul>
 
 			There are other things a 2D vector can be used to represent, such as momentum
-			vectors, complex numbers and so on,	however these are the most common uses in Three.
+			vectors, complex numbers and so on,	however these are the most common uses in three.js.
 		</div>
 
 		<h2>Example</h2>
@@ -184,11 +184,10 @@
 		Sets this vector's [page:.x x] value to be array[0] and [page:.y y] value to be array[1].
 		</div>
 
-		<h3>[method:Vector2 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
+		<h3>[method:Vector2 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
 		<div>
 		[page:BufferAttribute attribute] - the source attribute.<br />
 		[page:Integer index] - index in the attribute.<br /><br />
-		[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
 
 		Sets this vector's [page:.x x] and [page:.y y] values from the [page:BufferAttribute attribute].
 		</div>

docs/api/math/Vector3.html

@@ -20,7 +20,7 @@
 				A point in 3D space.
 			</li>
 			<li>
-				A direction and length in 3D space. In Three the length will always be the
+				A direction and length in 3D space. In three.js the length will always be the
 				[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
 				(straight-line distance) from (0, 0, 0) to (x, y, z) and the direction is also
 				measured from (0, 0, 0) towards (x, y, z).
@@ -31,7 +31,7 @@
 		</ul>
 
 		There are other things a 3D vector can be used to represent, such as momentum
-		vectors and so on, however these are the most common uses in Three.
+		vectors and so on, however these are the most common uses in three.js.
 		</div>
 
 
@@ -108,29 +108,7 @@ var d = a.distanceTo( b );
 
 		<h3>[method:Vector3 applyMatrix4]( [page:Matrix4 m] )</h3>
 		<div>
-		Multiply this vector by 4 x 3 subset of a [page:Matrix4 m]. If [page:Matrix4 m] is:
-		<code>
-a, b, c, d,
-e, f, g, h,
-i, j, k, l,
-m, n, o, p
-		</code>
-		Then the 4 x 3 matrix will be:
-		<code>
-a, b, c,
-e, f, g,
-i, j, k,
-m, n, o
-		</code>
-		Note that the input matrix [page:Matrix4 m] is assumed to be
-		[link:https://en.wikipedia.org/wiki/Affine_transformation affine].
-		</div>
-
-		<h3>[method:Vector3 applyProjection]( [page:Matrix4 m] )</h3>
-		<div>
-		[page:Matrix4 m] - [page:Matrix4] projection matrix.<br /><br />
-
-		Multiplies this vector and m, and divides by perspective.
+		Multiplies this vector (with an implicit 1 in the 4th dimension) and m, and divides by perspective.
 		</div>
 
 		<h3>[method:Vector3 applyQuaternion]( [page:Quaternion quaternion] )</h3>
@@ -242,11 +220,10 @@ m, n, o
 		and [page:.z z] value to be array[ offset + 2 ].
 		</div>
 
-		<h3>[method:Vector3 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
+		<h3>[method:Vector3 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
 		<div>
 		[page:BufferAttribute attribute] - the source attribute.<br />
 		[page:Integer index] - index in the attribute.<br /><br />
-		[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
 
 		Sets this vector's [page:.x x], [page:.y y] and [page:.z z] values from the [page:BufferAttribute attribute].
 		</div>

docs/api/math/Vector4.html

@@ -20,7 +20,7 @@
 				A point in 4D space.
 			</li>
 			<li>
-				A direction and length in 4D space. In Three the length will always be the
+				A direction and length in 4D space. In three.js the length will always be the
 				[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
 				(straight-line distance) from (0, 0, 0, 0, 0) to (x, y, z, w) and the direction is also
 				measured from (0, 0, 0, 0) towards (x, y, z, w).
@@ -30,7 +30,7 @@
 			</li>
 		</ul>
 
-		There are other things a 4D vector can be used to represent, however these are the most common uses in Three.
+		There are other things a 4D vector can be used to represent, however these are the most common uses in three.js.
 		</div>
 
 
@@ -157,11 +157,10 @@ var d = a.distanceTo( b );
 		[page:.z z] value to be array[ offset + 2 ] and [page:.w w ] value to be array[ offset + 3 ].
 		</div>
 
-		<h3>[method:Vector4 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
+		<h3>[method:Vector4 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
 		<div>
 		[page:BufferAttribute attribute] - the source attribute.<br />
 		[page:Integer index] - index in the attribute.<br /><br />
-		[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
 
 		Sets this vector's [page:.x x], [page:.y y], [page:.z z] and [page:.w w] values from the [page:BufferAttribute attribute].
 		</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/api/textures/Texture.html

@@ -48,7 +48,7 @@
 		<h3>[property:Image image]</h3>
 		<div>
 		An image object, typically created using the [page:TextureLoader.load] method.
-		This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by Three.<br /><br />
+		This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.<br /><br />
 
 		To use video as a texture you need to have a playing HTML5
 		video element as a source for your texture image and continuously update this texture
@@ -84,7 +84,7 @@
 		NOTE: tiling of images in textures only functions if image dimensions are powers of two
 		 (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
 		 Individual dimensions need not be equal, but each must be a power of two.
-		 This is a limitation of WebGL, not Three.js.
+		 This is a limitation of WebGL, not three.js.
 		</div>
 
 		<h3>[property:number magFilter]</h3>
@@ -202,7 +202,7 @@
 		<h3>[method:Texture toJSON]( meta )</h3>
 		<div>
 		meta -- optional object containing metadata.<br />
-		Convert the material to Three JSON format.
+		Convert the material to three.js JSON format.
 		</div>
 
 		<h3>[method:null dispose]()</h3>

docs/examples/Lut.html

@@ -133,7 +133,7 @@
 		value -- the data value to be displayed as a color.
 		</div>
 		<div>
-		Returns a Three.Color.
+		Returns a [page:Color].
 		</div>
 
 		<h2>Source</h2>

docs/examples/renderers/CanvasRenderer.html

@@ -16,7 +16,7 @@
 			API.<br /><br />
 
 			<b>
-			NOTE: The Canvas renderer has been deprecated and is no longer part of the Three.js core.
+			NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
 			</b>
 			If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].<br /><br />
 

docs/list.js

@@ -1,9 +1,25 @@
 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" ],
+			[ "How to run things locally", "manual/introduction/How-to-run-thing-locally" ],
+			[ "Drawing Lines", "manual/introduction/Drawing-lines" ],
+			[ "Creating Text", "manual/introduction/Creating-text" ],
+			[ "Migration Guide", "manual/introduction/Migration-guide" ],
+			[ "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": [
+			[ "Testing with NPM", "manual/buildTools/Testing-with-NPM" ]
 		]
 	},
 
@@ -71,7 +87,7 @@ var list = {
 			[ "Layers", "api/core/Layers" ],
 			[ "Object3D", "api/core/Object3D" ],
 			[ "Raycaster", "api/core/Raycaster" ],
-			[ "Uniform", "api/core/Uniform"]
+			[ "Uniform", "api/core/Uniform" ]
 		],
 
 		"Core / BufferAttributes": [
@@ -195,7 +211,6 @@ var list = {
 		"Loaders": [
 			[ "AnimationLoader", "api/loaders/AnimationLoader" ],
 			[ "AudioLoader", "api/loaders/AudioLoader" ],
-			[ "BinaryTextureLoader", "api/loaders/BinaryTextureLoader" ],
 			[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
 			[ "Cache", "api/loaders/Cache" ],
 			[ "CompressedTextureLoader", "api/loaders/CompressedTextureLoader" ],
@@ -212,8 +227,8 @@ var list = {
 		],
 
 		"Loaders / Managers": [
-			[ "DefaultLoadingManager", "api/loaders/DefaultLoadingManager" ],
-			[ "LoadingManager", "api/loaders/LoadingManager" ]
+			[ "DefaultLoadingManager", "api/loaders/managers/DefaultLoadingManager" ],
+			[ "LoadingManager", "api/loaders/managers/LoadingManager" ]
 		],
 
 		"Materials": [
@@ -253,7 +268,6 @@ var list = {
 			[ "Ray", "api/math/Ray" ],
 			[ "Sphere", "api/math/Sphere" ],
 			[ "Spherical", "api/math/Spherical" ],
-			[ "Spline", "api/math/Spline" ],
 			[ "Triangle", "api/math/Triangle" ],
 			[ "Vector2", "api/math/Vector2" ],
 			[ "Vector3", "api/math/Vector3" ],

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

@@ -0,0 +1,256 @@
+<!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>
+		<h1>[name]</h1>
+
+		<div class="desc">
+			This article shows how to get three.js into a [link:https://nodejs.org/en/ node.js] environment so that you
+			can execute automated tests. Tests can be run on the command line, or by automated
+			CI tools like [link:https://travis-ci.org/ Travis].
+		</div>
+
+		<h2>The short version</h2>
+
+		<div>
+			If you're comfortable with node and npm,
+			<code>
+				$ npm install three --save-dev
+			</code>
+			and add
+		<code>
+			var THREE = require('three');
+		</code>
+			to your test.
+		</div>
+
+		<h2>Create a testable project from scratch</h2>
+		<div>
+			If you're not familiar with these tools, here's a quick guide (for linux, the installation process
+			will be slightly different using windows, but the NPM commands are identical).
+		</div>
+
+		<h3>Basic setup</h3>
+		<div>
+			<ol>
+				<li>
+					Install [link:https://www.npmjs.org/ npm] and nodejs. The shortest path typically looks something like
+					<code>
+$ sudo apt-get install -y npm nodejs-legacy
+# fix any problems with SSL in the default registry URL
+$ npm config set registry http://registry.npmjs.org/
+					</code>
+				</li>
+
+				<li>
+					Make a new project directory
+					<code>
+						 $ mkdir test-example; cd test-example
+					</code>
+				</li>
+
+				<li>
+					Ask npm to create a new project file for you:
+					<code>
+					 $ npm init
+					</code>
+					 and accept all defaults by hitting Enter on all the prompts.
+					 This will create package.json.
+				</li><br />
+
+				<li>
+					Try and start the test feature with
+					<code>
+$ npm test
+					</code>
+					This will fail, which is expected.
+					If you look in the package.json, the definition of the test script is
+					<code>
+						"test": "echo \"Error: no test specified\" && exit 1"
+					</code>
+				</li>
+
+			</ol>
+		</div>
+
+		<h2>Add mocha</h2>
+		<div>
+			We're going to use [link:https://mochajs.org/ mocha].
+
+			<ol>
+				<li>
+					Install mocha with
+					<code>
+$ npm install mocha --save-dev
+					</code>
+					Notice that node_modules/ is created and your dependencies appear in there.
+				  Also notice that your package.json has been updated: the property devDependencies
+					is added and updated by the use of --save-dev.
+				</li><br />
+
+				<li>
+					Edit package.json to use mocha for testing. When test is invoked, we just want to run
+					mocha and specify a verbose reporter. By default this will run anything in test/
+					(not having directory test/ can run into npm ERR!, create it by mkdir test)
+					<code>
+						"test": "mocha --reporter list"
+					</code>
+				</li>
+
+				<li>
+					Rerun the test with
+					<code>
+						$ npm test.
+					</code>
+
+					This should now succeed, reporting 0 passing (1ms)
+				 	or similar.
+				</li>
+
+			</ol>
+		</div>
+
+		<h2>Add three.js</h2>
+		<div>
+			<ol>
+				<li>
+					Let's pull in our three.js dependency with
+					<code>
+$ npm install three --save-dev
+					</code>
+					<ul>
+						<li>
+							If you need a different three version, use
+							<code>
+								$ npm show three versions
+							</code>
+						  to see
+							what's available. To tell npm the right one, use
+							<code>
+ $ npm install [email protected] --save
+							</code>
+							(0.84.0 in this example). --save makes this a dependency of this project, rather than
+							dev dependency. See the docs [link:https://www.npmjs.org/doc/json.html here] for more info.
+						</li>
+					</ul>
+				</li>
+
+				<li>
+					Mocha will look for tests in test/, so let's
+					<code>
+					$ mkdir test.
+					</code>
+				</li>
+
+				<li>
+					Finally we actually need a JS test to run. Let's add a simple test that will verify that
+					the three.js object is available and working. Create test/verify-three.js containing:
+<code>
+var THREE = require('three');
+var assert = require("assert");
+
+describe('The THREE object', function() {
+  it('should have a defined BasicShadowMap constant', function() {
+    assert.notEqual('undefined', THREE.BasicShadowMap);
+  }),
+
+  it('should be able to construct a Vector3 with default of x=0', function() {
+    var vec3 = new THREE.Vector3();
+    assert.equal(0, vec3.x);
+  })
+})
+</code>
+				</li>
+
+				<li>
+				Finally let's test again with $ npm test. This should run the tests above and succeed,
+				showing something like:
+				<code>
+The THREE object should have a defined BasicShadowMap constant: 0ms
+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
+2 passing (8ms)
+				</code>
+				</li>
+			</ol>
+		</div>
+
+		<h2>Add your own code</h2>
+		<div>
+			You need to do three things:
+
+			<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.
+				</li>
+
+				<li>
+					Export your functional code in such a way that nodejs can see it, for use in conjunction with require.
+					See it [link:https://github.com/air/encounter/blob/master/js/Physics.js here].
+				</li>
+
+				<li>
+					Require your code into the test file, in the same way we did a require('three') in the example above.
+				</li>
+			</ol>
+
+			Items 2 and 3 will vary depending on how you manage your code. In the example of Physics.js
+		  given above, the export part is right at the end. We assign an object to module.exports:
+			<code>
+//=============================================================================
+// make available in nodejs
+//=============================================================================
+if (typeof exports !== 'undefined')
+{
+  module.exports = Physics;
+}
+			</code>
+		</div>
+
+		<h2>Dealing with dependencies</h2>
+		<div>
+			<p>
+				If you're already using something clever like require.js or browserify, skip this part.
+			</p>
+			<p>
+				Typically a three.js project is going to run in the browser. Module loading is hence done by
+				the browser executing a bunch of script tags. Your individual files don't have to worry
+				about dependencies. In a nodejs context however, there is no index.html binding everything
+				together, so you have to be explicit.
+			</p>
+			<p>
+				If you're exporting a module that depends on other files, you're going to have to tell node to load them.
+				Here is one approach:
+			</p>
+			<ol>
+				<li>
+					At the start of your module, check to see if you're in a nodejs environment.
+				</li>
+				<li>
+					If so, explicitly declare your dependencies.
+				</li>
+				<li>
+					If not, you're probably in a browser so you don't need to do anything else.
+				</li>
+			</ol>
+			Example code from Physics.js:
+			<code>
+//=============================================================================
+// setup for server-side testing
+//=============================================================================
+if (typeof require === 'function') // test for nodejs environment
+{
+  var THREE = require('three');
+  var MY3 = require('./MY3.js');
+}
+			</code>
+		</div>
+
+	</body>
+</html>

docs/manual/introduction/Code-style-guide.html

@@ -0,0 +1,22 @@
+<!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>
+		<h1>[name]</a></h1>
+
+		<div class="desc">
+			All code and examples in three.js are written using Mr.doob's Code Style.
+			Of course you are free to use whatever style you prefer for your own work, but
+			if you are adding code to the library or examples then you must follow this guide.<br /><br />
+
+			You can find details
+			<a href="https://github.com/mrdoob/three.js/wiki/Mr.doob%27s-Code-Style%E2%84%A2">here</a>.
+		</div>
+	</body>
+</html>

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

@@ -10,18 +10,18 @@
 	<body>
 		<h1>[name]</h1><br />
 
-		<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
+		<div>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
 
 		<h2>Before we start</h2>
 
-		<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
+		<div>Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
 
 		<code>
 		&lt;!DOCTYPE html&gt;
 		&lt;html&gt;
 			&lt;head&gt;
 				&lt;meta charset=utf-8&gt;
-				&lt;title&gt;My first Three.js app&lt;/title&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 				&lt;style&gt;
 					body { margin: 0; }
 					canvas { width: 100%; height: 100% }
@@ -40,7 +40,7 @@
 
 		<h2>Creating the scene</h2>
 
-		<div>To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
+		<div>To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
 
 		<code>
 		var scene = new THREE.Scene();
@@ -51,13 +51,13 @@
 		document.body.appendChild( renderer.domElement );
 		</code>
 
-		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
+		<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
 
 		<div>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</div>
 
 		<div>The next two attributes are the <strong>near</strong> and <strong>far</strong> clipping plane. What that means, is that objects further away from the camera than the value of <strong>far</strong> or closer than <strong>near</strong> won't be rendered. You don't have to worry about this now, but you may want to use other values in your apps to get better performance.</div>
 
-		<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, Three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
+		<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
 
 		<div>In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. It's a good idea to use the width and height of the area we want to fill with our app - in this case, the width and height of the browser window. For performance intensive apps, you can also give <strong>setSize</strong> smaller values, like <strong>window.innerWidth/2</strong> and <strong>window.innerHeight/2</strong>, which will make the app render at half size.</div>
 
@@ -113,14 +113,14 @@
 		</div>
 
 		<h2>The result</h2>
-		<div>Congratulations! You have now completed your first Three.js application. It's simple, you have to start somewhere.</div>
+		<div>Congratulations! You have now completed your first three.js application. It's simple, you have to start somewhere.</div>
 
 		<div>The full code is available below. Play around with it to get a better understanding of how it works.</div>
 
 		<code>
 		&lt;html&gt;
 			&lt;head&gt;
-				&lt;title&gt;My first Three.js app&lt;/title&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 				&lt;style&gt;
 					body { margin: 0; }
 					canvas { width: 100%; height: 100% }

docs/manual/introduction/Creating-text.html

@@ -0,0 +1,87 @@
+<!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>
+		<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 <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 </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>
+
+
+
+	</body>
+</html>

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

@@ -0,0 +1,34 @@
+<!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>
+		<h1>[name]</h1><br />
+		<p>
+			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>
+
+		<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>
+
+<code>
+if (Detector.webgl) {
+    init();
+    animate();
+} else {
+    var warning = Detector.getWebGLErrorMessage();
+    document.getElementById('container').appendChild(warning);
+}
+</code>
+
+
+	</body>
+</html>

docs/manual/introduction/Drawing-lines.html

@@ -0,0 +1,64 @@
+<!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>
+		<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>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);
+
+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));
+
+var scene = new THREE.Scene();
+			</code>
+			<p>Next thing we will do is define a material. For lines we have to use [page:LineBasicMaterial] oe [page:LineDashedMaterial].</p>
+			<code>
+//create a blue LineBasicMaterial
+var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+			</code>
+
+			<p>
+				After material we will need a [page:Geometry] or [page:BufferGeometry] with some vertices
+				(it's reccomended to use a BufferGeometry as it's more performant, however for simplicity we'll use a Geometry here):
+			</p>
+
+			<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>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
+
+			<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>
+
+			<code>
+scene.add(line);
+renderer.render(scene, camera);
+			</code>
+
+			<p>You should now be seeing a arrow pointing upwards, made from two blue lines.</p>
+		</div>
+	</body>
+</html>

docs/manual/introduction/FAQ.html

@@ -0,0 +1,51 @@
+<!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>
+		<h1>[name]</h1>
+
+		<h2>Which Import Format/Exporter is best supported?</h2>
+		<div>
+TODO
+		</div>
+
+		<h2>Why are there meta viewport tags in examples?</h2>
+		<div>
+			<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">meta</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e">content</span>=<span class="pl-s"><span class="pl-pds">"</span>width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0<span class="pl-pds">"</span></span>&gt;</pre></div>
+
+				<p>These tags control viewport size and scale for mobile browsers (where page content may be rendered at different size than visible viewport).</p>
+
+				<p><a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html</a></p>
+
+				<p><a href="https://developer.mozilla.org/en/Mobile/Viewport_meta_tag">https://developer.mozilla.org/en/Mobile/Viewport_meta_tag</a></p>
+		</div>
+
+		<h2>How can scene scale be preserved on resize?</h2>
+		<div>
+			We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.
+
+			The key equation to solving this is this formula for the visible height at a given distance:
+
+			<code>s
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
+			</code>
+			If we increase the window height by a certain percentage, then what we want is the visible height at all distances
+			to increase by the same percentage.
+
+			This can not be done by changing the camera position. Instead you have to change the camera field-of-view.
+			[link:http://jsfiddle.net/Q4Jpu/ Example].
+		</div>
+
+		<h2>Why is part of my object invisible?</h2>
+		<div>
+			This could be because of face culling. Faces have an orientation that  decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
+			<code>material.side = THREE.DoubleSide</code>
+		</div>
+	</body>
+</html>

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

@@ -0,0 +1,191 @@
+<!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>
+		<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>
+		<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].
+						 page.
+					 </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

@@ -0,0 +1,252 @@
+<!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>
+		<h1>[name]</h1>
+		<div>
+			<p>All objects by default automatically update their matrices if the 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
+					you cannot resize buffers (this is very costly,	basically the equivalent to creating new a 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>
+
+
+
+
+		<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>Also GLstate 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>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>Changes in these require building of new shader program. You'll need to set</p>
+			<code>material.needsUpdate = true</code>
+
+			<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>
+
+			<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>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>
+
+			<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>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>
+
+			<h3>Examples:</h3>
+			[example:webgl_materials_cars WebGL / materials / cars]<br />
+			[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+		</div>
+
+
+		<h2>Textures</h2>
+		<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/Matrix-transformations.html

@@ -19,7 +19,7 @@
 		There are two ways to update an object's transformation:
 		<ol>
 			<li>
-				Modify the object's *position*, *quaternion*, and *scale* properties, and let Three.js recompute
+				Modify the object's *position*, *quaternion*, and *scale* properties, and let three.js recompute
 				the object's matrix from these properties:
 				<code>
 				object.position.copy(start_position);

docs/manual/introduction/Migration-guide.html

@@ -0,0 +1,20 @@
+<!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>
+		<h1>[name]</a></h1>
+
+		<div class="desc">
+			The migration guide is maintained on the [link:https://github.com/mrdoob/three.js/wiki wiki].
+			It contains a list of changes for each version of three.js going back to r45.<br /><br />
+
+			You can find it [link:https://github.com/mrdoob/three.js/wiki/Migration-Guide here].
+		</div>
+	</body>
+</html>

docs/manual/introduction/Useful-links.html

@@ -0,0 +1,180 @@
+<!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>
+		<h1>[name]</h1><br />
+
+		<div class="desc">
+			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 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>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: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: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://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
+			</li>
+			<li>
+				<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 it 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>
+
+		<h4>Tutorials in other languages</h4>
+		<ul>
+			<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>
+
+		</ul>
+
+
+		<h2>More documentation</h2>
+		<ul>
+			<li>
+				[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 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 authoritaive 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>
+
+		<h2>Examples</h2>
+		<ul>
+			<li>
+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
+				examples built using three.js r60.
+			</li>
+			<li>
+				[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 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>
+		</ul>
+
+	 <h2>Tools</h2>
+	 <ul>
+		 <li>
+			[link:http://www.physgl.org/ physgl.org] - javascript front-end with wrappers to three.js, to bring WebGL
+ 			graphics to students learning physics and math.
+		 </li>
+		 <li>
+			 [link:http://whitestormjs.xyz/ Whitestorm.js] – A wrapper around Three.js and custom [link:https://github.com/chandlerprall/Physijs physi.js].
+		 </li>
+
+		<li>
+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
+		</li>
+		<li>
+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.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
+		they may have information relating to very old versions of three.js.
+	 </div>
+
+	 <ul>
+		<li>
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM">AlterQualia at WebGL Camp 3</a>
+		</li>
+		<li>
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
+		</li>
+		<li>
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
+		</li>
+		<li>
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
+		</li>
+		<li>
+			<a href="http://www.youtube.com/watch?v=VdQnOaolrPA">Trigger Rally</a>  by [link:https://github.com/jareiko jareiko] (video).
+		</li>
+		<li>
+			[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 [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[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>
+
+	</body>
+</html>

docs/page.js

@@ -43,7 +43,7 @@ var onDocumentLoad = function ( event ) {
 	text = text.replace( /\[example:([\w\_]+)\]/gi, "[example:$1 $1]" ); // [example:name] to [example:name title]
 	text = text.replace( /\[example:([\w\_]+) ([\w\:\/\.\-\_ \s]+)\]/gi, "<a href=\"../examples/#$1\"  target=\"_blank\">$2</a>" ); // [example:name title]
 
-
+	
 	document.body.innerHTML = text;
 
 	// handle code snippets formatting

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
 

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/Menubar.File.js

@@ -4,6 +4,16 @@
 
 Menubar.File = function ( editor ) {
 
+	var NUMBER_PRECISION = 6;
+
+	function parseNumber( key, value ) {
+
+		return typeof value === 'number' ? parseFloat( value.toFixed( NUMBER_PRECISION ) ) : value;
+
+	}
+
+	//
+
 	var container = new UI.Panel();
 	container.setClass( 'menu' );
 
@@ -89,7 +99,7 @@ Menubar.File = function ( editor ) {
 
 		try {
 
-			output = JSON.stringify( output, null, '\t' );
+			output = JSON.stringify( output, parseNumber, '\t' );
 			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
 
 		} catch ( e ) {
@@ -123,7 +133,7 @@ Menubar.File = function ( editor ) {
 
 		try {
 
-			output = JSON.stringify( output, null, '\t' );
+			output = JSON.stringify( output, parseNumber, '\t' );
 			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
 
 		} catch ( e ) {
@@ -148,7 +158,7 @@ Menubar.File = function ( editor ) {
 
 		try {
 
-			output = JSON.stringify( output, null, '\t' );
+			output = JSON.stringify( output, parseNumber, '\t' );
 			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
 
 		} catch ( e ) {
@@ -220,7 +230,7 @@ Menubar.File = function ( editor ) {
 
 		var vr = output.project.vr;
 
-		output = JSON.stringify( output, null, '\t' );
+		output = JSON.stringify( output, parseNumber, '\t' );
 		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
 
 		zip.file( 'app.json', output );

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/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,13 @@
 		<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;
+			}
 		</style>
 	</head>
 	<body ontouchstart="">
@@ -37,30 +24,13 @@
 			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 ) {
-
-					var button = document.createElement( 'div' );
-					button.id = 'edit';
-					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 );
 				} );

editor/js/libs/tern-threejs/threejs.js

@@ -4215,34 +4215,6 @@
       "!doc": "A geometric sphere defined by a center position and radius.",
       "!type": "fn(center: +THREE.Vector3, radius: number)"
     },
-    "Spline": {
-      "!url": "http://threejs.org/docs/#Reference/math/Spline",
-      "prototype": {
-        "points": "[]",
-        "initFromArray": {
-          "!type": "fn(a: [])",
-          "!doc": "Initialises using the data in the array as a series of points. Each value in *a* must be another array with three values, where a[n] is v, the value for the *nth* point, and v[0], v[1] and v[2] are the x, y and z coordinates of that point n, respectively."
-        },
-        "getPoint": {
-          "!type": "fn(k: number) -> +THREE.Vector3",
-          "!doc": "Return the interpolated point at *k*."
-        },
-        "getControlPointsArray": {
-          "!type": "fn() -> []",
-          "!doc": "Returns an array with triplets of x, y, z coordinates that correspond to the current control points."
-        },
-        "getLength": {
-          "!type": "fn(nSubDivisions: number) -> object",
-          "!doc": "Returns an object with the two properties. The property .[page:Number total] contains\n\t\t\tthe length of the spline when using nSubDivisions. The property .[page:Array chunkLength]\n\t\t\tcontains an array with the total length from the beginning of the spline to the end of that chunk."
-        },
-        "reparametrizeByArcLength": {
-          "!type": "fn(samplingCoef: number)",
-          "!doc": "This is done by resampling the original spline, with the density of sampling controlled by *samplingCoef*. Here it's interesting to note that denser sampling is not necessarily better: if sampling is too high, you may get weird kinks in curvature."
-        }
-      },
-      "!doc": "Represents a spline.",
-      "!type": "fn(points: [])"
-    },
     "Triangle": {
       "!url": "http://threejs.org/docs/#Reference/math/Triangle",
       "prototype": {

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 ) {

examples/canvas_lines_dashed.html

@@ -71,7 +71,7 @@
 
 				var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var spline = new THREE.Spline( points );
+				var spline = new THREE.CatmullRomCurve3( points );
 				var geometrySpline = new THREE.Geometry();
 
 				for ( var i = 0; i < points.length * subdivisions; i ++ ) {

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/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/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

@@ -80,7 +80,7 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 		"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,6 +105,10 @@ 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",
@@ -143,6 +147,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 +186,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 +244,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/loaders/ColladaLoader.js

@@ -1182,7 +1182,7 @@ THREE.ColladaLoader = function () {
 				if ( num_materials > 1 ) {
 
 					material = new THREE.MultiMaterial( used_materials_array );
-					
+
 					for ( j = 0; j < geom.faces.length; j ++ ) {
 
 						var face = geom.faces[ j ];
@@ -3697,11 +3697,11 @@ THREE.ColladaLoader = function () {
 						if ( cot.isTexture() ) {
 
 							var samplerId = cot.texture;
-							var surfaceId = this.effect.sampler[samplerId];
+							var sampler = this.effect.sampler[samplerId];
 
-							if ( surfaceId !== undefined && surfaceId.source !== undefined ) {
+							if ( sampler !== undefined && sampler.source !== undefined ) {
 
-								var surface = this.effect.surface[surfaceId.source];
+								var surface = this.effect.surface[sampler.source];
 
 								if ( surface !== undefined ) {
 
@@ -3726,8 +3726,34 @@ THREE.ColladaLoader = function () {
 
 										}
 
-										texture.wrapS = cot.texOpts.wrapU ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping;
-										texture.wrapT = cot.texOpts.wrapV ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping;
+										if ( sampler.wrap_s === "MIRROR" ) {
+
+											texture.wrapS = THREE.MirroredRepeatWrapping;
+
+										} else if ( sampler.wrap_s === "WRAP" || cot.texOpts.wrapU ) {
+
+											texture.wrapS = THREE.RepeatWrapping;
+
+										} else {
+
+											texture.wrapS = THREE.ClampToEdgeWrapping;
+
+										}
+
+										if ( sampler.wrap_t === "MIRROR" ) {
+
+											texture.wrapT = THREE.MirroredRepeatWrapping;
+
+										} else if ( sampler.wrap_t === "WRAP" || cot.texOpts.wrapV ) {
+
+											texture.wrapT = THREE.RepeatWrapping;
+
+										} else {
+
+											texture.wrapT = THREE.ClampToEdgeWrapping;
+
+										}
+
 										texture.offset.x = cot.texOpts.offsetU;
 										texture.offset.y = cot.texOpts.offsetV;
 										texture.repeat.x = cot.texOpts.repeatU;

examples/js/loaders/GLTFLoader.js

@@ -50,16 +50,17 @@ THREE.GLTFLoader = ( function () {
 			var parser = new GLTFParser( json, {
 
 				path: path || this.path,
-				crossOrigin: !! this.crossOrigin
+				crossOrigin: this.crossOrigin
 
 			} );
 
-			parser.parse( function ( scene, cameras, animations ) {
+			parser.parse( function ( scene, scenes, cameras, animations ) {
 
 				console.timeEnd( 'GLTFLoader' );
 
 				var glTF = {
 					"scene": scene,
+					"scenes": scenes,
 					"cameras": cameras,
 					"animations": animations
 				};
@@ -253,36 +254,6 @@ THREE.GLTFLoader = ( function () {
 
 	};
 
-	function createAnimation( name, interps ) {
-
-		var tracks = [];
-
-		for ( var i = 0, len = interps.length; i < len; i ++ ) {
-
-			var interp = interps[ i ];
-
-			// KeyframeTrack.optimize() will modify given 'times' and 'values'
-			// buffers before creating a truncated copy to keep. Because buffers may
-			// be reused by other tracks, make copies here.
-			interp.times = THREE.AnimationUtils.arraySlice( interp.times, 0 );
-			interp.values = THREE.AnimationUtils.arraySlice( interp.values, 0 );
-
-			interp.target.updateMatrix();
-			interp.target.matrixAutoUpdate = true;
-
-			tracks.push( new THREE.KeyframeTrack(
-				interp.name,
-				interp.times,
-				interp.values,
-				interp.type
-			) );
-
-		}
-
-		return new THREE.AnimationClip( name, undefined, tracks );
-
-	}
-
 	/*********************************/
 	/********** INTERNALS ************/
 	/*********************************/
@@ -632,6 +603,14 @@ THREE.GLTFLoader = ( function () {
 
 			var scene = dependencies.scenes[ json.scene ];
 
+			var scenes = [];
+
+			for ( var name in dependencies.scenes ) {
+
+				scenes.push( dependencies.scenes[ name ] );
+
+			}
+
 			var cameras = [];
 
 			for ( var name in dependencies.cameras ) {
@@ -649,7 +628,7 @@ THREE.GLTFLoader = ( function () {
 
 			}
 
-			callback( scene, cameras, animations );
+			callback( scene, scenes, cameras, animations );
 
 		} );
 
@@ -793,7 +772,7 @@ THREE.GLTFLoader = ( function () {
 
 					}
 
-					textureLoader.crossOrigin = options.crossOrigin || false;
+					textureLoader.setCrossOrigin( options.crossOrigin );
 
 					textureLoader.load( resolveURL( source.uri, options.path ), function ( _texture ) {
 
@@ -1207,49 +1186,31 @@ THREE.GLTFLoader = ( function () {
 
 						if ( primitive.indices ) {
 
-							var indexArray = dependencies.accessors[ primitive.indices ];
-
-							geometry.setIndex( indexArray );
-
-							var offset = {
-								start: 0,
-								index: 0,
-								count: indexArray.count
-							};
-
-							geometry.groups.push( offset );
-
-							geometry.computeBoundingSphere();
+							geometry.setIndex( dependencies.accessors[ primitive.indices ] );
 
 						}
 
-
 						var material = dependencies.materials[ primitive.material ];
 
 						var meshNode = new THREE.Mesh( geometry, material );
 						meshNode.castShadow = true;
-						
+
 						if ( primitive.extras ) meshNode.userData = primitive.extras;
-						
+
 						group.add( meshNode );
 
-					}
-					
-					else if ( primitive.mode === WEBGL_CONSTANTS.LINES) {
+					} else if ( primitive.mode === WEBGL_CONSTANTS.LINES ) {
 
 						var geometry = new THREE.BufferGeometry();
 
 						var attributes = primitive.attributes;
 
+
 						for ( var attributeId in attributes ) {
 
 							var attributeEntry = attributes[ attributeId ];
 
-							if ( !attributeEntry ) {
-
-								return;
-
-							}
+							if ( ! attributeEntry ) return;
 
 							var bufferAttribute = dependencies.accessors[ attributeEntry ];
 
@@ -1258,48 +1219,37 @@ THREE.GLTFLoader = ( function () {
 								case 'POSITION':
 									geometry.addAttribute( 'position', bufferAttribute );
 									break;
-									
+				
 								case 'COLOR_0':
 								case 'COLOR0':
 								case 'COLOR':
-								geometry.addAttribute( 'color', bufferAttribute );
-								break;
-								
-							}
+									geometry.addAttribute( 'color', bufferAttribute );
+									break;
 
+							}
 						};
 
+						var material = dependencies.materials[ primitive.material ];
+
+						var meshNode;
+
 						if ( primitive.indices ) {
 
-							var indexArray = dependencies.accessors[ primitive.indices ];
+							geometry.setIndex( dependencies.accessors[ primitive.indices ] );
 
-							if(indexArray) {
+							meshNode = new THREE.LineSegments( geometry, material );
 
-								geometry.setIndex(indexArray);
+						} else {
 
-								var offset = {
-									start: 0,
-									index: 0,
-									count: indexArray.count
-								};
+							meshNode = new THREE.Line( geometry, material );
 
-								geometry.groups.push(offset);
-								geometry.computeBoundingSphere();
-							}
 						}
 
-						var material = dependencies.materials[ primitive.material ];
-						
-						var meshNode = new THREE.Line( geometry, material );
-						if ( primitive.indices ) meshNode = new THREE.LineSegments( geometry, material );
-
 						if ( primitive.extras ) meshNode.userData = primitive.extras;
 
 						group.add( meshNode );
 
-				}
-					
-					else {
+					} else {
 
 						console.warn( "Only triangular and line primitives are supported" );
 
@@ -1396,7 +1346,7 @@ THREE.GLTFLoader = ( function () {
 
 			return _each( json.animations, function ( animation, animationId ) {
 
-				var interps = [];
+				var tracks = [];
 
 				for ( var channelId in animation.channels ) {
 
@@ -1417,15 +1367,22 @@ THREE.GLTFLoader = ( function () {
 
 						if ( node ) {
 
-							var interp = {
-								times: inputAccessor.array,
-								values: outputAccessor.array,
-								target: node,
-								type: INTERPOLATION[ sampler.interpolation ],
-								name: node.name + '.' + PATH_PROPERTIES[ target.path ]
-							};
+							node.updateMatrix();
+							node.matrixAutoUpdate = true;
 
-							interps.push( interp );
+							var TypedKeyframeTrack = PATH_PROPERTIES[ target.path ] === PATH_PROPERTIES.rotation
+								? THREE.QuaternionKeyframeTrack
+								: THREE.VectorKeyframeTrack;
+
+							// KeyframeTrack.optimize() will modify given 'times' and 'values'
+							// buffers before creating a truncated copy to keep. Because buffers may
+							// be reused by other tracks, make copies here.
+							tracks.push( new TypedKeyframeTrack(
+								node.name + '.' + PATH_PROPERTIES[ target.path ],
+								THREE.AnimationUtils.arraySlice( inputAccessor.array, 0 ),
+								THREE.AnimationUtils.arraySlice( outputAccessor.array, 0 ),
+								INTERPOLATION[ sampler.interpolation ]
+							) );
 
 						}
 
@@ -1433,7 +1390,7 @@ THREE.GLTFLoader = ( function () {
 
 				}
 
-				return createAnimation( "animation_" + animationId, interps );
+				return new THREE.AnimationClip( "animation_" + animationId, undefined, tracks );
 
 			} );
 
@@ -1520,6 +1477,13 @@ THREE.GLTFLoader = ( function () {
 							var mesh = node.meshes[ meshId ];
 							var group = dependencies.meshes[ mesh ];
 
+							if ( group === undefined ) {
+
+								console.warn( 'GLTFLoader: Couldn\'t find node "' + mesh + '".' );
+								continue;
+
+							}
+
 							for ( var childrenId in group.children ) {
 
 								var child = group.children[ childrenId ];
@@ -1541,13 +1505,22 @@ THREE.GLTFLoader = ( function () {
 									material = originalMaterial;
 
 								}
-								if(child.type=="Line") {
-									child = new THREE.Line(originalGeometry, material);
-								}
-								else if(child.type=="LineSegments") {
-									child = new THREE.LineSegments(originalGeometry, material);
+
+								switch ( child.type ) {
+
+									case 'LineSegments':
+										child = new THREE.LineSegments( originalGeometry, material );
+										break;
+
+									case 'Line':
+										child = new THREE.Line( originalGeometry, material );
+										break;
+
+									default:
+										child = new THREE.Mesh( originalGeometry, material );
+
 								}
-								else child = new THREE.Mesh( originalGeometry, material );
+
 								child.castShadow = true;
 								child.userData = originalUserData;
 

examples/js/loaders/MMDLoader.js

@@ -947,12 +947,6 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 				t.wrapS = THREE.RepeatWrapping;
 				t.wrapT = THREE.RepeatWrapping;
 
-				if ( params.sphericalReflectionMapping === true ) {
-
-					t.mapping = THREE.SphericalReflectionMapping;
-
-				}
-
 				for ( var i = 0; i < texture.readyCallbacks.length; i++ ) {
 
 					texture.readyCallbacks[ i ]( texture );
@@ -963,6 +957,12 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 
 			}, onProgress, onError );
 
+			if ( params.sphericalReflectionMapping === true ) {
+
+				texture.mapping = THREE.SphericalReflectionMapping;
+
+			}
+
 			texture.readyCallbacks = [];
 
 			textures[ fullPath ] = texture;
@@ -1258,13 +1258,6 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 				m.envMap = getTexture( p.envMap, textures );
 				m.combine = p.envMapType;
 
-				// TODO: WebGLRenderer should automatically update?
-				m.envMap.readyCallbacks.push( function ( t ) {
-
-					m.needsUpdate = true;
-
-				} );
-
 			}
 
 			m.opacity = p.opacity;

examples/js/loaders/RGBELoader.js

@@ -11,8 +11,8 @@ THREE.HDRLoader = THREE.RGBELoader = function ( manager ) {
 
 };
 
-// extend THREE.BinaryTextureLoader
-THREE.RGBELoader.prototype = Object.create( THREE.BinaryTextureLoader.prototype );
+// extend THREE.DataTextureLoader
+THREE.RGBELoader.prototype = Object.create( THREE.DataTextureLoader.prototype );
 
 // adapted from http://www.graphics.cornell.edu/~bjw/rgbe.html
 THREE.RGBELoader.prototype._parser = function( buffer ) {
@@ -112,16 +112,16 @@ THREE.RGBELoader.prototype._parser = function( buffer ) {
 
 					programtype: 'RGBE',              /* listed at beginning of file to identify it
 													* after "#?".  defaults to "RGBE" */
-														
+
 					format: '',                       /* RGBE format, default 32-bit_rle_rgbe */
 
 					gamma: 1.0,                       /* image has already been gamma corrected with
 													* given gamma.  defaults to 1.0 (no correction) */
-														
+
 					exposure: 1.0,                    /* a value of 1.0 in an image corresponds to
 													* <exposure> watts/steradian/m^2.
 													* defaults to 1.0 */
-														
+
 					width: 0, height: 0               /* image dimensions, width/height */
 
 				}

examples/js/postprocessing/AdaptiveToneMappingPass.js

@@ -119,6 +119,7 @@ THREE.AdaptiveToneMappingPass = function ( adaptive, resolution ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/BloomPass.js

@@ -69,6 +69,7 @@ THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/BokehPass.js

@@ -63,6 +63,7 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.scene2  = new THREE.Scene();
 
 	this.quad2 = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 
 };

examples/js/postprocessing/DotScreenPass.js

@@ -29,6 +29,7 @@ THREE.DotScreenPass = function ( center, angle, scale ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/FilmPass.js

@@ -30,6 +30,7 @@ THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount,
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/GlitchPass.js

@@ -27,6 +27,7 @@ THREE.GlitchPass = function ( dt_size ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 	this.goWild = false;

examples/js/postprocessing/OutlinePass.js

@@ -97,6 +97,7 @@ THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {
 	this.scene = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 	this.tempPulseColor1 = new THREE.Color();

examples/js/postprocessing/SMAAPass.js

@@ -100,6 +100,7 @@ THREE.SMAAPass = function ( width, height ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/SSAARenderPass.js

@@ -43,6 +43,7 @@ THREE.SSAARenderPass = function ( scene, camera, clearColor, clearAlpha ) {
 	this.camera2 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene2	= new THREE.Scene();
 	this.quad2 = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), this.copyMaterial );
+	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 
 };

examples/js/postprocessing/SavePass.js

@@ -38,6 +38,7 @@ THREE.SavePass = function ( renderTarget ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/ShaderPass.js

@@ -33,6 +33,7 @@ THREE.ShaderPass = function ( shader, textureID ) {
 	this.scene = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/TexturePass.js

@@ -32,6 +32,7 @@ THREE.TexturePass = function ( map, opacity ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/postprocessing/UnrealBloomPass.js

@@ -124,6 +124,7 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
+	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
 };

examples/js/renderers/CSS2DRenderer.js

@@ -60,7 +60,7 @@ THREE.CSS2DRenderer = function () {
 		if ( object instanceof THREE.CSS2DObject ) {
 
 			vector.setFromMatrixPosition( object.matrixWorld );
-			vector.applyProjection( viewProjectionMatrix );
+			vector.applyMatrix4( viewProjectionMatrix );
 
 			var element = object.element;
 			var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';

examples/js/renderers/CanvasRenderer.js

@@ -854,16 +854,42 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
+		var repeatX = texture.wrapS === THREE.RepeatWrapping || texture.wrapS === THREE.MirroredRepeatWrapping;
+		var repeatY = texture.wrapT === THREE.RepeatWrapping || texture.wrapT === THREE.MirroredRepeatWrapping;
+
+		var mirrorX = texture.wrapS === THREE.MirroredRepeatWrapping;
+		var mirrorY = texture.wrapT === THREE.MirroredRepeatWrapping;
+
+		//
+
 		var canvas = document.createElement( 'canvas' );
-		canvas.width = image.width;
-		canvas.height = image.height;
+		canvas.width = image.width * ( mirrorX ? 2 : 1 );
+		canvas.height = image.height * ( mirrorY ? 2 : 1 );
 
 		var context = canvas.getContext( '2d' );
 		context.setTransform( 1, 0, 0, - 1, 0, image.height );
 		context.drawImage( image, 0, 0 );
 
-		var repeatX = texture.wrapS === THREE.RepeatWrapping;
-		var repeatY = texture.wrapT === THREE.RepeatWrapping;
+		if ( mirrorX === true ) {
+
+			context.setTransform( - 1, 0, 0, - 1, image.width, image.height );
+			context.drawImage( image, - image.width, 0 );
+
+		}
+
+		if ( mirrorY === true ) {
+
+			context.setTransform( 1, 0, 0, 1, 0, 0 );
+			context.drawImage( image, 0, image.height );
+
+		}
+
+		if ( mirrorX === true && mirrorY === true ) {
+
+			context.setTransform( - 1, 0, 0, 1, image.width, 0 );
+			context.drawImage( image, - image.width, image.height );
+
+		}
 
 		var repeat = 'no-repeat';
 

examples/js/renderers/Projector.js

@@ -346,7 +346,7 @@ THREE.Projector = function () {
 			_object.object = object;
 
 			_vector3.setFromMatrixPosition( object.matrixWorld );
-			_vector3.applyProjection( _viewProjectionMatrix );
+			_vector3.applyMatrix4( _viewProjectionMatrix );
 			_object.z = _vector3.z;
 			_object.renderOrder = object.renderOrder;
 
@@ -444,9 +444,9 @@ THREE.Projector = function () {
 
 						if ( groups.length > 0 ) {
 
-							for ( var o = 0; o < groups.length; o ++ ) {
+							for ( var g = 0; g < groups.length; g ++ ) {
 
-								var group = groups[ o ];
+								var group = groups[ g ];
 
 								for ( var i = group.start, l = group.start + group.count; i < l; i += 3 ) {
 

examples/js/renderers/SVGRenderer.js

@@ -225,7 +225,7 @@ THREE.SVGRenderer = function () {
 			 if ( object instanceof THREE.SVGObject ) {
 
 				_vector3.setFromMatrixPosition( object.matrixWorld );
-				_vector3.applyProjection( _viewProjectionMatrix );
+				_vector3.applyMatrix4( _viewProjectionMatrix );
 
 				var x =   _vector3.x * _svgWidthHalf;
 				var y = - _vector3.y * _svgHeightHalf;

examples/js/vr/ViveController.js

@@ -27,7 +27,7 @@ THREE.ViveController = function ( id ) {
 
 			var gamepad = gamepads[ i ];
 
-			if ( gamepad && gamepad.id === 'OpenVR Gamepad' ) {
+			if ( gamepad && ( gamepad.id === 'OpenVR Gamepad' || gamepad.id === 'Oculus Touch (Left)' || gamepad.id === 'Oculus Touch (Right)' ) ) {
 
 				if ( j === id ) return gamepad;
 

examples/software_lines_splines.html

@@ -94,7 +94,7 @@
 
 				var position, index;
 
-				var spline = new THREE.Spline( points );
+				var spline = new THREE.CatmullRomCurve3( points );
 
 				for ( i = 0; i < points.length * n_sub; i ++ ) {
 

examples/software_sandbox.html

@@ -102,7 +102,7 @@
 
 				// Line
 				var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
-				var spline = new THREE.Spline( points );
+				var spline = new THREE.CatmullRomCurve3( points );
 				var n_sub = 6, colors = [], line;
 				var lineGeometry = new THREE.Geometry();