merge conflicts

.editorconfig

@@ -9,7 +9,6 @@ insert_final_newline = true
 [*.{js,ts,html}]
 charset = utf-8
 indent_style = tab
-indent_size = 2
 
 [*.{js,ts}]
 trim_trailing_whitespace = true

.github/ISSUE_TEMPLATE.md

@@ -19,7 +19,7 @@ Please also include a live example if possible. You can start from these templat
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r104
+- [ ] r105
 - [ ] ...
 
 ##### Browser

README.md

@@ -24,13 +24,13 @@ The aim of the project is to create an easy to use, lightweight, 3D library with
 ### Usage ###
 
 Download the [minified library](http://threejs.org/build/three.min.js) and include it in your HTML, or install and import it as a [module](http://threejs.org/docs/#manual/introduction/Import-via-modules),
-Alternatively see [how to build the library yourself](https://github.com/mrdoob/three.js/wiki/Build-instructions).
+Alternatively, see [how to build the library yourself](https://github.com/mrdoob/three.js/wiki/Build-instructions).
 
 ```html
 <script src="js/three.min.js"></script>
 ```
 
-This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.
+This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.
 
 ```javascript
 var camera, scene, renderer;

docs/api/en/animation/KeyframeTrack.html

@@ -58,7 +58,7 @@
 
 		<p>
 			Some examples of how to manually create [page:AnimationClip AnimationClips] with different sorts
-			of KeyframeTracks can be found in the [link:https://threejs.org/examples/js/AnimationClipCreator.js]
+			of KeyframeTracks can be found in the [link:https://threejs.org/examples/js/animation/AnimationClipCreator.js AnimationClipCreator]
 			file.
 		</p>
 

docs/api/en/cameras/OrthographicCamera.html

@@ -130,12 +130,12 @@ scene.add( camera );</code>
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		</p>
 
-		<h3>[method:JSON toJSON]()</h3>
+		<h3>[method:Object toJSON](param:object meta])</h3>
 		<p>
-		Return the camera's data in JSON format.
+		meta -- object containing metadata such as textures or images in objects' descendants.<br />
+		Convert the camera to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
-
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

docs/api/en/cameras/PerspectiveCamera.html

@@ -190,9 +190,10 @@ camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		</p>
 
-		<h3>[method:JSON toJSON]()</h3>
+		<h3>[method:Object toJSON](param:object meta])</h3>
 		<p>
-		Return camera data in JSON format.
+		meta -- object containing metadata such as textures or images in objects' descendants.<br />
+		Convert the camera to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h2>Source</h2>

docs/api/en/core/BufferGeometry.html

@@ -327,7 +327,7 @@
 		<p>Sets the attributes for this BufferGeometry from an array of points.</p>
 
 		<h3>[method:Object toJSON]()</h3>
-		<p>Returns a JSON object representation of the BufferGeometry.</p>
+		<p>Convert the buffer geometry to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].</p>
 
 		<h3>[method:BufferGeometry toNonIndexed]()</h3>
 		<p>Return a non-index version of an indexed BufferGeometry.</p>

docs/api/en/core/Clock.html

@@ -11,8 +11,8 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-		Object for keeping track of time. This uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">performance.now()</a>
-		if it is available, otherwise it reverts to the less accurate <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a>.
+		Object for keeping track of time. This uses [link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]
+		if it is available, otherwise it reverts to the less accurate [link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now Date.now].
 		</p>
 
 

docs/api/en/core/Geometry.html

@@ -327,8 +327,10 @@
 		Use [page:Object3D.scale] for typical real-time mesh scaling.
 		</p>
 
-		<h3>[method:JSON toJSON] ( )</h3>
-		<p>Convert the geometry to JSON format.</p>
+		<h3>[method:Object toJSON] ( )</h3>
+		<p>Convert the geometry to JSON format.<br />
+		Convert the geometry to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
+		</p>
 
 		<h3>[method:Geometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
 		<p>

docs/api/en/core/Object3D.html

@@ -217,6 +217,9 @@
 		<h3>[method:this applyQuaternion]( [param:Quaternion quaternion] )</h3>
 		<p>Applies the rotation represented by the quaternion to the object.</p>
 
+		<h3>[method:this attach]( [param:Object3D object] )</h3>
+		<p>Adds *object* as a child of this, while maintaining the object's world transform.</p>
+
 		<h3>[method:Object3D clone]( [param:Boolean recursive] )</h3>
 		<p>
 		recursive -- if true, descendants of the object are also cloned. Default is true.<br /><br />
@@ -389,9 +392,10 @@
 			Copy the given quaternion into [page:.quaternion].
 		</p>
 
-		<h3>[method:null toJSON]( [param:Quaternion q] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
-			Convert the object to JSON format.
+		meta -- object containing metadata such as materials, textures or images for the object.<br />
+		Convert the object to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h3>[method:this translateOnAxis]( [param:Vector3 axis], [param:Float distance] )</h3>

docs/api/en/helpers/BoxHelper.html

@@ -13,8 +13,8 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			Helper object to show the world-axis-aligned bounding box around an object.
-
+			Helper object to graphically show the world-axis-aligned bounding box around an object. The actual bounding box is handled with [page:Box3], this is just a visual helper for debugging.
+			It can be automatically resized with the [page:BoxHelper.update] method when the object it's created from is transformed.
 			Note that the object must have a [page:Geometry] or [page:BufferGeometry] for this to work,
 			so it won't work with [page:Sprite Sprites].
 		</p>
@@ -28,10 +28,10 @@
 
 
 		<code>
-		var sphere = new THREE.SphereGeometry();
-		var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
-		var box = new THREE.BoxHelper( object, 0xffff00 );
-		scene.add( box );
+			var sphere = new THREE.SphereGeometry();
+			var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
+			var box = new THREE.BoxHelper( object, 0xffff00 );
+			scene.add( box );
 		</code>
 
 

docs/api/en/lights/Light.html

@@ -67,9 +67,10 @@
 		[page:Light source] light into this one.
 		</p>
 
-		<h3>[method:JSON toJSON]( [param:String meta] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
-		Return Light data in JSON format.
+		meta -- object containing metadata such as materials, textures for objects.<br />
+		Convert the light to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h2>Source</h2>

docs/api/en/materials/Material.html

@@ -307,10 +307,10 @@
 		Sets the properties based on the *values*.
 		</p>
 
-		<h3>[method:null toJSON]( [param:object meta] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
 		meta -- object containing metadata such as textures or images for the material.<br />
-		Convert the material to three.js JSON format.
+		Convert the material to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h2>Source</h2>

docs/api/en/math/Box3.html

@@ -12,11 +12,31 @@
 
 		<p class="desc">
 			Represents a box or cube in 3D space. The main purpose of this is to represent
-			the [link:https://en.wikipedia.org/wiki/Minimum_bounding_box Minimum Bounding Boxes]
-			for objects.
+			the world-axis-aligned bounding boxes for objects. 
 		</p>
 
+		
+		<h2>Example</h2>
 
+		<code>
+		// Creating the object whose bounding box we want to compute
+		var sphereObject = new THREE.Mesh( 
+			new THREE.SphereGeometry(), 
+			new THREE.MeshBasicMaterial( 0xff0000 ) 
+		);
+		// Creating the actual bounding box with Box3
+		sphereObject.geometry.computeBoundingBox();
+		var box = sphereObject.geometry.boundingBox.clone();
+
+		// ...
+		
+		// In the animation loop, to keep the bounding box updated after move/rotate/scale operations
+		sphereObject.updateMatrixWorld( true );
+		box.copy( sphereObject.geometry.boundingBox ).applyMatrix4( sphereObject.matrixWorld );
+		</code>
+
+
+		
 		<h2>Constructor</h2>
 
 

docs/api/en/math/Matrix4.html

@@ -375,6 +375,7 @@ x, y, 1, 0,
 		</p>
 
 		<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
+		<h3>[method:this setPosition]( [param:Float x], [param:Float y], [param:Float z] ) // optional API</h3>
 		<p>
 			Sets the position component for this matrix from vector [page:Vector3 v], without affecting the
 			rest of the matrix - i.e. if the matrix is currently:

docs/api/en/renderers/WebGLRenderer.html

@@ -55,7 +55,10 @@
 
 		[page:String powerPreference] - Provides a hint to the user agent indicating what configuration
 		of GPU is suitable for this WebGL context. Can be *"high-performance"*, *"low-power"* or *"default"*. Default is *"default"*.
-		See the [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2 WebGL spec] for more information.<br />
+		See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.<br />
+
+		[page:Boolean failIfMajorPerformanceCaveat] - whether the renderer creation will fail upon low perfomance is detected. Default is *false*.
+		See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.<br />
 
 		[page:Boolean depth] - whether the drawing buffer has a
 		[link:https://en.wikipedia.org/wiki/Z-buffering depth buffer] of at least 16 bits.
@@ -110,6 +113,7 @@
 		- [page:Boolean floatVertexTextures]: *true* if [page:Boolean floatFragmentTextures] and [page:Boolean vertexTextures] are both true.<br />
 		- [page:Method getMaxAnisotropy](): Returns the maximum available anisotropy.<br />
 		- [page:Method getMaxPrecision](): Returns the maximum available precision for vertex and fragment shaders. <br />
+		- [page:Boolean isWebGL2]: *true* if the context in use is a WebGL2RenderingContext object.<br />
 		- [page:Boolean logarithmicDepthBuffer]: *true* if the [page:parameter logarithmicDepthBuffer] was set to true in the constructor and
 		the context supports the [link:https://developer.mozilla.org/en-US/docs/Web/API/EXT_frag_depth EXT_frag_depth] extension.
 			According to [link:https://webglstats.com/ WebGLStats], as of February 2016 around 66% of WebGL enabled devices support this.<br />
@@ -347,6 +351,12 @@
 		<h3>[method:WebGLContextAttributes getContextAttributes]()</h3>
 		<p>Returns an object that describes the attributes set on the WebGL context when it was created.</p>
 
+		<h3>[method:Integer getActiveCubeFace]()</h3>
+		<p>Returns the current active cube face.</p>
+
+		<h3>[method:Integer getActiveMipMapLevel]()</h3>
+		<p>Returns the current active mipmap level.</p>
+
 		<h3>[method:RenderTarget getRenderTarget]()</h3>
 		<p>Returns the current [page:RenderTarget RenderTarget] if there are; returns *null* otherwise.</p>
 
@@ -394,11 +404,11 @@
 		<h3>[method:null resetGLState]( )</h3>
 		<p>Reset the GL state to default. Called internally if the WebGL context is lost.</p>
 
-		<h3>[method:null readRenderTargetPixels]( [param:WebGLRenderTarget renderTarget], [param:Float x], [param:Float y], [param:Float width], [param:Float height], [param:TypedArray buffer] )</h3>
+		<h3>[method:null readRenderTargetPixels]( [param:WebGLRenderTarget renderTarget], [param:Float x], [param:Float y], [param:Float width], [param:Float height], [param:TypedArray buffer], [param:Integer activeCubeFaceIndex] )</h3>
 		<p>buffer - Uint8Array is the only destination type supported in all cases, other types are renderTarget and platform dependent. See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.</p>
 		<p>Reads the pixel data from the renderTarget into the buffer you pass in. This is a wrapper around [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels WebGLRenderingContext.readPixels]().</p>
-		<p>See the [example:webgl_interactive_cubes_gpu interactive / cubes / gpu] example.
-		</p>
+		<p>See the [example:webgl_interactive_cubes_gpu interactive / cubes / gpu] example.</p>
+		<p>For reading out a [page:WebGLRenderTargetCube WebGLRenderTargetCube] use the optional parameter activeCubeFaceIndex to determine which face should be read.</p>
 
 
 		<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
@@ -425,7 +435,7 @@
 
 		<h3>[method:null setAnimationLoop]( [param:Function callback] )</h3>
 		<p>[page:Function callback] — The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.</p>
-		<p>A build in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebVR projects this function must be used.</p>
+		<p>A built in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebVR projects this function must be used.</p>
 
 		<h3>[method:null setClearAlpha]( [param:Float alpha] )</h3>
 		<p>Sets the clear alpha. Valid input is a float between *0.0* and *1.0*.</p>

docs/api/en/scenes/Scene.html

@@ -46,9 +46,10 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:JSON toJSON]</h3>
+		<h3>[method:Object toJSON]</h3>
 		<p>
-		Return the scene data in JSON format.
+		meta -- object containing metadata such as textures or images for the scene.<br />
+		Convert the scene to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h3>[method:null dispose]()</h3>

docs/api/en/textures/Texture.html

@@ -251,10 +251,10 @@
 		Make copy of the texture. Note this is not a "deep copy", the image is shared.
 		</p>
 
-		<h3>[method:Texture toJSON]( [param:Object meta] )</h3>
+		<h3>[method:Object toJSON]( [param:Object meta] )</h3>
 		<p>
 		meta -- optional object containing metadata.<br />
-		Convert the material to three.js JSON format.
+		Convert the texture to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 
 		<h3>[method:null dispose]()</h3>

docs/api/zh/animation/KeyframeTrack.html

@@ -49,7 +49,7 @@
 		</ul>
 
 		<p>
-            可以在[link:https://threejs.org/examples/js/AnimationClipCreator.js]文件中找到用不同类型的关键帧轨道创建动画剪辑([page:AnimationClip AnimationClips])的示例。
+            可以在[link:https://threejs.org/examples/js/animation/AnimationClipCreator.js AnimationClipCreator]文件中找到用不同类型的关键帧轨道创建动画剪辑([page:AnimationClip AnimationClips])的示例。
 		</p>
 
 		<p>

docs/api/zh/core/Clock.html

@@ -10,8 +10,8 @@
 	<body>
 		<h1>[name]</h1>
 		<p class="desc">
-			该对象用于跟踪时间。如果<a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">performance.now()</a>可用，则
-			Clock 对象通过该方法实现，否则通过歉精准的<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a>实现。
+			该对象用于跟踪时间。如果[link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]可用，则
+			Clock 对象通过该方法实现，否则通过歉精准的[link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now Date.now]实现。
 		</p>
 
 

docs/examples/controls/OrbitControls.html

@@ -54,7 +54,7 @@ function animate() {
 
 		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
 		<p>
-			[page:Camera object]: (required) The camera to be controlled.<br><br>
+			[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>
 
 			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
 			however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.

docs/examples/quickhull/QuickHull.html → docs/examples/math/convexhull/ConvexHull.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" />
@@ -11,7 +11,7 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			General information about the Quickhull algorithm: Dirk Gregorius. March 2014, Game Developers Conference: [link:http://media.steampowered.com/apps/valve/2014/DirkGregorius_ImplementingQuickHull.pdf Implementing QuickHull].
+			A convex hull class. Implements the Quickhull algorithm by: Dirk Gregorius. March 2014, Game Developers Conference: [link:http://media.steampowered.com/apps/valve/2014/DirkGregorius_ImplementingQuickHull.pdf Implementing QuickHull].
 		</p>
 
 
@@ -63,19 +63,19 @@
 		<p>Creates a face with the vertices 'eyeVertex.point', 'horizonEdge.tail' and 'horizonEdge.head' in CCW order.
 			All the half edges are created in CCW order thus the face is always pointing outside the hull</p>
 
-		<h3>[method:QuickHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
+		<h3>[method:ConvexHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 		[page:HalfEdge horizon] - An array of half-edges that form the horizon.<br /><br />
 
 		<p>Adds 'horizon.length' faces to the hull, each face will be linked with the horizon opposite face and the face on the left/right.</p>
 
-		<h3>[method:QuickHull addVertexToFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
+		<h3>[method:ConvexHull addVertexToFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
 		[page:VertexNodeNode vertex] - The vertex to add.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 
 		<p>Adds a vertex to the 'assigned' list of vertices and assigns it to the given face.</p>
 
-		<h3>[method:QuickHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
+		<h3>[method:ConvexHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 
 		<p>Adds a vertex to the hull with the following algorithm
@@ -87,11 +87,11 @@
 			</ul>
 		</p>
 
-		<h3>[method:QuickHull cleanup]()</h3>
+		<h3>[method:ConvexHull cleanup]()</h3>
 
 		<p>Cleans up internal properties after computing the convex hull.</p>
 
-		<h3>[method:QuickHull compute]()</h3>
+		<h3>[method:ConvexHull compute]()</h3>
 
 		<p>Starts the execution of the quick hull algorithm.</p>
 
@@ -99,7 +99,7 @@
 
 		<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
 
-		<h3>[method:QuickHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon]	)</h3>
+		<h3>[method:ConvexHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon]	)</h3>
 		[page:Vector3 eyePoint] - The 3D-coordinates of a point.<br /><br />
 		[page:HalfEdge crossEdge] - The edge used to jump to the current face.<br /><br />
 		[page:Face face] - The current face being tested.<br /><br />
@@ -107,16 +107,16 @@
 
 		<p>Computes a chain of half edges in CCW order called the 'horizon'. For an edge to be part of the horizon it must join a face that can see 'eyePoint' and a face that cannot see 'eyePoint'.</p>
 
-		<h3>[method:QuickHull computeInitialHull]()</h3>
+		<h3>[method:ConvexHull computeInitialHull]()</h3>
 
 		<p>Computes the initial simplex assigning to its faces all the points that are candidates to form part of the hull.</p>
 
-		<h3>[method:QuickHull containsPoint]( [param:Vector3 point] )</h3>
+		<h3>[method:ConvexHull containsPoint]( [param:Vector3 point] )</h3>
 		[page:Vector3 point] - A point in 3D space.<br /><br />
 
 		<p>Returns *true* if the given point is inside this convex hull.</p>
 
-		<h3>[method:QuickHull deleteFaceVertices]( [param:Face face], [param:Face absorbingFace]	)</h3>
+		<h3>[method:ConvexHull deleteFaceVertices]( [param:Face face], [param:Face absorbingFace]	)</h3>
 		[page:Face face] - The given face.<br /><br />
 		[page:Face absorbingFace] - An optional face that tries to absorb the vertices of the first face.<br /><br />
 
@@ -139,7 +139,7 @@
 
 		<p>Returns *true* if the given ray intersects with this convex hull.</p>
 
-		<h3>[method:QuickHull makeEmpty]()</h3>
+		<h3>[method:ConvexHull makeEmpty]()</h3>
 
 		<p>Makes this convex hull empty.</p>
 
@@ -153,7 +153,7 @@
 			</ul>
 		</p>
 
-		<h3>[method:QuickHull reindexFaces]()</h3>
+		<h3>[method:ConvexHull reindexFaces]()</h3>
 
 		<p>Removes inactive (e.g. deleted) faces from the internal face list.</p>
 
@@ -162,30 +162,30 @@
 
 		<p>Removes all the visible vertices that a given face is able to see which are stored in the 'assigned' vertext list.</p>
 
-		<h3>[method:QuickHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
+		<h3>[method:ConvexHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
 		[page:VertexNode vertex] - The vertex to remove.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 
 		<p>Removes a vertex from the 'assigned' list of vertices and from the given face. It also makes sure that the link from 'face' to the first vertex it sees in 'assigned' is linked correctly after the removal.</p>
 
-		<h3>[method:QuickHull resolveUnassignedPoints]( [param:Array newFaces]	)</h3>
+		<h3>[method:ConvexHull resolveUnassignedPoints]( [param:Array newFaces]	)</h3>
 		[page:Face newFaces] - An array of new faces.<br /><br />
 
 		<p>Reassigns as many vertices as possible from the unassigned list to the new faces.</p>
 
-		<h3>[method:QuickHull setFromObject]( [param:Object3D object] )</h3>
+		<h3>[method:ConvexHull setFromObject]( [param:Object3D object] )</h3>
 		[page:Object3D object] - [page:Object3D] to compute the convex hull of.<br /><br />
 
 		<p>Computes the convex hull of an [page:Object3D] (including its children),
 		accounting for the world transforms of both the object and its childrens.</p>
 
-		<h3>[method:QuickHull setFromPoints]( [param:Array points] )</h3>
+		<h3>[method:ConvexHull setFromPoints]( [param:Array points] )</h3>
 		[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting convex hull will contain.<br /><br />
 
 		<p>Computes to convex hull for the given array of points.</p>
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/ConvexHull.js]
 	</body>
 </html>

docs/examples/quickhull/Face.html → docs/examples/math/convexhull/Face.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" />
@@ -84,6 +84,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 </html>

docs/examples/quickhull/HalfEdge.html → docs/examples/math/convexhull/HalfEdge.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" />
@@ -74,6 +74,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 </html>

docs/examples/quickhull/VertexList.html → docs/examples/math/convexhull/VertexList.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" />
@@ -86,6 +86,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 </html>

docs/examples/quickhull/VertexNode.html → docs/examples/math/convexhull/VertexNode.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" />
@@ -47,6 +47,6 @@
 
 		<h2>Source</h2>
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 </html>

docs/examples/renderers/SVGRenderer.html

@@ -61,6 +61,13 @@
 
 		<h3>[name]()</h3>
 
+		<h2>Properties</h2>
+
+		<h3>[property:Number overdraw]</h3>
+		<p>
+		Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is [0..1]. Default is *0.5*.
+		</p>
+
 		<h2>Methods</h2>
 
 		<h3>[method:null clear]()</h3>

docs/examples/utils/SceneUtils.html

@@ -26,26 +26,6 @@
 		This is mostly useful for objects that need both a material and a wireframe implementation.
 		</p>
 
-		<h3>[method:null attach]( [param:Object3D child], [param:Object3D scene], [param:Object3D parent] )</h3>
-		<p>
-		child -- The object to add to the parent  <br />
-		scene -- The scene to detach the object from. <br />
-		parent -- The parent to attach the object to.
-		</p>
-		<p>
-		Attaches the object to the parent without the moving the object in the worldspace. Beware that to do this the matrixWorld needs to be updated. This can be done by calling the updateMatrixWorld method on the parent object.
-		</p>
-
-		<h3>[method:null detach]( [param:Object3D child], [param:Object3D parent], [param:Object3D scene] )</h3>
-		<p>
-		child -- The object to remove from the parent  <br />
-		scene -- The scene to attach the object on. <br />
-		parent -- The parent to detach the object from.
-		</p>
-		<p>
-		Detaches the object from the parent and adds it back to the scene without moving in worldspace. Beware that to do this the matrixWorld needs to be updated. This can be done by calling the updateMatrixWorld method on the parent object.
-		</p>
-
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/utils/SceneUtils.js examples/js/utils/SceneUtils.js]

docs/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>three.js / documentation</title>
+		<title>three.js docs</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
@@ -10,30 +10,33 @@
 		<script src="../build/three.min.js" async defer></script>
 	</head>
 	<body>
-
-		<div id="panel" class="collapsed">
+		<div id="panel" class="">
 
 			<div id="header">
-
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
-
 				<div id="sections">
-					<span class="selected">docs</span> <a href="../examples/">examples</a>
+					<span class="selected">docs</span>
+					<a href="../examples/#webgl_animation_cloth">examples</a>
 				</div>
 
-				<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false">
+				<div id="expandButton"></div>
+			</div>
 
-				<select id="language">
-					<option value="en">en</option>
-					<option value="zh">zh</option>
-				</select>
+			<div id="panelScrim"></div>
 
+			<div id="contentWrapper">
+				<div id="inputWrapper">
+					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+					<div id="exitSearchButton"></div>
+					<select id="language">
+						<option value="en">en</option>
+						<option value="zh">zh</option>
+					</select>
+				</div>
+				<div id="content"></div>
 			</div>
 
-			<div id="content"></div>
-
 		</div>
 
 		<iframe name="viewer"></iframe>
@@ -89,6 +92,8 @@
 			var panel = document.getElementById( 'panel' );
 			var content = document.getElementById( 'content' );
 			var expandButton = document.getElementById( 'expandButton' );
+			var exitSearchButton = document.getElementById( 'exitSearchButton' );
+			var panelScrim = document.getElementById( 'panelScrim' );
 			var filterInput = document.getElementById( 'filter' );
 			var iframe = document.querySelector( 'iframe' );
 
@@ -104,12 +109,40 @@
 			expandButton.onclick = function ( event ) {
 
 				event.preventDefault();
-				panel.classList.toggle( 'collapsed' );
+				panel.classList.toggle( 'open' );
+
+			};
+
+			panelScrim.onclick = function ( event ) {
+
+				event.preventDefault();
+				panel.classList.toggle( 'open' );
 
 			};
 
 
 			// Functionality for search/filter input field
+			filterInput.onfocus = function ( event ) {
+
+				panel.classList.add('searchFocused');
+
+			}
+
+			filterInput.onblur = function ( event ) {
+
+				if(filterInput.value === '') {
+					panel.classList.remove('searchFocused');
+				}
+
+			}
+
+			exitSearchButton.onclick = function( event ) {
+
+				filterInput.value = '';
+				updateFilter();
+				panel.classList.remove('searchFocused');
+
+			}
 
 			filterInput.oninput = function ( event ) {
 
@@ -139,7 +172,16 @@
 					if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
 
 					window.location.hash = pageURL;
-					panel.classList.add( 'collapsed' );
+					panel.classList.remove( 'open' );
+
+
+					content.querySelectorAll( 'a' ).forEach( function ( item ) {
+
+						item.classList.remove( 'selected' );
+
+					} );
+
+					link.classList.add('selected');
 
 				} );
 
@@ -375,7 +417,7 @@
 				if(hash) {
 
 					iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
-					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' - ';
+					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' – ';
 
 				} else {
 
@@ -387,6 +429,7 @@
 				document.body.replaceChild( iframe, oldIframe );
 				document.title = subtitle + 'three.js docs';
 
+
 			}
 
 			function decomposePageName( pageName, oldDelimiter, newDelimiter ) {

docs/list.js

@@ -393,12 +393,12 @@ var list = {
 				"LookupTable": "examples/Lut",
 			},
 
-			"QuickHull": {
-				"Face": "examples/quickhull/Face",
-				"HalfEdge": "examples/quickhull/HalfEdge",
-				"QuickHull": "examples/quickhull/QuickHull",
-				"VertexNode": "examples/quickhull/VertexNode",
-				"VertexList": "examples/quickhull/VertexList"
+			"ConvexHull": {
+				"Face": "examples/math/convexhull/Face",
+				"HalfEdge": "examples/math/convexhull/HalfEdge",
+				"ConvexHull": "examples/math/convexhull/ConvexHull",
+				"VertexNode": "examples/math/convexhull/VertexNode",
+				"VertexList": "examples/math/convexhull/VertexList"
 			},
 
 			"Renderers": {

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

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</h1><br />
+		<h1>[name]</h1>
 
 		<p>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.</p>
 

docs/manual/en/introduction/Drawing-lines.html

@@ -12,7 +12,7 @@
 		<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).
+				First we need to set up 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>

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

@@ -178,8 +178,6 @@ geometry.tangentsNeedUpdate = true;
 
 			<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>

docs/manual/en/introduction/How-to-use-WebGL2.html

@@ -100,7 +100,7 @@ var material = new THREE.ShaderMaterial( {
 		Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
 
 		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
-		[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
+		[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]<br />
 		[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
 	</p>
 
@@ -111,7 +111,9 @@ var material = new THREE.ShaderMaterial( {
 		overview about what's already available in the latest version of three.js.
 		<ul>
 			<li>3D Textures</li>
+			<li>2D Texture Arrays</li>
 			<li>Multisampled Renderbuffers</li>
+			<li>Non-power of two (POT) textures work just the same as POT textures now. No resizing is required for best quality.</li>
 		</ul>
 
 	</p>

docs/manual/en/introduction/Import-via-modules.html

@@ -27,7 +27,7 @@
 
 		<h2>Importing the module</h2>
 
-		<p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules') in the browser by bundling up all of your dependencies."</p>
+		<p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules')" in the browser by bundling up all of your dependencies.</p>
 
 		<p>
 			You should now be able to import the module into your source files and continue to use it as per normal.
@@ -76,11 +76,42 @@
 		<p>
 			The following examples files are already available as modules:
 			<ul>
+				<li>cameras
+					<ul>
+						<li>CinematicCamera</li>
+					</ul>
+				</li>
 				<li>controls
 					<ul>
+						<li>DeviceOrientationControls</li>
+						<li>DragControls</li>
+						<li>EditorControls</li>
+						<li>FirstPersonControls</li>
+						<li>FlyControls</li>
 						<li>MapControls</li>
 						<li>OrbitControls</li>
+						<li>OrthographicTrackballControls</li>
+						<li>PointerLockControls</li>
 						<li>TrackballControls</li>
+						<li>TransformControls</li>
+					</ul>
+				</li>
+				<li>curves
+					<ul>
+						<li>CurveExtras</li>
+						<li>NURBSCurve</li>
+						<li>NURBSSurface</li>
+						<li>NURBSUtils</li>
+					</ul>
+				</li>
+				<li>effects
+					<ul>
+						<li>AnaglyphEffect</li>
+						<li>AsciiEffect</li>
+						<li>OutlineEffect</li>
+						<li>ParallaxBarrierEffect</li>
+						<li>PeppersGhostEffect</li>
+						<li>StereoEffect</li>
 					</ul>
 				</li>
 				<li>exporters
@@ -94,12 +125,94 @@
 						<li>TypedGeometryExporter</li>
 					</ul>
 				</li>
+				<li>geometries
+					<ul>
+						<li>BoxLineGeometry</li>
+						<li>ConvexGeometry</li>
+						<li>DecalGeometry</li>
+						<li>ParametricGeometries</li>
+						<li>TeapotBufferGeometry</li>
+					</ul>
+				</li>
+				<li>interactive
+					<ul>
+						<li>SelectionBox</li>
+						<li>SelectionHelper</li>
+					</ul>
+				</li>
+				<li>lines
+					<ul>
+						<li>Line2</li>
+						<li>LineGeometry</li>
+						<li>LineMaterial</li>
+						<li>LineSegments2</li>
+						<li>LineSegmentsGeometry</li>
+						<li>Wireframe</li>
+						<li>WireframeGeometry2</li>
+					</ul>
+				</li>
 				<li>loaders
 					<ul>
+						<li>3MFLoader</li>
+						<li>AMFLoader</li>
+						<li>AssimpJSONLoader</li>
+						<li>AssimpLoader</li>
+						<li>BabylonLoader</li>
+						<li>BVHLoader</li>
+						<li>ColladaLoader</li>
+						<li>DDSLoader</li>
+						<li>EXRLoader</li>
+						<li>FBXLoader</li>
+						<li>GCodeLoader</li>
 						<li>GLTFLoader</li>
+						<li>HDRCubeTextureLoader</li>
+						<li>KMZLoader</li>
+						<li>KTXLoader</li>
+						<li>LWOLoader</li>
 						<li>MTLLoader</li>
 						<li>OBJLoader</li>
+						<li>PCDLoader</li>
+						<li>PDBLoader</li>
+						<li>PlayCanvasLoader</li>
+						<li>PLYLoader</li>
+						<li>PRWMLoader</li>
+						<li>PVRLoader</li>
+						<li>RGBELoader</li>
 						<li>STLLoader</li>
+						<li>SVGLoader</li>
+						<li>TDSLoader</li>
+						<li>TGALoader</li>
+						<li>VRMLLoader</li>
+					</ul>
+				</li>
+				<li>math
+					<ul>
+						<li>ColorConverter</li>
+						<li>ConvexHull</li>
+						<li>ImprovedNoise</li>
+						<li>Lut</li>
+						<li>SimplexNoise</li>
+					</ul>
+				</li>
+				<li>modifiers
+					<ul>
+						<li>ExplodeModifier</li>
+						<li>SimplifyModifier</li>
+						<li>SubdivisionModifier</li>
+						<li>TessellateModifier</li>
+					</ul>
+				</li>
+				<li>objects
+					<ul>
+						<li>Fire</li>
+						<li>Lensflare</li>
+						<li>Reflector</li>
+						<li>Refractor</li>
+						<li>ReflectorRTT</li>
+						<li>ShadowMesh</li>
+						<li>Sky</li>
+						<li>Water</li>
+						<li>Water2</li>
 					</ul>
 				</li>
 				<li>pmrem
@@ -108,6 +221,99 @@
 						<li>PMREMGenerator</li>
 					</ul>
 				</li>
+				<li>postprocessing
+					<ul>
+						<li>AdaptiveToneMappingPass</li>
+						<li>AfterimagePass</li>
+						<li>BloomPass</li>
+						<li>BokehPass</li>
+						<li>ClearPass</li>
+						<li>CubeTexturePass</li>
+						<li>DotScreenPass</li>
+						<li>EffectComposer</li>
+						<li>FilmPass</li>
+						<li>GlitchPass</li>
+						<li>HalftonePass</li>
+						<li>MaskPass</li>
+						<li>OutlinePass</li>
+						<li>RenderPass</li>
+						<li>SAOPass</li>
+						<li>SavePass</li>
+						<li>ShaderPass</li>
+						<li>SMAAPass</li>
+						<li>SSAARenderPass</li>
+						<li>SSAOPass</li>
+						<li>TAARenderPass</li>
+						<li>TexturePass</li>
+						<li>UnrealBloomPass</li>
+					</ul>
+				</li>
+				<li>renderers
+					<ul>
+						<li>CSS2DRenderer</li>
+						<li>CSS3DRenderer</li>
+						<li>Projector</li>
+						<li>SoftwareRenderer</li>
+						<li>SVGRenderer</li>
+						<li>RaytracingRenderer</li>
+						<li>WebGLDeferredRenderer</li>
+					</ul>
+				</li>
+				<li>shaders
+					<ul>
+						<li>AfterimageShader</li>
+						<li>BasicShader</li>
+						<li>BleachBypassShader</li>
+						<li>BlendShader</li>
+						<li>BokehShader</li>
+						<li>BokehShader2</li>
+						<li>BrightnessContrastShader</li>
+						<li>ColorCorrectionShader</li>
+						<li>ColorifyShader</li>
+						<li>ConvolutionShader</li>
+						<li>CopyShader</li>
+						<li>DepthLimitedBlurShader</li>
+						<li>DigitalGlitch</li>
+						<li>DOFMipMapShader</li>
+						<li>DotScreenShader</li>
+						<li>FilmShader</li>
+						<li>FocusShader</li>
+						<li>FreiChenShader</li>
+						<li>FresnelShader</li>
+						<li>FXAAShader</li>
+						<li>GammaCorrectionShader</li>
+						<li>GodRaysShader</li>
+						<li>HalftoneShader</li>
+						<li>HorizontalBlurShader</li>
+						<li>HorizontalTiltShiftShader</li>
+						<li>HueSaturationShader</li>
+						<li>KaleidoShader</li>
+						<li>LuminosityHighPassShader</li>
+						<li>LuminosityShader</li>
+						<li>MirrorShader</li>
+						<li>NormalMapShader</li>
+						<li>ParallaxShader</li>
+						<li>PixelShader</li>
+						<li>RGBShiftShader</li>
+						<li>SAOShader</li>
+						<li>SepiaShader</li>
+						<li>SkinShader</li>
+						<li>SMAAShader</li>
+						<li>SobelOperatorShader</li>
+						<li>SSAOShader</li>
+						<li>TechnicolorShader</li>
+						<li>TerrainShader</li>
+						<li>ToneMapShader</li>
+						<li>ToonShader</li>
+						<li>TranslucentShader</li>
+						<li>TriangleBlurShader</li>
+						<li>UnpackDepthRGBAShader</li>
+						<li>VerticalBlurShader</li>
+						<li>VerticalTiltShiftShader</li>
+						<li>VignetteShader</li>
+						<li>WaterRefractionShader</li>
+					</ul>
+				</li>
 				<li>utils
 					<ul>
 						<li>BufferGeometryUtils</li>
@@ -124,7 +330,7 @@
 		</p>
 		<p>
 			Note: When using code from the examples directory, it's important that all files match the version of
-			your three.js main file. For example it's no good approach to use *GLTFLoader* and *OrbitControls* from R96 together
+			your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
 			with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file
 			is not available as a module, you can still use third-party npm packages or convert the file to a module by yourself.
 			In both cases, ensure the code is compatible with your three.js main file.

docs/manual/en/introduction/Useful-links.html

@@ -17,15 +17,12 @@
 
 			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>.
+			check the browser console for warnings or errors, the relevant docs pages and especially the [page:DeprecatedList].
 		</p>
 
 		<h2>Help forums</h2>
 		<p>
-			Three.js officially uses [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
+			Three.js officially uses the [link:https://discourse.threejs.org/ forum] and [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.
 		</p>
 
@@ -33,6 +30,9 @@
 
 		<h3>Getting started with three.js</h3>
 		<ul>
+			<li>
+				[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
+			</li>
 			<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>
@@ -43,6 +43,12 @@
 
 		<h3>More extensive / advanced articles and courses</h3>
 		<ul>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:https://threejsfundamentals.org/ Three.js Fundamentals]
+			</li>
 			<li>
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 			</li>
@@ -60,21 +66,16 @@
 			 [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]
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
+			 Check out the selection of literature recommended by the community.
 		 </li>
 		</ul>
 
-		<h3>Tutorials in other languages</h3>
+		<h2>News and Updates</h2>
 		<ul>
 			<li>
-				[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 			</li>
-
-		</ul>
-
-		<h2>News and Updates</h2>
-		<ul>
 			<li>
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 			</li>
@@ -84,9 +85,6 @@
 			<li>
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 			</li>
-			<li>
-				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
-			</li>
 		</ul>
 
 		<h2>Examples</h2>
@@ -173,6 +171,13 @@
 			[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>
+		<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>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
 	 </ul>
 
 	</body>

docs/manual/zh/introduction/Useful-links.html

@@ -31,6 +31,9 @@
 
 		<h3>three.js入门</h3>
 		<ul>
+			<li>
+				[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
+			</li>
 			<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>
@@ -41,6 +44,12 @@
 
 		<h3>更加广泛、高级的文章与教程</h3>
 		<ul>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:https://threejsfundamentals.org/ Three.js Fundamentals]
+			</li>
 			<li>
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 			</li>
@@ -58,21 +67,16 @@
 			 [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]
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
+			 Check out the selection of literature recommended by the community.
 		 </li>
 		</ul>
 
-		<h3>其它非英语的教程</h3>
+		<h2>新闻与更新</h2>
 		<ul>
 			<li>
-				[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 			</li>
-
-		</ul>
-
-		<h2>新闻与更新</h2>
-		<ul>
 			<li>
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 			</li>
@@ -82,9 +86,6 @@
 			<li>
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 			</li>
-			<li>
-				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
-			</li>
 		</ul>
 		<h2>示例</h2>
 		<ul>
@@ -165,6 +166,13 @@
 			[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>
+		<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>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
 	 </ul>
 
 	</body>

docs/page.css

@@ -1,84 +1,168 @@
+:root {
+	--color-blue: #049EF4;
+	--text-color: #444;
+
+	--font-size: 14px;
+	--line-height: 24px;
+	--font-size-sanserif: 1.14285714286rem;
+	--line-height-sanserif: 1.71428571rem;
+
+	--border-style: 1px solid #E8E8E8;
+	--header-height: 48px;
+	--panel-width: 300px;
+	--panel-padding: 1.143rem;
+	--page-padding: 1.75rem;
+	--max-width: 760px;
+	--icon-size: 1.428rem;
+}
+
 @font-face {
-	font-family: 'RobotoMono';
-	src: local('RobotoMono'), url('../files/RobotoMono-Regular.woff2') format('woff2');
-	font-weight: normal;
+	font-family: 'Roboto Mono';
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 	font-style: normal;
+	font-weight: 400;
 }
-
 @font-face {
-	font-family: 'SF-Pro-Text';
-	src: local('SF-Pro-Text'), url('../files/SF-Pro-Text-Regular.otf');
-	font-weight: normal;
+	font-family: 'Inter';
 	font-style: normal;
+	font-weight: 400;
+	src: local('Inter-Regular'), url("../files/Inter-Regular.woff2?v=3.6") format("woff2");
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 600;
+	src: local('Inter-SemiBold'), url("../files/Inter-SemiBold.woff2?v=3.6") format("woff2");
+}
+
+html {
+	font-family: 'Inter', sans-serif;
+	font-size: var(--font-size);
+	line-height: var(--line-height);
 }
 
 body {
-	margin: 78px auto;
-	padding: 0px 24px;
-	max-width: 780px;
-	color: #555;
-	font-family: 'SF-Pro-Text', sans-serif;
-	font-size: 16px;
-	line-height: 23px;
+	color: var(--text-color);
 	tab-size: 4;
 	overflow: auto;
+	max-width: var(--max-width);
+	margin: 0 auto;
+	padding-top: var(--page-padding);
+	padding-bottom: var(--page-padding);
+	padding-right: var(--page-padding);
+	padding-left: calc(var(--page-padding) + var(--panel-width));
 }
 
 a {
-	color: #1184CE;
+	color: var(--color-blue);
 	cursor: pointer;
-	text-decoration: underline;
+	text-decoration: none;
 }
 
 h1 {
-	color: #049EF4;
-	font-size: 32px;
+	font-size: 2.8rem;
+	line-height: 3.4rem;
 	font-weight: normal;
-	line-height: 42px;
+	margin-top: 1rem;
+	margin-bottom: -0.2rem;
+	margin-left: -2px;
 }
 
 h2 {
-	color: #4B0;
-
-	font-size: 22px;
+	font-size: 2rem;
+	line-height: 2.6rem;
 	font-weight: normal;
-	line-height: 31px;
+	margin-top: 2rem;
+	margin-bottom: -0.4rem;
 }
 
 h3 {
-	color: #000;
-	font-size: 16px;
+	font-size: 1.42857143rem;
+	line-height: 2.14285714rem;
 	font-weight: normal;
+	margin-top: 1.8rem;
+	margin-bottom: -0.4rem;
+}
+
+p,
+div,
+table,
+ol,
+ul {
+	font-size: var(--font-size-sanserif);
+	line-height: var(--line-height-sanserif);
+	margin-top: .8rem;
+	margin-bottom: .8rem;
+}
+
+p {
+	padding-right: 1rem;
+}
 
-	margin-top: 40px;
+ul, ol {
+	box-sizing: border-box;
+	padding-left: 24px;
+}
+ul li,
+ol li {
+	padding-left: 0.25rem;
+	margin-bottom: 0.25rem;
 }
 
-p, ul, ol {
-	margin-top: 0;
-	margin-bottom: 20px;
-	max-width: 780px;
+li ul,
+li ol {
+	margin-top: 0.25rem;
 }
 
-div {
-	/* padding-left: 30px; */
-	margin-bottom: 20px;
+code {
+	margin: 1.2rem calc(-1 * var(--page-padding));
+}
+
+ol code,
+ul code {
+	margin: 1.2rem 0;
+}
+
+code.inline {
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: 4px;
+	padding: 0px 5px;
+	background: #F5F5F5;
+	margin: 0;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
 }
 
 .desc {
 	padding-left: 0px;
 }
 
-pre, code {
-	margin-top: 20px;
-	margin-bottom: 20px;
+table th,
+table td {
+	text-align: left;
+	vertical-align: top;
+	padding: .6rem .4rem;
+	border-bottom: var(--border-style);
 }
 
-code {
+table th {
+	text-decoration: none;
+}
+table th:first-child,
+table td:first-child {
+	padding-left: 0;
+}
+
+code:not(.inline) {
 	display: block;
-	padding: 20px;
+	padding: 1.25rem var(--page-padding);
 	white-space: pre-wrap;
-	background-color: #f9f9f9;
 	overflow: auto;
+	box-sizing: border-box;
 }
 
 iframe {
@@ -87,51 +171,46 @@ iframe {
 	border:0;
 }
 
-th {
-	padding: 10px;
-	text-decoration: underline;
-}
-
-td {
-	text-align: center;
-}
-
 table code {
-	padding: 2px;
+	padding: 0px;
 	margin: 0px;
 	width: auto;
 }
 
 strong {
-	color: #000;
-	font-weight: normal;
+	font-weight: 600;
 }
 
+
+/* TODO: Duplicate styles in main.css. Needed here cause button is inside the iframe */
 #button {
 	position: fixed;
-	bottom: 16px;
-	right: 16px;
+	bottom: 1rem;
+	right: 1rem;
 
-	padding: 8px;
-	border-radius: 50%;
-	margin-bottom: 0px; /* TODO div sets it to 20px */
+	padding: 0.75rem;
+	border-radius: 2rem;
+	margin-bottom: 0px;
 
-	background-color: #dddddd;
-	opacity: 0.4;
-}
+	background-color: #FFF;
+	opacity: .9;
+	z-index: 999;
 
+	box-shadow: 0 0 4px rgba(0,0,0,.15);
+}
 	#button:hover {
 		cursor: pointer;
 		opacity: 1;
 	}
-
 	#button img {
 		display: block;
+		width: calc(1.125 * var(--icon-size));
 	}
 
 a.permalink {
 	float: right;
 	margin-left: 5px;
+	display: none;
 }
 
 a.param,
@@ -140,37 +219,41 @@ span.param {
 }
 
 a.param:hover {
-	color: #777;
+	color: var(--text-color);
 }
 
-sup, sub {
-	/* prevent superscript and subscript elements from affecting line-height */
-	vertical-align: baseline;
-	position: relative;
-	top: -0.4em;
-}
 
-sub {
-	top: 0.4em;
+@media all and ( min-width: 1700px ) {
+	:root {
+		--panel-width: 360px;
+		--font-size: 18px;
+		--line-height: 28px;
+		--header-height: 56px;
+		--max-width: 1160px;
+	}
 }
 
 /* mobile */
 
 @media all and ( max-width: 640px ) {
+	:root {
+		--page-padding: var(--panel-padding);
+	}
 
 	body {
-		margin: 14px auto;
-		padding: 0px 14px;
-		font-size: 14px;
-		line-height: 22px;
+		padding: var(--page-padding);
 	}
 
 	h1 {
-		font-size: 26px;
+		font-size: 2rem;
+		line-height: 2.6rem;
+		padding-right: 2rem;
+		margin-top: 0;
 	}
 
 	h2 {
-		font-size: 18px;
-		line-height: 25px;
+		font-size: 1.6rem;
+		line-height: 2.2rem;
+		margin-top: 1.6rem;
 	}
 }

docs/prettify/threejs.css

@@ -11,7 +11,5 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */
 
 pre.prettyprint, code.prettyprint {
 	background-color: #F5F5F5;
-	font-family: 'RobotoMono', monospace;
-	font-size: 14px;
-	line-height: 21px;
+	font-family: 'Roboto Mono', monospace;
 }

docs/scenes/geometry-browser.html

@@ -24,7 +24,7 @@
 		<script src="../../build/three.min.js"></script>
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
-		<script src="../../examples/js/ParametricGeometries.js"></script>
+		<script src="../../examples/js/geometries/ParametricGeometries.js"></script>
 
 		<script src='js/geometry.js'></script>
 

editor/index.html

@@ -126,11 +126,13 @@
 		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.ExtrudeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.ShapeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>

editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -0,0 +1,145 @@
+/**
+ * @author Temdog007 / http://github.com/Temdog007
+ */
+
+Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
+
+	var strings = editor.strings;
+
+	var signals = editor.signals;
+
+	var container = new UI.Row();
+
+	var geometry = object.geometry;
+	var parameters = geometry.parameters;
+	var options = parameters.options;
+	options.curveSegments = options.curveSegments != undefined ? options.curveSegments : 12;
+	options.steps = options.steps != undefined ? options.steps : 1;
+	options.depth = options.depth != undefined ? options.depth : 100;
+	options.bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 6;
+	options.bevelSize = options.bevelSize !== undefined ? options.bevelSize : 4;
+	options.bevelOffset = options.bevelOffset !== undefined ? options.bevelOffset : 0;
+	options.bevelSegments = options.bevelSegments !== undefined ? options.bevelSegments : 3;
+
+
+	// curveSegments
+
+	var curveSegmentsRow = new UI.Row();
+	var curveSegments = new UI.Integer( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// steps
+
+	var stepsRow = new UI.Row();
+	var steps = new UI.Integer( options.steps ).onChange( update ).setRange( 1, Infinity );
+
+	stepsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
+	stepsRow.add( steps );
+
+	container.add( stepsRow );
+
+	// depth
+
+	var depthRow = new UI.Row();
+	var depth = new UI.Number( options.depth ).onChange( update ).setRange( 1, Infinity );
+
+	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// enabled
+
+	var enabledRow = new UI.Row();
+	var enabled = new UI.Checkbox( options.bevelEnabled ).onChange( update );
+
+	enabledRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
+	enabledRow.add( enabled );
+
+	container.add( enabledRow );
+
+	if ( options.bevelEnabled === true ) {
+
+		// thickness
+
+		var thicknessRow = new UI.Row();
+		var thickness = new UI.Number( options.bevelThickness ).onChange( update );
+
+		thicknessRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
+		thicknessRow.add( thickness );
+
+		container.add( thicknessRow );
+
+		// size
+
+		var sizeRow = new UI.Row();
+		var size = new UI.Number( options.bevelSize ).onChange( update );
+
+		sizeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
+		sizeRow.add( size );
+
+		container.add( sizeRow );
+
+		// offset
+
+		var offsetRow = new UI.Row();
+		var offset = new UI.Number( options.bevelOffset ).onChange( update );
+
+		offsetRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
+		offsetRow.add( offset );
+
+		container.add( offsetRow );
+
+		// segments
+
+		var segmentsRow = new UI.Row();
+		var segments = new UI.Integer( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
+
+		segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
+		segmentsRow.add( segments );
+
+		container.add( segmentsRow );
+
+	}
+
+	var button = new UI.Button( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
+	container.add( button );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+			parameters.shapes,
+			{
+				curveSegments: curveSegments.getValue(),
+				steps: steps.getValue(),
+				depth: depth.getValue(),
+				bevelEnabled: enabled.getValue(),
+				bevelThickness: thickness !== undefined ? thickness.getValue() : options.bevelThickness,
+				bevelSize: size !== undefined ? size.getValue() : options.bevelSize,
+				bevelOffset: offset !== undefined ? offset.getValue() : options.bevelOffset,
+				bevelSegments: segments !== undefined ? segments.getValue() : options.bevelSegments
+			}
+		) ) );
+
+	}
+
+	function toShape() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE.ShapeBufferGeometry(
+			parameters.shapes,
+			options.curveSegments
+		) ) );
+
+	}
+
+	return container;
+
+};
+
+Sidebar.Geometry.ExtrudeBufferGeometry = Sidebar.Geometry.ExtrudeGeometry;

editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -2,7 +2,7 @@
  * @author rfm1201
  */
 
-Sidebar.Geometry.LatheGeometry = function( editor, object ) {
+Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
 	var strings = editor.strings;
 
@@ -45,99 +45,18 @@ Sidebar.Geometry.LatheGeometry = function( editor, object ) {
 
 	// points
 
-	var lastPointIdx = 0;
-	var pointsUI = [];
-
 	var pointsRow = new UI.Row();
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
 
-	var points = new UI.Span().setDisplay( 'inline-block' );
+	var points = new UI.Points2().setValue( parameters.points ).onChange( update );
 	pointsRow.add( points );
 
-	var pointsList = new UI.Div();
-	points.add( pointsList );
-
-	for ( var i = 0; i < parameters.points.length; i ++ ) {
-
-		var point = parameters.points[ i ];
-		pointsList.add( createPointRow( point.x, point.y ) );
-
-	}
-
-	var addPointButton = new UI.Button( '+' ).onClick( function() {
-
-		if( pointsUI.length === 0 ){
-
-			pointsList.add( createPointRow( 0, 0 ) );
-
-		} else {
-
-			var point = pointsUI[ pointsUI.length - 1 ];
-
-			pointsList.add( createPointRow( point.x.getValue(), point.y.getValue() ) );
-
-		}
-
-		update();
-
-	} );
-	points.add( addPointButton );
-
 	container.add( pointsRow );
 
-	//
-
-	function createPointRow( x, y ) {
-
-		var pointRow = new UI.Div();
-		var lbl = new UI.Text( lastPointIdx + 1 ).setWidth( '20px' );
-		var txtX = new UI.Number( x ).setRange( 0, Infinity ).setWidth( '40px' ).onChange( update );
-		var txtY = new UI.Number( y ).setWidth( '40px' ).onChange( update );
-		var idx = lastPointIdx;
-		var btn = new UI.Button( '-' ).onClick( function() {
-
-			deletePointRow( idx );
-
-		} );
-
-		pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
-		lastPointIdx ++;
-		pointRow.add( lbl, txtX, txtY, btn );
-
-		return pointRow;
-
-	}
-
-	function deletePointRow( idx ) {
-
-		if ( ! pointsUI[ idx ] ) return;
-
-		pointsList.remove( pointsUI[ idx ].row );
-		pointsUI[ idx ] = null;
-
-		update();
-
-	}
-
 	function update() {
 
-		var points = [];
-		var count = 0;
-
-		for ( var i = 0; i < pointsUI.length; i ++ ) {
-
-			var pointUI = pointsUI[ i ];
-
-			if ( ! pointUI ) continue;
-
-			points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
-			count ++;
-			pointUI.lbl.setValue( count );
-
-		}
-
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
-			points,
+			points.getValue(),
 			segments.getValue(),
 			phiStart.getValue() / 180 * Math.PI,
 			phiLength.getValue() / 180 * Math.PI

editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -0,0 +1,55 @@
+/**
+ * @author Temdog007 / http://github.com/Temdog007
+ */
+
+Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
+
+	var strings = editor.strings;
+
+	var signals = editor.signals;
+
+	var container = new UI.Row();
+
+	var geometry = object.geometry;
+	var parameters = geometry.parameters;
+
+	// curveSegments
+
+	var curveSegmentsRow = new UI.Row();
+	var curveSegments = new UI.Integer( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// to extrude
+	var button = new UI.Button( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
+	container.add( button );
+
+	//
+
+	function changeShape() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+			parameters.shapes,
+			curveSegments.getValue()
+		) ) );
+
+	}
+
+	function toExtrude() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE.ExtrudeBufferGeometry(
+			parameters.shapes, {
+				curveSegments: curveSegments.getValue()
+			}
+		) ) );
+
+	}
+
+	return container;
+
+};
+
+Sidebar.Geometry.ShapeBufferGeometry = Sidebar.Geometry.ShapeGeometry;

editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -15,45 +15,12 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 	// points
 
-	var lastPointIdx = 0;
-	var pointsUI = [];
-
 	var pointsRow = new UI.Row();
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
 
-	var points = new UI.Span().setDisplay( 'inline-block' );
+	var points = new UI.Points3().setValue( parameters.path.points ).onChange( update );
 	pointsRow.add( points );
 
-	var pointsList = new UI.Div();
-	points.add( pointsList );
-
-	var parameterPoints = parameters.path.points;
-	for ( var i = 0; i < parameterPoints.length; i ++ ) {
-
-		var point = parameterPoints[ i ];
-		pointsList.add( createPointRow( point.x, point.y, point.z ) );
-
-	}
-
-	var addPointButton = new UI.Button( '+' ).onClick( function () {
-
-		if ( pointsUI.length === 0 ) {
-
-			pointsList.add( createPointRow( 0, 0, 0 ) );
-
-		} else {
-
-			var point = pointsUI[ pointsUI.length - 1 ];
-
-			pointsList.add( createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
-
-		}
-
-		update();
-
-	} );
-	points.add( addPointButton );
-
 	container.add( pointsRow );
 
 	// radius
@@ -118,25 +85,10 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 	function update() {
 
-		var points = [];
-		var count = 0;
-
-		for ( var i = 0; i < pointsUI.length; i ++ ) {
-
-			var pointUI = pointsUI[ i ];
-
-			if ( ! pointUI ) continue;
-
-			points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
-			count ++;
-			pointUI.lbl.setValue( count );
-
-		}
-
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
-			new THREE.CatmullRomCurve3( points, closed.getValue(), curveType.getValue(), tension.getValue() ),
+			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 			tubularSegments.getValue(),
 			radius.getValue(),
 			radialSegments.getValue(),
@@ -145,39 +97,6 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 	}
 
-	function createPointRow( x, y, z ) {
-
-		var pointRow = new UI.Div();
-		var lbl = new UI.Text( lastPointIdx + 1 ).setWidth( '20px' );
-		var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( update );
-		var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( update );
-		var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( update );
-		var idx = lastPointIdx;
-		var btn = new UI.Button( '-' ).onClick( function () {
-
-			deletePointRow( idx );
-
-		} );
-
-		pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
-		lastPointIdx ++;
-		pointRow.add( lbl, txtX, txtY, txtZ, btn );
-
-		return pointRow;
-
-	}
-
-	function deletePointRow( idx ) {
-
-		if ( ! pointsUI[ idx ] ) return;
-
-		pointsList.remove( pointsUI[ idx ].row );
-		pointsUI[ idx ] = null;
-
-		update();
-
-	}
-
 	return container;
 
 };

editor/js/Sidebar.Project.js

@@ -133,7 +133,24 @@ Sidebar.Project = function ( editor ) {
 
 		rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
 
-		var renderer = new rendererTypes[ type ]( { antialias: antialias } );
+		var parameters = {};
+
+		switch ( type ) {
+
+			case 'WebGLRenderer':
+				parameters.antialias = antialias;
+				break;
+
+			case 'RaytracingRenderer':
+				parameters.workers = navigator.hardwareConcurrency || 4;
+				parameters.workerPath = '../examples/js/renderers/RaytracingWorker.js';
+				parameters.randomize = true;
+				parameters.blockSize = 64;
+				break;
+
+		}
+
+		var renderer = new rendererTypes[ type ]( parameters );
 
 		if ( shadows && renderer.shadowMap ) {
 

editor/js/Strings.js

@@ -135,6 +135,16 @@ var Strings = function ( config ) {
 			'sidebar/geometry/cylinder_geometry/heightsegments': 'Height segments',
 			'sidebar/geometry/cylinder_geometry/openended': 'Open ended',
 
+			'sidebar/geometry/extrude_geometry/curveSegments': 'Curve Segments',
+			'sidebar/geometry/extrude_geometry/steps': 'Steps',
+			'sidebar/geometry/extrude_geometry/depth': 'Depth',
+			'sidebar/geometry/extrude_geometry/bevelEnabled': 'Bevel?',
+			'sidebar/geometry/extrude_geometry/bevelThickness': 'Thickness',
+			'sidebar/geometry/extrude_geometry/bevelSize': 'Size',
+			'sidebar/geometry/extrude_geometry/bevelOffset': 'Offset',
+			'sidebar/geometry/extrude_geometry/bevelSegments': 'Segments',
+			'sidebar/geometry/extrude_geometry/shape': 'Convert to Shape',
+
 			'sidebar/geometry/geometry/vertices': 'Vertices',
 			'sidebar/geometry/geometry/faces': 'Faces',
 
@@ -164,6 +174,9 @@ var Strings = function ( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': 'Theta start',
 			'sidebar/geometry/ring_geometry/thetalength': 'Theta length',
 
+			'sidebar/geometry/shape_geometry/curveSegments': 'Curve Segments',
+			'sidebar/geometry/shape_geometry/extrude': 'Extrude',
+
 			'sidebar/geometry/sphere_geometry/radius': 'Radius',
 			'sidebar/geometry/sphere_geometry/widthsegments': 'Width segments',
 			'sidebar/geometry/sphere_geometry/heightsegments': 'Height segments',

editor/js/libs/ui.three.js

@@ -453,6 +453,262 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
 };
 
+var Points = function ( onAddClicked ) {
+
+	UI.Element.call( this );
+
+	var span = new UI.Span().setDisplay( 'inline-block' );
+
+	this.pointsList = new UI.Div();
+	span.add( this.pointsList );
+
+	var row = new UI.Row();
+	span.add( row );
+
+	var addPointButton = new UI.Button( '+' ).onClick( onAddClicked );
+	row.add( addPointButton );
+
+	this.update = function () {
+
+		if ( this.onChangeCallback !== null ) {
+
+			this.onChangeCallback();
+
+		}
+
+	}.bind( this );
+
+	this.dom = span.dom;
+	this.pointsUI = [];
+	this.lastPointIdx = 0;
+	this.onChangeCallback = null;
+	return this;
+
+};
+
+Points.prototype = Object.create( UI.Element.prototype );
+Points.prototype.constructor = Points;
+
+Points.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
+Points.prototype.clear = function () {
+
+	for ( var i = 0; i < this.pointsUI.length; ++ i ) {
+
+		if ( this.pointsUI[ i ] ) {
+
+			this.deletePointRow( i, true );
+
+		}
+
+	}
+
+	this.lastPointIdx = 0;
+
+};
+
+Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
+
+	if ( ! this.pointsUI[ idx ] ) return;
+
+	this.pointsList.remove( this.pointsUI[ idx ].row );
+	this.pointsUI[ idx ] = null;
+
+	if ( dontUpdate !== true ) {
+
+		this.update();
+
+	}
+
+};
+
+UI.Points2 = function () {
+
+	Points.call( this, UI.Points2.addRow.bind( this ) );
+
+	return this;
+
+};
+
+UI.Points2.prototype = Object.create( Points.prototype );
+UI.Points2.prototype.constructor = UI.Points2;
+
+UI.Points2.addRow = function () {
+
+	if ( this.pointsUI.length === 0 ) {
+
+		this.pointsList.add( this.createPointRow( 0, 0 ) );
+
+	} else {
+
+		var point = this.pointsUI[ this.pointsUI.length - 1 ];
+
+		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue() ) );
+
+	}
+
+	this.update();
+
+};
+
+UI.Points2.prototype.getValue = function () {
+
+	var points = [];
+	var count = 0;
+
+	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
+
+		var pointUI = this.pointsUI[ i ];
+
+		if ( ! pointUI ) continue;
+
+		points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
+		++ count;
+		pointUI.lbl.setValue( count );
+
+	}
+
+	return points;
+
+};
+
+UI.Points2.prototype.setValue = function ( points ) {
+
+	this.clear();
+
+	for ( var i = 0; i < points.length; i ++ ) {
+
+		var point = points[ i ];
+		this.pointsList.add( this.createPointRow( point.x, point.y ) );
+
+	}
+
+	this.update();
+	return this;
+
+};
+
+UI.Points2.prototype.createPointRow = function ( x, y ) {
+
+	var pointRow = new UI.Div();
+	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
+	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
+	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
+
+	var idx = this.lastPointIdx;
+	var scope = this;
+	var btn = new UI.Button( '-' ).onClick( function () {
+
+		if ( scope.isEditing ) return;
+		scope.deletePointRow( idx );
+
+	} );
+
+	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
+	++ this.lastPointIdx;
+	pointRow.add( lbl, txtX, txtY, btn );
+
+	return pointRow;
+
+};
+
+UI.Points3 = function () {
+
+	Points.call( this, UI.Points3.addRow.bind( this ) );
+
+	return this;
+
+};
+
+UI.Points3.prototype = Object.create( Points.prototype );
+UI.Points3.prototype.constructor = UI.Points3;
+
+UI.Points3.addRow = function () {
+
+	if ( this.pointsUI.length === 0 ) {
+
+		this.pointsList.add( this.createPointRow( 0, 0, 0 ) );
+
+	} else {
+
+		var point = this.pointsUI[ this.pointsUI.length - 1 ];
+
+		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
+
+	}
+
+	this.update();
+
+};
+
+UI.Points3.prototype.getValue = function () {
+
+	var points = [];
+	var count = 0;
+
+	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
+
+		var pointUI = this.pointsUI[ i ];
+
+		if ( ! pointUI ) continue;
+
+		points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
+		++ count;
+		pointUI.lbl.setValue( count );
+
+	}
+
+	return points;
+
+};
+
+UI.Points3.prototype.setValue = function ( points ) {
+
+	this.clear();
+
+	for ( var i = 0; i < points.length; i ++ ) {
+
+		var point = points[ i ];
+		this.pointsList.add( this.createPointRow( point.x, point.y, point.z ) );
+
+	}
+
+	this.update();
+	return this;
+
+};
+
+UI.Points3.prototype.createPointRow = function ( x, y, z ) {
+
+	var pointRow = new UI.Div();
+	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
+	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
+	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
+	var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( this.update );
+
+	var idx = this.lastPointIdx;
+	var scope = this;
+	var btn = new UI.Button( '-' ).onClick( function () {
+
+		if ( scope.isEditing ) return;
+		scope.deletePointRow( idx );
+
+	} );
+
+	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
+	++ this.lastPointIdx;
+	pointRow.add( lbl, txtX, txtY, txtZ, btn );
+
+	return pointRow;
+
+};
+
 UI.THREE = {};
 
 UI.THREE.Boolean = function ( boolean, text ) {

editor/manifest.json

@@ -1,13 +1,14 @@
 {
-  "short_name": "Editor",
   "name": "Three.js Editor",
+  "short_name": "Three.js",
+  "start_url": ".",
+  "scope": ".",
+  "display": "standalone",
   "icons": [
     {
       "src": "./images/icon.png",
       "type": "image/png",
       "sizes": "144x144"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone"
+  ]
 }

editor/sw.js

@@ -1,8 +1,10 @@
-// r104
+// r105
 
 const staticAssets = [
 	'./',
 
+	'../files/favicon.ico',
+
 	'../build/three.js',
 	'../examples/js/libs/system.min.js',
 
@@ -125,9 +127,14 @@ const staticAssets = [
 	'./js/Sidebar.Geometry.BoxGeometry.js',
 	'./js/Sidebar.Geometry.CircleGeometry.js',
 	'./js/Sidebar.Geometry.CylinderGeometry.js',
+	'./js/Sidebar.Geometry.ExtrudeGeometry.js',
 	'./js/Sidebar.Geometry.IcosahedronGeometry.js',
+	'./js/Sidebar.Geometry.OctahedronGeometry.js',
 	'./js/Sidebar.Geometry.PlaneGeometry.js',
+	'./js/Sidebar.Geometry.RingGeometry.js',
 	'./js/Sidebar.Geometry.SphereGeometry.js',
+	'./js/Sidebar.Geometry.ShapeGeometry.js',
+	'./js/Sidebar.Geometry.TetrahedronGeometry.js',
 	'./js/Sidebar.Geometry.TorusGeometry.js',
 	'./js/Sidebar.Geometry.TorusKnotGeometry.js',
 	'./js/Sidebar.Geometry.TubeGeometry.js',
@@ -141,6 +148,7 @@ const staticAssets = [
 	'./js/Strings.js',
 	'./js/Toolbar.js',
 	'./js/Viewport.js',
+	'./js/Viewport.Camera.js',
 	'./js/Viewport.Info.js',
 
 	'./js/Command.js',

examples/css2d_label.html

@@ -4,39 +4,18 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<title>three.js css2d - label</title>
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-			body {
-				background-color: #000;
-				margin: 0;
-				overflow: hidden;
-			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #FFF;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
-			.label{
+			.label {
 				color: #FFF;
 				font-family: sans-serif;
 				padding: 2px;
 				background: rgba( 0, 0, 0, .6 );
 			}
-
-			a {
-				color: #000000;
-			}
-
 		</style>
 	</head>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 		<script src="../build/three.js"></script>
 

examples/css3d_molecules.html

@@ -4,71 +4,49 @@
 		<title>three.js css3d - molecules</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-			html, body {
-				height: 100%;
-			}
-
 			body {
 				background-color: #050505;
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
-
-				margin: 0;
-				font-family: Arial;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
 			}
 
-			#info {
+			#topmenu {
 				position: absolute;
-				top: 0px;
+				top: 50px;
 				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
+				padding: 10px;
+				box-sizing: border-box;
 				text-align: center;
-				z-index: 1;
 			}
 
 			#menu {
 				position: absolute;
 				bottom: 20px;
 				width: 100%;
+				padding: 10px;
+				box-sizing: border-box;
 				text-align: center;
-				padding: 0;
-				margin: 0;
-			}
-
-			#topmenu {
-				position: absolute;
-				top: 10px;
-				right: 10px;
-				width: 100%;
-				text-align: right;
-				padding: 0;
-				margin: 0;
-				z-index: 1;
 			}
 
 			button {
 				color: rgb(255,255,255);
-				background: transparent;
+				background: rgb(255,255,255,0.1);
 				border: 0px;
 				padding: 5px 10px;
+				margin: 2px;
+				font-size: 14px;
 				cursor: pointer;
 			}
-			button:hover {
-				background-color: rgba(0,255,255,0.5);
-			}
-			button:active {
-				color: #000000;
-				background-color: rgba(0,255,255,1);
-			}
+
+				button:hover {
+					background-color: rgba(0,255,255,0.5);
+				}
+
+				button:active {
+					color: #000000;
+					background-color: rgba(0,255,255,1);
+				}
 
 			.bond {
 				width: 5px;
@@ -85,11 +63,9 @@
 		<script src="js/loaders/PDBLoader.js"></script>
 
 		<div id="container"></div>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - molecules</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 		<div id="topmenu">
-			<button id="b_a">Atoms</button>
-			<button id="b_b">Bonds</button>
-			<button id="b_ab">Atoms + Bonds</button>
+			<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
 		</div>
 		<div id="menu"></div>
 

examples/css3d_orthographic.html

@@ -3,32 +3,21 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				overflow: hidden;
+				background-color: #f0f0f0;
 			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
 			a {
+				color: #f00;
+			}
+			#info {
 				color: #000000;
 			}
-
 		</style>
 	</head>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d orthographic</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 		<script src="../build/three.js"></script>
 

examples/css3d_panorama.html

@@ -4,30 +4,7 @@
 		<title>three.js css3d - panorama</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background-color: #000000;
-				margin: 0;
-				cursor: move;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
-			}
-		</style>
+		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
 		<script src="../build/three.js"></script>

examples/css3d_panorama_deviceorientation.html

@@ -1,40 +1,17 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>three.js css3d - panorama - deviceorientation</title>
+		<title>three.js css3d - panorama - device orientation</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background-color: #000000;
-				margin: 0;
-				cursor: move;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
-			}
-		</style>
+		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama - decideorientation. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 		<script>
 

examples/css3d_periodictable.html

@@ -4,32 +4,10 @@
 		<title>three.js css3d - periodic table</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-			html, body {
-				height: 100%;
-			}
-
-			body {
-				background-color: #000000;
-				margin: 0;
-				font-family: Helvetica, sans-serif;;
-				overflow: hidden;
-			}
-
 			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
+				color: #8ff;
 			}
 
 			#menu {
@@ -44,7 +22,9 @@
 				height: 160px;
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 				border: 1px solid rgba(127,255,255,0.25);
+				font-family: Helvetica, sans-serif;
 				text-align: center;
+				line-height: normal;
 				cursor: default;
 			}
 
@@ -89,9 +69,11 @@
 				padding: 5px 10px;
 				cursor: pointer;
 			}
+
 			button:hover {
 				background-color: rgba(0,255,255,0.5);
 			}
+
 			button:active {
 				color: #000000;
 				background-color: rgba(0,255,255,0.75);
@@ -104,7 +86,7 @@
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
 		<div id="container"></div>
 		<div id="menu">
 			<button id="table">TABLE</button>
@@ -360,7 +342,6 @@
 				//
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
-				controls.rotateSpeed = 0.5;
 				controls.minDistance = 500;
 				controls.maxDistance = 6000;
 				controls.addEventListener( 'change', render );

examples/css3d_sandbox.html

@@ -3,37 +3,21 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				overflow: hidden;
+				color: #000;
 			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
 			a {
-				color: #000000;
+				color: #080;
 			}
-
 		</style>
 	</head>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d sandbox</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
 
 		<script src="../build/three.js"></script>
-
 		<script src="js/controls/TrackballControls.js"></script>
-
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 		<script>

examples/css3d_sprites.html

@@ -4,32 +4,14 @@
 		<title>three.js css3d - sprites</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-			html, body {
-				height: 100%;
-			}
-
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				font-family: Arial;
-				overflow: hidden;
+				background-color: #fff;
+				color: #000;
 			}
-
 			a {
-				color: #8888ff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
+				color: #48f;
 			}
 		</style>
 	</head>
@@ -39,7 +21,7 @@
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - sprites.</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sprites</div>
 		<div id="container"></div>
 
 		<script>
@@ -155,7 +137,6 @@
 				//
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
-				controls.rotateSpeed = 0.5;
 
 				//
 

examples/css3d_youtube.html

@@ -4,17 +4,18 @@
 		<title>three.js css3d - youtube</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
-			html, body {
-				height: 100%;
-				overflow: hidden;
+			body {
+				background-color: #ffffff;
 			}
+
 			#blocker {
 				position: absolute;
-				top: 0px;
-				left: 0px;
-				width: 100%;
-				height: 100%;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
 			}
 		</style>
 	</head>
@@ -86,12 +87,12 @@
 				var blocker = document.getElementById( 'blocker' );
 				blocker.style.display = 'none';
 
-				document.addEventListener( 'mousedown', function () {
+				controls.addEventListener( 'start', function () {
 
 					blocker.style.display = '';
 
 				} );
-				document.addEventListener( 'mouseup', function () {
+				controls.addEventListener( 'end', function () {
 
 					blocker.style.display = 'none';
 

examples/files.js

@@ -45,7 +45,6 @@ var files = {
 		"webgl_geometry_text",
 		"webgl_geometry_text_shapes",
 		"webgl_geometry_text_stroke",
-		"webgl_hdr",
 		"webgl_helpers",
 		"webgl_interactive_buffergeometry",
 		"webgl_interactive_cubes",
@@ -75,6 +74,7 @@ var files = {
 		"webgl_lines_sphere",
 		"webgl_loader_3ds",
 		"webgl_loader_3mf",
+		"webgl_loader_3mf_materials",
 		"webgl_loader_amf",
 		"webgl_loader_assimp",
 		"webgl_loader_assimp2json",
@@ -126,11 +126,13 @@ var files = {
 		"webgl_loader_sea3d_sound",
 		"webgl_loader_stl",
 		"webgl_loader_svg",
+		"webgl_loader_texture_basis",
 		"webgl_loader_texture_dds",
 		"webgl_loader_texture_exr",
 		"webgl_loader_texture_hdr",
 		"webgl_loader_texture_ktx",
 		"webgl_loader_texture_pvrtc",
+		"webgl_loader_texture_rgbm",
 		"webgl_loader_texture_tga",
 		"webgl_loader_ttf",
 		"webgl_loader_vrm",

examples/index.html

@@ -2,30 +2,13 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>three.js / examples</title>
+		<title>three.js examples</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
 		<style>
 			#panel #content .link {
 				display: block;
-				text-decoration: none;
-				cursor: pointer;
-			}
-
-			#viewSrcButton {
-				position: fixed;
-				bottom: 20px;
-				right: 20px;
-				padding: 8px;
-				color: #fff;
-				background-color: #555;
-				opacity: 0.7;
-			}
-
-			#viewSrcButton:hover {
-				cursor: pointer;
-				opacity: 1;
 			}
 		</style>
 	</head>
@@ -34,25 +17,34 @@
 		<div id="panel">
 
 			<div id="header">
-
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
-				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
-
 				<div id="sections">
-					<a href="../docs/">docs</a> <span class="selected">examples</span>
+					<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
+					<span class="selected">examples</span>
 				</div>
 
-				<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-
+				<div id="expandButton"></div>
 			</div>
 
-			<div id="content"></div>
+			<div id="panelScrim"></div>
+
+			<div id="contentWrapper">
+
+				<div id="inputWrapper">
+					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+					<div id="exitSearchButton"></div>
+				</div>
+
+				<div id="content"></div>
+			</div>
 
 		</div>
 
 		<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
 
+		<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>
+
 		<script src="files.js"></script>
 
 		<script>
@@ -70,13 +62,22 @@
 		var viewer = document.getElementById( 'viewer' );
 
 		var filterInput = document.getElementById( 'filter' );
+		var exitSearchButton = document.getElementById( 'exitSearchButton' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 		expandButton.addEventListener( 'click', function ( event ) {
 			event.preventDefault();
-			panel.classList.toggle( 'collapsed' );
+			panel.classList.toggle( 'open' );
 		} );
 
+		var panelScrim = document.getElementById( 'panelScrim' );
+		panelScrim.onclick = function ( event ) {
+
+			event.preventDefault();
+			panel.classList.toggle( 'open' );
+
+		};
+
 		// iOS iframe auto-resize workaround
 
 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
@@ -90,12 +91,8 @@
 		var container = document.createElement( 'div' );
 		content.appendChild( container );
 
-		var viewSrcButton = document.createElement( 'a' );
-		viewSrcButton.id = 'viewSrcButton';
-		viewSrcButton.target = '_blank';
-		viewSrcButton.textContent = 'View source';
+		var viewSrcButton = document.getElementById( 'button' );
 		viewSrcButton.style.display = 'none';
-		document.body.appendChild( viewSrcButton );
 
 		var links = {};
 		var selected = null;
@@ -157,7 +154,7 @@
 			window.location.hash = file;
 			viewer.focus();
 
-			panel.classList.add( 'collapsed' );
+			panel.classList.remove( 'open' );
 
 			selected = file;
 
@@ -175,6 +172,27 @@
 		}
 
 		// filter
+		filterInput.onfocus = function ( event ) {
+
+			panel.classList.add('searchFocused');
+
+		}
+
+		filterInput.onblur = function ( event ) {
+
+			if(filterInput.value === '') {
+				panel.classList.remove('searchFocused');
+			}
+
+		}
+
+		exitSearchButton.onclick = function( event ) {
+
+			filterInput.value = '';
+			updateFilter();
+			panel.classList.remove('searchFocused');
+
+		}
 
 		filterInput.addEventListener( 'input', function( e ) {
 
@@ -238,7 +256,7 @@
 
 			var name = file.split( '_' );
 			name.shift();
-			return name.join( ' / ' );
+			return name.join( '<span class="spacer">/</span>' );
 
 		}
 

examples/js/ImprovedNoise.js

@@ -1,71 +0,0 @@
-// http://mrl.nyu.edu/~perlin/noise/
-
-var ImprovedNoise = function () {
-
-	var p = [ 151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
-		 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
-		 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
-		 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
-		 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
-		 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
-		 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
-		 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
-		 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
-		 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180 ];
-
-	for (var i = 0; i < 256 ; i ++) {
-
-		p[256 + i] = p[i];
-
-	}
-
-	function fade(t) {
-
-		return t * t * t * (t * (t * 6 - 15) + 10);
-
-	}
-
-	function lerp(t, a, b) {
-
-		return a + t * (b - a);
-
-	}
-
-	function grad(hash, x, y, z) {
-
-		var h = hash & 15;
-		var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
-		return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
-
-	}
-
-	return {
-
-		noise: function (x, y, z) {
-
-			var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
-
-			var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
-
-			x -= floorX;
-			y -= floorY;
-			z -= floorZ;
-
-			var xMinus1 = x - 1, yMinus1 = y - 1, zMinus1 = z - 1;
-
-			var u = fade(x), v = fade(y), w = fade(z);
-
-			var A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
-
-			return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
-							grad(p[BA], xMinus1, y, z)),
-						lerp(u, grad(p[AB], x, yMinus1, z),
-							grad(p[BB], xMinus1, yMinus1, z))),
-					lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1),
-							grad(p[BA + 1], xMinus1, y, z - 1)),
-						lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1),
-							grad(p[BB + 1], xMinus1, yMinus1, zMinus1))));
-
-		}
-	}
-};

examples/js/PRNG.js

@@ -1,23 +0,0 @@
-// Park-Miller-Carta Pseudo-Random Number Generator
-// https://github.com/pnitsch/BitmapData.js/blob/master/js/BitmapData.js
-
-var PRNG = function () {
-
-	this.seed = 1;
-	this.next = function() {
-
-		return ( this.gen() / 2147483647 );
-
-	};
-	this.nextRange = function( min, max )	{
-
-		return min + ( ( max - min ) * this.next() )
-
-	};
-	this.gen = function() {
-
-		return this.seed = ( this.seed * 16807 ) % 2147483647;
-
-	};
-
-};

examples/js/ShaderGodRays.js

@@ -1,332 +0,0 @@
-/**
- * @author huwb / http://huwbowles.com/
- *
- * God-rays (crepuscular rays)
- *
- * Similar implementation to the one used by Crytek for CryEngine 2 [Sousa2008].
- * Blurs a mask generated from the depth map along radial lines emanating from the light
- * source. The blur repeatedly applies a blur filter of increasing support but constant
- * sample count to produce a blur filter with large support.
- *
- * My implementation performs 3 passes, similar to the implementation from Sousa. I found
- * just 6 samples per pass produced acceptible results. The blur is applied three times,
- * with decreasing filter support. The result is equivalent to a single pass with
- * 6*6*6 = 216 samples.
- *
- * References:
- *
- * Sousa2008 - Crysis Next Gen Effects, GDC2008, http://www.crytek.com/sites/default/files/GDC08_SousaT_CrysisEffects.ppt
- */
-
-THREE.ShaderGodRays = {
-
-	'godrays_depthMask': {
-
-		uniforms: {
-
-			tInput: {
-				value: null
-			}
-
-		},
-
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-			" vUv = uv;",
-			" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"varying vec2 vUv;",
-
-			"uniform sampler2D tInput;",
-
-			"void main() {",
-
-			"	gl_FragColor = vec4( 1.0 ) - texture2D( tInput, vUv );",
-
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-
-	/**
-	 * The god-ray generation shader.
-	 *
-	 * First pass:
-	 *
-	 * The depth map is blurred along radial lines towards the "sun". The
-	 * output is written to a temporary render target (I used a 1/4 sized
-	 * target).
-	 *
-	 * Pass two & three:
-	 *
-	 * The results of the previous pass are re-blurred, each time with a
-	 * decreased distance between samples.
-	 */
-
-	'godrays_generate': {
-
-		uniforms: {
-
-			tInput: {
-				value: null
-			},
-			fStepSize: {
-				value: 1.0
-			},
-			vSunPositionScreenSpace: {
-				value: new THREE.Vector2( 0.5, 0.5 )
-			}
-
-		},
-
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-				"vUv = uv;",
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"#define TAPS_PER_PASS 6.0",
-
-			"varying vec2 vUv;",
-
-			"uniform sampler2D tInput;",
-
-			"uniform vec2 vSunPositionScreenSpace;",
-			"uniform float fStepSize;", // filter step size
-
-			"void main() {",
-
-				// delta from current pixel to "sun" position
-
-				"vec2 delta = vSunPositionScreenSpace - vUv;",
-				"float dist = length( delta );",
-
-				// Step vector (uv space)
-
-				"vec2 stepv = fStepSize * delta / dist;",
-
-				// Number of iterations between pixel and sun
-
-				"float iters = dist/fStepSize;",
-
-				"vec2 uv = vUv.xy;",
-				"float col = 0.0;",
-
-				// This breaks ANGLE in Chrome 22
-				//	- see http://code.google.com/p/chromium/issues/detail?id=153105
-
-				/*
-				// Unrolling didnt do much on my hardware (ATI Mobility Radeon 3450),
-				// so i've just left the loop
-
-				"for ( float i = 0.0; i < TAPS_PER_PASS; i += 1.0 ) {",
-
-					// Accumulate samples, making sure we dont walk past the light source.
-
-					// The check for uv.y < 1 would not be necessary with "border" UV wrap
-					// mode, with a black border color. I don't think this is currently
-					// exposed by three.js. As a result there might be artifacts when the
-					// sun is to the left, right or bottom of screen as these cases are
-					// not specifically handled.
-
-					"col += ( i <= iters && uv.y < 1.0 ? texture2D( tInput, uv ).r : 0.0 );",
-					"uv += stepv;",
-
-				"}",
-				*/
-
-				// Unrolling loop manually makes it work in ANGLE
-
-				"if ( 0.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				"if ( 1.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				"if ( 2.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				"if ( 3.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				"if ( 4.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				"if ( 5.0 <= iters && uv.y < 1.0 ) col += texture2D( tInput, uv ).r;",
-				"uv += stepv;",
-
-				// Should technically be dividing by 'iters', but 'TAPS_PER_PASS' smooths out
-				// objectionable artifacts, in particular near the sun position. The side
-				// effect is that the result is darker than it should be around the sun, as
-				// TAPS_PER_PASS is greater than the number of samples actually accumulated.
-				// When the result is inverted (in the shader 'godrays_combine', this produces
-				// a slight bright spot at the position of the sun, even when it is occluded.
-
-				"gl_FragColor = vec4( col/TAPS_PER_PASS );",
-				"gl_FragColor.a = 1.0;",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	/**
-	 * Additively applies god rays from texture tGodRays to a background (tColors).
-	 * fGodRayIntensity attenuates the god rays.
-	 */
-
-	'godrays_combine': {
-
-		uniforms: {
-
-			tColors: {
-				value: null
-			},
-
-			tGodRays: {
-				value: null
-			},
-
-			fGodRayIntensity: {
-				value: 0.69
-			},
-
-			vSunPositionScreenSpace: {
-				value: new THREE.Vector2( 0.5, 0.5 )
-			}
-
-		},
-
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-				"vUv = uv;",
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-			].join( "\n" ),
-
-		fragmentShader: [
-
-			"varying vec2 vUv;",
-
-			"uniform sampler2D tColors;",
-			"uniform sampler2D tGodRays;",
-
-			"uniform vec2 vSunPositionScreenSpace;",
-			"uniform float fGodRayIntensity;",
-
-			"void main() {",
-
-				// Since THREE.MeshDepthMaterial renders foreground objects white and background
-				// objects black, the god-rays will be white streaks. Therefore value is inverted
-				// before being combined with tColors
-
-				"gl_FragColor = texture2D( tColors, vUv ) + fGodRayIntensity * vec4( 1.0 - texture2D( tGodRays, vUv ).r );",
-				"gl_FragColor.a = 1.0;",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-
-	/**
-	 * A dodgy sun/sky shader. Makes a bright spot at the sun location. Would be
-	 * cheaper/faster/simpler to implement this as a simple sun sprite.
-	 */
-
-	'godrays_fake_sun': {
-
-		uniforms: {
-
-			vSunPositionScreenSpace: {
-				value: new THREE.Vector2( 0.5, 0.5 )
-			},
-
-			fAspect: {
-				value: 1.0
-			},
-
-			sunColor: {
-				value: new THREE.Color( 0xffee00 )
-			},
-
-			bgColor: {
-				value: new THREE.Color( 0x000000 )
-			}
-
-		},
-
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-				"vUv = uv;",
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"varying vec2 vUv;",
-
-			"uniform vec2 vSunPositionScreenSpace;",
-			"uniform float fAspect;",
-
-			"uniform vec3 sunColor;",
-			"uniform vec3 bgColor;",
-
-			"void main() {",
-
-				"vec2 diff = vUv - vSunPositionScreenSpace;",
-
-				// Correct for aspect ratio
-
-				"diff.x *= fAspect;",
-
-				"float prop = clamp( length( diff ) / 0.5, 0.0, 1.0 );",
-				"prop = 0.35 * pow( 1.0 - prop, 3.0 );",
-
-				"gl_FragColor.xyz = mix( sunColor, bgColor, 1.0 - prop );",
-				"gl_FragColor.w = 1.0;",
-
-			"}"
-
-		].join( "\n" )
-
-	}
-
-};

examples/js/ShaderSkin.js

@@ -1,694 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- */
-
-
-THREE.ShaderSkin = {
-
-	/* ------------------------------------------------------------------------------------------
-	//	Simple skin shader
-	//		- per-pixel Blinn-Phong diffuse term mixed with half-Lambert wrap-around term (per color component)
-	//		- physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
-	//
-	//		- diffuse map
-	//		- bump map
-	//		- specular map
-	//		- point, directional and hemisphere lights (use with "lights: true" material option)
-	//		- fog (use with "fog: true" material option)
-	//
-	// ------------------------------------------------------------------------------------------ */
-
-	'skinSimple' : {
-
-		uniforms: THREE.UniformsUtils.merge( [
-
-			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "lights" ],
-
-			{
-
-				"enableBump": { value: 0 },
-				"enableSpecular": { value: 0 },
-
-				"tDiffuse": { value: null },
-				"tBeckmann": { value: null },
-
-				"diffuse": { value: new THREE.Color( 0xeeeeee ) },
-				"specular": { value: new THREE.Color( 0x111111 ) },
-				"opacity": { value: 1 },
-
-				"uRoughness": { value: 0.15 },
-				"uSpecularBrightness": { value: 0.75 },
-
-				"bumpMap": { value: null },
-				"bumpScale": { value: 1 },
-
-				"specularMap": { value: null },
-
-				"offsetRepeat": { value: new THREE.Vector4( 0, 0, 1, 1 ) },
-
-				"uWrapRGB": { value: new THREE.Vector3( 0.75, 0.375, 0.1875 ) }
-
-			}
-
-		] ),
-
-		fragmentShader: [
-
-			"#define USE_BUMPMAP",
-
-			"uniform bool enableBump;",
-			"uniform bool enableSpecular;",
-
-			"uniform vec3 diffuse;",
-			"uniform vec3 specular;",
-			"uniform float opacity;",
-
-			"uniform float uRoughness;",
-			"uniform float uSpecularBrightness;",
-
-			"uniform vec3 uWrapRGB;",
-
-			"uniform sampler2D tDiffuse;",
-			"uniform sampler2D tBeckmann;",
-
-			"uniform sampler2D specularMap;",
-
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-			THREE.ShaderChunk[ "bsdfs" ],
-			THREE.ShaderChunk[ "packing" ],
-			THREE.ShaderChunk[ "lights_pars_begin" ],
-			THREE.ShaderChunk[ "fog_pars_fragment" ],
-			THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
-
-			// Fresnel term
-
-			"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
-
-				"float base = 1.0 - dot( V, H );",
-				"float exponential = pow( base, 5.0 );",
-
-				"return exponential + F0 * ( 1.0 - exponential );",
-
-			"}",
-
-			// Kelemen/Szirmay-Kalos specular BRDF
-
-			"float KS_Skin_Specular( vec3 N,", 		// Bumped surface normal
-									"vec3 L,", 		// Points to light
-									"vec3 V,", 		// Points to eye
-									"float m,",  	// Roughness
-									"float rho_s", 	// Specular brightness
-									") {",
-
-				"float result = 0.0;",
-				"float ndotl = dot( N, L );",
-
-				"if( ndotl > 0.0 ) {",
-
-					"vec3 h = L + V;", // Unnormalized half-way vector
-					"vec3 H = normalize( h );",
-
-					"float ndoth = dot( N, H );",
-
-					"float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
-
-					"float F = fresnelReflectance( H, V, 0.028 );",
-					"float frSpec = max( PH * F / dot( h, h ), 0.0 );",
-
-					"result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
-
-				"}",
-
-				"return result;",
-
-			"}",
-
-			"void main() {",
-
-				"vec3 outgoingLight = vec3( 0.0 );",	// outgoing light does not have an alpha, the surface does
-				"vec4 diffuseColor = vec4( diffuse, opacity );",
-
-				"vec4 colDiffuse = texture2D( tDiffuse, vUv );",
-				"colDiffuse.rgb *= colDiffuse.rgb;",
-
-				"diffuseColor = diffuseColor * colDiffuse;",
-
-				"vec3 normal = normalize( vNormal );",
-				"vec3 viewerDirection = normalize( vViewPosition );",
-
-				"float specularStrength;",
-
-				"if ( enableSpecular ) {",
-
-					"vec4 texelSpecular = texture2D( specularMap, vUv );",
-					"specularStrength = texelSpecular.r;",
-
-				"} else {",
-
-					"specularStrength = 1.0;",
-
-				"}",
-
-				"#ifdef USE_BUMPMAP",
-
-					"if ( enableBump ) normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );",
-
-				"#endif",
-
-				// point lights
-
-				"vec3 totalSpecularLight = vec3( 0.0 );",
-				"vec3 totalDiffuseLight = vec3( 0.0 );",
-
-				"#if NUM_POINT_LIGHTS > 0",
-
-					"for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
-
-						"vec3 lVector = pointLights[ i ].position + vViewPosition.xyz;",
-
-						"float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
-
-						"lVector = normalize( lVector );",
-
-						"float pointDiffuseWeightFull = max( dot( normal, lVector ), 0.0 );",
-						"float pointDiffuseWeightHalf = max( 0.5 * dot( normal, lVector ) + 0.5, 0.0 );",
-						"vec3 pointDiffuseWeight = mix( vec3 ( pointDiffuseWeightFull ), vec3( pointDiffuseWeightHalf ), uWrapRGB );",
-
-						"float pointSpecularWeight = KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
-
-						"totalDiffuseLight += pointLight[ i ].color * ( pointDiffuseWeight * attenuation );",
-						"totalSpecularLight += pointLight[ i ].color * specular * ( pointSpecularWeight * specularStrength * attenuation );",
-
-					"}",
-
-				"#endif",
-
-				// directional lights
-
-				"#if NUM_DIR_LIGHTS > 0",
-
-					"for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
-
-						"vec3 dirVector = directionalLights[ i ].direction;",
-
-						"float dirDiffuseWeightFull = max( dot( normal, dirVector ), 0.0 );",
-						"float dirDiffuseWeightHalf = max( 0.5 * dot( normal, dirVector ) + 0.5, 0.0 );",
-						"vec3 dirDiffuseWeight = mix( vec3 ( dirDiffuseWeightFull ), vec3( dirDiffuseWeightHalf ), uWrapRGB );",
-
-						"float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
-
-						"totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
-						"totalSpecularLight += directionalLights[ i ].color * ( dirSpecularWeight * specularStrength );",
-
-					"}",
-
-				"#endif",
-
-				// hemisphere lights
-
-				"#if NUM_HEMI_LIGHTS > 0",
-
-					"for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
-
-						"vec3 lVector = hemisphereLightDirection[ i ];",
-
-						"float dotProduct = dot( normal, lVector );",
-						"float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
-
-						"totalDiffuseLight += mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
-
-						// specular (sky light)
-
-						"float hemiSpecularWeight = 0.0;",
-						"hemiSpecularWeight += KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
-
-						// specular (ground light)
-
-						"vec3 lVectorGround = -lVector;",
-						"hemiSpecularWeight += KS_Skin_Specular( normal, lVectorGround, viewerDirection, uRoughness, uSpecularBrightness );",
-
-						"vec3 hemiSpecularColor = mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
-
-						"totalSpecularLight += hemiSpecularColor * specular * ( hemiSpecularWeight * specularStrength );",
-
-					"}",
-
-				"#endif",
-
-				"outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor * diffuse ) + totalSpecularLight;",
-
-				"gl_FragColor = linearToOutputTexel( vec4( outgoingLight, diffuseColor.a ) );",	// TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
-
-				THREE.ShaderChunk[ "fog_fragment" ],
-
-			"}"
-
-		].join( "\n" ),
-
-		vertexShader: [
-
-			"uniform vec4 offsetRepeat;",
-
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-			THREE.ShaderChunk[ "lights_pars_begin" ],
-			THREE.ShaderChunk[ "fog_pars_vertex" ],
-
-			"void main() {",
-
-				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-				"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-
-				"vViewPosition = -mvPosition.xyz;",
-
-				"vNormal = normalize( normalMatrix * normal );",
-
-				"vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
-
-				"gl_Position = projectionMatrix * mvPosition;",
-
-				THREE.ShaderChunk[ "fog_vertex" ],
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	/* ------------------------------------------------------------------------------------------
-	//	Skin shader
-	//		- Blinn-Phong diffuse term (using normal + diffuse maps)
-	//		- subsurface scattering approximation by four blur layers
-	//		- physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
-	//
-	//		- point and directional lights (use with "lights: true" material option)
-	//
-	//		- based on Nvidia Advanced Skin Rendering GDC 2007 presentation
-	//		  and GPU Gems 3 Chapter 14. Advanced Techniques for Realistic Real-Time Skin Rendering
-	//
-	//			http://developer.download.nvidia.com/presentations/2007/gdc/Advanced_Skin.pdf
-	//			http://http.developer.nvidia.com/GPUGems3/gpugems3_ch14.html
-	// ------------------------------------------------------------------------------------------ */
-
-	'skin' : {
-
-		uniforms: THREE.UniformsUtils.merge( [
-
-			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "lights" ],
-
-			{
-
-				"passID": { value: 0 },
-
-				"tDiffuse"	: { value: null },
-				"tNormal"	: { value: null },
-
-				"tBlur1"	: { value: null },
-				"tBlur2"	: { value: null },
-				"tBlur3"	: { value: null },
-				"tBlur4"	: { value: null },
-
-				"tBeckmann"	: { value: null },
-
-				"uNormalScale": { value: 1.0 },
-
-				"diffuse":  { value: new THREE.Color( 0xeeeeee ) },
-				"specular": { value: new THREE.Color( 0x111111 ) },
-				"opacity": 	  { value: 1 },
-
-				"uRoughness": 	  		{ value: 0.15 },
-				"uSpecularBrightness": 	{ value: 0.75 }
-
-			}
-
-		] ),
-
-		fragmentShader: [
-
-			"uniform vec3 diffuse;",
-			"uniform vec3 specular;",
-			"uniform float opacity;",
-
-			"uniform float uRoughness;",
-			"uniform float uSpecularBrightness;",
-
-			"uniform int passID;",
-
-			"uniform sampler2D tDiffuse;",
-			"uniform sampler2D tNormal;",
-
-			"uniform sampler2D tBlur1;",
-			"uniform sampler2D tBlur2;",
-			"uniform sampler2D tBlur3;",
-			"uniform sampler2D tBlur4;",
-
-			"uniform sampler2D tBeckmann;",
-
-			"uniform float uNormalScale;",
-
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-			THREE.ShaderChunk[ "lights_pars_begin" ],
-			THREE.ShaderChunk[ "fog_pars_fragment" ],
-
-			"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
-
-				"float base = 1.0 - dot( V, H );",
-				"float exponential = pow( base, 5.0 );",
-
-				"return exponential + F0 * ( 1.0 - exponential );",
-
-			"}",
-
-			// Kelemen/Szirmay-Kalos specular BRDF
-
-			"float KS_Skin_Specular( vec3 N,", 		// Bumped surface normal
-									"vec3 L,", 		// Points to light
-									"vec3 V,", 		// Points to eye
-									"float m,",  	// Roughness
-									"float rho_s", 	// Specular brightness
-									") {",
-
-				"float result = 0.0;",
-				"float ndotl = dot( N, L );",
-
-				"if( ndotl > 0.0 ) {",
-
-					"vec3 h = L + V;", // Unnormalized half-way vector
-					"vec3 H = normalize( h );",
-
-					"float ndoth = dot( N, H );",
-
-					"float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
-					"float F = fresnelReflectance( H, V, 0.028 );",
-					"float frSpec = max( PH * F / dot( h, h ), 0.0 );",
-
-					"result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
-
-				"}",
-
-				"return result;",
-
-			"}",
-
-			"void main() {",
-
-				"vec3 outgoingLight = vec3( 0.0 );",	// outgoing light does not have an alpha, the surface does
-				"vec4 diffuseColor = vec4( diffuse, opacity );",
-
-				"vec4 mSpecular = vec4( specular, opacity );",
-
-				"vec4 colDiffuse = texture2D( tDiffuse, vUv );",
-				"colDiffuse *= colDiffuse;",
-
-				"diffuseColor *= colDiffuse;",
-
-				// normal mapping
-
-				"vec4 posAndU = vec4( -vViewPosition, vUv.x );",
-				"vec4 posAndU_dx = dFdx( posAndU ),  posAndU_dy = dFdy( posAndU );",
-				"vec3 tangent = posAndU_dx.w * posAndU_dx.xyz + posAndU_dy.w * posAndU_dy.xyz;",
-				"vec3 normal = normalize( vNormal );",
-				"vec3 binormal = normalize( cross( tangent, normal ) );",
-				"tangent = cross( normal, binormal );",	// no normalization required
-				"mat3 tsb = mat3( tangent, binormal, normal );",
-
-				"vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
-				"normalTex.xy *= uNormalScale;",
-				"normalTex = normalize( normalTex );",
-
-				"vec3 finalNormal = tsb * normalTex;",
-				"normal = normalize( finalNormal );",
-
-				"vec3 viewerDirection = normalize( vViewPosition );",
-
-				// point lights
-
-				"vec3 totalDiffuseLight = vec3( 0.0 );",
-				"vec3 totalSpecularLight = vec3( 0.0 );",
-
-				"#if NUM_POINT_LIGHTS > 0",
-
-					"for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
-
-						"vec3 pointVector = normalize( pointLights[ i ].direction );",
-						"float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
-
-						"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
-
-						"totalDiffuseLight += pointLightColor[ i ] * ( pointDiffuseWeight * attenuation );",
-
-						"if ( passID == 1 ) {",
-
-							"float pointSpecularWeight = KS_Skin_Specular( normal, pointVector, viewerDirection, uRoughness, uSpecularBrightness );",
-
-							"totalSpecularLight += pointLightColor[ i ] * mSpecular.xyz * ( pointSpecularWeight * attenuation );",
-
-						"}",
-
-					"}",
-
-				"#endif",
-
-				// directional lights
-
-				"#if NUM_DIR_LIGHTS > 0",
-
-					"for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
-
-						"vec3 dirVector = directionalLights[ i ].direction;",
-
-						"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
-
-
-						"totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
-
-						"if ( passID == 1 ) {",
-
-							"float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
-
-							"totalSpecularLight += directionalLights[ i ].color * mSpecular.xyz * dirSpecularWeight;",
-
-						"}",
-
-					"}",
-
-				"#endif",
-
-
-				"outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalSpecularLight );",
-
-				"if ( passID == 0 ) {",
-
-					"outgoingLight = sqrt( outgoingLight );",
-
-				"} else if ( passID == 1 ) {",
-
-					//"#define VERSION1",
-
-					"#ifdef VERSION1",
-
-						"vec3 nonblurColor = sqrt(outgoingLight );",
-
-					"#else",
-
-						"vec3 nonblurColor = outgoingLight;",
-
-					"#endif",
-
-					"vec3 blur1Color = texture2D( tBlur1, vUv ).xyz;",
-					"vec3 blur2Color = texture2D( tBlur2, vUv ).xyz;",
-					"vec3 blur3Color = texture2D( tBlur3, vUv ).xyz;",
-					"vec3 blur4Color = texture2D( tBlur4, vUv ).xyz;",
-
-
-					//"gl_FragColor = vec4( blur1Color, gl_FragColor.w );",
-
-					//"gl_FragColor = vec4( vec3( 0.22, 0.5, 0.7 ) * nonblurColor + vec3( 0.2, 0.5, 0.3 ) * blur1Color + vec3( 0.58, 0.0, 0.0 ) * blur2Color, gl_FragColor.w );",
-
-					//"gl_FragColor = vec4( vec3( 0.25, 0.6, 0.8 ) * nonblurColor + vec3( 0.15, 0.25, 0.2 ) * blur1Color + vec3( 0.15, 0.15, 0.0 ) * blur2Color + vec3( 0.45, 0.0, 0.0 ) * blur3Color, gl_FragColor.w );",
-
-
-					"outgoingLight = vec3( vec3( 0.22,  0.437, 0.635 ) * nonblurColor + ",
-										 "vec3( 0.101, 0.355, 0.365 ) * blur1Color + ",
-										 "vec3( 0.119, 0.208, 0.0 )   * blur2Color + ",
-										 "vec3( 0.114, 0.0,   0.0 )   * blur3Color + ",
-										 "vec3( 0.444, 0.0,   0.0 )   * blur4Color );",
-
-					"outgoingLight *= sqrt( colDiffuse.xyz );",
-
-					"outgoingLight += ambientLightColor * diffuse * colDiffuse.xyz + totalSpecularLight;",
-
-					"#ifndef VERSION1",
-
-						"outgoingLight = sqrt( outgoingLight );",
-
-					"#endif",
-
-				"}",
-
-				"gl_FragColor = vec4( outgoingLight, diffuseColor.a );",	// TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
-
-				THREE.ShaderChunk[ "fog_fragment" ],
-
-			"}"
-
-		].join( "\n" ),
-
-		vertexShader: [
-
-			"#ifdef VERTEX_TEXTURES",
-
-				"uniform sampler2D tDisplacement;",
-				"uniform float uDisplacementScale;",
-				"uniform float uDisplacementBias;",
-
-			"#endif",
-
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-			THREE.ShaderChunk[ "fog_pars_vertex" ],
-
-			"void main() {",
-
-				"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-
-				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-
-				"vViewPosition = -mvPosition.xyz;",
-
-				"vNormal = normalize( normalMatrix * normal );",
-
-				"vUv = uv;",
-
-				// displacement mapping
-
-				"#ifdef VERTEX_TEXTURES",
-
-					"vec3 dv = texture2D( tDisplacement, uv ).xyz;",
-					"float df = uDisplacementScale * dv.x + uDisplacementBias;",
-					"vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
-					"gl_Position = projectionMatrix * displacedPosition;",
-
-				"#else",
-
-					"gl_Position = projectionMatrix * mvPosition;",
-
-				"#endif",
-
-				THREE.ShaderChunk[ "fog_vertex" ],
-
-			"}",
-
-
-		].join( "\n" ),
-
-		vertexShaderUV: [
-
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-
-			"void main() {",
-
-				"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-
-				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-
-				"vViewPosition = -mvPosition.xyz;",
-
-				"vNormal = normalize( normalMatrix * normal );",
-
-				"vUv = uv;",
-
-				"gl_Position = vec4( uv.x * 2.0 - 1.0, uv.y * 2.0 - 1.0, 0.0, 1.0 );",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	/* ------------------------------------------------------------------------------------------
-	// Beckmann distribution function
-	//	- to be used in specular term of skin shader
-	//	- render a screen-aligned quad to precompute a 512 x 512 texture
-	//
-	//		- from http://developer.nvidia.com/node/171
-	 ------------------------------------------------------------------------------------------ */
-
-	"beckmann" : {
-
-		uniforms: {},
-
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-				"vUv = uv;",
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"varying vec2 vUv;",
-
-			"float PHBeckmann( float ndoth, float m ) {",
-
-				"float alpha = acos( ndoth );",
-				"float ta = tan( alpha );",
-
-				"float val = 1.0 / ( m * m * pow( ndoth, 4.0 ) ) * exp( -( ta * ta ) / ( m * m ) );",
-				"return val;",
-
-			"}",
-
-			"float KSTextureCompute( vec2 tex ) {",
-
-				// Scale the value to fit within [0,1]  invert upon lookup.
-
-				"return 0.5 * pow( PHBeckmann( tex.x, tex.y ), 0.1 );",
-
-			"}",
-
-			"void main() {",
-
-				"float x = KSTextureCompute( vUv );",
-
-				"gl_FragColor = vec4( x, x, x, 1.0 );",
-
-			"}"
-
-		].join( "\n" )
-
-	}
-
-};

examples/js/ShaderTerrain.js

@@ -1,324 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- */
-
-THREE.ShaderTerrain = {
-
-	/* -------------------------------------------------------------------------
-	//	Dynamic terrain shader
-	//		- Blinn-Phong
-	//		- height + normal + diffuse1 + diffuse2 + specular + detail maps
-	//		- point, directional and hemisphere lights (use with "lights: true" material option)
-	//		- shadow maps receiving
-	 ------------------------------------------------------------------------- */
-
-	'terrain' : {
-
-		uniforms: THREE.UniformsUtils.merge( [
-
-			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "lights" ],
-
-			{
-
-				"enableDiffuse1": { value: 0 },
-				"enableDiffuse2": { value: 0 },
-				"enableSpecular": { value: 0 },
-				"enableReflection": { value: 0 },
-
-				"tDiffuse1": { value: null },
-				"tDiffuse2": { value: null },
-				"tDetail": { value: null },
-				"tNormal": { value: null },
-				"tSpecular": { value: null },
-				"tDisplacement": { value: null },
-
-				"uNormalScale": { value: 1.0 },
-
-				"uDisplacementBias": { value: 0.0 },
-				"uDisplacementScale": { value: 1.0 },
-
-				"diffuse": { value: new THREE.Color( 0xeeeeee ) },
-				"specular": { value: new THREE.Color( 0x111111 ) },
-				"shininess": { value: 30 },
-				"opacity": { value: 1 },
-
-				"uRepeatBase": { value: new THREE.Vector2( 1, 1 ) },
-				"uRepeatOverlay": { value: new THREE.Vector2( 1, 1 ) },
-
-				"uOffset": { value: new THREE.Vector2( 0, 0 ) }
-
-			}
-
-		] ),
-
-		fragmentShader: [
-
-			"uniform vec3 diffuse;",
-			"uniform vec3 specular;",
-			"uniform float shininess;",
-			"uniform float opacity;",
-
-			"uniform bool enableDiffuse1;",
-			"uniform bool enableDiffuse2;",
-			"uniform bool enableSpecular;",
-
-			"uniform sampler2D tDiffuse1;",
-			"uniform sampler2D tDiffuse2;",
-			"uniform sampler2D tDetail;",
-			"uniform sampler2D tNormal;",
-			"uniform sampler2D tSpecular;",
-			"uniform sampler2D tDisplacement;",
-
-			"uniform float uNormalScale;",
-
-			"uniform vec2 uRepeatOverlay;",
-			"uniform vec2 uRepeatBase;",
-
-			"uniform vec2 uOffset;",
-
-			"varying vec3 vTangent;",
-			"varying vec3 vBinormal;",
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "common" ],
-			THREE.ShaderChunk[ "bsdfs" ],
-			THREE.ShaderChunk[ "lights_pars_begin" ],
-			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
-			THREE.ShaderChunk[ "fog_pars_fragment" ],
-
-			"float calcLightAttenuation( float lightDistance, float cutoffDistance, float decayExponent ) {",
- 				"if ( decayExponent > 0.0 ) {",
- 					"return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent );",
- 				"}",
- 				"return 1.0;",
- 			"}",
-
-			"void main() {",
-
-				"vec3 outgoingLight = vec3( 0.0 );",	// outgoing light does not have an alpha, the surface does
-				"vec4 diffuseColor = vec4( diffuse, opacity );",
-
-				"vec3 specularTex = vec3( 1.0 );",
-
-				"vec2 uvOverlay = uRepeatOverlay * vUv + uOffset;",
-				"vec2 uvBase = uRepeatBase * vUv;",
-
-				"vec3 normalTex = texture2D( tDetail, uvOverlay ).xyz * 2.0 - 1.0;",
-				"normalTex.xy *= uNormalScale;",
-				"normalTex = normalize( normalTex );",
-
-				"if( enableDiffuse1 && enableDiffuse2 ) {",
-
-					"vec4 colDiffuse1 = texture2D( tDiffuse1, uvOverlay );",
-					"vec4 colDiffuse2 = texture2D( tDiffuse2, uvOverlay );",
-
-					"colDiffuse1 = GammaToLinear( colDiffuse1, float( GAMMA_FACTOR ) );",
-					"colDiffuse2 = GammaToLinear( colDiffuse2, float( GAMMA_FACTOR ) );",
-
-					"diffuseColor *= mix ( colDiffuse1, colDiffuse2, 1.0 - texture2D( tDisplacement, uvBase ) );",
-
-				" } else if( enableDiffuse1 ) {",
-
-					"diffuseColor *= texture2D( tDiffuse1, uvOverlay );",
-
-				"} else if( enableDiffuse2 ) {",
-
-					"diffuseColor *= texture2D( tDiffuse2, uvOverlay );",
-
-				"}",
-
-				"if( enableSpecular )",
-					"specularTex = texture2D( tSpecular, uvOverlay ).xyz;",
-
-				"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
-				"vec3 finalNormal = tsb * normalTex;",
-
-				"vec3 normal = normalize( finalNormal );",
-				"vec3 viewPosition = normalize( vViewPosition );",
-
-				"vec3 totalDiffuseLight = vec3( 0.0 );",
-				"vec3 totalSpecularLight = vec3( 0.0 );",
-
-				// point lights
-
-				"#if NUM_POINT_LIGHTS > 0",
-
-					"for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
-
-						"vec3 lVector = pointLights[ i ].position + vViewPosition.xyz;",
-
-						"float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
-
-						"lVector = normalize( lVector );",
-
-						"vec3 pointHalfVector = normalize( lVector + viewPosition );",
-
-						"float pointDotNormalHalf = max( dot( normal, pointHalfVector ), 0.0 );",
-						"float pointDiffuseWeight = max( dot( normal, lVector ), 0.0 );",
-
-						"float pointSpecularWeight = specularTex.r * max( pow( pointDotNormalHalf, shininess ), 0.0 );",
-
-						"totalDiffuseLight += attenuation * pointLights[ i ].color * pointDiffuseWeight;",
-						"totalSpecularLight += attenuation * pointLights[ i ].color * specular * pointSpecularWeight * pointDiffuseWeight;",
-
-					"}",
-
-				"#endif",
-
-				// directional lights
-
-				"#if NUM_DIR_LIGHTS > 0",
-
-					"vec3 dirDiffuse = vec3( 0.0 );",
-					"vec3 dirSpecular = vec3( 0.0 );",
-
-					"for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
-
-						"vec3 dirVector = directionalLights[ i ].direction;",
-						"vec3 dirHalfVector = normalize( dirVector + viewPosition );",
-
-						"float dirDotNormalHalf = max( dot( normal, dirHalfVector ), 0.0 );",
-						"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
-
-						"float dirSpecularWeight = specularTex.r * max( pow( dirDotNormalHalf, shininess ), 0.0 );",
-
-						"totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
-						"totalSpecularLight += directionalLights[ i ].color * specular * dirSpecularWeight * dirDiffuseWeight;",
-
-					"}",
-
-				"#endif",
-
-				// hemisphere lights
-
-				"#if NUM_HEMI_LIGHTS > 0",
-
-					"vec3 hemiDiffuse  = vec3( 0.0 );",
-					"vec3 hemiSpecular = vec3( 0.0 );",
-
-					"for( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
-
-						"vec3 lVector = hemisphereLightDirection[ i ];",
-
-						// diffuse
-
-						"float dotProduct = dot( normal, lVector );",
-						"float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
-
-						"totalDiffuseLight += mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight );",
-
-						// specular (sky light)
-
-						"float hemiSpecularWeight = 0.0;",
-
-						"vec3 hemiHalfVectorSky = normalize( lVector + viewPosition );",
-						"float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;",
-						"hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfSky, shininess ), 0.0 );",
-
-						// specular (ground light)
-
-						"vec3 lVectorGround = -lVector;",
-
-						"vec3 hemiHalfVectorGround = normalize( lVectorGround + viewPosition );",
-						"float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;",
-						"hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfGround, shininess ), 0.0 );",
-
-						"totalSpecularLight += specular * mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight ) * hemiSpecularWeight * hemiDiffuseWeight;",
-
-					"}",
-
-				"#endif",
-
-				"outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor + totalSpecularLight );",
-
-				"gl_FragColor = vec4( outgoingLight, diffuseColor.a );",	// TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
-
-				THREE.ShaderChunk[ "fog_fragment" ],
-
-			"}"
-
-		].join( "\n" ),
-
-		vertexShader: [
-
-			"attribute vec4 tangent;",
-
-			"uniform vec2 uRepeatBase;",
-
-			"uniform sampler2D tNormal;",
-
-			"#ifdef VERTEX_TEXTURES",
-
-				"uniform sampler2D tDisplacement;",
-				"uniform float uDisplacementScale;",
-				"uniform float uDisplacementBias;",
-
-			"#endif",
-
-			"varying vec3 vTangent;",
-			"varying vec3 vBinormal;",
-			"varying vec3 vNormal;",
-			"varying vec2 vUv;",
-
-			"varying vec3 vViewPosition;",
-
-			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
-			THREE.ShaderChunk[ "fog_pars_vertex" ],
-
-			"void main() {",
-
-				"vNormal = normalize( normalMatrix * normal );",
-
-				// tangent and binormal vectors
-
-				"vTangent = normalize( normalMatrix * tangent.xyz );",
-
-				"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
-				"vBinormal = normalize( vBinormal );",
-
-				// texture coordinates
-
-				"vUv = uv;",
-
-				"vec2 uvBase = uv * uRepeatBase;",
-
-				// displacement mapping
-
-				"#ifdef VERTEX_TEXTURES",
-
-					"vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",
-					"float df = uDisplacementScale * dv.x + uDisplacementBias;",
-					"vec3 displacedPosition = normal * df + position;",
-
-					"vec4 worldPosition = modelMatrix * vec4( displacedPosition, 1.0 );",
-					"vec4 mvPosition = modelViewMatrix * vec4( displacedPosition, 1.0 );",
-
-				"#else",
-
-					"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-					"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-
-				"#endif",
-
-				"gl_Position = projectionMatrix * mvPosition;",
-
-				"vViewPosition = -mvPosition.xyz;",
-
-				"vec3 normalTex = texture2D( tNormal, uvBase ).xyz * 2.0 - 1.0;",
-				"vNormal = normalMatrix * normalTex;",
-
-				THREE.ShaderChunk[ "shadowmap_vertex" ],
-				THREE.ShaderChunk[ "fog_vertex" ],
-
-			"}"
-
-		].join( "\n" )
-
-	}
-
-};

examples/js/ShaderToon.js

@@ -1,331 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- * @author alteredq / http://alteredqualia.com/
- *
- * ShaderToon currently contains:
- *
- *	toon1
- *	toon2
- *	hatching
- *	dotted
- */
-
-THREE.ShaderToon = {
-
-	'toon1' : {
-
-		uniforms: {
-
-			"uDirLightPos": { value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor": { value: new THREE.Color( 0xffffff ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-			"varying vec3 vRefract;",
-
-			"void main() {",
-
-				"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-				"vec3 worldNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );",
-
-				"vNormal = normalize( normalMatrix * normal );",
-
-				"vec3 I = worldPosition.xyz - cameraPosition;",
-				"vRefract = refract( normalize( I ), worldNormal, 1.02 );",
-
-				"gl_Position = projectionMatrix * mvPosition;",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"uniform vec3 uBaseColor;",
-
-			"uniform vec3 uDirLightPos;",
-			"uniform vec3 uDirLightColor;",
-
-			"uniform vec3 uAmbientLightColor;",
-
-			"varying vec3 vNormal;",
-
-			"varying vec3 vRefract;",
-
-			"void main() {",
-
-				"float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);",
-				"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
-
-				"float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );",
-				"intensity += length(lightWeighting) * 0.2;",
-
-				"float cameraWeighting = dot( normalize( vNormal ), vRefract );",
-				"intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );",
-				"intensity = intensity * 0.2 + 0.3;",
-
-				"if ( intensity < 0.50 ) {",
-
-					"gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );",
-
-				"} else {",
-
-					"gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'toon2' : {
-
-		uniforms: {
-
-			"uDirLightPos": { value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor": { value: new THREE.Color( 0xeeeeee ) },
-			"uLineColor1": { value: new THREE.Color( 0x808080 ) },
-			"uLineColor2": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor3": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor4": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"uniform vec3 uBaseColor;",
-			"uniform vec3 uLineColor1;",
-			"uniform vec3 uLineColor2;",
-			"uniform vec3 uLineColor3;",
-			"uniform vec3 uLineColor4;",
-
-			"uniform vec3 uDirLightPos;",
-			"uniform vec3 uDirLightColor;",
-
-			"uniform vec3 uAmbientLightColor;",
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"float camera = max( dot( normalize( vNormal ), vec3( 0.0, 0.0, 1.0 ) ), 0.4);",
-				"float light = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);",
-
-				"gl_FragColor = vec4( uBaseColor, 1.0 );",
-
-				"if ( length(uAmbientLightColor + uDirLightColor * light) < 1.00 ) {",
-
-					"gl_FragColor *= vec4( uLineColor1, 1.0 );",
-
-				"}",
-
-				"if ( length(uAmbientLightColor + uDirLightColor * camera) < 0.50 ) {",
-
-					"gl_FragColor *= vec4( uLineColor2, 1.0 );",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'hatching' : {
-
-		uniforms: {
-
-			"uDirLightPos":	{ value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor":  { value: new THREE.Color( 0xffffff ) },
-			"uLineColor1": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor2": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor3": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor4": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"uniform vec3 uBaseColor;",
-			"uniform vec3 uLineColor1;",
-			"uniform vec3 uLineColor2;",
-			"uniform vec3 uLineColor3;",
-			"uniform vec3 uLineColor4;",
-
-			"uniform vec3 uDirLightPos;",
-			"uniform vec3 uDirLightColor;",
-
-			"uniform vec3 uAmbientLightColor;",
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);",
-				"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
-
-				"gl_FragColor = vec4( uBaseColor, 1.0 );",
-
-				"if ( length(lightWeighting) < 1.00 ) {",
-
-					"if ( mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
-
-						"gl_FragColor = vec4( uLineColor1, 1.0 );",
-
-					"}",
-
-				"}",
-
-				"if ( length(lightWeighting) < 0.75 ) {",
-
-					"if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
-
-						"gl_FragColor = vec4( uLineColor2, 1.0 );",
-
-					"}",
-				"}",
-
-				"if ( length(lightWeighting) < 0.50 ) {",
-
-					"if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
-
-						"gl_FragColor = vec4( uLineColor3, 1.0 );",
-
-					"}",
-				"}",
-
-				"if ( length(lightWeighting) < 0.3465 ) {",
-
-					"if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
-
-						"gl_FragColor = vec4( uLineColor4, 1.0 );",
-
-					"}",
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'dotted' : {
-
-		uniforms: {
-
-			"uDirLightPos":	{ value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor":  { value: new THREE.Color( 0xffffff ) },
-			"uLineColor1": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"uniform vec3 uBaseColor;",
-			"uniform vec3 uLineColor1;",
-			"uniform vec3 uLineColor2;",
-			"uniform vec3 uLineColor3;",
-			"uniform vec3 uLineColor4;",
-
-			"uniform vec3 uDirLightPos;",
-			"uniform vec3 uDirLightColor;",
-
-			"uniform vec3 uAmbientLightColor;",
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);",
-				"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
-
-				"gl_FragColor = vec4( uBaseColor, 1.0 );",
-
-				"if ( length(lightWeighting) < 1.00 ) {",
-
-					"if ( ( mod(gl_FragCoord.x, 4.001) + mod(gl_FragCoord.y, 4.0) ) > 6.00 ) {",
-
-						"gl_FragColor = vec4( uLineColor1, 1.0 );",
-
-					"}",
-
-				"}",
-
-				"if ( length(lightWeighting) < 0.50 ) {",
-
-					"if ( ( mod(gl_FragCoord.x + 2.0, 4.001) + mod(gl_FragCoord.y + 2.0, 4.0) ) > 6.00 ) {",
-
-						"gl_FragColor = vec4( uLineColor1, 1.0 );",
-
-					"}",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	}
-
-};

examples/js/SimplexNoise.js

@@ -1,324 +0,0 @@
-// Ported from Stefan Gustavson's java implementation
-// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
-// Read Stefan's excellent paper for details on how this code works.
-//
-// Sean McCullough [email protected]
-//
-// Added 4D noise
-// Joshua Koo [email protected] 
-
-/**
- * You can pass in a random number generator object if you like.
- * It is assumed to have a random() method.
- */
-var SimplexNoise = function(r) {
-	if (r == undefined) r = Math;
-	this.grad3 = [[ 1,1,0 ],[ -1,1,0 ],[ 1,-1,0 ],[ -1,-1,0 ], 
-                                 [ 1,0,1 ],[ -1,0,1 ],[ 1,0,-1 ],[ -1,0,-1 ], 
-                                 [ 0,1,1 ],[ 0,-1,1 ],[ 0,1,-1 ],[ 0,-1,-1 ]]; 
-
-	this.grad4 = [[ 0,1,1,1 ], [ 0,1,1,-1 ], [ 0,1,-1,1 ], [ 0,1,-1,-1 ],
-	     [ 0,-1,1,1 ], [ 0,-1,1,-1 ], [ 0,-1,-1,1 ], [ 0,-1,-1,-1 ],
-	     [ 1,0,1,1 ], [ 1,0,1,-1 ], [ 1,0,-1,1 ], [ 1,0,-1,-1 ],
-	     [ -1,0,1,1 ], [ -1,0,1,-1 ], [ -1,0,-1,1 ], [ -1,0,-1,-1 ],
-	     [ 1,1,0,1 ], [ 1,1,0,-1 ], [ 1,-1,0,1 ], [ 1,-1,0,-1 ],
-	     [ -1,1,0,1 ], [ -1,1,0,-1 ], [ -1,-1,0,1 ], [ -1,-1,0,-1 ],
-	     [ 1,1,1,0 ], [ 1,1,-1,0 ], [ 1,-1,1,0 ], [ 1,-1,-1,0 ],
-	     [ -1,1,1,0 ], [ -1,1,-1,0 ], [ -1,-1,1,0 ], [ -1,-1,-1,0 ]];
-
-	this.p = [];
-	for (var i = 0; i < 256; i ++) {
-		this.p[i] = Math.floor(r.random() * 256);
-	}
-  // To remove the need for index wrapping, double the permutation table length 
-	this.perm = []; 
-	for (var i = 0; i < 512; i ++) {
-		this.perm[i] = this.p[i & 255];
-	} 
-
-  // A lookup table to traverse the simplex around a given point in 4D. 
-  // Details can be found where this table is used, in the 4D noise method. 
-	this.simplex = [ 
-    [ 0,1,2,3 ],[ 0,1,3,2 ],[ 0,0,0,0 ],[ 0,2,3,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,2,3,0 ], 
-    [ 0,2,1,3 ],[ 0,0,0,0 ],[ 0,3,1,2 ],[ 0,3,2,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,3,2,0 ], 
-    [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
-    [ 1,2,0,3 ],[ 0,0,0,0 ],[ 1,3,0,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,3,0,1 ],[ 2,3,1,0 ], 
-    [ 1,0,2,3 ],[ 1,0,3,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,0,3,1 ],[ 0,0,0,0 ],[ 2,1,3,0 ], 
-    [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
-    [ 2,0,1,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,0,1,2 ],[ 3,0,2,1 ],[ 0,0,0,0 ],[ 3,1,2,0 ], 
-    [ 2,1,0,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,1,0,2 ],[ 0,0,0,0 ],[ 3,2,0,1 ],[ 3,2,1,0 ]]; 
-};
-
-SimplexNoise.prototype.dot = function(g, x, y) { 
-	return g[0] * x + g[1] * y;
-};
-
-SimplexNoise.prototype.dot3 = function(g, x, y, z) {
-	return g[0] * x + g[1] * y + g[2] * z; 
-};
-
-SimplexNoise.prototype.dot4 = function(g, x, y, z, w) {
-	return g[0] * x + g[1] * y + g[2] * z + g[3] * w;
-};
-
-SimplexNoise.prototype.noise = function(xin, yin) { 
-	var n0, n1, n2; // Noise contributions from the three corners 
-  // Skew the input space to determine which simplex cell we're in 
-	var F2 = 0.5 * (Math.sqrt(3.0) - 1.0); 
-	var s = (xin + yin) * F2; // Hairy factor for 2D 
-	var i = Math.floor(xin + s); 
-	var j = Math.floor(yin + s); 
-	var G2 = (3.0 - Math.sqrt(3.0)) / 6.0; 
-	var t = (i + j) * G2; 
-	var X0 = i - t; // Unskew the cell origin back to (x,y) space 
-	var Y0 = j - t; 
-	var x0 = xin - X0; // The x,y distances from the cell origin 
-	var y0 = yin - Y0; 
-  // For the 2D case, the simplex shape is an equilateral triangle. 
-  // Determine which simplex we are in. 
-	var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords 
-	if (x0 > y0) {i1 = 1; j1 = 0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1) 
-	else {i1 = 0; j1 = 1;}      // upper triangle, YX order: (0,0)->(0,1)->(1,1) 
-  // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and 
-  // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where 
-  // c = (3-sqrt(3))/6 
-	var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords 
-	var y1 = y0 - j1 + G2; 
-	var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords 
-	var y2 = y0 - 1.0 + 2.0 * G2; 
-  // Work out the hashed gradient indices of the three simplex corners 
-	var ii = i & 255; 
-	var jj = j & 255; 
-	var gi0 = this.perm[ii + this.perm[jj]] % 12; 
-	var gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12; 
-	var gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12; 
-  // Calculate the contribution from the three corners 
-	var t0 = 0.5 - x0 * x0 - y0 * y0; 
-	if (t0 < 0) n0 = 0.0; 
-	else { 
-		t0 *= t0; 
-		n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0);  // (x,y) of grad3 used for 2D gradient 
-	} 
-	var t1 = 0.5 - x1 * x1 - y1 * y1; 
-	if (t1 < 0) n1 = 0.0; 
-	else { 
-		t1 *= t1; 
-		n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1); 
-	}
-	var t2 = 0.5 - x2 * x2 - y2 * y2; 
-	if (t2 < 0) n2 = 0.0; 
-	else { 
-		t2 *= t2; 
-		n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2); 
-	} 
-  // Add contributions from each corner to get the final noise value. 
-  // The result is scaled to return values in the interval [-1,1]. 
-	return 70.0 * (n0 + n1 + n2); 
-};
-
-// 3D simplex noise 
-SimplexNoise.prototype.noise3d = function(xin, yin, zin) { 
-	var n0, n1, n2, n3; // Noise contributions from the four corners 
-  // Skew the input space to determine which simplex cell we're in 
-	var F3 = 1.0 / 3.0; 
-	var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D 
-	var i = Math.floor(xin + s); 
-	var j = Math.floor(yin + s); 
-	var k = Math.floor(zin + s); 
-	var G3 = 1.0 / 6.0; // Very nice and simple unskew factor, too 
-	var t = (i + j + k) * G3; 
-	var X0 = i - t; // Unskew the cell origin back to (x,y,z) space 
-	var Y0 = j - t; 
-	var Z0 = k - t; 
-	var x0 = xin - X0; // The x,y,z distances from the cell origin 
-	var y0 = yin - Y0; 
-	var z0 = zin - Z0; 
-  // For the 3D case, the simplex shape is a slightly irregular tetrahedron. 
-  // Determine which simplex we are in. 
-	var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords 
-	var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords 
-	if (x0 >= y0) { 
-		if (y0 >= z0) 
-      { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // X Y Z order 
-      else if (x0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1; } // X Z Y order 
-		else { i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1; } // Z X Y order 
-	} 
-	else { // x0<y0 
-		if (y0 < z0) { i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1; } // Z Y X order 
-    else if (x0 < z0) { i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1; } // Y Z X order 
-		else { i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // Y X Z order 
-	} 
-  // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), 
-  // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and 
-  // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where 
-  // c = 1/6.
-	var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords 
-	var y1 = y0 - j1 + G3; 
-	var z1 = z0 - k1 + G3; 
-	var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords 
-	var y2 = y0 - j2 + 2.0 * G3; 
-	var z2 = z0 - k2 + 2.0 * G3; 
-	var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords 
-	var y3 = y0 - 1.0 + 3.0 * G3; 
-	var z3 = z0 - 1.0 + 3.0 * G3; 
-  // Work out the hashed gradient indices of the four simplex corners 
-	var ii = i & 255; 
-	var jj = j & 255; 
-	var kk = k & 255; 
-	var gi0 = this.perm[ii + this.perm[jj + this.perm[kk]]] % 12; 
-	var gi1 = this.perm[ii + i1 + this.perm[jj + j1 + this.perm[kk + k1]]] % 12; 
-	var gi2 = this.perm[ii + i2 + this.perm[jj + j2 + this.perm[kk + k2]]] % 12; 
-	var gi3 = this.perm[ii + 1 + this.perm[jj + 1 + this.perm[kk + 1]]] % 12; 
-  // Calculate the contribution from the four corners 
-	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0; 
-	if (t0 < 0) n0 = 0.0; 
-	else { 
-		t0 *= t0; 
-		n0 = t0 * t0 * this.dot3(this.grad3[gi0], x0, y0, z0); 
-	}
-	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1; 
-	if (t1 < 0) n1 = 0.0; 
-	else { 
-		t1 *= t1; 
-		n1 = t1 * t1 * this.dot3(this.grad3[gi1], x1, y1, z1); 
-	} 
-	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2; 
-	if (t2 < 0) n2 = 0.0; 
-	else { 
-		t2 *= t2; 
-		n2 = t2 * t2 * this.dot3(this.grad3[gi2], x2, y2, z2); 
-	} 
-	var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3; 
-	if (t3 < 0) n3 = 0.0; 
-	else { 
-		t3 *= t3; 
-		n3 = t3 * t3 * this.dot3(this.grad3[gi3], x3, y3, z3); 
-	} 
-  // Add contributions from each corner to get the final noise value. 
-  // The result is scaled to stay just inside [-1,1] 
-	return 32.0 * (n0 + n1 + n2 + n3); 
-};
-
-// 4D simplex noise
-SimplexNoise.prototype.noise4d = function( x, y, z, w ) {
-	// For faster and easier lookups
-	var grad4 = this.grad4;
-	var simplex = this.simplex;
-	var perm = this.perm;
-	
-   // The skewing and unskewing factors are hairy again for the 4D case
-	var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
-	var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
-	var n0, n1, n2, n3, n4; // Noise contributions from the five corners
-   // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
-	var s = (x + y + z + w) * F4; // Factor for 4D skewing
-	var i = Math.floor(x + s);
-	var j = Math.floor(y + s);
-	var k = Math.floor(z + s);
-	var l = Math.floor(w + s);
-	var t = (i + j + k + l) * G4; // Factor for 4D unskewing
-	var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
-	var Y0 = j - t;
-	var Z0 = k - t;
-	var W0 = l - t;
-	var x0 = x - X0;  // The x,y,z,w distances from the cell origin
-	var y0 = y - Y0;
-	var z0 = z - Z0;
-	var w0 = w - W0;
-
-   // For the 4D case, the simplex is a 4D shape I won't even try to describe.
-   // To find out which of the 24 possible simplices we're in, we need to
-   // determine the magnitude ordering of x0, y0, z0 and w0.
-   // The method below is a good way of finding the ordering of x,y,z,w and
-   // then find the correct traversal order for the simplex we’re in.
-   // First, six pair-wise comparisons are performed between each possible pair
-   // of the four coordinates, and the results are used to add up binary bits
-   // for an integer index.
-	var c1 = (x0 > y0) ? 32 : 0;
-	var c2 = (x0 > z0) ? 16 : 0;
-	var c3 = (y0 > z0) ? 8 : 0;
-	var c4 = (x0 > w0) ? 4 : 0;
-	var c5 = (y0 > w0) ? 2 : 0;
-	var c6 = (z0 > w0) ? 1 : 0;
-	var c = c1 + c2 + c3 + c4 + c5 + c6;
-	var i1, j1, k1, l1; // The integer offsets for the second simplex corner
-	var i2, j2, k2, l2; // The integer offsets for the third simplex corner
-	var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
-   // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
-   // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
-   // impossible. Only the 24 indices which have non-zero entries make any sense.
-   // We use a thresholding to set the coordinates in turn from the largest magnitude.
-   // The number 3 in the "simplex" array is at the position of the largest coordinate.
-	i1 = simplex[c][0] >= 3 ? 1 : 0;
-	j1 = simplex[c][1] >= 3 ? 1 : 0;
-	k1 = simplex[c][2] >= 3 ? 1 : 0;
-	l1 = simplex[c][3] >= 3 ? 1 : 0;
-   // The number 2 in the "simplex" array is at the second largest coordinate.
-	i2 = simplex[c][0] >= 2 ? 1 : 0;
-	j2 = simplex[c][1] >= 2 ? 1 : 0;    k2 = simplex[c][2] >= 2 ? 1 : 0;
-	l2 = simplex[c][3] >= 2 ? 1 : 0;
-   // The number 1 in the "simplex" array is at the second smallest coordinate.
-	i3 = simplex[c][0] >= 1 ? 1 : 0;
-	j3 = simplex[c][1] >= 1 ? 1 : 0;
-	k3 = simplex[c][2] >= 1 ? 1 : 0;
-	l3 = simplex[c][3] >= 1 ? 1 : 0;
-   // The fifth corner has all coordinate offsets = 1, so no need to look that up.
-	var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
-	var y1 = y0 - j1 + G4;
-	var z1 = z0 - k1 + G4;
-	var w1 = w0 - l1 + G4;
-	var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
-	var y2 = y0 - j2 + 2.0 * G4;
-	var z2 = z0 - k2 + 2.0 * G4;
-	var w2 = w0 - l2 + 2.0 * G4;
-	var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
-	var y3 = y0 - j3 + 3.0 * G4;
-	var z3 = z0 - k3 + 3.0 * G4;
-	var w3 = w0 - l3 + 3.0 * G4;
-	var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
-	var y4 = y0 - 1.0 + 4.0 * G4;
-	var z4 = z0 - 1.0 + 4.0 * G4;
-	var w4 = w0 - 1.0 + 4.0 * G4;
-   // Work out the hashed gradient indices of the five simplex corners
-	var ii = i & 255;
-	var jj = j & 255;
-	var kk = k & 255;
-	var ll = l & 255;
-	var gi0 = perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32;
-	var gi1 = perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32;
-	var gi2 = perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32;
-	var gi3 = perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32;
-	var gi4 = perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32;
-   // Calculate the contribution from the five corners
-	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
-	if (t0 < 0) n0 = 0.0;
-	else {
-		t0 *= t0;
-		n0 = t0 * t0 * this.dot4(grad4[gi0], x0, y0, z0, w0);
-	}
-	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
-	if (t1 < 0) n1 = 0.0;
-	else {
-		t1 *= t1;
-		n1 = t1 * t1 * this.dot4(grad4[gi1], x1, y1, z1, w1);
-	}
-	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
-	if (t2 < 0) n2 = 0.0;
-	else {
-		t2 *= t2;
-		n2 = t2 * t2 * this.dot4(grad4[gi2], x2, y2, z2, w2);
-	}   var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
-	if (t3 < 0) n3 = 0.0;
-	else {
-		t3 *= t3;
-		n3 = t3 * t3 * this.dot4(grad4[gi3], x3, y3, z3, w3);
-	}
-	var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
-	if (t4 < 0) n4 = 0.0;
-	else {
-		t4 *= t4;
-		n4 = t4 * t4 * this.dot4(grad4[gi4], x4, y4, z4, w4);
-	}
-   // Sum up and scale the result to cover the range [-1,1]
-	return 27.0 * (n0 + n1 + n2 + n3 + n4);
-};

examples/js/TimelinerController.js → examples/js/animation/TimelinerController.js

@@ -3,7 +3,7 @@
  *
  * Timeliner GUI library (required to use this class):
  *
- * 		./libs/timeliner_gui.min.js
+ * 		../libs/timeliner_gui.min.js
  *
  * Source code:
  *
@@ -35,7 +35,7 @@ THREE.TimelinerController.prototype = {
 
 	constructor: THREE.TimelinerController,
 
-	init: function( timeliner ) {
+	init: function () {
 
 		var tracks = [],
 			trackInfo = this._trackInfo;
@@ -44,9 +44,8 @@ THREE.TimelinerController.prototype = {
 
 			var spec = trackInfo[ i ];
 
-			tracks.push( this._addTrack(
-					spec.type, spec.propertyPath,
-					spec.initialValue, spec.interpolation ) );
+			tracks.push( this._addTrack( spec.type, spec.propertyPath, spec.initialValue, spec.interpolation ) );
+
 		}
 
 		this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
@@ -54,7 +53,7 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	setDisplayTime: function( time ) {
+	setDisplayTime: function ( time ) {
 
 		this._action.time = time;
 		this._mixer.update( 0 );
@@ -63,25 +62,25 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	setDuration: function( duration ) {
+	setDuration: function ( duration ) {
 
 		this._clip.duration = duration;
 
 	},
 
-	getChannelNames: function() {
+	getChannelNames: function () {
 
 		return this._channelNames;
 
 	},
 
-	getChannelKeyTimes: function( channelName ) {
+	getChannelKeyTimes: function ( channelName ) {
 
 		return this._tracks[ channelName ].times;
 
 	},
 
-	setKeyframe: function( channelName, time ) {
+	setKeyframe: function ( channelName, time ) {
 
 		var track = this._tracks[ channelName ],
 			times = track.times,
@@ -106,8 +105,7 @@ THREE.TimelinerController.prototype = {
 
 			}
 
-			for ( var i = nValues - 1,
-					e = offset + stride - 1; i !== e; -- i ) {
+			for ( var i = nValues - 1, e = offset + stride - 1; i !== e; -- i ) {
 
 				values[ i ] = values[ i - stride ];
 
@@ -120,7 +118,7 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	delKeyframe: function( channelName, time ) {
+	delKeyframe: function ( channelName, time ) {
 
 		var track = this._tracks[ channelName ],
 			times = track.times,
@@ -159,7 +157,7 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	moveKeyframe: function( channelName, time, delta, moveRemaining ) {
+	moveKeyframe: function ( channelName, time, delta, moveRemaining ) {
 
 		var track = this._tracks[ channelName ],
 			times = track.times,
@@ -179,7 +177,7 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	serialize: function() {
+	serialize: function () {
 
 		var result = {
 				duration: this._clip.duration,
@@ -209,7 +207,7 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	deserialize: function( structs ) {
+	deserialize: function ( structs ) {
 
 		var names = this._channelNames,
 			tracks = this._tracks,
@@ -234,33 +232,29 @@ THREE.TimelinerController.prototype = {
 
 	},
 
-	_sort: function( track ) {
+	_sort: function ( track ) {
 
-		var times = track.times,
-			order = THREE.AnimationUtils.getKeyframeOrder( times );
+		var times = track.times, order = THREE.AnimationUtils.getKeyframeOrder( times );
 
-		this._setArray( times,
-				THREE.AnimationUtils.sortedArray( times, 1, order ) );
+		this._setArray( times, THREE.AnimationUtils.sortedArray( times, 1, order ) );
 
 		var values = track.values,
 			stride = track.getValueSize();
 
-		this._setArray( values,
-				THREE.AnimationUtils.sortedArray( values, stride, order ) );
+		this._setArray( values, THREE.AnimationUtils.sortedArray( values, stride, order ) );
 
 	},
 
-	_setArray: function( dst, src ) {
+	_setArray: function ( dst, src ) {
 
 		dst.length = 0;
 		dst.push.apply( dst, src );
 
 	},
 
-	_addTrack: function( type, prop, initialValue, interpolation ) {
+	_addTrack: function ( type, prop, initialValue, interpolation ) {
 
-		var track = new type(
-				prop, [ 0 ], initialValue, interpolation );
+		var track = new type( prop, [ 0 ], initialValue, interpolation );
 
 		// data must be in JS arrays so it can be resized
 		track.times = Array.prototype.slice.call( track.times );

examples/js/cameras/CinematicCamera.js

@@ -186,14 +186,14 @@ THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
 		scene.overrideMaterial = null;
 		renderer.setRenderTarget( this.postprocessing.rtTextureColor );
 		renderer.clear();
-		renderer.render( scene, camera );
+		renderer.render( scene, this );
 
 		// Render depth into texture
 
 		scene.overrideMaterial = this.materialDepth;
 		renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
 		renderer.clear();
-		renderer.render( scene, camera );
+		renderer.render( scene, this );
 
 		// Render bokeh composite
 

examples/js/controls/DragControls.js

@@ -21,7 +21,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 	var _intersection = new THREE.Vector3();
 	var _worldPosition = new THREE.Vector3();
 	var _inverseMatrix = new THREE.Matrix4();
-	
+
 	var _selected = null, _hovered = null;
 
 	//

examples/js/controls/TrackballControls.js

@@ -492,7 +492,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 	function touchstart( event ) {
 
 		if ( _this.enabled === false ) return;
-		
+
 		event.preventDefault();
 
 		switch ( event.touches.length ) {

examples/js/crossfade/gui.js

@@ -1,39 +0,0 @@
-var transitionParams = {
-	"useTexture": true,
-	"transition": 0.5,
-	"transitionSpeed": 2.0,
-	"texture": 5,
-	"loopTexture": true,
-	"animateTransition": true,
-	"textureThreshold": 0.3
-};
-
-function initGUI() {
-	
-	var gui = new dat.GUI();
-
-	gui.add( transitionParams, "useTexture" ).onChange( function( value ) {
-		
-		transition.useTexture( value );
-		
-	} );
-	
-	gui.add( transitionParams, 'loopTexture' );
-	
-	gui.add( transitionParams, 'texture', { Perlin: 0, Squares: 1, Cells: 2, Distort: 3, Gradient: 4, Radial: 5 } ).onChange( function( value ) {
-		
-		transition.setTexture( value );
-		
-	} ).listen();
-		
-	gui.add( transitionParams, "textureThreshold", 0, 1, 0.01 ).onChange( function( value ) {
-		
-		transition.setTextureThreshold( value );
-		
-	} );
-
-	gui.add( transitionParams, "animateTransition" );
-	gui.add( transitionParams, "transition", 0, 1, 0.01 ).listen();
-	gui.add( transitionParams, "transitionSpeed", 0.5, 5, 0.01 );
-	
-}

examples/js/crossfade/scenes.js

@@ -1,119 +0,0 @@
-function generateGeometry( objectType, numObjects ) {
-
-	function applyVertexColors( geometry, color ) {
-
-		var position = geometry.attributes.position;
-		var colors = [];
-
-		for ( var i = 0; i < position.count; i ++ ) {
-
-			colors.push( color.r, color.g, color.b );
-
-		}
-
-		geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-	}
-
-	var geometries = [];
-
-	var matrix = new THREE.Matrix4();
-	var position = new THREE.Vector3();
-	var rotation = new THREE.Euler();
-	var quaternion = new THREE.Quaternion();
-	var scale = new THREE.Vector3();
-	var color = new THREE.Color();
-
-	for ( var i = 0; i < numObjects; i ++ ) {
-
-		position.x = Math.random() * 10000 - 5000;
-		position.y = Math.random() * 6000 - 3000;
-		position.z = Math.random() * 8000 - 4000;
-
-		rotation.x = Math.random() * 2 * Math.PI;
-		rotation.y = Math.random() * 2 * Math.PI;
-		rotation.z = Math.random() * 2 * Math.PI;
-		quaternion.setFromEuler( rotation, false );
-
-		scale.x = Math.random() * 200 + 100;
-
-		var geometry;
-
-		if ( objectType === 'cube' ) {
-
-			geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-			geometry = geometry.toNonIndexed(); // merging needs consistent buffer geometries
-			scale.y = Math.random() * 200 + 100;
-			scale.z = Math.random() * 200 + 100;
-			color.setRGB( 0, 0, 0.1 + 0.9 * Math.random() );
-
-		} else if ( objectType === 'sphere' ) {
-
-			geometry = new THREE.IcosahedronBufferGeometry( 1, 1 );
-			scale.y = scale.z = scale.x;
-			color.setRGB( 0.1 + 0.9 * Math.random(), 0, 0 );
-
-		}
-
-		// give the geom's vertices a random color, to be displayed
-		applyVertexColors( geometry, color );
-
-		matrix.compose( position, quaternion, scale );
-		geometry.applyMatrix( matrix );
-
-		geometries.push( geometry );
-
-	}
-
-	return THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
-
-}
-
-function Scene( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
-
-	this.clearColor = clearColor;
-
-	this.camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
-	this.camera.position.z = cameraZ;
-
-	// Setup scene
-	this.scene = new THREE.Scene();
-	this.scene.add( new THREE.AmbientLight( 0x555555 ) );
-
-	var light = new THREE.SpotLight( 0xffffff, 1.5 );
-	light.position.set( 0, 500, 2000 );
-	this.scene.add( light );
-
-	this.rotationSpeed = rotationSpeed;
-
-	var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
-	this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
-	this.scene.add( this.mesh );
-
-	var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-	this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
-
-	this.render = function ( delta, rtt ) {
-
-		this.mesh.rotation.x += delta * this.rotationSpeed.x;
-		this.mesh.rotation.y += delta * this.rotationSpeed.y;
-		this.mesh.rotation.z += delta * this.rotationSpeed.z;
-
-		renderer.setClearColor( this.clearColor );
-
-		if ( rtt ) {
-
-			renderer.setRenderTarget( this.fbo );
-			renderer.clear();
-			renderer.render( this.scene, this.camera );
-
-		} else {
-
-			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
-
-		}
-
-	};
-
-}

examples/js/crossfade/transition.js

@@ -1,168 +0,0 @@
-function Transition( sceneA, sceneB ) {
-
-	this.scene = new THREE.Scene();
-
-	this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
-
-	this.textures = [];
-
-	var loader = new THREE.TextureLoader();
-
-	for ( var i = 0; i < 6; i ++ )
-		this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
-
-	this.quadmaterial = new THREE.ShaderMaterial( {
-
-		uniforms: {
-
-			tDiffuse1: {
-				value: null
-			},
-			tDiffuse2: {
-				value: null
-			},
-			mixRatio: {
-				value: 0.0
-			},
-			threshold: {
-				value: 0.1
-			},
-			useTexture: {
-				value: 1
-			},
-			tMixTexture: {
-				value: this.textures[ 0 ]
-			}
-		},
-		vertexShader: [
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-			"vUv = vec2( uv.x, uv.y );",
-			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-			"}"
-
-		].join( "\n" ),
-		fragmentShader: [
-
-			"uniform float mixRatio;",
-
-			"uniform sampler2D tDiffuse1;",
-			"uniform sampler2D tDiffuse2;",
-			"uniform sampler2D tMixTexture;",
-
-			"uniform int useTexture;",
-			"uniform float threshold;",
-
-			"varying vec2 vUv;",
-
-			"void main() {",
-
-			"	vec4 texel1 = texture2D( tDiffuse1, vUv );",
-			"	vec4 texel2 = texture2D( tDiffuse2, vUv );",
-
-			"	if (useTexture==1) {",
-
-			"		vec4 transitionTexel = texture2D( tMixTexture, vUv );",
-			"		float r = mixRatio * (1.0 + threshold * 2.0) - threshold;",
-			"		float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);",
-
-			"		gl_FragColor = mix( texel1, texel2, mixf );",
-
-			"	} else {",
-
-			"		gl_FragColor = mix( texel2, texel1, mixRatio );",
-
-			"	}",
-
-			"}"
-
-		].join( "\n" )
-
-	} );
-
-	var quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
-
-	this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
-	this.scene.add( this.quad );
-
-	// Link both scenes and their FBOs
-	this.sceneA = sceneA;
-	this.sceneB = sceneB;
-
-	this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo.texture;
-	this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo.texture;
-
-	this.needChange = false;
-
-	this.setTextureThreshold = function ( value ) {
-
-		this.quadmaterial.uniforms.threshold.value = value;
-
-	};
-
-	this.useTexture = function ( value ) {
-
-		this.quadmaterial.uniforms.useTexture.value = value ? 1 : 0;
-
-	};
-
-	this.setTexture = function ( i ) {
-
-		this.quadmaterial.uniforms.tMixTexture.value = this.textures[ i ];
-
-	};
-
-	this.render = function ( delta ) {
-
-		// Transition animation
-		if ( transitionParams.animateTransition ) {
-
-			var t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
-			transitionParams.transition = THREE.Math.smoothstep( t, 0.3, 0.7 );
-
-			// Change the current alpha texture after each transition
-			if ( transitionParams.loopTexture && ( transitionParams.transition == 0 || transitionParams.transition == 1 ) ) {
-
-				if ( this.needChange ) {
-
-					transitionParams.texture = ( transitionParams.texture + 1 ) % this.textures.length;
-					this.quadmaterial.uniforms.tMixTexture.value = this.textures[ transitionParams.texture ];
-					this.needChange = false;
-
-				}
-
-			} else
-				this.needChange = true;
-
-		}
-
-		this.quadmaterial.uniforms.mixRatio.value = transitionParams.transition;
-
-		// Prevent render both scenes when it's not necessary
-		if ( transitionParams.transition == 0 ) {
-
-			this.sceneB.render( delta, false );
-
-		} else if ( transitionParams.transition == 1 ) {
-
-			this.sceneA.render( delta, false );
-
-		} else {
-
-			// When 0<transition<1 render transition between two scenes
-
-			this.sceneA.render( delta, true );
-			this.sceneB.render( delta, true );
-			renderer.setRenderTarget( null );
-			renderer.clear();
-			renderer.render( this.scene, this.cameraOrtho );
-
-		}
-
-	};
-
-}

examples/js/CurveExtras.js → examples/js/curves/CurveExtras.js

@@ -11,7 +11,7 @@
  * http://prideout.net/blog/?p=44
  */
 
-( function ( Curves ) {
+THREE.Curves = ( function () {
 
 	// GrannyKnot
 
@@ -405,21 +405,21 @@
 
 	};
 
-	// 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 || {} );
+	return {
+		GrannyKnot: GrannyKnot,
+		HeartCurve: HeartCurve,
+		VivianiCurve: VivianiCurve,
+		KnotCurve: KnotCurve,
+		HelixCurve: HelixCurve,
+		TrefoilKnot: TrefoilKnot,
+		TorusKnot: TorusKnot,
+		CinquefoilKnot: CinquefoilKnot,
+		TrefoilPolynomialKnot: TrefoilPolynomialKnot,
+		FigureEightPolynomialKnot: FigureEightPolynomialKnot,
+		DecoratedTorusKnot4a: DecoratedTorusKnot4a,
+		DecoratedTorusKnot4b: DecoratedTorusKnot4b,
+		DecoratedTorusKnot5a: DecoratedTorusKnot5a,
+		DecoratedTorusKnot5c: DecoratedTorusKnot5c
+	};
+
+} )();

examples/js/curves/NURBSUtils.js

@@ -22,7 +22,7 @@ THREE.NURBSUtils = {
 
 	returns the span
 	*/
-	findSpan: function( p,  u,  U ) {
+	findSpan: function ( p, u, U ) {
 
 		var n = U.length - p - 1;
 
@@ -73,7 +73,7 @@ THREE.NURBSUtils = {
 
 	returns array[p+1] with basis functions values.
 	*/
-	calcBasisFunctions: function( span, u, p, U ) {
+	calcBasisFunctions: function ( span, u, p, U ) {
 
 		var N = [];
 		var left = [];
@@ -116,7 +116,7 @@ THREE.NURBSUtils = {
 
 	returns point for given u
 	*/
-	calcBSplinePoint: function( p, U, P, u ) {
+	calcBSplinePoint: function ( p, U, P, u ) {
 
 		var span = this.findSpan( p, u, U );
 		var N = this.calcBasisFunctions( span, u, p, U );
@@ -150,7 +150,7 @@ THREE.NURBSUtils = {
 
 	returns array[n+1][p+1] with basis functions derivatives
 	*/
-	calcBasisFunctionDerivatives: function( span,  u,  p,  n,  U ) {
+	calcBasisFunctionDerivatives: function ( span, u, p, n, U ) {
 
 		var zeroArr = [];
 		for ( var i = 0; i <= p; ++ i )
@@ -225,7 +225,7 @@ THREE.NURBSUtils = {
 				}
 
 				var j1 = ( rk >= - 1 ) ? 1 : - rk;
-				var j2 = ( r - 1 <= pk ) ? k - 1 :  p - r;
+				var j2 = ( r - 1 <= pk ) ? k - 1 : p - r;
 
 				for ( var j = j1; j <= j2; ++ j ) {
 
@@ -280,7 +280,7 @@ THREE.NURBSUtils = {
 
 		returns array[d+1] with derivatives
 		*/
-	calcBSplineDerivatives: function( p,  U,  P,  u,  nd ) {
+	calcBSplineDerivatives: function ( p, U, P, u, nd ) {
 
 		var du = nd < p ? nd : p;
 		var CK = [];
@@ -330,7 +330,7 @@ THREE.NURBSUtils = {
 
 	returns k!/(i!(k-i)!)
 	*/
-	calcKoverI: function( k, i ) {
+	calcKoverI: function ( k, i ) {
 
 		var nom = 1;
 
@@ -412,7 +412,7 @@ THREE.NURBSUtils = {
 
 	returns array with derivatives.
 	*/
-	calcNURBSDerivatives: function( p,  U,  P,  u,  nd ) {
+	calcNURBSDerivatives: function ( p, U, P, u, nd ) {
 
 		var Pders = this.calcBSplineDerivatives( p, U, P, u, nd );
 		return this.calcRationalCurveDerivatives( Pders );

examples/js/effects/AnaglyphEffect.js

@@ -12,9 +12,9 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 	this.colorMatrixLeft = new THREE.Matrix3().fromArray( [
 
-			1.0671679973602295, 	-0.0016435992438346148,		 0.0001777536963345483, // r out
-			-0.028107794001698494,	-0.00019593400065787137,	-0.0002875397040043026, // g out
-			-0.04279090091586113,	 0.000015809757314855233,	-0.00024287120322696865 // b out
+		1.0671679973602295, - 0.0016435992438346148, 0.0001777536963345483, // r out
+		- 0.028107794001698494, - 0.00019593400065787137, - 0.0002875397040043026, // g out
+		- 0.04279090091586113, 0.000015809757314855233, - 0.00024287120322696865 // b out
 
 	] );
 
@@ -22,9 +22,9 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 	this.colorMatrixRight = new THREE.Matrix3().fromArray( [
 
-			-0.0355340838432312,	-0.06440307199954987,		 0.018319187685847282,	// r out
-			-0.10269022732973099,	 0.8079727292060852,		-0.04835830628871918,	// g out
-			0.0001224992738571018,	-0.009558862075209618,		 0.567823588848114		// b out
+		- 0.0355340838432312, - 0.06440307199954987, 0.018319187685847282, // r out
+		- 0.10269022732973099, 0.8079727292060852, - 0.04835830628871918, // g out
+		0.0001224992738571018, - 0.009558862075209618, 0.567823588848114 // b out
 
 	] );
 

examples/js/effects/AsciiEffect.js

@@ -159,11 +159,13 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	if ( strResolution == "low" ) {
 
 		switch ( iScale ) {
+
 			case 1 : fLetterSpacing = - 1; break;
 			case 2 :
 			case 3 : fLetterSpacing = - 2.1; break;
 			case 4 : fLetterSpacing = - 3.1; break;
 			case 5 : fLetterSpacing = - 4.15; break;
+
 		}
 
 	}
@@ -171,11 +173,13 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	if ( strResolution == "medium" ) {
 
 		switch ( iScale ) {
+
 			case 1 : fLetterSpacing = 0; break;
 			case 2 : fLetterSpacing = - 1; break;
 			case 3 : fLetterSpacing = - 1.04; break;
 			case 4 :
 			case 5 : fLetterSpacing = - 2.1; break;
+
 		}
 
 	}
@@ -183,11 +187,13 @@ THREE.AsciiEffect = function ( renderer, charSet, options ) {
 	if ( strResolution == "high" ) {
 
 		switch ( iScale ) {
+
 			case 1 :
 			case 2 : fLetterSpacing = 0; break;
 			case 3 :
 			case 4 :
 			case 5 : fLetterSpacing = - 1; break;
+
 		}
 
 	}

examples/js/effects/OutlineEffect.js

@@ -108,8 +108,6 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 	var vertexShaderChunk = [
 
-		"#include <fog_pars_vertex>",
-
 		"uniform float outlineThickness;",
 
 		"vec4 calculateOutline( vec4 pos, vec3 objectNormal, vec4 skinned ) {",
@@ -175,7 +173,6 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 		var shaderID = shaderIDs[ originalMaterial.type ];
 		var originalUniforms, originalVertexShader;
-		var outlineParameters = originalMaterial.userData.outlineParameters;
 
 		if ( shaderID !== undefined ) {
 
@@ -212,15 +209,15 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 		var uniforms = Object.assign( {}, originalUniforms, uniformsChunk );
 
 		var vertexShader = originalVertexShader
-					// put vertexShaderChunk right before "void main() {...}"
-					.replace( /void\s+main\s*\(\s*\)/, vertexShaderChunk + '\nvoid main()' )
-					// put vertexShaderChunk2 the end of "void main() {...}"
-					// Note: here assums originalVertexShader ends with "}" of "void main() {...}"
-					.replace( /\}\s*$/, vertexShaderChunk2 + '\n}' )
-					// remove any light related lines
-					// Note: here is very sensitive to originalVertexShader
-					// TODO: consider safer way
-					.replace( /#include\s+<[\w_]*light[\w_]*>/g, '' );
+			// put vertexShaderChunk right before "void main() {...}"
+			.replace( /void\s+main\s*\(\s*\)/, vertexShaderChunk + '\nvoid main()' )
+			// put vertexShaderChunk2 the end of "void main() {...}"
+			// Note: here assums originalVertexShader ends with "}" of "void main() {...}"
+			.replace( /\}\s*$/, vertexShaderChunk2 + '\n}' )
+			// remove any light related lines
+			// Note: here is very sensitive to originalVertexShader
+			// TODO: consider safer way
+			.replace( /#include\s+<[\w_]*light[\w_]*>/g, '' );
 
 		var defines = {};
 
@@ -322,7 +319,7 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 	}
 
-	function onBeforeRender( renderer, scene, camera, geometry, material, group ) {
+	function onBeforeRender( renderer, scene, camera, geometry, material ) {
 
 		var originalMaterial = originalMaterials[ material.uuid ];
 
@@ -418,7 +415,7 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 			if ( cache[ key ].used === false ) {
 
-				cache[ key ].count++;
+				cache[ key ].count ++;
 
 				if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) {
 

examples/js/exporters/GLTFExporter.js

@@ -1740,7 +1740,12 @@ THREE.GLTFExporter.prototype = {
 
 			} else {
 
-				object.updateMatrix();
+				if ( object.matrixAutoUpdate ) {
+
+					object.updateMatrix();
+
+				}
+
 				if ( ! equalArray( object.matrix.elements, [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] ) ) {
 
 					gltfNode.matrix = object.matrix.elements;

examples/js/geometries/BoxLineGeometry.js

@@ -28,10 +28,10 @@ THREE.BoxLineGeometry = function ( width, height, depth, widthSegments, heightSe
 
 	for ( var i = 0; i <= widthSegments; i ++ ) {
 
-		vertices.push( x, - heightHalf, - depthHalf, x,   heightHalf, - depthHalf );
-		vertices.push( x,   heightHalf, - depthHalf, x,   heightHalf,   depthHalf );
-		vertices.push( x,   heightHalf,   depthHalf, x, - heightHalf,   depthHalf );
-		vertices.push( x, - heightHalf,   depthHalf, x, - heightHalf, - depthHalf );
+		vertices.push( x, - heightHalf, - depthHalf, x, heightHalf, - depthHalf );
+		vertices.push( x, heightHalf, - depthHalf, x, heightHalf, depthHalf );
+		vertices.push( x, heightHalf, depthHalf, x, - heightHalf, depthHalf );
+		vertices.push( x, - heightHalf, depthHalf, x, - heightHalf, - depthHalf );
 
 		x += segmentWidth;
 
@@ -39,10 +39,10 @@ THREE.BoxLineGeometry = function ( width, height, depth, widthSegments, heightSe
 
 	for ( var i = 0; i <= heightSegments; i ++ ) {
 
-		vertices.push( - widthHalf, y, - depthHalf,   widthHalf, y, - depthHalf );
-		vertices.push(   widthHalf, y, - depthHalf,   widthHalf, y,   depthHalf );
-		vertices.push(   widthHalf, y,   depthHalf, - widthHalf, y,   depthHalf );
-		vertices.push( - widthHalf, y,   depthHalf, - widthHalf, y, - depthHalf );
+		vertices.push( - widthHalf, y, - depthHalf, widthHalf, y, - depthHalf );
+		vertices.push( widthHalf, y, - depthHalf, widthHalf, y, depthHalf );
+		vertices.push( widthHalf, y, depthHalf, - widthHalf, y, depthHalf );
+		vertices.push( - widthHalf, y, depthHalf, - widthHalf, y, - depthHalf );
 
 		y += segmentHeight;
 
@@ -50,10 +50,10 @@ THREE.BoxLineGeometry = function ( width, height, depth, widthSegments, heightSe
 
 	for ( var i = 0; i <= depthSegments; i ++ ) {
 
-		vertices.push( - widthHalf, - heightHalf, z, - widthHalf,   heightHalf, z );
-		vertices.push( - widthHalf,   heightHalf, z,   widthHalf,   heightHalf, z );
-		vertices.push(   widthHalf,   heightHalf, z,   widthHalf, - heightHalf, z );
-		vertices.push(   widthHalf, - heightHalf, z, - widthHalf, - heightHalf, z );
+		vertices.push( - widthHalf, - heightHalf, z, - widthHalf, heightHalf, z );
+		vertices.push( - widthHalf, heightHalf, z, widthHalf, heightHalf, z );
+		vertices.push( widthHalf, heightHalf, z, widthHalf, - heightHalf, z );
+		vertices.push( widthHalf, - heightHalf, z, - widthHalf, - heightHalf, z );
 
 		z += segmentDepth;
 
@@ -61,7 +61,7 @@ THREE.BoxLineGeometry = function ( width, height, depth, widthSegments, heightSe
 
 	this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-}
+};
 
 THREE.BoxLineGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
 THREE.BoxLineGeometry.prototype.constructor = THREE.BoxLineGeometry;

examples/js/geometries/ConvexGeometry.js

@@ -2,80 +2,69 @@
  * @author Mugen87 / https://github.com/Mugen87
  */
 
-( function () {
+// ConvexGeometry
 
-	// ConvexGeometry
+THREE.ConvexGeometry = function ( points ) {
 
-	function ConvexGeometry( points ) {
+	THREE.Geometry.call( this );
 
-		THREE.Geometry.call( this );
+	this.fromBufferGeometry( new THREE.ConvexBufferGeometry( points ) );
+	this.mergeVertices();
 
-		this.fromBufferGeometry( new ConvexBufferGeometry( points ) );
-		this.mergeVertices();
+};
 
-	}
-
-	ConvexGeometry.prototype = Object.create( THREE.Geometry.prototype );
-	ConvexGeometry.prototype.constructor = ConvexGeometry;
-
-	// ConvexBufferGeometry
-
-	function ConvexBufferGeometry( points ) {
+THREE.ConvexGeometry.prototype = Object.create( THREE.Geometry.prototype );
+THREE.ConvexGeometry.prototype.constructor = THREE.ConvexGeometry;
 
-		THREE.BufferGeometry.call( this );
+// ConvexBufferGeometry
 
-		// buffers
+THREE.ConvexBufferGeometry = function ( points ) {
 
-		var vertices = [];
-		var normals = [];
+	THREE.BufferGeometry.call( this );
 
-		// execute QuickHull
+	// buffers
 
-		if ( THREE.QuickHull === undefined ) {
+	var vertices = [];
+	var normals = [];
 
-			console.error( 'THREE.ConvexBufferGeometry: ConvexBufferGeometry relies on THREE.QuickHull' );
+	if ( THREE.ConvexHull === undefined ) {
 
-		}
+		console.error( 'THREE.ConvexBufferGeometry: ConvexBufferGeometry relies on THREE.ConvexHull' );
 
-		var quickHull = new THREE.QuickHull().setFromPoints( points );
-
-		// generate vertices and normals
-
-		var faces = quickHull.faces;
+	}
 
-		for ( var i = 0; i < faces.length; i ++ ) {
+	var convexHull = new THREE.ConvexHull().setFromPoints( points );
 
-			var face = faces[ i ];
-			var edge = face.edge;
+	// generate vertices and normals
 
-			// we move along a doubly-connected edge list to access all face points (see HalfEdge docs)
+	var faces = convexHull.faces;
 
-			do {
+	for ( var i = 0; i < faces.length; i ++ ) {
 
-				var point = edge.head().point;
+		var face = faces[ i ];
+		var edge = face.edge;
 
-				vertices.push( point.x, point.y, point.z );
-				normals.push( face.normal.x, face.normal.y, face.normal.z );
+		// we move along a doubly-connected edge list to access all face points (see HalfEdge docs)
 
-				edge = edge.next;
+		do {
 
-			} while ( edge !== face.edge );
+			var point = edge.head().point;
 
-		}
+			vertices.push( point.x, point.y, point.z );
+			normals.push( face.normal.x, face.normal.y, face.normal.z );
 
-		// build geometry
+			edge = edge.next;
 
-		this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-		this.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+		} while ( edge !== face.edge );
 
 	}
 
-	ConvexBufferGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
-	ConvexBufferGeometry.prototype.constructor = ConvexBufferGeometry;
+	// build geometry
 
-	// export
+	this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+	this.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
 
-	THREE.ConvexGeometry = ConvexGeometry;
-	THREE.ConvexBufferGeometry = ConvexBufferGeometry;
+};
 
-} )();
+THREE.ConvexBufferGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
+THREE.ConvexBufferGeometry.prototype.constructor = THREE.ConvexBufferGeometry;

examples/js/geometries/DecalGeometry.js

@@ -16,342 +16,334 @@
  *
  */
 
-( function () {
+THREE.DecalGeometry = function ( mesh, position, orientation, size ) {
 
-	function DecalGeometry( mesh, position, orientation, size ) {
+	THREE.BufferGeometry.call( this );
 
-		THREE.BufferGeometry.call( this );
+	// buffers
 
-		// buffers
+	var vertices = [];
+	var normals = [];
+	var uvs = [];
 
-		var vertices = [];
-		var normals = [];
-		var uvs = [];
+	// helpers
 
-		// helpers
+	var plane = new THREE.Vector3();
 
-		var plane = new THREE.Vector3();
+	// this matrix represents the transformation of the decal projector
 
-		// this matrix represents the transformation of the decal projector
+	var projectorMatrix = new THREE.Matrix4();
+	projectorMatrix.makeRotationFromEuler( orientation );
+	projectorMatrix.setPosition( position );
 
-		var projectorMatrix = new THREE.Matrix4();
-		projectorMatrix.makeRotationFromEuler( orientation );
-		projectorMatrix.setPosition( position );
+	var projectorMatrixInverse = new THREE.Matrix4().getInverse( projectorMatrix );
 
-		var projectorMatrixInverse = new THREE.Matrix4().getInverse( projectorMatrix );
+	// generate buffers
 
-		// generate buffers
+	generate();
 
-		generate();
+	// build geometry
 
-		// build geometry
+	this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+	this.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+	this.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
 
-		this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-		this.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
-		this.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+	function generate() {
 
-		function generate() {
+		var i;
+		var geometry = new THREE.BufferGeometry();
+		var decalVertices = [];
 
-			var i;
-			var geometry = new THREE.BufferGeometry();
-			var decalVertices = [];
+		var vertex = new THREE.Vector3();
+		var normal = new THREE.Vector3();
 
-			var vertex = new THREE.Vector3();
-			var normal = new THREE.Vector3();
+		// handle different geometry types
 
-			// handle different geometry types
+		if ( mesh.geometry.isGeometry ) {
 
-			if ( mesh.geometry.isGeometry ) {
+			geometry.fromGeometry( mesh.geometry );
 
-				geometry.fromGeometry( mesh.geometry );
+		} else {
 
-			} else {
+			geometry.copy( mesh.geometry );
 
-				geometry.copy( mesh.geometry );
-
-			}
+		}
 
-			var positionAttribute = geometry.attributes.position;
-			var normalAttribute = geometry.attributes.normal;
+		var positionAttribute = geometry.attributes.position;
+		var normalAttribute = geometry.attributes.normal;
 
-			// first, create an array of 'DecalVertex' objects
-			// three consecutive 'DecalVertex' objects represent a single face
-			//
-			// this data structure will be later used to perform the clipping
+		// first, create an array of 'DecalVertex' objects
+		// three consecutive 'DecalVertex' objects represent a single face
+		//
+		// this data structure will be later used to perform the clipping
 
-			if ( geometry.index !== null ) {
+		if ( geometry.index !== null ) {
 
-				// indexed BufferGeometry
+			// indexed BufferGeometry
 
-				var index = geometry.index;
+			var index = geometry.index;
 
-				for ( i = 0; i < index.count; i ++ ) {
+			for ( i = 0; i < index.count; i ++ ) {
 
-					vertex.fromBufferAttribute( positionAttribute, index.getX( i ) );
-					normal.fromBufferAttribute( normalAttribute, index.getX( i ) );
+				vertex.fromBufferAttribute( positionAttribute, index.getX( i ) );
+				normal.fromBufferAttribute( normalAttribute, index.getX( i ) );
 
-					pushDecalVertex( decalVertices, vertex, normal );
+				pushDecalVertex( decalVertices, vertex, normal );
 
-				}
-
-			} else {
+			}
 
-				// non-indexed BufferGeometry
+		} else {
 
-				for ( i = 0; i < positionAttribute.count; i ++ ) {
+			// non-indexed BufferGeometry
 
-					vertex.fromBufferAttribute( positionAttribute, i );
-					normal.fromBufferAttribute( normalAttribute, i );
+			for ( i = 0; i < positionAttribute.count; i ++ ) {
 
-					pushDecalVertex( decalVertices, vertex, normal );
+				vertex.fromBufferAttribute( positionAttribute, i );
+				normal.fromBufferAttribute( normalAttribute, i );
 
-				}
+				pushDecalVertex( decalVertices, vertex, normal );
 
 			}
 
-			// second, clip the geometry so that it doesn't extend out from the projector
-
-			decalVertices = clipGeometry( decalVertices, plane.set( 1, 0, 0 ) );
-			decalVertices = clipGeometry( decalVertices, plane.set( - 1, 0, 0 ) );
-			decalVertices = clipGeometry( decalVertices, plane.set( 0, 1, 0 ) );
-			decalVertices = clipGeometry( decalVertices, plane.set( 0, - 1, 0 ) );
-			decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, 1 ) );
-			decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, - 1 ) );
-
-			// third, generate final vertices, normals and uvs
-
-			for ( i = 0; i < decalVertices.length; i ++ ) {
-
-				var decalVertex = decalVertices[ i ];
-
-				// create texture coordinates (we are still in projector space)
+		}
 
-				uvs.push(
-					0.5 + ( decalVertex.position.x / size.x ),
-					0.5 + ( decalVertex.position.y / size.y )
-				);
+		// second, clip the geometry so that it doesn't extend out from the projector
 
-				// transform the vertex back to world space
+		decalVertices = clipGeometry( decalVertices, plane.set( 1, 0, 0 ) );
+		decalVertices = clipGeometry( decalVertices, plane.set( - 1, 0, 0 ) );
+		decalVertices = clipGeometry( decalVertices, plane.set( 0, 1, 0 ) );
+		decalVertices = clipGeometry( decalVertices, plane.set( 0, - 1, 0 ) );
+		decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, 1 ) );
+		decalVertices = clipGeometry( decalVertices, plane.set( 0, 0, - 1 ) );
 
-				decalVertex.position.applyMatrix4( projectorMatrix );
+		// third, generate final vertices, normals and uvs
 
-				// now create vertex and normal buffer data
+		for ( i = 0; i < decalVertices.length; i ++ ) {
 
-				vertices.push( decalVertex.position.x, decalVertex.position.y, decalVertex.position.z );
-				normals.push( decalVertex.normal.x, decalVertex.normal.y, decalVertex.normal.z );
+			var decalVertex = decalVertices[ i ];
 
-			}
+			// create texture coordinates (we are still in projector space)
 
-		}
+			uvs.push(
+				0.5 + ( decalVertex.position.x / size.x ),
+				0.5 + ( decalVertex.position.y / size.y )
+			);
 
-		function pushDecalVertex( decalVertices, vertex, normal ) {
+			// transform the vertex back to world space
 
-			// transform the vertex to world space, then to projector space
+			decalVertex.position.applyMatrix4( projectorMatrix );
 
-			vertex.applyMatrix4( mesh.matrixWorld );
-			vertex.applyMatrix4( projectorMatrixInverse );
+			// now create vertex and normal buffer data
 
-			decalVertices.push( new DecalVertex( vertex.clone(), normal.clone() ) );
+			vertices.push( decalVertex.position.x, decalVertex.position.y, decalVertex.position.z );
+			normals.push( decalVertex.normal.x, decalVertex.normal.y, decalVertex.normal.z );
 
 		}
 
-		function clipGeometry( inVertices, plane ) {
+	}
 
-			var outVertices = [];
+	function pushDecalVertex( decalVertices, vertex, normal ) {
 
-			var s = 0.5 * Math.abs( size.dot( plane ) );
+		// transform the vertex to world space, then to projector space
 
-			// a single iteration clips one face,
-			// which consists of three consecutive 'DecalVertex' objects
+		vertex.applyMatrix4( mesh.matrixWorld );
+		vertex.applyMatrix4( projectorMatrixInverse );
 
-			for ( var i = 0; i < inVertices.length; i += 3 ) {
+		decalVertices.push( new THREE.DecalVertex( vertex.clone(), normal.clone() ) );
 
-				var v1Out, v2Out, v3Out, total = 0;
-				var nV1, nV2, nV3, nV4;
+	}
 
-				var d1 = inVertices[ i + 0 ].position.dot( plane ) - s;
-				var d2 = inVertices[ i + 1 ].position.dot( plane ) - s;
-				var d3 = inVertices[ i + 2 ].position.dot( plane ) - s;
+	function clipGeometry( inVertices, plane ) {
 
-				v1Out = d1 > 0;
-				v2Out = d2 > 0;
-				v3Out = d3 > 0;
+		var outVertices = [];
 
-				// calculate, how many vertices of the face lie outside of the clipping plane
+		var s = 0.5 * Math.abs( size.dot( plane ) );
 
-				total = ( v1Out ? 1 : 0 ) + ( v2Out ? 1 : 0 ) + ( v3Out ? 1 : 0 );
+		// a single iteration clips one face,
+		// which consists of three consecutive 'DecalVertex' objects
 
-				switch ( total ) {
+		for ( var i = 0; i < inVertices.length; i += 3 ) {
 
-					case 0: {
+			var v1Out, v2Out, v3Out, total = 0;
+			var nV1, nV2, nV3, nV4;
 
-						// the entire face lies inside of the plane, no clipping needed
+			var d1 = inVertices[ i + 0 ].position.dot( plane ) - s;
+			var d2 = inVertices[ i + 1 ].position.dot( plane ) - s;
+			var d3 = inVertices[ i + 2 ].position.dot( plane ) - s;
 
-						outVertices.push( inVertices[ i ] );
-						outVertices.push( inVertices[ i + 1 ] );
-						outVertices.push( inVertices[ i + 2 ] );
-						break;
+			v1Out = d1 > 0;
+			v2Out = d2 > 0;
+			v3Out = d3 > 0;
 
-					}
+			// calculate, how many vertices of the face lie outside of the clipping plane
 
-					case 1: {
+			total = ( v1Out ? 1 : 0 ) + ( v2Out ? 1 : 0 ) + ( v3Out ? 1 : 0 );
 
-						// one vertex lies outside of the plane, perform clipping
+			switch ( total ) {
 
-						if ( v1Out ) {
+				case 0: {
 
-							nV1 = inVertices[ i + 1 ];
-							nV2 = inVertices[ i + 2 ];
-							nV3 = clip( inVertices[ i ], nV1, plane, s );
-							nV4 = clip( inVertices[ i ], nV2, plane, s );
+					// the entire face lies inside of the plane, no clipping needed
 
-						}
+					outVertices.push( inVertices[ i ] );
+					outVertices.push( inVertices[ i + 1 ] );
+					outVertices.push( inVertices[ i + 2 ] );
+					break;
 
-						if ( v2Out ) {
+				}
 
-							nV1 = inVertices[ i ];
-							nV2 = inVertices[ i + 2 ];
-							nV3 = clip( inVertices[ i + 1 ], nV1, plane, s );
-							nV4 = clip( inVertices[ i + 1 ], nV2, plane, s );
+				case 1: {
 
-							outVertices.push( nV3 );
-							outVertices.push( nV2.clone() );
-							outVertices.push( nV1.clone() );
+					// one vertex lies outside of the plane, perform clipping
 
-							outVertices.push( nV2.clone() );
-							outVertices.push( nV3.clone() );
-							outVertices.push( nV4 );
-							break;
+					if ( v1Out ) {
 
-						}
+						nV1 = inVertices[ i + 1 ];
+						nV2 = inVertices[ i + 2 ];
+						nV3 = clip( inVertices[ i ], nV1, plane, s );
+						nV4 = clip( inVertices[ i ], nV2, plane, s );
 
-						if ( v3Out ) {
+					}
 
-							nV1 = inVertices[ i ];
-							nV2 = inVertices[ i + 1 ];
-							nV3 = clip( inVertices[ i + 2 ], nV1, plane, s );
-							nV4 = clip( inVertices[ i + 2 ], nV2, plane, s );
+					if ( v2Out ) {
 
-						}
+						nV1 = inVertices[ i ];
+						nV2 = inVertices[ i + 2 ];
+						nV3 = clip( inVertices[ i + 1 ], nV1, plane, s );
+						nV4 = clip( inVertices[ i + 1 ], nV2, plane, s );
 
-						outVertices.push( nV1.clone() );
-						outVertices.push( nV2.clone() );
 						outVertices.push( nV3 );
-
-						outVertices.push( nV4 );
-						outVertices.push( nV3.clone() );
 						outVertices.push( nV2.clone() );
+						outVertices.push( nV1.clone() );
 
+						outVertices.push( nV2.clone() );
+						outVertices.push( nV3.clone() );
+						outVertices.push( nV4 );
 						break;
 
 					}
 
-					case 2: {
+					if ( v3Out ) {
 
-						// two vertices lies outside of the plane, perform clipping
+						nV1 = inVertices[ i ];
+						nV2 = inVertices[ i + 1 ];
+						nV3 = clip( inVertices[ i + 2 ], nV1, plane, s );
+						nV4 = clip( inVertices[ i + 2 ], nV2, plane, s );
 
-						if ( ! v1Out ) {
-
-							nV1 = inVertices[ i ].clone();
-							nV2 = clip( nV1, inVertices[ i + 1 ], plane, s );
-							nV3 = clip( nV1, inVertices[ i + 2 ], plane, s );
-							outVertices.push( nV1 );
-							outVertices.push( nV2 );
-							outVertices.push( nV3 );
+					}
 
-						}
+					outVertices.push( nV1.clone() );
+					outVertices.push( nV2.clone() );
+					outVertices.push( nV3 );
 
-						if ( ! v2Out ) {
+					outVertices.push( nV4 );
+					outVertices.push( nV3.clone() );
+					outVertices.push( nV2.clone() );
 
-							nV1 = inVertices[ i + 1 ].clone();
-							nV2 = clip( nV1, inVertices[ i + 2 ], plane, s );
-							nV3 = clip( nV1, inVertices[ i ], plane, s );
-							outVertices.push( nV1 );
-							outVertices.push( nV2 );
-							outVertices.push( nV3 );
+					break;
 
-						}
+				}
 
-						if ( ! v3Out ) {
+				case 2: {
 
-							nV1 = inVertices[ i + 2 ].clone();
-							nV2 = clip( nV1, inVertices[ i ], plane, s );
-							nV3 = clip( nV1, inVertices[ i + 1 ], plane, s );
-							outVertices.push( nV1 );
-							outVertices.push( nV2 );
-							outVertices.push( nV3 );
+					// two vertices lies outside of the plane, perform clipping
 
-						}
+					if ( ! v1Out ) {
 
-						break;
+						nV1 = inVertices[ i ].clone();
+						nV2 = clip( nV1, inVertices[ i + 1 ], plane, s );
+						nV3 = clip( nV1, inVertices[ i + 2 ], plane, s );
+						outVertices.push( nV1 );
+						outVertices.push( nV2 );
+						outVertices.push( nV3 );
 
 					}
 
-					case 3: {
+					if ( ! v2Out ) {
 
-						// the entire face lies outside of the plane, so let's discard the corresponding vertices
-
-						break;
+						nV1 = inVertices[ i + 1 ].clone();
+						nV2 = clip( nV1, inVertices[ i + 2 ], plane, s );
+						nV3 = clip( nV1, inVertices[ i ], plane, s );
+						outVertices.push( nV1 );
+						outVertices.push( nV2 );
+						outVertices.push( nV3 );
 
 					}
 
-				}
+					if ( ! v3Out ) {
 
-			}
+						nV1 = inVertices[ i + 2 ].clone();
+						nV2 = clip( nV1, inVertices[ i ], plane, s );
+						nV3 = clip( nV1, inVertices[ i + 1 ], plane, s );
+						outVertices.push( nV1 );
+						outVertices.push( nV2 );
+						outVertices.push( nV3 );
 
-			return outVertices;
+					}
 
-		}
+					break;
 
-		function clip( v0, v1, p, s ) {
+				}
 
-			var d0 = v0.position.dot( p ) - s;
-			var d1 = v1.position.dot( p ) - s;
+				case 3: {
 
-			var s0 = d0 / ( d0 - d1 );
+					// the entire face lies outside of the plane, so let's discard the corresponding vertices
 
-			var v = new DecalVertex(
-				new THREE.Vector3(
-					v0.position.x + s0 * ( v1.position.x - v0.position.x ),
-					v0.position.y + s0 * ( v1.position.y - v0.position.y ),
-					v0.position.z + s0 * ( v1.position.z - v0.position.z )
-				),
-				new THREE.Vector3(
-					v0.normal.x + s0 * ( v1.normal.x - v0.normal.x ),
-					v0.normal.y + s0 * ( v1.normal.y - v0.normal.y ),
-					v0.normal.z + s0 * ( v1.normal.z - v0.normal.z )
-				)
-			);
+					break;
 
-			// need to clip more values (texture coordinates)? do it this way:
-			// intersectpoint.value = a.value + s * ( b.value - a.value );
+				}
 
-			return v;
+			}
 
 		}
 
+		return outVertices;
+
 	}
 
-	DecalGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
-	DecalGeometry.prototype.constructor = DecalGeometry;
+	function clip( v0, v1, p, s ) {
+
+		var d0 = v0.position.dot( p ) - s;
+		var d1 = v1.position.dot( p ) - s;
+
+		var s0 = d0 / ( d0 - d1 );
 
-	// helper
+		var v = new THREE.DecalVertex(
+			new THREE.Vector3(
+				v0.position.x + s0 * ( v1.position.x - v0.position.x ),
+				v0.position.y + s0 * ( v1.position.y - v0.position.y ),
+				v0.position.z + s0 * ( v1.position.z - v0.position.z )
+			),
+			new THREE.Vector3(
+				v0.normal.x + s0 * ( v1.normal.x - v0.normal.x ),
+				v0.normal.y + s0 * ( v1.normal.y - v0.normal.y ),
+				v0.normal.z + s0 * ( v1.normal.z - v0.normal.z )
+			)
+		);
 
-	function DecalVertex( position, normal ) {
+		// need to clip more values (texture coordinates)? do it this way:
+		// intersectpoint.value = a.value + s * ( b.value - a.value );
 
-		this.position = position;
-		this.normal = normal;
+		return v;
 
 	}
 
-	DecalVertex.prototype.clone = function () {
+};
+
+THREE.DecalGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
+THREE.DecalGeometry.prototype.constructor = THREE.DecalGeometry;
+
+// helper
+
+THREE.DecalVertex = function ( position, normal ) {
 
-		return new DecalVertex( this.position.clone(), this.normal.clone() );
+	this.position = position;
+	this.normal = normal;
 
-	};
+};
 
-	// export
+THREE.DecalVertex.prototype.clone = function () {
 
-	THREE.DecalGeometry = DecalGeometry;
+	return new this.constructor( this.position.clone(), this.normal.clone() );
 
-} )();
+};

examples/js/geometries/LightningStrike.js

@@ -2,85 +2,85 @@
  * @author yomboprime https://github.com/yomboprime
  *
  * @fileoverview LightningStrike object for creating lightning strikes and voltaic arcs.
- * 
- * 
+ *
+ *
  * Usage
- * 
+ *
  * var myRay = new THREE.LightningStrike( paramsObject );
  * var myRayMesh = new THREE.Mesh( myRay, myMaterial );
  * scene.add( myRayMesh );
  * ...
  * myRay.update( currentTime );
- * 
+ *
  * The "currentTime" can vary its rate, go forwards, backwards or even jump, but it cannot be negative.
- * 
+ *
  * You should normally leave the ray position to (0, 0, 0). You should control it by changing the sourceOffset and destOffset parameters.
- * 
- * 
+ *
+ *
  * LightningStrike parameters
- * 
+ *
  * The paramsObject can contain any of the following parameters.
- * 
+ *
  * Legend:
  * 'LightningStrike' (also called 'ray'): An independent voltaic arc with its ramifications and defined with a set of parameters.
  * 'Subray': A ramification of the ray. It is not a LightningStrike object.
  * 'Segment': A linear segment piece of a subray.
  * 'Leaf segment': A ray segment which cannot be smaller.
- * 
- * 
+ *
+ *
  * The following parameters can be changed any time and if they vary smoothly, the ray form will also change smoothly:
- * 
+ *
  * @param {Vector3} sourceOffset The point where the ray starts.
- * 
+ *
  * @param {Vector3} destOffset The point where the ray ends.
- * 
+ *
  * @param {double} timeScale The rate at wich the ray form changes in time. Default: 1
- * 
+ *
  * @param {double} roughness From 0 to 1. The higher the value, the more wrinkled is the ray. Default: 0.9
- * 
+ *
  * @param {double} straightness From 0 to 1. The higher the value, the more straight will be a subray path. Default: 0.7
- * 
+ *
  * @param {Vector3} up0 Ray 'up' direction at the ray starting point. Must be normalized. It should be perpendicular to the ray forward direction but it doesn't matter much.
- * 
+ *
  * @param {Vector3} up1 Like the up0 parameter but at the end of the ray. Must be normalized.
- * 
+ *
  * @param {double} radius0 Radius of the main ray trunk at the start point. Default: 1
- * 
+ *
  * @param {double} radius1 Radius of the main ray trunk at the end point. Default: 1
- * 
+ *
  * @param {double} radius0Factor The radius0 of a subray is this factor times the radius0 of its parent subray. Default: 0.5
- * 
+ *
  * @param {double} radius1Factor The radius1 of a subray is this factor times the radius1 of its parent subray. Default: 0.2
- * 
+ *
  * @param {minRadius} Minimum value a subray radius0 or radius1 can get. Default: 0.1
- * 
- * 
+ *
+ *
  * The following parameters should not be changed after lightning creation. They can be changed but the ray will change its form abruptly:
- * 
+ *
  * @param {boolean} isEternal If true the ray never extinguishes. Otherwise its life is controlled by the 'birthTime' and 'deathTime' parameters. Default: true if any of those two parameters is undefined.
- * 
+ *
  * @param {double} birthTime The time at which the ray starts its life and begins propagating. Only if isEternal is false. Default: None.
- * 
+ *
  * @param {double} deathTime The time at which the ray ends vanishing and its life. Only if isEternal is false. Default: None.
- * 
+ *
  * @param {double} propagationTimeFactor From 0 to 1. Lifetime factor at which the ray ends propagating and enters the steady phase. For example, 0.1 means it is propagating 1/10 of its lifetime. Default: 0.1
- * 
+ *
  * @param {double} vanishingTimeFactor From 0 to 1. Lifetime factor at which the ray ends the steady phase and begins vanishing. For example, 0.9 means it is vanishing 1/10 of its lifetime. Default: 0.9
- * 
+ *
  * @param {double} subrayPeriod Subrays cycle periodically. This is their time period. Default: 4
- * 
+ *
  * @param {double} subrayDutyCycle From 0 to 1. This is the fraction of time a subray is active. Default: 0.6
- * 
- * 
+ *
+ *
  * These parameters cannot change after lightning creation:
- * 
+ *
  * @param {integer} maxIterations: Greater than 0. The number of ray's leaf segments is 2**maxIterations. Default: 9
- * 
+ *
  * @param {boolean} isStatic Set to true only for rays which won't change over time and are not attached to moving objects (Rare case). It is used to set the vertex buffers non-dynamic. You can omit calling update() for these rays.
- *  
+ *
  * @param {integer} ramification Greater than 0. Maximum number of child subrays a subray can have. Default: 5
  *
- * @param {integer} maxSubrayRecursion Greater than 0. Maximum level of recursion (subray descendant generations). Default: 3 
+ * @param {integer} maxSubrayRecursion Greater than 0. Maximum level of recursion (subray descendant generations). Default: 3
  *
  * @param {double} recursionProbability From 0 to 1. The lower the value, the less chance each new generation of subrays has to generate new subrays. Default: 0.6
  *
@@ -91,13 +91,13 @@
  * The randomGenerator parameter should be an object with a random() function similar to Math.random, but seedable.
  * It must have also a getSeed() method, which returns the current seed, and a setSeed( seed ) method, which accepts as seed a fractional number from 0 to 1, as well as any other number.
  * The default value is an internal generator for some uses and Math.random for others (It is non-repeatable even if noiseSeed is supplied)
- * 
+ *
  * @param {double} noiseSeed Seed used to make repeatable rays (see the randomGenerator)
- * 
+ *
  * @param {function} onDecideSubrayCreation Set this to change the callback which decides subray creation. You can look at the default callback in the code (createDefaultSubrayCreationCallbacks)for more info.
- * 
+ *
  * @param {function} onSubrayCreation This is another callback, more simple than the previous one. It can be used to adapt the form of subrays or other parameters once a subray has been created and initialized. It is used in the examples to adapt subrays to a sphere or to a plane.
- * 
+ *
  *
 */
 
@@ -138,7 +138,7 @@ THREE.LightningStrike.createRandomGenerator = function () {
 	var numSeeds = 2053;
 	var seeds = [];
 
-	for ( var i = 0; i < numSeeds; i++ ) {
+	for ( var i = 0; i < numSeeds; i ++ ) {
 
 		seeds.push( Math.random() );
 
@@ -176,25 +176,24 @@ THREE.LightningStrike.createRandomGenerator = function () {
 
 };
 
-THREE.LightningStrike.copyParameters = function ( dest, source) {
+THREE.LightningStrike.copyParameters = function ( dest, source ) {
 
 	source = source || {};
 	dest = dest || {};
 
-	var vecCopy = function( v ) {
+	var vecCopy = function ( v ) {
 
 		if ( source === dest ) {
 
 			return v;
 
-		}
-		else {
+		} else {
 
 			return v.clone();
 
 		}
 
-	}
+	};
 
 	dest.sourceOffset = source.sourceOffset !== undefined ? vecCopy( source.sourceOffset ) : new THREE.Vector3( 0, 100, 0 ),
 	dest.destOffset = source.destOffset !== undefined ? vecCopy( source.destOffset ) : new THREE.Vector3( 0, 0, 0 ),
@@ -223,7 +222,7 @@ THREE.LightningStrike.copyParameters = function ( dest, source) {
 
 	// These parameters cannot change after lightning creation:
 
-	dest.maxIterations =  source.maxIterations !== undefined ? source.maxIterations : 9;
+	dest.maxIterations = source.maxIterations !== undefined ? source.maxIterations : 9;
 	dest.isStatic = source.isStatic !== undefined ? source.isStatic : false;
 	dest.ramification = source.ramification !== undefined ? source.ramification : 5;
 	dest.maxSubrayRecursion = source.maxSubrayRecursion !== undefined ? source.maxSubrayRecursion : 3;
@@ -240,25 +239,21 @@ THREE.LightningStrike.copyParameters = function ( dest, source) {
 
 THREE.LightningStrike.prototype.update = function ( time ) {
 
-	if ( this.isStatic ) {
-		return;
-	}
-	
+	if ( this.isStatic ) return;
+
 	if ( this.rayParameters.isEternal || ( this.rayParameters.birthTime <= time && time <= this.rayParameters.deathTime ) ) {
 
 		this.updateMesh( time );
 
 		if ( time < this.subrays[ 0 ].endPropagationTime ) {
-		
+
 			this.state = THREE.LightningStrike.RAY_PROPAGATING;
 
-		}	
-		else if ( time > this.subrays[ 0 ].beginVanishingTime ) {
+		} else if ( time > this.subrays[ 0 ].beginVanishingTime ) {
 
 			this.state = THREE.LightningStrike.RAY_VANISHING;
 
-		}
-		else {
+		} else {
 
 			this.state = THREE.LightningStrike.RAY_STEADY;
 
@@ -266,8 +261,7 @@ THREE.LightningStrike.prototype.update = function ( time ) {
 
 		this.visible = true;
 
-	}
-	else {
+	} else {
 
 		this.visible = false;
 
@@ -275,8 +269,7 @@ THREE.LightningStrike.prototype.update = function ( time ) {
 
 			this.state = THREE.LightningStrike.RAY_UNBORN;
 
-		}
-		else {
+		} else {
 
 			this.state = THREE.LightningStrike.RAY_EXTINGUISHED;
 
@@ -294,7 +287,7 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 
 	// These parameters cannot change after lightning creation:
 
-	this.maxIterations =  rayParameters.maxIterations !== undefined ? Math.floor( rayParameters.maxIterations ) : 9;
+	this.maxIterations = rayParameters.maxIterations !== undefined ? Math.floor( rayParameters.maxIterations ) : 9;
 	rayParameters.maxIterations = this.maxIterations;
 	this.isStatic = rayParameters.isStatic !== undefined ? rayParameters.isStatic : false;
 	rayParameters.isStatic = this.isStatic;
@@ -314,13 +307,12 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 		this.seedGenerator = rayParameters.randomGenerator;
 
 		if ( rayParameters.noiseSeed !== undefined ) {
-		
+
 			this.seedGenerator.setSeed( rayParameters.noiseSeed );
 
 		}
 
-	}
-	else {
+	} else {
 
 		this.randomGenerator = THREE.LightningStrike.createRandomGenerator();
 		this.seedGenerator = Math;
@@ -332,8 +324,7 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 
 		this.onDecideSubrayCreation = rayParameters.onDecideSubrayCreation;
 
-	}
-	else {
+	} else {
 
 		this.createDefaultSubrayCreationCallbacks();
 
@@ -351,12 +342,12 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 
 	this.maxSubrays = Math.ceil( 1 + Math.pow( this.ramification, Math.max( 0, this.maxSubrayRecursion - 1 ) ) );
 	rayParameters.maxSubrays = this.maxSubrays;
-	
+
 	this.maxRaySegments = 2 * ( 1 << this.maxIterations );
 
 	this.subrays = [];
 
-	for ( var i = 0; i < this.maxSubrays; i++ ) {
+	for ( var i = 0; i < this.maxSubrays; i ++ ) {
 
 		this.subrays.push( this.createSubray() );
 
@@ -364,7 +355,7 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 
 	this.raySegments = [];
 
-	for ( var i = 0; i < this.maxRaySegments; i++ ) {
+	for ( var i = 0; i < this.maxRaySegments; i ++ ) {
 
 		this.raySegments.push( this.createSegment() );
 
@@ -389,10 +380,10 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 	this.indices = null;
 	this.positionAttribute = null;
 	this.uvsAttribute = null;
-	
-	this.simplexX = new SimplexNoise( this.seedGenerator );
-	this.simplexY = new SimplexNoise( this.seedGenerator );
-	this.simplexZ = new SimplexNoise( this.seedGenerator );
+
+	this.simplexX = new THREE.SimplexNoise( this.seedGenerator );
+	this.simplexY = new THREE.SimplexNoise( this.seedGenerator );
+	this.simplexZ = new THREE.SimplexNoise( this.seedGenerator );
 
 	// Temp vectors
 	this.forwards = new THREE.Vector3();
@@ -410,46 +401,56 @@ THREE.LightningStrike.prototype.init = function ( rayParameters ) {
 THREE.LightningStrike.prototype.createMesh = function () {
 
 	var maxDrawableSegmentsPerSubRay = 1 << this.maxIterations;
-	
+
 	var maxVerts = 3 * ( maxDrawableSegmentsPerSubRay + 1 ) * this.maxSubrays;
 	var maxIndices = 18 * maxDrawableSegmentsPerSubRay * this.maxSubrays;
 
 	this.vertices = new Float32Array( maxVerts * 3 );
 	this.indices = new Uint32Array( maxIndices );
 	if ( this.generateUVs ) {
+
 		this.uvs = new Float32Array( maxVerts * 2 );
+
 	}
 
 	// Populate the mesh
 	this.fillMesh( 0 );
-	
+
 	this.setIndex( new THREE.Uint32BufferAttribute( this.indices, 1 ) );
 
 	this.positionAttribute = new THREE.Float32BufferAttribute( this.vertices, 3 );
 	this.addAttribute( 'position', this.positionAttribute );
 
-	if ( this.generateUVs ) {1
+	if ( this.generateUVs ) {
+
 		this.uvsAttribute = new THREE.Float32BufferAttribute( new Float32Array( this.uvs ), 2 );
 		this.addAttribute( 'uv', this.uvsAttribute );
+
 	}
 
 	if ( ! this.isStatic ) {
+
 		this.index.dynamic = true;
 		this.positionAttribute.dynamic = true;
 		if ( this.generateUVs ) {
+
 			this.uvsAttribute.dynamic = true;
+
 		}
+
 	}
 
 	// Store buffers for later modification
 	this.vertices = this.positionAttribute.array;
 	this.indices = this.index.array;
 	if ( this.generateUVs ) {
+
 		this.uvs = this.uvsAttribute.array;
+
 	}
 
 };
-	
+
 THREE.LightningStrike.prototype.updateMesh = function ( time ) {
 
 	this.fillMesh( time );
@@ -461,7 +462,9 @@ THREE.LightningStrike.prototype.updateMesh = function ( time ) {
 	this.positionAttribute.needsUpdate = true;
 
 	if ( this.generateUVs ) {
+
 		this.uvsAttribute.needsUpdate = true;
+
 	}
 
 };
@@ -475,16 +478,15 @@ THREE.LightningStrike.prototype.fillMesh = function ( time ) {
 	this.currentCoordinate = 0;
 	this.currentUVCoordinate = 0;
 
-	this.fractalRay( time, function fillVertices ( segment ) {
+	this.fractalRay( time, function fillVertices( segment ) {
 
 		var subray = scope.currentSubray;
 
-		if ( time < subray.birthTime ) {//&& ( ! this.rayParameters.isEternal || scope.currentSubray.recursion > 0 ) ) {
+		if ( time < subray.birthTime ) { //&& ( ! this.rayParameters.isEternal || scope.currentSubray.recursion > 0 ) ) {
 
 			return;
 
-		}
-		else if ( this.rayParameters.isEternal && scope.currentSubray.recursion == 0 ) {
+		} else if ( this.rayParameters.isEternal && scope.currentSubray.recursion == 0 ) {
 
 			// Eternal rays don't propagate nor vanish, but its subrays do
 
@@ -492,8 +494,7 @@ THREE.LightningStrike.prototype.fillMesh = function ( time ) {
 
 			scope.onDecideSubrayCreation( segment, scope );
 
-		}
-		else if ( time < subray.endPropagationTime ) {
+		} else if ( time < subray.endPropagationTime ) {
 
 			if ( scope.timeFraction >= segment.fraction0 * subray.propagationTimeFactor ) {
 
@@ -505,8 +506,7 @@ THREE.LightningStrike.prototype.fillMesh = function ( time ) {
 
 			}
 
-		}
-		else if ( time < subray.beginVanishingTime ) {
+		} else if ( time < subray.beginVanishingTime ) {
 
 			// Ray is steady (nor propagating nor vanishing)
 
@@ -514,10 +514,9 @@ THREE.LightningStrike.prototype.fillMesh = function ( time ) {
 
 			scope.onDecideSubrayCreation( segment, scope );
 
-		}
-		else {
+		} else {
 
-			if ( scope.timeFraction <= subray.vanishingTimeFactor + segment.fraction1  * ( 1 - subray.vanishingTimeFactor ) ) {
+			if ( scope.timeFraction <= subray.vanishingTimeFactor + segment.fraction1 * ( 1 - subray.vanishingTimeFactor ) ) {
 
 				// Segment has not yet vanished
 
@@ -535,7 +534,7 @@ THREE.LightningStrike.prototype.fillMesh = function ( time ) {
 
 THREE.LightningStrike.prototype.addNewSubray = function ( rayParameters ) {
 
-	return this.subrays[ this.numSubrays++ ];
+	return this.subrays[ this.numSubrays ++ ];
 
 };
 
@@ -571,7 +570,7 @@ THREE.LightningStrike.prototype.fractalRay = function ( time, segmentCallback )
 	this.initSubray( this.addNewSubray(), this.rayParameters );
 
 	// Process all subrays that are being generated until consuming all of them
-	for ( var subrayIndex = 0; subrayIndex < this.numSubrays; subrayIndex++ ) {
+	for ( var subrayIndex = 0; subrayIndex < this.numSubrays; subrayIndex ++ ) {
 
 		var subray = this.subrays[ subrayIndex ];
 		this.currentSubray = subray;
@@ -587,7 +586,7 @@ THREE.LightningStrike.prototype.fractalRay = function ( time, segmentCallback )
 
 		this.timeFraction = ( time - subray.birthTime ) / ( subray.deathTime - subray.birthTime );
 
-		this.currentSegmentIndex  = 0;
+		this.currentSegmentIndex = 0;
 		this.isInitialSegment = true;
 
 		var segment = this.getNewSegment();
@@ -630,9 +629,11 @@ THREE.LightningStrike.prototype.fractalRayRecursive = function ( segment ) {
 	this.forwards.subVectors( segment.pos1, segment.pos0 );
 	var lForwards = this.forwards.length();
 
-	if ( lForwards < 0.000001) {
+	if ( lForwards < 0.000001 ) {
+
 		this.forwards.set( 0, 0, 0.01 );
 		lForwards = this.forwards.length();
+
 	}
 
 	var middleRadius = ( segment.radius0 + segment.radius1 ) * 0.5;
@@ -644,10 +645,10 @@ THREE.LightningStrike.prototype.fractalRayRecursive = function ( segment ) {
 	this.middleLinPos.lerpVectors( segment.linPos0, segment.linPos1, 0.5 );
 	var p = this.middleLinPos;
 
-	// Noise	
+	// Noise
 	this.newPos.set( this.simplexX.noise4d( p.x, p.y, p.z, timeDimension ),
-						this.simplexY.noise4d( p.x, p.y, p.z, timeDimension ),
-						this.simplexZ.noise4d( p.x, p.y, p.z, timeDimension ) );
+		this.simplexY.noise4d( p.x, p.y, p.z, timeDimension ),
+		this.simplexZ.noise4d( p.x, p.y, p.z, timeDimension ) );
 
 	this.newPos.multiplyScalar( segment.positionVariationFactor * lForwards );
 	this.newPos.add( this.middlePos );
@@ -698,7 +699,7 @@ THREE.LightningStrike.prototype.createPrism = function ( segment ) {
 	if ( this.isInitialSegment ) {
 
 		this.currentCreateTriangleVertices( segment.pos0, segment.up0, this.forwardsFill, segment.radius0, 0 );
-		
+
 		this.isInitialSegment = false;
 
 	}
@@ -712,7 +713,7 @@ THREE.LightningStrike.prototype.createPrism = function ( segment ) {
 THREE.LightningStrike.prototype.createTriangleVerticesWithoutUVs = function ( pos, up, forwards, radius ) {
 
 	// Create an equilateral triangle (only vertices)
-	
+
 	this.side.crossVectors( up, forwards ).multiplyScalar( radius * THREE.LightningStrike.COS30DEG );
 	this.down.copy( up ).multiplyScalar( - radius * THREE.LightningStrike.SIN30DEG );
 
@@ -721,21 +722,21 @@ THREE.LightningStrike.prototype.createTriangleVerticesWithoutUVs = function ( po
 
 	p.copy( pos ).sub( this.side ).add( this.down );
 
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
 
 	p.copy( pos ).add( this.side ).add( this.down );
 
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
 
 	p.copy( up ).multiplyScalar( radius ).add( pos );
-	
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
+
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
 
 	this.currentVertex += 3;
 
@@ -744,7 +745,7 @@ THREE.LightningStrike.prototype.createTriangleVerticesWithoutUVs = function ( po
 THREE.LightningStrike.prototype.createTriangleVerticesWithUVs = function ( pos, up, forwards, radius, u ) {
 
 	// Create an equilateral triangle (only vertices)
-	
+
 	this.side.crossVectors( up, forwards ).multiplyScalar( radius * THREE.LightningStrike.COS30DEG );
 	this.down.copy( up ).multiplyScalar( - radius * THREE.LightningStrike.SIN30DEG );
 
@@ -754,30 +755,30 @@ THREE.LightningStrike.prototype.createTriangleVerticesWithUVs = function ( pos,
 
 	p.copy( pos ).sub( this.side ).add( this.down );
 
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
 
-	uv[ this.currentUVCoordinate++ ] = u;
-	uv[ this.currentUVCoordinate++ ] = 0;
+	uv[ this.currentUVCoordinate ++ ] = u;
+	uv[ this.currentUVCoordinate ++ ] = 0;
 
 	p.copy( pos ).add( this.side ).add( this.down );
 
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
 
-	uv[ this.currentUVCoordinate++ ] = u;
-	uv[ this.currentUVCoordinate++ ] = 0.5;
+	uv[ this.currentUVCoordinate ++ ] = u;
+	uv[ this.currentUVCoordinate ++ ] = 0.5;
 
 	p.copy( up ).multiplyScalar( radius ).add( pos );
-	
-	v[ this.currentCoordinate++ ] = p.x;
-	v[ this.currentCoordinate++ ] = p.y;
-	v[ this.currentCoordinate++ ] = p.z;
 
-	uv[ this.currentUVCoordinate++ ] = u;
-	uv[ this.currentUVCoordinate++ ] = 1;
+	v[ this.currentCoordinate ++ ] = p.x;
+	v[ this.currentCoordinate ++ ] = p.y;
+	v[ this.currentCoordinate ++ ] = p.z;
+
+	uv[ this.currentUVCoordinate ++ ] = u;
+	uv[ this.currentUVCoordinate ++ ] = 1;
 
 	this.currentVertex += 3;
 
@@ -788,24 +789,24 @@ THREE.LightningStrike.prototype.createPrismFaces = function ( vertex, index ) {
 	var indices = this.indices;
 	var vertex = this.currentVertex - 6;
 
-	indices[ this.currentIndex++ ] = vertex + 1;
-	indices[ this.currentIndex++ ] = vertex + 2;
-	indices[ this.currentIndex++ ] = vertex + 5;
-	indices[ this.currentIndex++ ] = vertex + 1;
-	indices[ this.currentIndex++ ] = vertex + 5;
-	indices[ this.currentIndex++ ] = vertex + 4;
-	indices[ this.currentIndex++ ] = vertex + 0;
-	indices[ this.currentIndex++ ] = vertex + 1;
-	indices[ this.currentIndex++ ] = vertex + 4;
-	indices[ this.currentIndex++ ] = vertex + 0;
-	indices[ this.currentIndex++ ] = vertex + 4;
-	indices[ this.currentIndex++ ] = vertex + 3;
-	indices[ this.currentIndex++ ] = vertex + 2;
-	indices[ this.currentIndex++ ] = vertex + 0;
-	indices[ this.currentIndex++ ] = vertex + 3;
-	indices[ this.currentIndex++ ] = vertex + 2;
-	indices[ this.currentIndex++ ] = vertex + 3;
-	indices[ this.currentIndex++ ] = vertex + 5;
+	indices[ this.currentIndex ++ ] = vertex + 1;
+	indices[ this.currentIndex ++ ] = vertex + 2;
+	indices[ this.currentIndex ++ ] = vertex + 5;
+	indices[ this.currentIndex ++ ] = vertex + 1;
+	indices[ this.currentIndex ++ ] = vertex + 5;
+	indices[ this.currentIndex ++ ] = vertex + 4;
+	indices[ this.currentIndex ++ ] = vertex + 0;
+	indices[ this.currentIndex ++ ] = vertex + 1;
+	indices[ this.currentIndex ++ ] = vertex + 4;
+	indices[ this.currentIndex ++ ] = vertex + 0;
+	indices[ this.currentIndex ++ ] = vertex + 4;
+	indices[ this.currentIndex ++ ] = vertex + 3;
+	indices[ this.currentIndex ++ ] = vertex + 2;
+	indices[ this.currentIndex ++ ] = vertex + 0;
+	indices[ this.currentIndex ++ ] = vertex + 3;
+	indices[ this.currentIndex ++ ] = vertex + 2;
+	indices[ this.currentIndex ++ ] = vertex + 3;
+	indices[ this.currentIndex ++ ] = vertex + 5;
 
 };
 
@@ -821,9 +822,9 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 
 		var period = lightningStrike.rayParameters.subrayPeriod;
 		var dutyCycle = lightningStrike.rayParameters.subrayDutyCycle;
-		
+
 		var phase0 = ( lightningStrike.rayParameters.isEternal && subray.recursion == 0 ) ? - random1() * period : THREE.Math.lerp( subray.birthTime, subray.endPropagationTime, segment.fraction0 ) - random1() * period;
-		
+
 		var phase = lightningStrike.time - phase0;
 		var currentCycle = Math.floor( phase / period );
 
@@ -833,9 +834,12 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 
 		probability = lightningStrike.subrayProbability;
 		var probability = 0;
+
 		if ( isActive ) {
+
 			probability = lightningStrike.subrayProbability;
 			// Distribution test: probability *= segment.fraction0 > 0.5 && segment.fraction0 < 0.9 ? 1 / 0.4 : 0;
+
 		}
 
 		if ( subray.recursion < lightningStrike.maxSubrayRecursion && lightningStrike.numSubrays < lightningStrike.maxSubrays && random1() < probability ) {
@@ -850,12 +854,12 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 			childSubray.maxIterations = Math.max( 1, subray.maxIterations - 1 );
 
 			childSubray.linPos0.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
-			childSubray.linPos1.set( random1(), random1(), random1() ).multiplyScalar( 1000 );;
+			childSubray.linPos1.set( random1(), random1(), random1() ).multiplyScalar( 1000 );
 			childSubray.up0.copy( subray.up0 );
 			childSubray.up1.copy( subray.up1 );
 			childSubray.radius0 = segment.radius0 * lightningStrike.rayParameters.radius0Factor;
 			childSubray.radius1 = Math.min( lightningStrike.rayParameters.minRadius, segment.radius1 * lightningStrike.rayParameters.radius1Factor );
-			
+
 			childSubray.birthTime = phase0 + ( currentCycle ) * period;
 			childSubray.deathTime = childSubray.birthTime + period * dutyCycle;
 
@@ -884,7 +888,7 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 	var vec2Forward = new THREE.Vector3();
 	var vec3Side = new THREE.Vector3();
 	var vec4Up = new THREE.Vector3();
-	
+
 	this.onSubrayCreation = function ( segment, parentSubray, childSubray, lightningStrike ) {
 
 		// Decide childSubray origin and destination positions (pos0 and pos1) and possibly other properties of childSubray
@@ -895,9 +899,9 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 	};
 
 	this.subrayConePosition = function ( segment, parentSubray, childSubray, heightFactor, sideWidthFactor, minSideWidthFactor ) {
-		
+
 		// Sets childSubray pos0 and pos1 in a cone
-		
+
 		childSubray.pos0.copy( segment.pos0 );
 
 		vec1Pos.subVectors( parentSubray.pos1, parentSubray.pos0 );
@@ -906,15 +910,15 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 		var length = vec1Pos.length();
 		vec3Side.crossVectors( parentSubray.up0, vec2Forward );
 		var angle = 2 * Math.PI * random1();
-		vec3Side.multiplyScalar( Math.cos ( angle ) );
-		vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin ( angle ) );
+		vec3Side.multiplyScalar( Math.cos( angle ) );
+		vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin( angle ) );
 
 		childSubray.pos1.copy( vec3Side ).add( vec4Up ).multiplyScalar( length * sideWidthFactor * ( minSideWidthFactor + random1() * ( 1 - minSideWidthFactor ) ) ).add( vec1Pos ).add( parentSubray.pos0 );
 
-	}
+	};
 
 	this.subrayCylinderPosition = function ( segment, parentSubray, childSubray, heightFactor, sideWidthFactor, minSideWidthFactor ) {
-		
+
 		// Sets childSubray pos0 and pos1 in a cylinder
 
 		childSubray.pos0.copy( segment.pos0 );
@@ -925,12 +929,12 @@ THREE.LightningStrike.prototype.createDefaultSubrayCreationCallbacks = function
 		var length = vec1Pos.length();
 		vec3Side.crossVectors( parentSubray.up0, vec2Forward );
 		var angle = 2 * Math.PI * random1();
-		vec3Side.multiplyScalar( Math.cos ( angle ) );
-		vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin ( angle ) );
+		vec3Side.multiplyScalar( Math.cos( angle ) );
+		vec4Up.copy( parentSubray.up0 ).multiplyScalar( Math.sin( angle ) );
 
 		childSubray.pos1.copy( vec3Side ).add( vec4Up ).multiplyScalar( length * sideWidthFactor * ( minSideWidthFactor + random1() * ( 1 - minSideWidthFactor ) ) ).add( vec1Pos ).add( parentSubray.pos0 );
 
-	}
+	};
 
 };
 
@@ -978,19 +982,19 @@ THREE.LightningStrike.prototype.createSegment = function () {
 		fraction0: 0,
 		fraction1: 0,
 		positionVariationFactor: 0
-	}
+	};
 
 };
 
 THREE.LightningStrike.prototype.getNewSegment = function () {
 
-	return this.raySegments[ this.currentSegmentIndex++ ];
+	return this.raySegments[ this.currentSegmentIndex ++ ];
 
 };
 
 THREE.LightningStrike.prototype.copy = function ( source ) {
-	
-	BufferGeometry.prototype.copy.call( this, source );
+
+	THREE.BufferGeometry.prototype.copy.call( this, source );
 
 	this.init( THREE.LightningStrike.copyParameters( {}, source.rayParameters ) );
 

examples/js/geometries/TeapotBufferGeometry.js

@@ -3,9 +3,7 @@
  *
  * Tessellates the famous Utah teapot database by Martin Newell into triangles.
  *
- * THREE.TeapotBufferGeometry = function ( size, segments, bottom, lid, body, fitLid, blinn )
- *
- * defaults: size = 50, segments = 10, bottom = true, lid = true, body = true,
+ * Parameters: size = 50, segments = 10, bottom = true, lid = true, body = true,
  *   fitLid = false, blinn = true
  *
  * size is a relative scale: I've scaled the teapot to fit vertically between -1 and 1.
@@ -50,7 +48,6 @@
  * See https://en.wikipedia.org/wiki/Utah_teapot for the history of the teapot
  *
  */
-/*global THREE */
 
 THREE.TeapotBufferGeometry = function ( size, segments, bottom, lid, body, fitLid, blinn ) {
 

examples/js/geometries/hilbert2D.js

@@ -1,64 +0,0 @@
-/**
- * Hilbert Curve: Generates 2D-Coordinates in a very fast way.
- *
- * @author Dylan Grafmyre
- *
- * Based on work by:
- * @author Thomas Diewald
- * @link http://www.openprocessing.org/sketch/15493
- *
- * @param center     Center of Hilbert curve.
- * @param size       Total width of Hilbert curve.
- * @param iterations Number of subdivisions.
- * @param v0         Corner index -X, -Z.
- * @param v1         Corner index -X, +Z.
- * @param v2         Corner index +X, +Z.
- * @param v3         Corner index +X, -Z.
- */
-
-function hilbert2D( center, size, iterations, v0, v1, v2, v3 ) {
-
-	// Default Vars
-	var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
-		size = size !== undefined ? size : 10,
-		half = size / 2,
-		iterations = iterations !== undefined ? iterations : 1,
-		v0 = v0 !== undefined ? v0 : 0,
-		v1 = v1 !== undefined ? v1 : 1,
-		v2 = v2 !== undefined ? v2 : 2,
-		v3 = v3 !== undefined ? v3 : 3
-	;
-
-	var vec_s = [
-		new THREE.Vector3( center.x - half, center.y, center.z - half ),
-		new THREE.Vector3( center.x - half, center.y, center.z + half ),
-		new THREE.Vector3( center.x + half, center.y, center.z + half ),
-		new THREE.Vector3( center.x + half, center.y, center.z - half )
-	];
-
-	var vec = [
-		vec_s[ v0 ],
-		vec_s[ v1 ],
-		vec_s[ v2 ],
-		vec_s[ v3 ]
-	];
-
-	// Recurse iterations
-	if ( 0 <= -- iterations ) {
-
-		var tmp = [];
-
-		Array.prototype.push.apply( tmp, hilbert2D( vec[ 0 ], half, iterations, v0, v3, v2, v1 ) );
-		Array.prototype.push.apply( tmp, hilbert2D( vec[ 1 ], half, iterations, v0, v1, v2, v3 ) );
-		Array.prototype.push.apply( tmp, hilbert2D( vec[ 2 ], half, iterations, v0, v1, v2, v3 ) );
-		Array.prototype.push.apply( tmp, hilbert2D( vec[ 3 ], half, iterations, v2, v1, v0, v3 ) );
-
-		// Return recursive call
-		return tmp;
-
-	}
-
-	// Return complete Hilbert Curve.
-	return vec;
-
-}

examples/js/geometries/hilbert3D.js

@@ -1,84 +0,0 @@
-/**
- * Hilbert Curve: Generates 2D-Coordinates in a very fast way.
- *
- * @author Dylan Grafmyre
- *
- * Based on work by:
- * @author Thomas Diewald
- * @link http://www.openprocessing.org/visuals/?visualID=15599
- *
- * @param center     Center of Hilbert curve.
- * @param size       Total width of Hilbert curve.
- * @param iterations Number of subdivisions.
- * @param v0         Corner index -X, +Y, -Z.
- * @param v1         Corner index -X, +Y, +Z.
- * @param v2         Corner index -X, -Y, +Z.
- * @param v3         Corner index -X, -Y, -Z.
- * @param v4         Corner index +X, -Y, -Z.
- * @param v5         Corner index +X, -Y, +Z.
- * @param v6         Corner index +X, +Y, +Z.
- * @param v7         Corner index +X, +Y, -Z.
- */
-
-function hilbert3D( center, size, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
-
-	// Default Vars
-	var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
-		size = size !== undefined ? size : 10,
-		half = size / 2,
-		iterations = iterations !== undefined ? iterations : 1,
-		v0 = v0 !== undefined ? v0 : 0,
-		v1 = v1 !== undefined ? v1 : 1,
-		v2 = v2 !== undefined ? v2 : 2,
-		v3 = v3 !== undefined ? v3 : 3,
-		v4 = v4 !== undefined ? v4 : 4,
-		v5 = v5 !== undefined ? v5 : 5,
-		v6 = v6 !== undefined ? v6 : 6,
-		v7 = v7 !== undefined ? v7 : 7
-	;
-
-	var vec_s = [
-		new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
-		new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
-		new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
-		new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
-		new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
-		new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
-		new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
-		new THREE.Vector3( center.x + half, center.y + half, center.z - half )
-	];
-
-	var vec = [
-		vec_s[ v0 ],
-		vec_s[ v1 ],
-		vec_s[ v2 ],
-		vec_s[ v3 ],
-		vec_s[ v4 ],
-		vec_s[ v5 ],
-		vec_s[ v6 ],
-		vec_s[ v7 ]
-	];
-
-	// Recurse iterations
-	if ( -- iterations >= 0 ) {
-
-		var tmp = [];
-
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
-		Array.prototype.push.apply( tmp, hilbert3D( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
-
-		// Return recursive call
-		return tmp;
-
-	}
-
-	// Return complete Hilbert Curve.
-	return vec;
-
-}

examples/js/interactive/SelectionHelper.js

@@ -12,9 +12,9 @@ THREE.SelectionHelper = ( function () {
 
 		this.renderer = renderer;
 
-		this.startPoint = { x: 0, y: 0 };
-		this.pointTopLeft = { x: 0, y: 0 };
-		this.pointBottomRight = { x: 0, y: 0 };
+		this.startPoint = new THREE.Vector2();
+		this.pointTopLeft = new THREE.Vector2();
+		this.pointBottomRight = new THREE.Vector2();
 
 		this.isDown = false;
 

examples/js/libs/basis/README.md

@@ -0,0 +1,43 @@
+# Basis Universal GPU Texture Compression
+
+Basis Universal is a "[supercompressed](http://gamma.cs.unc.edu/GST/gst.pdf)"
+GPU texture and texture video compression system that outputs a highly
+compressed intermediate file format (.basis) that can be quickly transcoded to
+a wide variety of GPU texture compression formats.
+
+[GitHub](https://github.com/BinomialLLC/basis_universal)
+
+## Contents
+
+This folder contains two files:
+
+* `basis_transcoder.js` — JavaScript wrapper for the WebAssembly transcoder.
+* `basis_transcoder.wasm` — WebAssembly transcoder.
+
+Both are dependencies of `THREE.BasisTextureLoader`:
+
+```js
+var basisLoader = new THREE.BasisTextureLoader();
+basisLoader.setTranscoderPath( 'examples/js/libs/basis/' );
+basisLoader.detectSupport( renderer );
+basisLoader.load( 'diffuse.basis', function ( texture ) {
+
+  var material = new THREE.MeshStandardMaterial( { map: texture } );
+
+}, function () {
+
+  console.log( 'onProgress' );
+
+}, function ( e ) {
+
+  console.error( e );
+
+} );
+```
+
+For further documentation about the Basis compressor and transcoder, refer to
+the [Basis GitHub repository](https://github.com/BinomialLLC/basis_universal). The JavaScript wrapper requires one modification from the version provided in the Basis repository – the declaration on the first line is changed from `var Module` to `Module`, to accomodate lazy initialization in a Web Worker ([details](https://github.com/mrdoob/three.js/issues/16524)).
+
+## License
+
+[Apache License 2.0](https://github.com/BinomialLLC/basis_universal/blob/master/LICENSE)

examples/js/lines/Line2.js

@@ -20,7 +20,7 @@ THREE.Line2.prototype = Object.assign( Object.create( THREE.LineSegments2.protot
 
 	isLine2: true,
 
-	copy: function ( source ) {
+	copy: function ( /* source */ ) {
 
 		// todo
 

examples/js/lines/LineGeometry.js

@@ -87,7 +87,7 @@ THREE.LineGeometry.prototype = Object.assign( Object.create( THREE.LineSegmentsG
 
 	},
 
-	copy: function ( source ) {
+	copy: function ( /* source */ ) {
 
 		// todo