Merge branch 'dev' into editor-multimaterial

docs/api/cameras/CubeCamera.html

@@ -20,21 +20,21 @@
 		<div>[example:webgl_materials_cubemap_dynamic2 materials / cubemap / dynamic2 ]</div>
 		<div>[example:webgl_shading_physical shading / physical ]</div>
 
-		<code>//Create cube camera
+		<code>// Create cube camera
 		var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
 		scene.add( cubeCamera );
 
-		//Create car
+		// Create car
 		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
 		var car = new Mesh( carGeometry, chromeMaterial );
 		scene.add( car );
 
-		//Update the render target cube
+		// Update the render target cube
 		car.setVisible( false );
 		cubeCamera.position.copy( car.position );
-		cubeCamera.updateCubeMap( renderer, scene );
+		cubeCamera.update( renderer, scene );
 
-		//Render the scene
+		// Render the scene
 		car.setVisible( true );
 		renderer.render( scene, camera );
 		</code>
@@ -67,7 +67,7 @@
 		<div>See the base [page:Object3D] class for common methods.</div>
 
 
-		<h3>[method:null updateCubeMap]( [page:WebGLRenderer renderer], [page:Scene scene] )</h3>
+		<h3>[method:null update]( [page:WebGLRenderer renderer], [page:Scene scene] )</h3>
 		<div>
 		renderer -- The current WebGL renderer <br />
 		scene -- The current scene
@@ -76,6 +76,12 @@
 		Call this to update the [page:CubeCamera.renderTarget renderTarget].
 		</div>
 
+		<h3>[method:null clear]( [page:WebGLRenderer renderer], [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
+		<div>
+		Call this to clear the [page:CubeCamera.renderTarget renderTarget] color, depth, and/or stencil buffers.
+		The color buffer is set to the renderer's current clear color. Arguments default to *true*.
+		</div>
+
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

docs/api/core/InterleavedBufferAttribute.html

@@ -27,6 +27,19 @@
 			The [page:InterleavedBuffer InterleavedBuffer] instance passed in the constructor.
 		</div>
 
+		<h3>[property:TypedArray array]</h3>
+		<div>
+			The value of [page:InterleavedBufferAttribute.data data].array.
+		</div>
+
+		<h3>[property:Integer count]</h3>
+		<div>
+			The value of [page:InterleavedBufferAttribute.data data].count.
+
+			If the buffer is storing a 3-component vector (such as a position, normal, or color),
+			then this will count the number of such vectors stored.
+		</div>
+
 		<h3>[property:Integer itemSize]</h3>
 		<div>
 		</div>
@@ -47,16 +60,6 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:Integer count]()</h3>
-		<div>
-			The value of [page:InterleavedBufferAttribute.data data].count.
-		</div>
-
-		<h3>[method:Array array]()</h3>
-		<div>
-			The value of [page:InterleavedBufferAttribute.data data].array.
-		</div>
-
 		<h3>[method:null getX]( index ) </h3>
 		<div>
 

docs/api/core/Layers.html

@@ -11,15 +11,14 @@
 		<h1>[name]</h1>
 
 		<div class="desc">
-		An object providing a [link:https://en.wikipedia.org/wiki/Mask_(computing) bit mask] and accessor methods
-		used to control an [page:Object3D]'s visibility.
-		A [page:Layers] object assigns an [page:Object3D] to 0 or more of 32 layers numbered 0 to 31.<br /><br />
+      			A [page:Layers] object assigns an [page:Object3D] to 1 or more of 32 layers numbered 0 to 31
+      			- internally the layers are stored as a [link:https://en.wikipedia.org/wiki/Mask_(computing) bit mask], and by default all
+      			Object3Ds are a member of layer 0.<br /><br />
 
-		This is used to control visibility - an object must share a layer with a [page:Camera camera]
-		to be visible when that camera's view is renderered.<br /><br />
+      			This can be used to control visibility - an object must share a layer with a [page:Camera camera] to be visible when that camera's
+      			view is renderered.<br /><br />
 
-		All classes that inherit from [page:Object3D] have a [property:layers] property which is an instance
-		of this class.
+      			All classes that inherit from [page:Object3D] have an [page:Object3D.layers] property which is an instance of this class.
 		</div>
 
 
@@ -28,14 +27,14 @@
 
 		<h3>[name]()</h3>
 		<div>
-		Create a new Layers object, with an initial mask set to layer 1.
+			Create a new Layers object, with membership initially set to layer 0.
 		</div>
 
 		<h2>Properties</h2>
 
 		<h3>[property:Integer mask]</h3>
 		<div>
-		Internal layer mask.
+		 	A bit mask storing which of the 32 layers this layers object is currently a member of.
 		</div>
 
 
@@ -43,37 +42,37 @@
 
 		<h3>[method:null disable]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Remove *layer* from the mask.
+			Remove membership of this *layer*.
 		</div>
 
 		<h3>[method:null enable]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Add *layer* to the mask.
+			Add membership of this *layer*.
 		</div>
 
 		<h3>[method:null set]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Set the layer mask to the value *layer*.
+			Set membership to *layer*, and remove membership all other layers.
 		</div>
 
 		<h3>[method:Boolean test]( [page:Integer layers] )</h3>
 		<div>
-		layers - a 32bit bit mask of layer numbers.<br /><br />
+			layers - a Layers object<br /><br />
 
-		Returns true if *layers* and [page:.mask] have any bits set in common.
+			Returns true if this and the passed *layers* object are members of the same set of layers.
 		</div>
 
 		<h3>[method:null toggle]( [page:Integer layer] )</h3>
 		<div>
-		layer - an integer from 0 to 31.<br /><br />
+			layer - an integer from 0 to 31.<br /><br />
 
-		Toggle the *layer* value in the mask.
+			Toggle membership of *layer*.
 		</div>
 
 		<h2>Source</h2>

docs/api/extras/objects/MorphBlendMesh.html

@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<base href="../../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		[page:Mesh] &rarr;
-
-		<h1>[name]</h1>
-
-		<div class="desc">A mesh that can blend together multiple animated morph targets.</div>
-
-		<h2>Example</h2>
-		[example:webgl_morphtargets_md2_control morphtargets / md2 / controll]
-
-
-		<h2>Constructor</h2>
-
-
-		<h3>[name]([page:Geometry geometry], [page:Material material])</h3>
-		<div>
-		geometry — An instance of [page:Geometry].<br />
-		material — An instance of [page:Material] (optional).
-		</div>
-
-		<h2>Properties</h2>
-
-
-		<h3>[property:object animationsMap]</h3>
-		<div>
-		An object of named animations as added by [page:MorphBlendMesh.createAnimation].
-		</div>
-
-		<h3>[property:array animationsList]</h3>
-		<div>
-		The list of animations as added by [page:MorphBlendMesh.createAnimation].
-		</div>
-
-		<h2>Methods</h2>
-
-
-
-		<h3>[method:null setAnimationWeight]([page:String name], [page:Float weight])</h3>
-		<div>
-		name -- The name of the animation<br />
-		weight -- Weight of the animation, typically 0-1
-		</div>
-		<div>
-		Set the weight of how much this animation will apply to the overall morph. 0 is off, 1 is full weight.
-		</div>
-
-		<h3>[method:null setAnimationFPS]([page:String name], [page:Float fps])</h3>
-		<div>
-		name -- The name of the animation <br />
-		fps -- The number of frames (morphTargets) per second
-		</div>
-		<div>
-		A frame is typically 1 morph target.
-		</div>
-
-		<h3>[method:null createAnimation]([page:String name], [page:Integer start], [page:Integer end], [page:Float fps])</h3>
-		<div>
-		name -- The name of the animation <br />
-		start -- The starting frame (morph)<br />
-		end -- The ending frame (morph)<br />
-		fps -- How many frames (morphs) to play per second
-		</div>
-		<div>
-		Creates an animation object that gets added to both the [page:MorphBlendMesh.animationsMap animationsMap] and
-		[page:MorphBlendMesh.animationsList animationsList].<br/><br/>
-
-		Animation object:<br/><br/>
-		startFrame -- Starting frame<br/>
-		endFrame -- Ending frame<br/>
-		length -- The number of frames<br/>
-		fps -- The frames per second<br/>
-		duration -- The length of the animation in seconds<br/>
-		lastFrame -- The previous frame that was played<br/>
-		currentFrame -- The current frame<br/>
-		active -- Whether or not the animation is being played<br/>
-		time -- The time in seconds of the animation<br/>
-		direction -- Which way to play the animation<br/>
-		weight -- The weight of the animation<br/>
-		directionBackwards -- Is playing backwards<br/>
-		mirroredLoop -- Loop back and forth
-		</div>
-
-		<h3>[method:null playAnimation]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Sets the animation to active and animation time to 0
-		</div>
-
-		<h3>[method:null update]([page:Float delta])</h3>
-		<div>
-		delta -- Time in seconds
-		</div>
-		<div>
-		Updates and plays the animation
-		</div>
-
-		<h3>[method:null autoCreateAnimations]([page:Float fps])</h3>
-		<div>
-		fps -- Frames per second
-		</div>
-		<div>
-		Goes through the geometry's morphTargets and generates animations based on the morphTargets' names. Names
-		are of the form "walk_01", "walk_02", "walk_03", etc or "run001", "run002", "run003".
-		</div>
-
-		<h3>[method:null setAnimationDuration]([page:String name], [page:Float duration])</h3>
-		<div>
-		name -- The name of the animation <br />
-		duration -- How long in seconds to play the animation
-		</div>
-		<div>
-		Updates the animation object with proper values to update the duration.
-		</div>
-
-		<h3>[method:null setAnimationDirectionForward]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Sets the animation to play forwards
-		</div>
-
-		<h3>[method:null setAnimationDirectionBackward]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Sets the animation to play backwards
-		</div>
-
-		<h3>[method:Float getAnimationDuration]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Returns the duration in seconds of the animation. Returns -1 if it can't be found.
-		</div>
-
-		<h3>[method:Float getAnimationTime]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Returns the current time position of the animation.
-		</div>
-
-		<h3>[method:null setAnimationTime]([page:String name], [page:Float time])</h3>
-		<div>
-		name -- The name of the animation <br />
-		time -- The time in seconds
-		</div>
-		<div>
-		Sets the current time position of the animation
-		</div>
-
-		<h3>[method:null stopAnimation]([page:String name])</h3>
-		<div>
-		name -- The name of the animation
-		</div>
-		<div>
-		Stops the playback of the animation
-		</div>
-
-		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
-	</body>
-</html>

docs/api/materials/PointsMaterial.html

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

docs/api/math/Plane.html

@@ -12,7 +12,7 @@
 
 		<div class="desc">
 			A two dimensional surface that extends infinitely in 3d space, represented in [link:http://mathworld.wolfram.com/HessianNormalForm.html Hessian normal form]
-			by a normal vector and a constant.
+			by a unit length normal vector and a constant.
 		</div>
 
 
@@ -21,7 +21,7 @@
 
 		<h3>[name]( [page:Vector3 normal], [page:Float constant] )</h3>
 		<div>
-		[page:Vector3 normal] - (optional) a [page:Vector3] defining the normal of the plane. Default is *(1, 0, 0)*.<br />
+		[page:Vector3 normal] - (optional) a unit length [page:Vector3] defining the normal of the plane. Default is *(1, 0, 0)*.<br />
 		[page:Float constant] - (optional) the signed distance from the origin to the plane. Default is *0*.
 		</div>
 
@@ -130,7 +130,7 @@
 
 		<h3>[method:Plane set]( [page:Vector3 normal], [page:Float constant] )</h3>
 		<div>
-			[page:Vector3 normal] - a [page:Vector3] defining the normal of the plane.<br />
+			[page:Vector3 normal] - a unit length [page:Vector3] defining the normal of the plane.<br />
 			[page:Float constant] - the signed distance from the origin to the plane. Default is *0*.<br /><br />
 
 			 Sets the plane's [page:.normal normal] and [page:.constant constant] properties.
@@ -138,9 +138,9 @@
 
 		<h3>[method:Plane setComponents]( [page:Float x], [page:Float y], [page:Float z], [page:Float w] )</h3>
 		<div>
-		[page:Float x] - x value of the normal vector.<br />
-		[page:Float y] - y value of the normal vector.<br />
-		[page:Float z] - z value of the normal vector.<br />
+		[page:Float x] - x value of the unit length normal vector.<br />
+		[page:Float y] - y value of the unit length normal vector.<br />
+		[page:Float z] - z value of the unit length normal vector.<br />
 		[page:Float w] - the value of the plane's [page:.constant constant] property.<br /><br />
 
 		Set the individual components that define the plane.
@@ -158,7 +158,7 @@
 
 		<h3>[method:Plane setFromNormalAndCoplanarPoint]( [page:Vector3 normal], [page:Vector3 point] ) [page:Vector3 this]</h3>
 		<div>
-		[page:Vector3 normal] - a [page:Vector3] defining the normal of the plane.<br />
+		[page:Vector3 normal] - a unit length [page:Vector3] defining the normal of the plane.<br />
 		[page:Vector3 point] - [page:Vector3]<br /><br />
 
 		Sets the plane's properties as defined by a [page:Vector3 normal] and an arbitrary coplanar [page:Vector3 point].

docs/api/objects/Mesh.html

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

docs/api/renderers/WebGLRenderer.html

@@ -152,7 +152,7 @@
 		various WebGL extensions are supported.
 		</div>
 
-		<h3>[property:Boolean gammaFactor]</h3>
+		<h3>[property:Float gammaFactor]</h3>
 		<div>Default is *2*. </div>
 
 

docs/list.js

@@ -132,7 +132,6 @@ var list = {
 
 		"Extras / Objects": {
 			"ImmediateRenderObject": "api/extras/objects/ImmediateRenderObject",
-			"MorphBlendMesh": "api/extras/objects/MorphBlendMesh"
 		},
 
 		"Geometries": {

docs/scenes/material-browser.html

@@ -44,7 +44,7 @@
 
 			var gui = new dat.GUI();
 			var scene = new THREE.Scene();
-			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
+			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );

editor/js/Editor.js

@@ -351,18 +351,28 @@ Editor.prototype = {
 
 		var material = object.material;
 
-		if( Array.isArray( material ) == true) material = material[ slot ];
-		
+		if ( Array.isArray( material ) ) {
+
+			material = material[ slot ];
+
+		}
+
 		return material;
 
 	},
 
 	setObjectMaterial: function ( object, slot, newMaterial ) {
 
-		var material = object.material;
+		if ( Array.isArray( object.material ) ) {
+
+			object.material[ slot ] = newMaterial;
+
+		} else {
+
+			object.material = newMaterial;
+
+		}
 
-		if( Array.isArray( material ) == true) material[ slot ] = newMaterial;
-		else object.material = newMaterial;
 	},
 
 	//

editor/js/Loader.js

@@ -177,7 +177,7 @@ var Loader = function ( editor ) {
 					var contents = event.target.result;
 
 					var loader = new THREE.GLTF2Loader();
-					loader.parse( contents, function ( result ) {
+					loader.parse( contents, '', function ( result ) {
 
 						result.scene.name = filename;
 						editor.execute( new AddObjectCommand( result.scene ) );

editor/js/Sidebar.Material.js

@@ -5,9 +5,9 @@
 Sidebar.Material = function ( editor ) {
 
 	var signals = editor.signals;
-	
+
 	var currentObject;
-	
+
 	var currentMaterialSlot = 0;
 
 	var container = new UI.Panel();
@@ -24,7 +24,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialSlotRow = new UI.Row();
 
-	materialSlotRow.add( new UI.Text( 'Material Slot' ).setWidth( '90px' ) );
+	materialSlotRow.add( new UI.Text( 'Slot' ).setWidth( '90px' ) );
 
 	var materialSlotSelect =  new UI.Select().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
 
@@ -33,7 +33,7 @@ Sidebar.Material = function ( editor ) {
 	container.add( materialSlotRow );
 
 	managerRow.add( new UI.Text( '' ).setWidth( '90px' ) );
-	
+
 	managerRow.add( new UI.Button( 'New' ).onClick( function () {
 
 		var material = new THREE[ materialClass.getValue() ]();
@@ -46,11 +46,12 @@ Sidebar.Material = function ( editor ) {
 
 		copiedMaterial = currentObject.material;
 
-		if( Array.isArray( copiedMaterial ) == true){
+		if ( Array.isArray( copiedMaterial ) ) {
+
+			if ( copiedMaterial.length === 0 ) return;
+
+			copiedMaterial = copiedMaterial[ currentMaterialSlot ];
 
-			if( copiedMaterial.length == 0 ) return;
-			
-			copiedMaterial = copiedMaterial[ currentMaterialSlot ]
 		}
 
 	} ) );
@@ -515,9 +516,8 @@ Sidebar.Material = function ( editor ) {
 
 		currentMaterialSlot = parseInt( materialSlotSelect.getValue() );
 
-		if( currentMaterialSlot != previousSelectedSlot )
-			refreshUI(true);
-			
+		if ( currentMaterialSlot !== previousSelectedSlot ) refreshUI( true );
+
 		material  = editor.getObjectMaterial( currentObject, currentMaterialSlot )
 
 		var textureWarning = false;
@@ -1005,11 +1005,20 @@ Sidebar.Material = function ( editor ) {
 
 		var material = currentObject.material;
 
-		if( Array.isArray( material ) == true){
+		if ( Array.isArray( material ) ) {
+
+			materialSlotRow.setDisplay( '' );
+
+			if ( material.length === 0 ) return;
 
 			if( material.length == 0 ) return;
 			
 			material = material[ currentMaterialSlot ]
+
+		} else {
+
+			materialSlotRow.setDisplay( 'none' );
+
 		}
 
 		for ( var property in properties ) {
@@ -1027,46 +1036,24 @@ Sidebar.Material = function ( editor ) {
 
 		var material = currentObject.material;
 
-		var materialArray = []
-		
-		if( Array.isArray( material ) == true){
+		if ( Array.isArray( material ) ) {
 
-			if( material.length == 0 ){
+			var slotOptions = {};
 
-				currentMaterialSlot = 0;
+			currentMaterialSlot = Math.max( 0, Math.min( material.length, currentMaterialSlot ) );
 
-				materialArray = [undefined];
-		
-			}else{
+			for ( var i = 0; i < material.length; i ++ ) {
 
-				materialArray = material;
+				slotOptions[ i ] = String( i + 1 ) + ': ' + material[ i ].name;
 
 			}
 
-		} else {
-
-			materialArray = [material];
+			materialSlotSelect.setOptions( slotOptions ).setValue( currentMaterialSlot );
 
 		}
 
-		var slotOptions = {};
-
-		if( ( currentMaterialSlot < 0 ) || ( currentMaterialSlot >= materialArray.length ) ) currentMaterialSlot = 0;
-
-		for( var i=0; i < materialArray.length; i++){
-
-			var material = materialArray[ i ];
-
-			var label =  material ? ( material.name == '' ? '[Unnamed]' : material.name ) : '[No Material]';
-
-			slotOptions[i] = '' + (i+1) + ':' + materialArray.length + ' ' + label;
-		} 
-
-		materialSlotSelect.setOptions(slotOptions).setValue( currentMaterialSlot )
-
 		material = editor.getObjectMaterial( currentObject, currentMaterialSlot );
 
-
 		if ( material.uuid !== undefined ) {
 
 			materialUUID.setValue( material.uuid );
@@ -1352,14 +1339,22 @@ Sidebar.Material = function ( editor ) {
 	// events
 
 	signals.objectSelected.add( function ( object ) {
-		var hasMaterial = false
+
+		var hasMaterial = false;
 
 		if ( object && object.material ) {
-			if( ( Array.isArray( object.material ) === false ) || ( object.material.length > 0 ) )
-				hasMaterial = true;
+
+			hasMaterial = true;
+
+			if ( Array.isArray( object.material ) && object.material.length === 0 ) {
+
+				hasMaterial = false;
+
+			}
+
 		}
 
-		if( hasMaterial ){
+		if ( hasMaterial ) {
 
 			var objectChanged = object !== currentObject;
 

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

@@ -1731,74 +1731,6 @@
       "!doc": "base class for immediate rendering objects.",
       "!type": "fn()"
     },
-    "MorphBlendMesh": {
-      "!url": "http://threejs.org/docs/#Reference/extras/objects/MorphBlendMesh",
-      "prototype": {
-        "!proto": "THREE.Mesh.prototype",
-        "animationsMap": {
-          "!type": "object",
-          "!doc": "todo"
-        },
-        "animationsList": {
-          "!type": "array",
-          "!doc": "todo"
-        },
-        "setAnimationWeight": {
-          "!type": "fn(name: todo, weight: todo) -> todo",
-          "!doc": "todo"
-        },
-        "setAnimationFPS": {
-          "!type": "fn(name: todo, fps: todo) -> todo",
-          "!doc": "todo"
-        },
-        "createAnimation": {
-          "!type": "fn(name: todo, start: todo, end: todo, fps: todo) -> todo",
-          "!doc": "todo"
-        },
-        "playAnimation": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        },
-        "update": {
-          "!type": "fn(delta: todo) -> todo",
-          "!doc": "todo"
-        },
-        "autoCreateAnimations": {
-          "!type": "fn(fps: todo) -> todo",
-          "!doc": "todo"
-        },
-        "setAnimationDuration": {
-          "!type": "fn(name: todo, duration: todo) -> todo",
-          "!doc": "todo"
-        },
-        "setAnimationDirectionForward": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        },
-        "getAnimationDuration": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        },
-        "getAnimationTime": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        },
-        "setAnimationDirectionBackward": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        },
-        "setAnimationTime": {
-          "!type": "fn(name: todo, time: todo) -> todo",
-          "!doc": "todo"
-        },
-        "stopAnimation": {
-          "!type": "fn(name: todo) -> todo",
-          "!doc": "todo"
-        }
-      },
-      "!doc": "todo",
-      "!type": "fn(geometry: todo, material: todo)"
-    },
     "AmbientLight": {
       "!url": "http://threejs.org/docs/#Reference/lights/AmbientLight",
       "prototype": {

examples/canvas_lines_dashed.html

@@ -92,7 +92,7 @@
 				objects.push( object );
 				scene.add( object );
 
-				var object = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ) );
+				var object = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 30, gapSize: 10, linewidth: 2 } ) );
 
 				objects.push( object );
 				scene.add( object );

examples/js/MorphBlendMesh.js

@@ -0,0 +1,318 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.MorphBlendMesh = function ( geometry, material ) {
+
+	THREE.Mesh.call( this, geometry, material );
+
+	this.animationsMap = {};
+	this.animationsList = [];
+
+	// prepare default animation
+	// (all frames played together in 1 second)
+
+	var numFrames = this.geometry.morphTargets.length;
+
+	var name = "__default";
+
+	var startFrame = 0;
+	var endFrame = numFrames - 1;
+
+	var fps = numFrames / 1;
+
+	this.createAnimation( name, startFrame, endFrame, fps );
+	this.setAnimationWeight( name, 1 );
+
+}
+
+THREE.MorphBlendMesh.prototype = Object.assign( Object.create( THREE.Mesh.prototype ), {
+
+	constructor: THREE.MorphBlendMesh,
+
+	createAnimation: function ( name, start, end, fps ) {
+
+		var animation = {
+
+			start: start,
+			end: end,
+
+			length: end - start + 1,
+
+			fps: fps,
+			duration: ( end - start ) / fps,
+
+			lastFrame: 0,
+			currentFrame: 0,
+
+			active: false,
+
+			time: 0,
+			direction: 1,
+			weight: 1,
+
+			directionBackwards: false,
+			mirroredLoop: false
+
+		};
+
+		this.animationsMap[ name ] = animation;
+		this.animationsList.push( animation );
+
+	},
+
+		autoCreateAnimations: function ( fps ) {
+
+		var pattern = /([a-z]+)_?(\d+)/i;
+
+		var firstAnimation, frameRanges = {};
+
+		var geometry = this.geometry;
+
+		for ( var i = 0, il = geometry.morphTargets.length; i < il; i ++ ) {
+
+			var morph = geometry.morphTargets[ i ];
+			var chunks = morph.name.match( pattern );
+
+			if ( chunks && chunks.length > 1 ) {
+
+				var name = chunks[ 1 ];
+
+				if ( ! frameRanges[ name ] ) frameRanges[ name ] = { start: Infinity, end: - Infinity };
+
+				var range = frameRanges[ name ];
+
+				if ( i < range.start ) range.start = i;
+				if ( i > range.end ) range.end = i;
+
+				if ( ! firstAnimation ) firstAnimation = name;
+
+			}
+
+		}
+
+		for ( var name in frameRanges ) {
+
+			var range = frameRanges[ name ];
+			this.createAnimation( name, range.start, range.end, fps );
+
+		}
+
+		this.firstAnimation = firstAnimation;
+
+	},
+
+	setAnimationDirectionForward: function ( name ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.direction = 1;
+			animation.directionBackwards = false;
+
+		}
+
+	},
+
+	setAnimationDirectionBackward: function ( name ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.direction = - 1;
+			animation.directionBackwards = true;
+
+		}
+
+	},
+
+	setAnimationFPS: function ( name, fps ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.fps = fps;
+			animation.duration = ( animation.end - animation.start ) / animation.fps;
+
+		}
+
+	},
+
+	setAnimationDuration: function ( name, duration ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.duration = duration;
+			animation.fps = ( animation.end - animation.start ) / animation.duration;
+
+		}
+
+	},
+
+	setAnimationWeight: function ( name, weight ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.weight = weight;
+
+		}
+
+	},
+
+	setAnimationTime: function ( name, time ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.time = time;
+
+		}
+
+	},
+
+	getAnimationTime: function ( name ) {
+
+		var time = 0;
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			time = animation.time;
+
+		}
+
+		return time;
+
+	},
+
+	getAnimationDuration: function ( name ) {
+
+		var duration = - 1;
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			duration = animation.duration;
+
+		}
+
+		return duration;
+
+	},
+
+	playAnimation: function ( name ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.time = 0;
+			animation.active = true;
+
+		} else {
+
+			console.warn( "THREE.MorphBlendMesh: animation[" + name + "] undefined in .playAnimation()" );
+
+		}
+
+	},
+
+	stopAnimation: function ( name ) {
+
+		var animation = this.animationsMap[ name ];
+
+		if ( animation ) {
+
+			animation.active = false;
+
+		}
+
+	},
+
+	update: function ( delta ) {
+
+		for ( var i = 0, il = this.animationsList.length; i < il; i ++ ) {
+
+			var animation = this.animationsList[ i ];
+
+			if ( ! animation.active ) continue;
+
+			var frameTime = animation.duration / animation.length;
+
+			animation.time += animation.direction * delta;
+
+			if ( animation.mirroredLoop ) {
+
+				if ( animation.time > animation.duration || animation.time < 0 ) {
+
+					animation.direction *= - 1;
+
+					if ( animation.time > animation.duration ) {
+
+						animation.time = animation.duration;
+						animation.directionBackwards = true;
+
+					}
+
+					if ( animation.time < 0 ) {
+
+						animation.time = 0;
+						animation.directionBackwards = false;
+
+					}
+
+				}
+
+			} else {
+
+				animation.time = animation.time % animation.duration;
+
+				if ( animation.time < 0 ) animation.time += animation.duration;
+
+			}
+
+			var keyframe = animation.start + THREE.Math.clamp( Math.floor( animation.time / frameTime ), 0, animation.length - 1 );
+			var weight = animation.weight;
+
+			if ( keyframe !== animation.currentFrame ) {
+
+				this.morphTargetInfluences[ animation.lastFrame ] = 0;
+				this.morphTargetInfluences[ animation.currentFrame ] = 1 * weight;
+
+				this.morphTargetInfluences[ keyframe ] = 0;
+
+				animation.lastFrame = animation.currentFrame;
+				animation.currentFrame = keyframe;
+
+			}
+
+			var mix = ( animation.time % frameTime ) / frameTime;
+
+			if ( animation.directionBackwards ) mix = 1 - mix;
+
+			if ( animation.currentFrame !== animation.lastFrame ) {
+
+				this.morphTargetInfluences[ animation.currentFrame ] = mix * weight;
+				this.morphTargetInfluences[ animation.lastFrame ] = ( 1 - mix ) * weight;
+
+			} else {
+
+				this.morphTargetInfluences[ animation.currentFrame ] = weight;
+
+			}
+
+		}
+
+	}
+
+} );

examples/js/loaders/AssimpJSONLoader.js

@@ -21,6 +21,8 @@ THREE.AssimpJSONLoader.prototype = {
 
 	constructor: THREE.AssimpJSONLoader,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;

examples/js/loaders/BinaryLoader.js

@@ -19,6 +19,8 @@ THREE.BinaryLoader.prototype = {
 
 	constructor: THREE.BinaryLoader,
 
+	crossOrigin: 'Anonymous',
+
 	// Load models generated by slim OBJ converter with BINARY option (converter_obj_three_slim.py -t binary)
 	//  - binary models consist of two files: JS and BIN
 	//  - parameters

examples/js/loaders/ColladaLoader2.js

@@ -13,6 +13,8 @@ THREE.ColladaLoader.prototype = {
 
 	constructor: THREE.ColladaLoader,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;
@@ -1885,6 +1887,24 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
+		function groupPrimitives( primitives ) {
+
+			var build = {};
+
+			for ( var i = 0; i < primitives.length; i ++ ) {
+
+				var primitive = primitives[ i ];
+
+				if ( build[ primitive.type ] === undefined ) build[ primitive.type ] = [];
+
+				build[ primitive.type ].push( primitive );
+
+			}
+
+			return build;
+
+		}
+
 		function buildGeometry( data ) {
 
 			var build = {};
@@ -1895,6 +1915,27 @@ THREE.ColladaLoader.prototype = {
 
 			if ( primitives.length === 0 ) return {};
 
+			// our goal is to create one buffer geoemtry for a single type of primitives
+			// first, we group all primitives by their type
+
+			var groupedPrimitives = groupPrimitives( primitives );
+
+			for ( var type in groupedPrimitives ) {
+
+				// second, we create for each type of primitives (polylist,triangles or lines) a buffer geometry
+
+				build[ type ] = buildGeometryType( groupedPrimitives[ type ], sources, vertices );
+
+			}
+
+			return build;
+
+		}
+
+		function buildGeometryType( primitives, sources, vertices ) {
+
+			var build = {};
+
 			var position = { array: [], stride: 0 };
 			var normal = { array: [], stride: 0 };
 			var uv = { array: [], stride: 0 };
@@ -1904,7 +1945,6 @@ THREE.ColladaLoader.prototype = {
 			var skinWeight = { array: [], stride: 4 };
 
 			var geometry = new THREE.BufferGeometry();
-			geometry.name = data.name || '';
 
 			var materialKeys = [];
 
@@ -1925,7 +1965,16 @@ THREE.ColladaLoader.prototype = {
 
 				// groups
 
-				count = primitive.count * 3 * triangleCount;
+				if ( primitive.type === 'lines' || primitive.type === 'linestrips' ) {
+
+					count = primitive.count * 2;
+
+				} else {
+
+					count = primitive.count * 3 * triangleCount;
+
+				}
+
 				geometry.addGroup( start, count, p );
 				start += count;
 
@@ -1944,17 +1993,39 @@ THREE.ColladaLoader.prototype = {
 						case 'VERTEX':
 							for ( var key in vertices ) {
 
-								if ( key === 'POSITION' ) {
+								var id =  vertices[ key ];
 
-									buildGeometryData( primitive, sources[ vertices[ key ] ], input.offset, position.array );
-									position.stride = sources[ vertices[ key ] ].stride;
+								switch ( key ) {
 
-									if ( sources.skinWeights && sources.skinIndices ) {
+									case 'POSITION':
+										buildGeometryData( primitive, sources[ id ], input.offset, position.array );
+										position.stride = sources[ id ].stride;
 
-										buildGeometryData( primitive, sources.skinIndices, input.offset, skinIndex.array );
-										buildGeometryData( primitive, sources.skinWeights, input.offset, skinWeight.array );
+										if ( sources.skinWeights && sources.skinIndices ) {
 
-									}
+											buildGeometryData( primitive, sources.skinIndices, input.offset, skinIndex.array );
+											buildGeometryData( primitive, sources.skinWeights, input.offset, skinWeight.array );
+
+										}
+										break;
+
+									case 'NORMAL':
+										buildGeometryData( primitive, sources[ id ], input.offset, normal.array );
+										normal.stride = sources[ id ].stride;
+										break;
+
+									case 'COLOR':
+										buildGeometryData( primitive, sources[ id ], input.offset, color.array );
+										color.stride = sources[ id ].stride;
+										break;
+
+									case 'TEXCOORD':
+										buildGeometryData( primitive, sources[ id ], input.offset, uv.array );
+										uv.stride = sources[ id ].stride;
+										break;
+
+									default:
+										console.warn( 'THREE.ColladaLoader: Semantic "%s" not handled in geometry build process.', key );
 
 								}
 
@@ -2785,7 +2856,7 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
-		function getSkeleton( skeletons, joints ) {
+		function buildSkeleton( skeletons, joints ) {
 
 			var boneData = [];
 			var sortedBoneData = [];
@@ -2917,54 +2988,83 @@ THREE.ColladaLoader.prototype = {
 			var instanceGeometries = data.instanceGeometries;
 			var instanceNodes = data.instanceNodes;
 
+			// nodes
+
 			for ( var i = 0, l = nodes.length; i < l; i ++ ) {
 
 				objects.push( getNode( nodes[ i ] ) );
 
 			}
 
+			// instance cameras
+
 			for ( var i = 0, l = instanceCameras.length; i < l; i ++ ) {
 
 				objects.push( getCamera( instanceCameras[ i ] ).clone() );
 
 			}
 
+			// instance controllers
+
 			for ( var i = 0, l = instanceControllers.length; i < l; i ++ ) {
 
 				var instance = instanceControllers[ i ];
 				var controller = getController( instance.id );
-				var geometry = getGeometry( controller.id );
-				var materials = resolveMaterialBinding( geometry.materialKeys, instance.materials );
-				var object = getObject( geometry, materials );
+				var geometries = getGeometry( controller.id );
+				var newObjects = buildObjects( geometries, instance.materials );
 
 				var skeletons = instance.skeletons;
 				var joints = controller.skin.joints;
 
-				var skeleton = getSkeleton( skeletons, joints );
+				var skeleton = buildSkeleton( skeletons, joints );
 
-				object.bind( skeleton, controller.skin.bindMatrix );
-				object.normalizeSkinWeights();
+				for ( var j = 0, jl = newObjects.length; j < jl; j ++ ) {
 
-				objects.push( object );
+					var object = newObjects[ j ];
+
+					if ( object.isSkinnedMesh ) {
+
+						object.bind( skeleton, controller.skin.bindMatrix );
+						object.normalizeSkinWeights();
+
+					}
+
+					objects.push( object );
+
+				}
 
 			}
 
+			// instance lights
+
 			for ( var i = 0, l = instanceLights.length; i < l; i ++ ) {
 
 				objects.push( getLight( instanceLights[ i ] ).clone() );
 
 			}
 
+			// instance geometries
+
 			for ( var i = 0, l = instanceGeometries.length; i < l; i ++ ) {
 
 				var instance = instanceGeometries[ i ];
-				var geometry = getGeometry( instance.id );
-				var materials = resolveMaterialBinding( geometry.materialKeys, instance.materials );
-				var object = getObject( geometry, materials );
-				objects.push( object );
+
+				// a single geometry instance in collada can lead to multiple object3Ds.
+				// this is the case when primitives are combined like triangles and lines
+
+				var geometries = getGeometry( instance.id );
+				var newObjects = buildObjects( geometries, instance.materials );
+
+				for ( var j = 0, jl = newObjects.length; j < jl; j ++ ) {
+
+					objects.push( newObjects[ j ] );
+
+				}
 
 			}
 
+			// instance nodes
+
 			for ( var i = 0, l = instanceNodes.length; i < l; i ++ ) {
 
 				objects.push( getNode( instanceNodes[ i ] ).clone() );
@@ -3012,50 +3112,60 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
-		function getObject( geometry, materials ) {
+		function buildObjects( geometries, instanceMaterials ) {
 
-			var object;
+			var objects = [];
+
+			for ( var type in geometries ) {
+
+				var geometry = geometries[ type ];
 
-			var skinning = ( geometry.data.attributes.skinIndex !== undefined );
+				var materials = resolveMaterialBinding( geometry.materialKeys, instanceMaterials );
 
-			if ( skinning ) {
+				var skinning = ( geometry.data.attributes.skinIndex !== undefined );
 
-				for ( var i = 0, l = materials.length; i < l; i ++ ) {
+				if ( skinning ) {
 
-					materials[ i ].skinning = true;
+					for ( var i = 0, l = materials.length; i < l; i ++ ) {
+
+						materials[ i ].skinning = true;
+
+					}
 
 				}
 
-			}
+				var material = ( materials.length === 1 ) ? materials[ 0 ] : materials;
 
-			var material = ( materials.length === 1 ) ? materials[ 0 ] : materials;
+				switch ( type ) {
 
-			switch ( geometry.type ) {
+					case 'lines':
+						object = new THREE.LineSegments( geometry.data, material );
+						break;
 
-				case 'lines':
-					object = new THREE.LineSegments( geometry.data, material );
-					break;
+					case 'linestrips':
+						object = new THREE.Line( geometry.data, material );
+						break;
 
-				case 'linestrips':
-					object = new THREE.Line( geometry.data, material );
-					break;
+					case 'triangles':
+					case 'polylist':
+						if ( skinning ) {
 
-				case 'triangles':
-				case 'polylist':
-					if ( skinning ) {
+							object = new THREE.SkinnedMesh( geometry.data, material );
 
-						object = new THREE.SkinnedMesh( geometry.data, material );
+						} else {
 
-					} else {
+							object = new THREE.Mesh( geometry.data, material );
 
-						object = new THREE.Mesh( geometry.data, material );
+						}
+						break;
 
-					}
-					break;
+				}
+
+				objects.push( object );
 
 			}
 
-			return object;
+			return objects;
 
 		}
 
@@ -3097,7 +3207,17 @@ THREE.ColladaLoader.prototype = {
 
 				var child = children[ i ];
 
-				group.add( getNode( child.id ) );
+				if ( child.id === null ) {
+
+					group.add( buildNode( child ) );
+
+				} else {
+
+					// if there is an ID, let's try to get the finished build (e.g. joints are already build)
+
+					group.add( getNode( child.id ) );
+
+				}
 
 			}
 

examples/js/loaders/GLTF2Loader.js

@@ -18,11 +18,13 @@ THREE.GLTF2Loader = ( function () {
 
 		constructor: GLTF2Loader,
 
+		crossOrigin: 'Anonymous',
+
 		load: function ( url, onLoad, onProgress, onError ) {
 
 			var scope = this;
 
-			var path = this.path && ( typeof this.path === "string" ) ? this.path : THREE.Loader.prototype.extractUrlBase( url );
+			var path = this.path && ( typeof this.path === 'string' ) ? this.path : THREE.Loader.prototype.extractUrlBase( url );
 
 			var loader = new THREE.FileLoader( scope.manager );
 
@@ -30,7 +32,16 @@ THREE.GLTF2Loader = ( function () {
 
 			loader.load( url, function ( data ) {
 
-				scope.parse( data, onLoad, path );
+				try {
+
+					scope.parse( data, path, onLoad, onError );
+
+				} catch ( e ) {
+
+					// For SyntaxError or TypeError, return a generic failure message.
+					onError( e.constructor === Error ? e : new Error( 'THREE.GLTF2Loader: Unable to parse model.' ) );
+
+				}
 
 			}, onProgress, onError );
 
@@ -48,7 +59,7 @@ THREE.GLTF2Loader = ( function () {
 
 		},
 
-		parse: function ( data, callback, path ) {
+		parse: function ( data, path, onLoad, onError ) {
 
 			var content;
 			var extensions = {};
@@ -68,6 +79,13 @@ THREE.GLTF2Loader = ( function () {
 
 			var json = JSON.parse( content );
 
+			if ( json.asset.version[0] < 2 ) {
+
+				onError( new Error( 'THREE.GLTF2Loader: Legacy glTF detected. Use THREE.GLTFLoader instead.' ) );
+				return;
+
+			}
+
 			if ( json.extensionsUsed ) {
 
 				if( json.extensionsUsed.indexOf( EXTENSIONS.KHR_LIGHTS ) >= 0 ) {
@@ -110,15 +128,15 @@ THREE.GLTF2Loader = ( function () {
 				console.timeEnd( 'GLTF2Loader' );
 
 				var glTF = {
-					"scene": scene,
-					"scenes": scenes,
-					"cameras": cameras,
-					"animations": animations
+					scene: scene,
+					scenes: scenes,
+					cameras: cameras,
+					animations: animations
 				};
 
-				callback( glTF );
+				onLoad( glTF );
 
-			} );
+			}, onError );
 
 		}
 
@@ -229,26 +247,26 @@ THREE.GLTF2Loader = ( function () {
 
 			switch ( boundUniform.semantic ) {
 
-				case "MODELVIEW":
+				case 'MODELVIEW':
 
 					var m4 = boundUniform.uniform.value;
 					m4.multiplyMatrices( camera.matrixWorldInverse, boundUniform.sourceNode.matrixWorld );
 					break;
 
-				case "MODELVIEWINVERSETRANSPOSE":
+				case 'MODELVIEWINVERSETRANSPOSE':
 
 					var m3 = boundUniform.uniform.value;
 					this._m4.multiplyMatrices( camera.matrixWorldInverse, boundUniform.sourceNode.matrixWorld );
 					m3.getNormalMatrix( this._m4 );
 					break;
 
-				case "PROJECTION":
+				case 'PROJECTION':
 
 					var m4 = boundUniform.uniform.value;
 					m4.copy( camera.projectionMatrix );
 					break;
 
-				case "JOINTMATRIX":
+				case 'JOINTMATRIX':
 
 					var m4v = boundUniform.uniform.value;
 
@@ -270,7 +288,7 @@ THREE.GLTF2Loader = ( function () {
 
 				default :
 
-					console.warn( "Unhandled shader semantic: " + boundUniform.semantic );
+					console.warn( 'THREE.GLTF2Loader: Unhandled shader semantic: ' + boundUniform.semantic );
 					break;
 
 			}
@@ -362,7 +380,7 @@ THREE.GLTF2Loader = ( function () {
 
 				if ( light.fallOffExponent !== undefined ) {
 
-					console.warn( 'GLTF2Loader: light.fallOffExponent not currently supported.' );
+					console.warn( 'THREE.GLTF2Loader:: light.fallOffExponent not currently supported.' );
 
 				}
 
@@ -495,11 +513,11 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( this.header.magic !== BINARY_EXTENSION_HEADER_MAGIC ) {
 
-			throw new Error( 'GLTF2Loader: Unsupported glTF-Binary header.' );
+			throw new Error( 'THREE.GLTF2Loader: Unsupported glTF-Binary header.' );
 
 		} else if ( this.header.version < 2.0 ) {
 
-			throw new Error( 'GLTF2Loader: Legacy binary file detected. Use GLTFLoader instead.' );
+			throw new Error( 'THREE.GLTF2Loader: Legacy binary file detected. Use GLTFLoader instead.' );
 
 		}
 
@@ -534,7 +552,7 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( this.content === null ) {
 
-			throw new Error( 'GLTF2Loader: JSON content not found.' );
+			throw new Error( 'THREE.GLTF2Loader: JSON content not found.' );
 
 		}
 
@@ -582,7 +600,7 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( ! materialParams.fragmentShader ) {
 
-			throw new Error( 'ERROR: Missing fragment shader definition:', program.fragmentShader );
+			throw new Error( 'THREE.GLTF2Loader: Missing fragment shader definition: ' + program.fragmentShader );
 
 		}
 
@@ -590,7 +608,7 @@ THREE.GLTF2Loader = ( function () {
 
 		if ( ! vertexShader ) {
 
-			throw new Error( 'ERROR: Missing vertex shader definition:', program.vertexShader );
+			throw new Error( 'THREE.GLTF2Loader: Missing vertex shader definition: ' + program.vertexShader );
 
 		}
 
@@ -659,7 +677,7 @@ THREE.GLTF2Loader = ( function () {
 					case WEBGL_CONSTANTS.FLOAT_MAT2:
 
 						// what to do?
-						console.warn( 'FLOAT_MAT2 is not a supported uniform type' );
+						console.warn( 'THREE.GLTF2Loader: FLOAT_MAT2 is not a supported uniform type.' );
 						break;
 
 					case WEBGL_CONSTANTS.FLOAT_MAT4:
@@ -734,7 +752,7 @@ THREE.GLTF2Loader = ( function () {
 
 			} else {
 
-				throw new Error( 'Unknown shader uniform param type: ' + ptype );
+				throw new Error( 'THREE.GLTF2Loader: Unknown shader uniform param type: ' + ptype );
 
 			}
 
@@ -781,7 +799,7 @@ THREE.GLTF2Loader = ( function () {
 
 				default:
 
-					throw new Error( "Unknown technique.states.enable: " + enable );
+					throw new Error( 'THREE.GLTF2Loader: Unknown technique.states.enable: ' + enable );
 
 			}
 
@@ -980,6 +998,8 @@ THREE.GLTF2Loader = ( function () {
 					transparent: params.transparent
 				} );
 
+				material.isGLTFSpecularGlossinessMaterial = true;
+
 				material.color = params.color;
 
 				material.map = params.map === undefined ? null : params.map;
@@ -1280,6 +1300,8 @@ THREE.GLTF2Loader = ( function () {
 	};
 
 	var INTERPOLATION = {
+		CATMULLROMSPLINE: THREE.InterpolateSmooth,
+		CUBICSPLINE: THREE.InterpolateSmooth,
 		LINEAR: THREE.InterpolateLinear,
 		STEP: THREE.InterpolateDiscrete
 	};
@@ -1487,7 +1509,7 @@ THREE.GLTF2Loader = ( function () {
 			var param = params[ pname ];
 			var semantic = param.semantic;
 
-			var regEx = new RegExp( "\\b" + pname + "\\b", "g" );
+			var regEx = new RegExp( '\\b' + pname + '\\b', 'g' );
 
 			switch ( semantic ) {
 
@@ -1612,7 +1634,7 @@ THREE.GLTF2Loader = ( function () {
 		for ( var i = 0; i < dependencies.length; i ++ ) {
 
 			var dependency = dependencies[ i ];
-			var fnName = "load" + dependency.charAt( 0 ).toUpperCase() + dependency.slice( 1 );
+			var fnName = 'load' + dependency.charAt( 0 ).toUpperCase() + dependency.slice( 1 );
 
 			var cached = this.cache.get( dependency );
 
@@ -1639,7 +1661,7 @@ THREE.GLTF2Loader = ( function () {
 
 	};
 
-	GLTFParser.prototype.parse = function ( callback ) {
+	GLTFParser.prototype.parse = function ( onLoad, onError ) {
 
 		var json = this.json;
 
@@ -1649,9 +1671,9 @@ THREE.GLTF2Loader = ( function () {
 		// Fire the callback on complete
 		this._withDependencies( [
 
-			"scenes",
-			"cameras",
-			"animations"
+			'scenes',
+			'cameras',
+			'animations'
 
 		] ).then( function ( dependencies ) {
 
@@ -1682,9 +1704,9 @@ THREE.GLTF2Loader = ( function () {
 
 			}
 
-			callback( scene, scenes, cameras, animations );
+			onLoad( scene, scenes, cameras, animations );
 
-		} );
+		} ).catch( onError );
 
 	};
 
@@ -1696,7 +1718,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"bufferViews"
+			'bufferViews'
 
 		] ).then( function ( dependencies ) {
 
@@ -1763,7 +1785,7 @@ THREE.GLTF2Loader = ( function () {
 
 			} else {
 
-				console.warn( 'THREE.GLTF2Loader: ' + buffer.type + ' buffer type is not supported' );
+				console.warn( 'THREE.GLTF2Loader: %s buffer type is not supported.', buffer.type );
 
 			}
 
@@ -1777,7 +1799,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"buffers"
+			'buffers'
 
 		] ).then( function ( dependencies ) {
 
@@ -1802,7 +1824,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"bufferViews"
+			'bufferViews'
 
 		] ).then( function ( dependencies ) {
 
@@ -1850,7 +1872,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"bufferViews"
+			'bufferViews'
 
 		] ).then( function ( dependencies ) {
 
@@ -1900,7 +1922,7 @@ THREE.GLTF2Loader = ( function () {
 
 							if ( texture.internalFormat !== undefined && _texture.format !== WEBGL_TEXTURE_FORMATS[ texture.internalFormat ] ) {
 
-								console.warn( 'THREE.GLTF2Loader: Three.js doesn\'t support texture internalFormat which is different from texture format. ' +
+								console.warn( 'THREE.GLTF2Loader: Three.js does not support texture internalFormat which is different from texture format. ' +
 															'internalFormat will be forced to be the same value as format.' );
 
 							}
@@ -1911,7 +1933,7 @@ THREE.GLTF2Loader = ( function () {
 							var sampler = samplers[ texture.sampler ] || {};
 
 							_texture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || THREE.LinearFilter;
-							_texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || THREE.NearestMipMapLinearFilter;
+							_texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || THREE.LinearMipMapLinearFilter;
 							_texture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || THREE.RepeatWrapping;
 							_texture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || THREE.RepeatWrapping;
 
@@ -2082,6 +2104,10 @@ THREE.GLTF2Loader = ( function () {
 
 				if ( material.name !== undefined ) _material.name = material.name;
 
+				// Normal map textures use OpenGL conventions:
+				// https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#materialnormaltexture
+				_material.normalScale.x = -1;
+
 				return _material;
 
 			} );
@@ -2096,8 +2122,8 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"accessors",
-			"materials"
+			'accessors',
+			'materials'
 
 		] ).then( function ( dependencies ) {
 
@@ -2191,11 +2217,26 @@ THREE.GLTF2Loader = ( function () {
 								&& geometry.attributes.uv2 === undefined
 								&& geometry.attributes.uv !== undefined ) {
 
-							console.log( 'GLTF2Loader: Duplicating UVs to support aoMap.' );
+							console.log( 'THREE.GLTF2Loader: Duplicating UVs to support aoMap.' );
 							geometry.addAttribute( 'uv2', new THREE.BufferAttribute( geometry.attributes.uv.array, 2 ) );
 
 						}
 
+						if ( geometry.attributes.normal === undefined ) {
+
+							if ( material.flatShading !== undefined ) {
+
+								material.flatShading = true;
+
+							} else {
+
+								// TODO: Remove this backwards-compatibility fix after r87 release.
+								material.shading = THREE.FlatShading;
+
+							}
+
+						}
+
 						meshNode = new THREE.Mesh( geometry, material );
 						meshNode.castShadow = true;
 
@@ -2235,13 +2276,18 @@ THREE.GLTF2Loader = ( function () {
 									positionAttribute = dependencies.accessors[ target.POSITION ].clone();
 									var position = geometry.attributes.position;
 
-									for ( var j = 0, jl = positionAttribute.array.length; j < jl; j ++ ) {
+									for ( var j = 0, jl = positionAttribute.count; j < jl; j ++ ) {
 
-										positionAttribute.array[ j ] += position.array[ j ];
+										positionAttribute.setXYZ(
+											j,
+											positionAttribute.getX( j ) + position.getX( j ),
+											positionAttribute.getY( j ) + position.getY( j ),
+											positionAttribute.getZ( j ) + position.getZ( j )
+										);
 
 									}
 
-								} else {
+								} else if ( geometry.attributes.position ) {
 
 									// Copying the original position not to affect the final position.
 									// See the formula above.
@@ -2258,13 +2304,18 @@ THREE.GLTF2Loader = ( function () {
 									normalAttribute = dependencies.accessors[ target.NORMAL ].clone();
 									var normal = geometry.attributes.normal;
 
-									for ( var j = 0, jl = normalAttribute.array.length; j < jl; j ++ ) {
+									for ( var j = 0, jl = normalAttribute.count; j < jl; j ++ ) {
 
-										normalAttribute.array[ j ] += normal.array[ j ];
+										normalAttribute.setXYZ(
+											j,
+											normalAttribute.getX( j ) + normal.getX( j ),
+											normalAttribute.getY( j ) + normal.getY( j ),
+											normalAttribute.getZ( j ) + normal.getZ( j )
+										);
 
 									}
 
-								} else {
+								} else if ( geometry.attributes.normal ) {
 
 									normalAttribute = geometry.attributes.normal.clone();
 
@@ -2275,11 +2326,19 @@ THREE.GLTF2Loader = ( function () {
 
 								}
 
-								positionAttribute.name = attributeName;
-								normalAttribute.name = attributeName;
+								if ( positionAttribute ) {
+
+									positionAttribute.name = attributeName;
+									morphAttributes.position.push( positionAttribute );
+
+								}
+
+								if ( normalAttribute ) {
 
-								morphAttributes.position.push( positionAttribute );
-								morphAttributes.normal.push( normalAttribute );
+									normalAttribute.name = attributeName;
+									morphAttributes.normal.push( normalAttribute );
+
+								}
 
 							}
 
@@ -2337,7 +2396,7 @@ THREE.GLTF2Loader = ( function () {
 
 					} else {
 
-						throw new Error( 'Only triangular and line primitives are supported' );
+						throw new Error( 'THREE.GLTF2Loader: Only triangular and line primitives are supported.' );
 
 					}
 
@@ -2379,7 +2438,7 @@ THREE.GLTF2Loader = ( function () {
 
 			if ( !params ) {
 
-				console.warn( 'GLTF2Loader: Missing camera parameters.' );
+				console.warn( 'THREE.GLTF2Loader: Missing camera parameters.' );
 				return;
 
 			}
@@ -2412,7 +2471,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"accessors"
+			'accessors'
 
 		] ).then( function ( dependencies ) {
 
@@ -2437,8 +2496,8 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"accessors",
-			"nodes"
+			'accessors',
+			'nodes'
 
 		] ).then( function ( dependencies ) {
 
@@ -2492,6 +2551,13 @@ THREE.GLTF2Loader = ( function () {
 							}
 
 							var targetName = node.name ? node.name : node.uuid;
+
+							if ( sampler.interpolation === 'CATMULLROMSPLINE' ) {
+
+								console.warn( 'THREE.GLTF2Loader: CATMULLROMSPLINE interpolation is not supported. Using CUBICSPLINE instead.' );
+
+							}
+
 							var interpolation = sampler.interpolation !== undefined ? INTERPOLATION[ sampler.interpolation ] : THREE.InterpolateLinear;
 
 							var targetNames = [];
@@ -2539,7 +2605,7 @@ THREE.GLTF2Loader = ( function () {
 
 				}
 
-				var name = animation.name !== undefined ? animation.name : "animation_" + animationId;
+				var name = animation.name !== undefined ? animation.name : 'animation_' + animationId;
 
 				return new THREE.AnimationClip( name, undefined, tracks );
 
@@ -2617,9 +2683,9 @@ THREE.GLTF2Loader = ( function () {
 
 			return scope._withDependencies( [
 
-				"meshes",
-				"skins",
-				"cameras"
+				'meshes',
+				'skins',
+				'cameras'
 
 			] ).then( function ( dependencies ) {
 
@@ -2635,7 +2701,7 @@ THREE.GLTF2Loader = ( function () {
 
 					} else if ( node.meshes !== undefined ) {
 
-						console.warn( 'GLTF2Loader: Legacy glTF file detected. Nodes may have no more than 1 mesh.' );
+						console.warn( 'THREE.GLTF2Loader: Legacy glTF file detected. Nodes may have no more than one mesh.' );
 
 						meshes = node.meshes;
 
@@ -2650,13 +2716,14 @@ THREE.GLTF2Loader = ( function () {
 
 							if ( group === undefined ) {
 
-								console.warn( 'GLTF2Loader: Couldn\'t find node "' + mesh + '".' );
+								console.warn( 'THREE.GLTF2Loader: Could not find node "' + mesh + '".' );
 								continue;
 
 							}
 
-							//do not clone children as they will be replaced anyway
+							// do not clone children as they will be replaced anyway
 							var clonedgroup = group.clone( false );
+
 							for ( var childrenId in group.children ) {
 
 								var child = group.children[ childrenId ];
@@ -2743,7 +2810,7 @@ THREE.GLTF2Loader = ( function () {
 
 										} else {
 
-											console.warn( "WARNING: joint: '" + jointId + "' could not be found" );
+											console.warn( 'THREE.GLTF2Loader: Joint "%s" could not be found.', jointId );
 
 										}
 
@@ -2753,10 +2820,12 @@ THREE.GLTF2Loader = ( function () {
 
 								}
 
+								clonedgroup.add( child );
 
-								clonedgroup.add(child);
 							}
+
 							_node.add( clonedgroup );
+
 						}
 
 					}
@@ -2819,7 +2888,7 @@ THREE.GLTF2Loader = ( function () {
 
 		return this._withDependencies( [
 
-			"nodes"
+			'nodes'
 
 		] ).then( function ( dependencies ) {
 
@@ -2852,7 +2921,7 @@ THREE.GLTF2Loader = ( function () {
 					}
 
 					// for Specular-Glossiness.
-					if ( child.material && child.material.type === 'ShaderMaterial' ) {
+					if ( child.material && child.material.isGLTFSpecularGlossinessMaterial ) {
 
 						child.onBeforeRender = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ].refreshUniforms;
 

examples/js/loaders/GLTFLoader.js

@@ -17,6 +17,8 @@ THREE.GLTFLoader = ( function () {
 
 		constructor: GLTFLoader,
 
+		crossOrigin: 'Anonymous',
+
 		load: function ( url, onLoad, onProgress, onError ) {
 
 			var scope = this;

examples/js/loaders/MTLLoader.js

@@ -202,6 +202,8 @@ THREE.MTLLoader.MaterialCreator.prototype = {
 
 	constructor: THREE.MTLLoader.MaterialCreator,
 
+	crossOrigin: 'Anonymous',
+
 	setCrossOrigin: function ( value ) {
 
 		this.crossOrigin = value;
@@ -421,6 +423,12 @@ THREE.MTLLoader.MaterialCreator.prototype = {
 
 					break;
 
+				case 'norm':
+
+					setMapForType( "normalMap", value );
+
+					break;
+
 				case 'map_bump':
 				case 'bump':
 

examples/js/loaders/TDSLoader.js

@@ -193,43 +193,6 @@ THREE.TDSLoader.prototype = {
 				material.shininess = shininess;
 				this.debugMessage( '   Shininess : ' + shininess );
 
-			} else if ( next === MAT_TEXMAP ) {
-
-				this.debugMessage( '   Map (TODO ImageLoader)' );
-				//var map = this.readMap(data);
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next === MAT_BUMPMAP ) {
-
-				this.debugMessage( '   BumpMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_OPACMAP ) {
-
-				this.debugMessage( '   OpacityMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_SPECMAP ) {
-
-				this.debugMessage( '   SpecularMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_SHINMAP ) {
-
-				this.debugMessage( '   ShininessrMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
-			} else if ( next == MAT_REFLMAP ) {
-
-				this.debugMessage( '   RelectMap (TODO ImageLoader)' );
-
-				//TODO <ADD CODE HERE>
-
 			} else {
 
 				this.debugMessage( '   Unknown material chunk: ' + next.toString( 16 ) );
@@ -377,7 +340,46 @@ THREE.TDSLoader.prototype = {
 
 				this.debugMessage( '   Tranformation Matrix (TODO)' );
 
-				//TODO <ADD CODE HERE>
+				var values = [];
+				for( var i = 0; i < 12; i++ ) {
+
+					values[ i ] = this.readFloat( data );
+				
+				}
+
+				var matrix = new THREE.Matrix4();
+
+				//X Line
+				matrix.elements[ 0 ] = values[ 0 ];
+				matrix.elements[ 1 ] = values[ 6 ];
+				matrix.elements[ 2 ] = values[ 3 ];
+				matrix.elements[ 3 ] = values[ 9 ];
+
+				//Y Line
+				matrix.elements[ 4 ] = -values[ 2 ];
+				matrix.elements[ 5 ] = -values[ 8 ];
+				matrix.elements[ 6 ] = -values[ 5 ];
+				matrix.elements[ 7 ] = -values[ 11 ];
+
+				//Z Line
+				matrix.elements[ 8 ] = values[ 1 ];
+				matrix.elements[ 9 ] = values[ 7 ];
+				matrix.elements[ 10 ] = values[ 4 ];
+				matrix.elements[ 11 ] = -values[ 10 ];
+
+				//W Line
+				matrix.elements[ 12 ] = 0;
+				matrix.elements[ 13 ] = 0;
+				matrix.elements[ 14 ] = 0;
+				matrix.elements[ 15 ] = 1;
+
+				matrix.transpose();
+
+				var inverse = new THREE.Matrix4();
+				inverse.getInverse( matrix, true );
+				geometry.applyMatrix( inverse );
+				
+				matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
 
 			} else {
 
@@ -395,15 +397,19 @@ THREE.TDSLoader.prototype = {
 
 			//geometry.faceVertexUvs[0][faceIndex][vertexIndex]
 
-			var faceUV = [];
+			if ( uvs.length > 0 ) {
 
-			for ( var i = 0; i < geometry.faces.length; i ++ ) {
+				var faceUV = [];
 
-				faceUV.push( [ uvs[ geometry.faces[ i ].a ], uvs[ geometry.faces[ i ].b ], uvs[ geometry.faces[ i ].c ] ] );
+				for ( var i = 0; i < geometry.faces.length; i ++ ) {
 
-			}
+					faceUV.push( [ uvs[ geometry.faces[ i ].a ], uvs[ geometry.faces[ i ].b ], uvs[ geometry.faces[ i ].c ] ] );
+
+				}
 
-			geometry.faceVertexUvs[ 0 ] = faceUV;
+				geometry.faceVertexUvs[ 0 ] = faceUV;
+	
+			}		
 
 			geometry.computeVertexNormals();
 
@@ -456,12 +462,6 @@ THREE.TDSLoader.prototype = {
 
 				}
 
-			} else if ( chunk.id === SMOOTH_GROUP ) {
-
-				this.debugMessage( '      Smooth Group (TODO)' );
-
-				//TODO <ADD CODE HERE>
-
 			} else {
 
 				this.debugMessage( '      Unknown face array chunk: ' + chunk.toString( 16 ) );

examples/js/loaders/VRMLLoader.js

@@ -26,6 +26,8 @@ THREE.VRMLLoader.prototype = {
 
 	recordingFieldname: null,
 
+	crossOrigin: 'Anonymous',
+
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;

examples/js/loaders/XLoader.js

@@ -23,8 +23,8 @@
 
 THREE.XLoader = function (manager, Texloader, _zflg) {
 
-	this.manager = manager !== undefined ? manager : new THREE.DefaultLoadingManager();
-	this.Texloader = Texloader !== undefined ? Texloader : new THREE.TextureLoader();
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+	this.Texloader = ( Texloader !== undefined ) ? Texloader : new THREE.TextureLoader();
 	this.zflg = _zflg === undefined ? false : _zflg;
 	this.url = "";
 	this.baseDir = "";

examples/js/postprocessing/BokehPass.js

@@ -33,6 +33,8 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	// depth material
 
 	this.materialDepth = new THREE.MeshDepthMaterial();
+	this.materialDepth.depthPacking = THREE.RGBADepthPacking;
+	this.materialDepth.blending = THREE.NoBlending;
 
 	// bokeh material
 
@@ -51,8 +53,11 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	bokehUniforms[ "aspect" ].value = aspect;
 	bokehUniforms[ "aperture" ].value = aperture;
 	bokehUniforms[ "maxblur" ].value = maxblur;
+	bokehUniforms[ "nearClip" ].value = camera.near;
+	bokehUniforms[ "farClip" ].value = camera.far;
 
 	this.materialBokeh = new THREE.ShaderMaterial( {
+		defines: bokehShader.defines,
 		uniforms: bokehUniforms,
 		vertexShader: bokehShader.vertexShader,
 		fragmentShader: bokehShader.fragmentShader
@@ -68,6 +73,9 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 
+	this.oldClearColor = new THREE.Color();
+	this.oldClearAlpha = 1;
+
 };
 
 THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
@@ -82,11 +90,20 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		this.scene.overrideMaterial = this.materialDepth;
 
+		this.oldClearColor.copy( renderer.getClearColor() );
+		this.oldClearAlpha = renderer.getClearAlpha();
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		renderer.setClearColor( 0xffffff );
+		renderer.setClearAlpha( 1.0 );
 		renderer.render( this.scene, this.camera, this.renderTargetDepth, true );
 
 		// Render bokeh composite
 
 		this.uniforms[ "tColor" ].value = readBuffer.texture;
+		this.uniforms[ "nearClip" ].value = this.camera.near;
+		this.uniforms[ "farClip" ].value = this.camera.far;
 
 		if ( this.renderToScreen ) {
 
@@ -99,7 +116,10 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 		}
 
 		this.scene.overrideMaterial = null;
-
+		renderer.setClearColor( this.oldClearColor );
+		renderer.setClearAlpha( this.oldClearAlpha );
+		renderer.autoClear = this.oldAutoClear;
+	
 	}
 
 } );

examples/js/renderers/CanvasRenderer.js

@@ -672,22 +672,20 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 			}
 
-			_context.stroke();
-			_elemBox.expandByScalar( material.linewidth * 2 );
+			if ( material.isLineDashedMaterial ) {
 
-		} else if ( material.isLineDashedMaterial ) {
+				setLineDash( [ material.dashSize, material.gapSize ] );
 
-			setLineWidth( material.linewidth );
-			setLineCap( material.linecap );
-			setLineJoin( material.linejoin );
-			setStrokeStyle( material.color.getStyle() );
-			setLineDash( [ material.dashSize, material.gapSize ] );
+			}
 
 			_context.stroke();
-
 			_elemBox.expandByScalar( material.linewidth * 2 );
 
-			setLineDash( [] );
+			if ( material.isLineDashedMaterial ) {
+
+				setLineDash( [] );
+
+			}
 
 		}
 

examples/js/renderers/RaytracingRenderer.js

@@ -24,7 +24,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 	var maxRecursionDepth = 3;
 
 	var canvasWidth, canvasHeight;
-	var canvasWidthHalf, canvasHeightHalf;
 
 	var clearColor = new THREE.Color( 0x000000 );
 
@@ -126,9 +125,6 @@ THREE.RaytracingRenderer = function ( parameters ) {
 		canvasWidth = canvas.width;
 		canvasHeight = canvas.height;
 
-		canvasWidthHalf = Math.floor( canvasWidth / 2 );
-		canvasHeightHalf = Math.floor( canvasHeight / 2 );
-
 		context.fillStyle = 'white';
 
 		pool.forEach( updateSettings );

examples/js/renderers/RaytracingWorker.js

@@ -41,7 +41,7 @@ self.onmessage = function( e ) {
 		var meta = data.annex;
 		scene.traverse( function( o ) {
 
-			if ( o instanceof THREE.PointLight ) {
+			if ( o.isPointLight ) {
 
 				o.physicalAttenuation = true;
 
@@ -96,10 +96,12 @@ THREE.RaytracingRendererWorker = function () {
 	var cameraPosition = new THREE.Vector3();
 
 	var raycaster = new THREE.Raycaster( origin, direction );
+	var ray = raycaster.ray;
+
 	var raycasterLight = new THREE.Raycaster();
+	var rayLight = raycasterLight.ray;
 
 	var perspective;
-	var modelViewMatrix = new THREE.Matrix4();
 	var cameraNormalMatrix = new THREE.Matrix3();
 
 	var objects;
@@ -147,31 +149,19 @@ THREE.RaytracingRendererWorker = function () {
 
 		return function spawnRay( rayOrigin, rayDirection, outputColor, recursionDepth ) {
 
-			var ray = raycaster.ray;
-
-			ray.origin = rayOrigin;
-			ray.direction = rayDirection;
-
-			//
-
-			var rayLight = raycasterLight.ray;
-
-			//
-
 			outputColor.setRGB( 0, 0, 0 );
 
 			//
 
+			ray.origin = rayOrigin;
+			ray.direction = rayDirection;
+
 			var intersections = raycaster.intersectObjects( objects, true );
 
 			// ray didn't find anything
 			// (here should come setting of background color?)
 
-			if ( intersections.length === 0 ) {
-
-				return;
-
-			}
+			if ( intersections.length === 0 ) return;
 
 			// ray hit
 
@@ -188,14 +178,13 @@ THREE.RaytracingRendererWorker = function () {
 
 			var _object = cache[ object.id ];
 
-			localPoint.copy( point ).applyMatrix4( _object.inverseMatrix );
-			eyeVector.subVectors( raycaster.ray.origin, point ).normalize();
+			eyeVector.subVectors( ray.origin, point ).normalize();
 
 			// resolve pixel diffuse color
 
-			if ( material instanceof THREE.MeshLambertMaterial ||
-				 material instanceof THREE.MeshPhongMaterial ||
-				 material instanceof THREE.MeshBasicMaterial ) {
+			if ( material.isMeshLambertMaterial ||
+				 material.isMeshPhongMaterial ||
+				 material.isMeshBasicMaterial ) {
 
 				diffuseColor.copyGammaToLinear( material.color );
 
@@ -215,7 +204,7 @@ THREE.RaytracingRendererWorker = function () {
 
 			rayLight.origin.copy( point );
 
-			if ( material instanceof THREE.MeshBasicMaterial ) {
+			if ( material.isMeshBasicMaterial ) {
 
 				for ( var i = 0, l = lights.length; i < l; i ++ ) {
 
@@ -238,8 +227,7 @@ THREE.RaytracingRendererWorker = function () {
 
 				}
 
-			} else if ( material instanceof THREE.MeshLambertMaterial ||
-						material instanceof THREE.MeshPhongMaterial ) {
+			} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial ) {
 
 				var normalComputed = false;
 
@@ -247,8 +235,6 @@ THREE.RaytracingRendererWorker = function () {
 
 					var light = lights[ i ];
 
-					lightColor.copyGammaToLinear( light.color );
-
 					lightVector.setFromMatrixPosition( light.matrixWorld );
 					lightVector.sub( point );
 
@@ -267,6 +253,7 @@ THREE.RaytracingRendererWorker = function () {
 						// the same normal can be reused for all lights
 						// (should be possible to cache even more)
 
+						localPoint.copy( point ).applyMatrix4( _object.inverseMatrix );
 						computePixelNormal( normalVector, localPoint, material.flatShading, face, vertices );
 						normalVector.applyMatrix3( _object.normalMatrix ).normalize();
 
@@ -274,6 +261,8 @@ THREE.RaytracingRendererWorker = function () {
 
 					}
 
+					lightColor.copyGammaToLinear( light.color );
+
 					// compute attenuation
 
 					var attenuation = 1.0;
@@ -300,7 +289,7 @@ THREE.RaytracingRendererWorker = function () {
 
 					// compute specular
 
-					if ( material instanceof THREE.MeshPhongMaterial ) {
+					if ( material.isMeshPhongMaterial ) {
 
 						halfVector.addVectors( lightVector, eyeVector ).normalize();
 
@@ -318,9 +307,9 @@ THREE.RaytracingRendererWorker = function () {
 						schlick.b = specularColor.b + ( 1.0 - specularColor.b ) * alpha;
 
 						lightContribution.copy( schlick );
-
 						lightContribution.multiply( lightColor );
 						lightContribution.multiplyScalar( specularNormalization * specularIntensity * attenuation );
+
 						outputColor.add( lightContribution );
 
 					}
@@ -474,7 +463,7 @@ THREE.RaytracingRendererWorker = function () {
 
 					// convert from linear to gamma
 
-					data[ index ]     = Math.sqrt( pixelColor.r ) * 255;
+					data[ index + 0 ] = Math.sqrt( pixelColor.r ) * 255;
 					data[ index + 1 ] = Math.sqrt( pixelColor.g ) * 255;
 					data[ index + 2 ] = Math.sqrt( pixelColor.b ) * 255;
 					data[ index + 3 ] = 255;
@@ -519,7 +508,6 @@ THREE.RaytracingRendererWorker = function () {
 		//
 
 		cameraNormalMatrix.getNormalMatrix( camera.matrixWorld );
-		origin.copy( cameraPosition );
 
 		perspective = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * canvasHeight;
 
@@ -531,7 +519,7 @@ THREE.RaytracingRendererWorker = function () {
 
 		scene.traverse( function ( object ) {
 
-			if ( object instanceof THREE.Light ) {
+			if ( object.isPointLight ) {
 
 				lights.push( object );
 
@@ -546,11 +534,9 @@ THREE.RaytracingRendererWorker = function () {
 
 			}
 
-			modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-
 			var _object = cache[ object.id ];
 
-			_object.normalMatrix.getNormalMatrix( modelViewMatrix );
+			_object.normalMatrix.getNormalMatrix( object.matrixWorld );
 			_object.inverseMatrix.getInverse( object.matrixWorld );
 
 		} );

examples/js/renderers/SVGRenderer.js

@@ -382,11 +382,11 @@ THREE.SVGRenderer = function () {
 
 			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
 
-			addPath( style, path );
+			if ( material.isLineDashedMaterial ) {
 
-		} else if ( material.isLineDashedMaterial ) {
+				style = style + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize;
 
-			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize;
+			}
 
 			addPath( style, path );
 

examples/js/shaders/BokehShader.js

@@ -8,6 +8,11 @@
 
 THREE.BokehShader = {
 
+	defines: {
+		"DEPTH_PACKING": 1,
+		"PERSPECTIVE_CAMERA": 1,
+	},
+
 	uniforms: {
 
 		"tColor":   { value: null },
@@ -15,7 +20,9 @@ THREE.BokehShader = {
 		"focus":    { value: 1.0 },
 		"aspect":   { value: 1.0 },
 		"aperture": { value: 0.025 },
-		"maxblur":  { value: 1.0 }
+		"maxblur":  { value: 1.0 },
+		"nearClip":  { value: 1.0 },
+		"farClip":  { value: 1000.0 },
 
 	},
 
@@ -33,6 +40,7 @@ THREE.BokehShader = {
 	].join( "\n" ),
 
 	fragmentShader: [
+		"#include <common>",
 
 		"varying vec2 vUv;",
 
@@ -42,16 +50,38 @@ THREE.BokehShader = {
 		"uniform float maxblur;",  // max blur amount
 		"uniform float aperture;", // aperture - bigger values for shallower depth of field
 
+		"uniform float nearClip;",
+		"uniform float farClip;",
+
 		"uniform float focus;",
 		"uniform float aspect;",
 
+		"#include <packing>",
+
+		"float getDepth( const in vec2 screenPosition ) {",
+		"	#if DEPTH_PACKING == 1",
+		"	return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );",
+		"	#else",
+		"	return texture2D( tDepth, screenPosition ).x;",
+		"	#endif",
+		"}",
+
+		"float getViewZ( const in float depth ) {",
+		"	#if PERSPECTIVE_CAMERA == 1",
+		"	return perspectiveDepthToViewZ( depth, nearClip, farClip );",
+		"	#else",
+		"	return orthoDepthToViewZ( depth, nearClip, farClip );",
+		"	#endif",
+		"}",
+		
+
 		"void main() {",
 
 			"vec2 aspectcorrect = vec2( 1.0, aspect );",
+	
+			"float viewZ = getViewZ( getDepth( vUv ) );",
 
-			"vec4 depth1 = texture2D( tDepth, vUv );",
-
-			"float factor = depth1.x - focus;",
+			"float factor = ( focus + viewZ );",  // viewZ is <= 0, so this is a difference equation
 
 			"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
 

examples/js/shaders/SSAOShader.js

@@ -20,9 +20,10 @@ THREE.SSAOShader = {
 		"size":         { value: new THREE.Vector2( 512, 512 ) },
 		"cameraNear":   { value: 1 },
 		"cameraFar":    { value: 100 },
+		"radius":       { value: 32 },
 		"onlyAO":       { value: 0 },
-		"aoClamp":      { value: 0.5 },
-		"lumInfluence": { value: 0.5 }
+		"aoClamp":      { value: 0.25 },
+		"lumInfluence": { value: 0.7 }
 
 	},
 
@@ -48,6 +49,7 @@ THREE.SSAOShader = {
 			"uniform float logDepthBufFC;",
 		"#endif",
 
+		"uniform float radius;",     // ao radius
 		"uniform bool onlyAO;",      // use only ambient occlusion pass?
 
 		"uniform vec2 size;",        // texture width, height
@@ -66,11 +68,10 @@ THREE.SSAOShader = {
 
 		// user variables
 
-		"const int samples = 8;",     // ao sample count
-		"const float radius = 5.0;",  // ao radius
+		"const int samples = 64;",     // ao sample count
 
-		"const bool useNoise = false;",      // use noise instead of pattern for sample dithering
-		"const float noiseAmount = 0.0003;", // dithering amount
+		"const bool useNoise = true;",      // use noise instead of pattern for sample dithering
+		"const float noiseAmount = 0.0004;", // dithering amount
 
 		"const float diffArea = 0.4;",   // self-shadowing reduction
 		"const float gDisplace = 0.4;",  // gauss bell center
@@ -131,7 +132,7 @@ THREE.SSAOShader = {
 
 		"float compareDepths( const in float depth1, const in float depth2, inout int far ) {",
 
-			"float garea = 2.0;",                         // gauss bell width
+			"float garea = 8.0;",                         // gauss bell width
 			"float diff = ( depth1 - depth2 ) * 100.0;",  // depth difference (0-100)
 
 			// reduce left bell width to avoid self-shadowing
@@ -147,18 +148,17 @@ THREE.SSAOShader = {
 			"}",
 
 			"float dd = diff - gDisplace;",
-			"float gauss = pow( EULER, -2.0 * dd * dd / ( garea * garea ) );",
+			"float gauss = pow( EULER, -2.0 * ( dd * dd ) / ( garea * garea ) );",
 			"return gauss;",
 
 		"}",
 
 		"float calcAO( float depth, float dw, float dh ) {",
 
-			"float dd = radius - depth * radius;",
 			"vec2 vv = vec2( dw, dh );",
 
-			"vec2 coord1 = vUv + dd * vv;",
-			"vec2 coord2 = vUv - dd * vv;",
+			"vec2 coord1 = vUv + radius * vv;",
+			"vec2 coord2 = vUv - radius * vv;",
 
 			"float temp1 = 0.0;",
 			"float temp2 = 0.0;",
@@ -186,14 +186,14 @@ THREE.SSAOShader = {
 
 			"float tt = clamp( depth, aoClamp, 1.0 );",
 
-			"float w = ( 1.0 / size.x )  / tt + ( noise.x * ( 1.0 - noise.x ) );",
+			"float w = ( 1.0 / size.x ) / tt + ( noise.x * ( 1.0 - noise.x ) );",
 			"float h = ( 1.0 / size.y ) / tt + ( noise.y * ( 1.0 - noise.y ) );",
 
 			"float ao = 0.0;",
 
 			"float dz = 1.0 / float( samples );",
-			"float z = 1.0 - dz / 2.0;",
 			"float l = 0.0;",
+			"float z = 1.0 - dz / 2.0;",
 
 			"for ( int i = 0; i <= samples; i ++ ) {",
 

examples/misc_controls_deviceorientation.html

@@ -40,66 +40,70 @@
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script>
-			(function() {
-				  "use strict";
 
-				  window.addEventListener('load', function() {
+			var container, camera, scene, renderer, controls;
 
-						var container, camera, scene, renderer, controls, geometry, mesh;
+			init();
+			animate();
 
-						var animate = function(){
+			function init() {
 
-							window.requestAnimationFrame( animate );
+				container = document.getElementById( 'container' );
 
-							controls.update();
-							renderer.render(scene, camera);
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-						};
+				controls = new THREE.DeviceOrientationControls( camera );
 
-						container = document.getElementById( 'container' );
+				scene = new THREE.Scene();
 
-						camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
+				geometry.scale( - 1, 1, 1 );
 
-						controls = new THREE.DeviceOrientationControls( camera );
+				var material = new THREE.MeshBasicMaterial( {
+					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
+				} );
 
-						scene = new THREE.Scene();
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-						var geometry = new THREE.SphereGeometry( 500, 16, 8 );
-						geometry.scale( - 1, 1, 1 );
+				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				scene.add( helper );
 
-						var material = new THREE.MeshBasicMaterial( {
-							map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
-						} );
+				//
 
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-						var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
-						var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.BackSide, wireframe: true } );
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				//
 
-						renderer = new THREE.WebGLRenderer();
-						renderer.setPixelRatio( window.devicePixelRatio );
-						renderer.setSize(window.innerWidth, window.innerHeight);
-						renderer.domElement.style.position = 'absolute';
-						renderer.domElement.style.top = 0;
-						container.appendChild(renderer.domElement);
+				window.addEventListener( 'resize', onWindowResize, false );
 
-						window.addEventListener('resize', function() {
 
-							camera.aspect = window.innerWidth / window.innerHeight;
-							camera.updateProjectionMatrix();
-							renderer.setSize( window.innerWidth, window.innerHeight );
+			}
 
-						}, false);
+			function animate() {
 
-						animate();
+				window.requestAnimationFrame( animate );
 
-				  }, false);
+				controls.update();
+				renderer.render( scene, camera );
 
-			})();
-		</script>
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+		</script>
 	</body>
 </html>

examples/webgl_buffergeometry_drawcalls.html

@@ -43,7 +43,7 @@
 		<script>
 
 			var group;
-			var container, controls, stats;
+			var container, stats;
 			var particlesData = [];
 			var camera, scene, renderer;
 			var positions, colors;
@@ -98,7 +98,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 1750;
 
-				controls = new THREE.OrbitControls( camera, container );
+				var controls = new THREE.OrbitControls( camera, container );
 
 				scene = new THREE.Scene();
 

examples/webgl_decals.html

@@ -54,7 +54,6 @@
 			point: new THREE.Vector3(),
 			normal: new THREE.Vector3()
 		};
-		var controls;
 		var mouse = new THREE.Vector2();
 
 		var textureLoader = new THREE.TextureLoader();
@@ -111,7 +110,7 @@
 			camera.position.z = 120;
 			camera.target = new THREE.Vector3();
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 			controls.minDistance = 50;
 			controls.maxDistance = 200;
 

examples/webgl_depth_texture.html

@@ -99,7 +99,7 @@
 
 		<script>
 
-			var camera, scene, renderer, controls, stats;
+			var camera, scene, renderer, stats;
 			var target;
 			var postScene, postCamera;
 			var supportsExtension = true;
@@ -130,7 +130,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 				camera.position.z = -4;
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
 				controls.rotateSpeed = 0.35;
@@ -227,7 +227,6 @@
 				if ( !supportsExtension ) return;
 
 				requestAnimationFrame( animate );
-				controls.update();
 
 				// render scene into target
 				renderer.render( scene, camera, target );

examples/webgl_geometry_extrude_splines.html

@@ -233,7 +233,7 @@
 
 			// controls
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 			// event listener
 

examples/webgl_geometry_normals.html

@@ -47,7 +47,7 @@
 		<script>
 
 			var container, stats, gui;
-			var camera, controls, scene, renderer;
+			var camera, scene, renderer;
 			var mesh, geometry;
 
 			var geometries = [
@@ -150,7 +150,7 @@
 
 				//
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_geometry_teapot.html

@@ -110,7 +110,6 @@
 
 				// CONTROLS
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
-				cameraControls.target.set( 0, 0, 0 );
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP

examples/webgl_geometry_terrain_raycast.html

@@ -243,7 +243,7 @@
 
 			function render() {
 
-				controls.update( clock.getDelta() );
+				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_text_shapes.html

@@ -29,7 +29,7 @@
 
 		<script>
 
-			var camera, scene, renderer, controls;
+			var camera, scene, renderer;
 
 			init();
 			animate();
@@ -39,8 +39,9 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, - 400, 600 );
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 0, 0 );
+				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
@@ -156,7 +157,6 @@
 
 			function render() {
 
-				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_lights_physical.html

@@ -240,8 +240,6 @@
 
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_loader_ctm_materials.html

@@ -284,8 +284,6 @@
 
 			function render() {
 
-				controls.update();
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_md2.html

@@ -157,6 +157,7 @@
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 50, 0 );
+				controls.update();
 
 				// GUI
 
@@ -340,7 +341,6 @@
 
 				var delta = clock.getDelta();
 
-				controls.update();
 				character.update( delta );
 
 				renderer.render( scene, camera );

examples/webgl_loader_md2_control.html

@@ -41,6 +41,7 @@
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src='js/loaders/MD2Loader.js'></script>
+		<script src='js/MorphBlendMesh.js'></script>
 		<script src='js/MD2CharacterComplex.js'></script>
 		<script src='js/Gyroscope.js'></script>
 
@@ -164,6 +165,7 @@
 
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, 50, 0 );
+				cameraControls.update();
 
 				// CHARACTER
 
@@ -330,8 +332,6 @@
 
 				var delta = clock.getDelta();
 
-				cameraControls.update( delta );
-
 				for ( var i = 0; i < nCharacters; i ++ ) {
 
 					characters[ i ].update( delta );

examples/webgl_loader_mmd.html

@@ -156,7 +156,6 @@
 				}, onProgress, onError );
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_loader_vrml.html

@@ -108,15 +108,12 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				controls.handleResize();
-
 			}
 
 			function animate() {
 
 				requestAnimationFrame( animate );
 
-				controls.update();
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgl_loader_x.html

@@ -1,334 +1,271 @@
 <!DOCTYPE html>
 <html lang='en'>
-
 <head>
-    <title>three.js webgl - loaders - X-File loader</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 {
-            font-family: Monospace;
-            background-color: #000;
-            color: #fff;
-            margin: 0px;
-            overflow: hidden;
-        }
-
-        #info {
-            color: #fff;
-            position: absolute;
-            top: 10px;
-            width: 100%;
-            text-align: center;
-            z-index: -1;
-            display: block;
-        }
-
-        #info a,
-        .button {
-            color: #f00;
-            font-weight: bold;
-            text-decoration: underline;
-            cursor: pointer;
-        }
-    </style>
+	<title>three.js webgl - loaders - X-File loader</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 {
+			color: #ffffff;
+			font-family:Monospace;
+			font-size:13px;
+			text-align:center;
+			background-color: #000000;
+			margin: 0px;
+			overflow: hidden;
+		}
+		#info {
+			color: #fff;
+			position: absolute;
+			top: 0px; width: 100%;
+			padding: 5px;
+		}
+		a {
+			color: #ff0000
+		}
+	</style>
 </head>
-
 <body>
+	<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - X-File Loader</div>
+	<div id="container"></div>
 
-    <div id='info'>
-        <a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
-    </div>
+	<script src='../build/three.js'></script>
+	<script src='js/controls/OrbitControls.js'></script>
 
-    <script src='../build/three.js'></script>
-    <script src='js/controls/OrbitControls.js'></script>
+	<script src='js/loaders/XLoader.js'></script>
 
-    <script src='js/loaders/XLoader.js'></script>
+	<script src='js/Detector.js'></script>
+	<script src='js/libs/stats.min.js'></script>
+	<script src='js/libs/dat.gui.min.js'></script>
+	<script>
 
-    <script src='js/Detector.js'></script>
-    <script src='js/libs/stats.min.js'></script>
-    <script src='js/libs/dat.gui.min.js'></script>
-    <script>
+		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-        if (!Detector.webgl) Detector.addGetWebGLMessage();
-
-        var container, stats, controls;
-        var camera, scene, renderer;
-        var clock = new THREE.Clock();
-        var gui = new dat.GUI();
-        var mixers = [];
-        var manager = null;
-        var Texloader = null;
-        var ParentList = null;
-        var skeletonHelper = null;
-        var Models = [];
-        var animateInf = null;
-        var DashAnime = null;
-        var d = new Date();
-        var LastDateTime = null;
-        var animates = [];
-        var actions = [];
-        init();
+		var stats;
+		var camera, scene, renderer;
+		var clock = new THREE.Clock();
+		var gui = new dat.GUI();
+		var mixers = [];
+		var models = [];
+		var animates = [];
+		var actions = [];
 
-        function init() {
-
-            LastDateTime = Date.now();
-            container = document.createElement('div');
-            document.body.appendChild(container);
-            container.style.zIndex = -10;
-            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x666666);
-            scene.add(new THREE.AmbientLight(0x999999));
-            // grid
-            var gridHelper = new THREE.GridHelper(14, 1, 0x303030, 0x303030);
-            gridHelper.position.set(0, -0.04, 0);
-            scene.add(gridHelper);
-            // stats
-            stats = new Stats();
-            container.appendChild(stats.dom);
-            // model
-            manager = new THREE.LoadingManager();
-            manager.onProgress = function (item, loaded, total) {
-
-                console.log(item, loaded, total);
-
-            };
-
-            var onProgress = function (xhr) {
-
-                if (xhr.lengthComputable) {
-
-                    var percentComplete = xhr.loaded / xhr.total * 100;
-                    console.log(Math.round(percentComplete, 2) + '% downloaded');
-
-                }
-
-            };
-
-            var onError = function (xhr) {
-
-                console.log('Errror Loading!');
-
-            };
-
-            Texloader = new THREE.TextureLoader();
-            var loader = new THREE.XLoader(manager, Texloader);
-
-            // ! If [ Texture ] was reversed Y axis, enable the following. 
-            // THREE.XLoader.IsUvYReverse = false;
-            
-		    // ! And if [ Model ] was reversed polygons, enable the following. 
-            // loader.load([' your model url ', true ], function (object) {
-            
-            // read (download) model file
-            loader.load(['models/xfile/SSR06_Born2.x', false], function (object) {
-
-                for (var i = 0; i < object.FrameInfo.length; i++) {
-
-                    Models.push(object.FrameInfo[i]);
-                    scene.add(Models[i]);
-
-                    if (Models[i] instanceof THREE.SkinnedMesh) {
-
-                        skeletonHelper = new THREE.SkeletonHelper(Models[i]);
-                        scene.add(skeletonHelper);
-
-                        if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {
-
-                            Models[i].geometry.animations = [];
-
-                            /* 
-                            *  ↓ that is BASIC animation data code.
-                            *  Usually, please use this.
-                            *  Because of the data I have, I use a different code
-                            * 
-                           for (var a = 0; a < object.XAnimationObj.length; a++) {
-                               Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(object.XAnimationObj[a], Models[i].skeleton.bones));
-                           } 
-                           Models[i].mixer = new THREE.AnimationMixer(Models[i]);
-                           animates.push(Models[i].mixer);
-
-                           var action = Models[i].mixer.clipAction(Models[i].geometry.animations[0]);
-                           action.play();
-                           */
-
-                            // ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D' 
-                            {
-
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'stand', 10 * object.XAnimationObj[0].fps, 11 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'walk', 50 * object.XAnimationObj[0].fps, 80 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dash', 140 * object.XAnimationObj[0].fps, 160 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dashing', 160 * object.XAnimationObj[0].fps, 165 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'damage', 500 * object.XAnimationObj[0].fps, 530 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
+		init();
 
-                                Models[i].mixer = new THREE.AnimationMixer(Models[i]);
-                                animates.push(Models[i].mixer);
+		function init() {
 
-                                var stand = Models[i].mixer.clipAction('stand');
-                                // stand.play();
-                                stand.setLoop(THREE.LoopRepeat);
-                                actions['stand'] = stand;
+			var container = document.getElementById( 'container' );
+			document.body.appendChild( container );
 
-                                var walk = Models[i].mixer.clipAction('walk');
-                                walk.setLoop(THREE.LoopRepeat);
-                                walk.play();
-                                actions['walk'] = walk;
+			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+			camera.position.set( 2, 20, 30 );
 
-                                var dash = Models[i].mixer.clipAction('dash');
-                                dash.setLoop(THREE.LoopOnce);
-                                //dash.play();
-                                actions['dash'] = dash;
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x666666 );
 
-                                var dashing = Models[i].mixer.clipAction('dashing');
-                                dashing.setLoop(THREE.LoopPingPong);
-                                // dashing.play();
-                                actions['dashing'] = dashing;
+			// grid
 
-                                var damage = Models[i].mixer.clipAction('damage');
-                                damage.setLoop(THREE.LoopRepeat);
-                                //damage.play();
-                                actions['damage'] = damage;
+			var gridHelper = new THREE.GridHelper( 20, 20 );
+			scene.add( gridHelper );
 
-                                var ActionKeys = Object.keys(actions);
-                                var dmy = {};
-                                dmy.gui = '';
-                                dmy.action = '';
-                                gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
-                                    animates[0].stopAllAction();
-                                    actions[v].play();
-                                });
+			// stats
 
-                            }
-                            ///////////
-                        }
+			stats = new Stats();
+			container.appendChild( stats.dom );
 
-                    }
-                    
-                }
+			// model
 
-                object = null;
-            }, onProgress, onError);
+			var loader = new THREE.XLoader();
 
+			// read (download) model file
 
-            renderer = new THREE.WebGLRenderer();
-            renderer.setPixelRatio(window.devicePixelRatio);
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            container.appendChild(renderer.domElement);
+			loader.load( [ 'models/xfile/SSR06_Born2.x', false ], function ( object ) {
 
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.target.set(0, 12, 0);
-            camera.position.set(2, 18, 28);
-            camera.up.set(0, 1, 0);
+				for ( var i = 0; i < object.FrameInfo.length; i ++ ) {
 
-            var light = new THREE.DirectionalLight(0xeeeeff, 2);
-            light.position.set(10, 100, 1).normalize();
-            scene.add(light);
+					models.push( object.FrameInfo[ i ] );
+					var model = models[ i ];
 
-            light = new THREE.DirectionalLight(0x555588);
-            light.position.set(-1, -1, -1).normalize();
-            scene.add(light);
+					scene.add( model );
 
-            controls.update();
-            window.addEventListener('resize', onWindowResize, false);
-            animate();
+					if ( model instanceof THREE.SkinnedMesh ) {
 
-        }
+						var skeletonHelper = new THREE.SkeletonHelper( model );
+						scene.add( skeletonHelper );
 
-        function onWindowResize() {
+						if ( object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0 ) {
 
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
+							model.geometry.animations = [];
 
-        }
-        //
-        function animate() {
+							model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'stand', 10 * object.XAnimationObj[ 0 ].fps, 11 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
+							model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'walk', 50 * object.XAnimationObj[ 0 ].fps, 80 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
+							model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'dash', 140 * object.XAnimationObj[ 0 ].fps, 160 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
+							model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'dashing', 160 * object.XAnimationObj[ 0 ].fps, 165 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
+							model.geometry.animations.push( THREE.AnimationClip.parseAnimation( splitAnimation( object.XAnimationObj[ 0 ], 'damage', 500 * object.XAnimationObj[ 0 ].fps, 530 * object.XAnimationObj[ 0 ].fps), model.skeleton.bones ) );
 
-            requestAnimationFrame(animate);
-            var nowTime = Date.now();
-            var dulTime = nowTime - LastDateTime;
-            LastDateTime = nowTime;
+							model.mixer = new THREE.AnimationMixer( model );
+							animates.push( model.mixer );
 
-            if (animates != null && animates.length > 0) {
+							var stand = model.mixer.clipAction( 'stand' );
+							stand.setLoop( THREE.LoopRepeat );
+							actions[ 'stand' ] = stand;
 
-                for (var i = 0; i < animates.length; i++) {
+							var walk = model.mixer.clipAction( 'walk' );
+							walk.setLoop( THREE.LoopRepeat );
+							walk.play();
+							actions[ 'walk' ] = walk;
 
-                    animates[i].update(dulTime);
+							var dash = model.mixer.clipAction( 'dash' );
+							dash.setLoop( THREE.LoopRepeat );
+							actions[ 'dash' ] = dash;
 
-                }
+							var dashing = model.mixer.clipAction( 'dashing' );
+							dashing.setLoop( THREE.LoopPingPong );
+							actions[ 'dashing' ] = dashing;
 
-            }
+							var damage = model.mixer.clipAction( 'damage' );
+							damage.setLoop( THREE.LoopRepeat );
+							actions[ 'damage' ] = damage;
 
-            stats.update();
-            render();
+							var actionKeys = Object.keys( actions );
+							var dmy = {};
+							dmy.gui = '';
+							dmy.action = '';
+							gui.add( dmy, 'action', actionKeys ).onChange( function ( v ) {
 
-        }
+									animates[ 0 ].stopAllAction();
+									actions[ v ].play();
 
-        function render() {
-            
-            renderer.render(scene, camera);
+							});
 
-        }
+						}
 
-        /////////////////
-        /// this is not must mount codes.
-        // split  One and Long Animation, for time
-        function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {
+					}
 
-            var Animation = {};
-            Animation.fps = _baseAnime.fps;
-            Animation.name = _name;
-            Animation.length = _endTime - _beginTime;
-            Animation.hierarchy = [];
+				}
 
-            for (var i = 0; i < _baseAnime.hierarchy.length; i++) {
+				object = null;
 
-                var firstKey = -1;
-                var lastKey = -1;
-                var frame = {};
-                frame.name = _baseAnime.hierarchy[i].name;
-                frame.parent = _baseAnime.hierarchy[i].parent;
-                frame.keys = [];
+			} );
 
-                for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {
+			renderer = new THREE.WebGLRenderer();
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			container.appendChild( renderer.domElement );
 
-                    if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 6, 0 );
+			controls.update();
 
-                        if (firstKey === -1) {
+			var directionalLight1 = new THREE.DirectionalLight( 0xeeeeff, 2 );
+			directionalLight1.position.set( 10, 100, 1 ).normalize();
+			scene.add( directionalLight1 );
 
-                            firstKey = m - 1;
-                            frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
-                            
-                        }
+			var directionalLight2 = new THREE.DirectionalLight( 0x555588 );
+			directionalLight2.position.set( - 1, - 1, - 1 ).normalize();
+			scene.add( directionalLight2 );
 
-                        frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
+			var ambientLight = new THREE.AmbientLight( 0x999999 );
+			scene.add( ambientLight );
 
-                    }
+			window.addEventListener( 'resize', onWindowResize, false );
 
-                    if (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {
+			animate();
 
-                        break;
-                    }
+		}
 
-                }
+		function onWindowResize() {
 
-                for (var m = 0; m < frame.keys.length; m++) {
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
-                    frame.keys[m].time -= _beginTime;
+		}
+		//
+		function animate() {
 
-                }
+			requestAnimationFrame( animate );
 
-                Animation.hierarchy.push(frame);
+			var delta = clock.getDelta();
 
-            }
+			if ( animates ) {
 
-            return Animation;
+				for ( var i = 0; i < animates.length; i ++ ) {
 
-        }
-    </script>
+					animates[ i ].update( delta * 1000 );
 
-</body>
+				}
+
+			}
+
+			stats.update();
+			render();
+
+		}
+
+		function render() {
+
+			renderer.render( scene, camera );
+
+		}
+
+		// this is not must mount codes.
+		// split	One and Long Animation, for time
+
+		function splitAnimation( _baseAnime, _name, _beginTime, _endTime ) {
+
+			var animation = {};
+			animation.fps = _baseAnime.fps;
+			animation.name = _name;
+			animation.length = _endTime - _beginTime;
+			animation.hierarchy = [];
+
+			for ( var i = 0; i < _baseAnime.hierarchy.length; i ++ ) {
+
+				var firstKey = -1;
+				var lastKey = -1;
+				var frame = {};
+				frame.name = _baseAnime.hierarchy[ i ].name;
+				frame.parent = _baseAnime.hierarchy[ i ].parent;
+				frame.keys = [];
+
+				for ( var m = 1; m < _baseAnime.hierarchy[ i ].keys.length; m ++ ) {
+
+					if ( _baseAnime.hierarchy[ i ].keys[ m ].time > _beginTime ) {
+
+						if ( firstKey === -1 ) {
 
-</html>
+							firstKey = m - 1;
+							frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m - 1 ] );
+
+						}
+
+						frame.keys.push( _baseAnime.hierarchy[ i ].keys[ m ] );
+
+					}
+
+					if ( _endTime <= _baseAnime.hierarchy[ i ].keys[ m ].time || m >= _baseAnime.hierarchy[ i ].keys.length - 1 ) {
+
+						break;
+
+					}
+
+				}
+
+				for ( var m = 0; m < frame.keys.length; m ++ ) {
+
+					frame.keys[ m ].time -= _beginTime;
+
+				}
+
+				animation.hierarchy.push( frame );
+
+			}
+
+			return animation;
+
+		}
+
+	</script>
+</body>
+</html>

examples/webgl_marchingcubes.html

@@ -564,8 +564,6 @@
 
 			time += delta * effectController.speed * 0.5;
 
-			controls.update( delta );
-
 			// marching cubes
 
 			if ( effectController.resolution !== resolution ) {

examples/webgl_materials_channels.html

@@ -256,9 +256,6 @@
 
 				requestAnimationFrame( animate );
 
-				controlsOrtho.update();
-				controlsPerspective.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_cubemap_balls_refraction.html

@@ -77,12 +77,8 @@
 
 				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var textureCube = new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/Park3Med/' )
-					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
-				textureCube.mapping = THREE.CubeRefractionMapping;
-
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
+				material.envMap.mapping = THREE.CubeRefractionMapping;
 
 				for ( var i = 0; i < 500; i ++ ) {
 

examples/webgl_materials_cubemap_dynamic.html

@@ -961,7 +961,7 @@
 					cubeCamera.position.copy( currentCar.root.position );
 
 					renderer.autoClear = true;
-					cubeCamera.updateCubeMap( renderer, scene );
+					cubeCamera.update( renderer, scene );
 
 					veyron.setVisible( true );
 					gallardo.setVisible( true );

examples/webgl_materials_cubemap_dynamic2.html

@@ -191,12 +191,12 @@
 				if ( count % 2 === 0 ) {
 
 					material.envMap = cubeCamera1.renderTarget.texture;
-					cubeCamera2.updateCubeMap( renderer, scene );
+					cubeCamera2.update( renderer, scene );
 
 				} else {
 
 					material.envMap = cubeCamera2.renderTarget.texture;
-					cubeCamera1.updateCubeMap( renderer, scene );
+					cubeCamera1.update( renderer, scene );
 
 				}
 

examples/webgl_materials_displacementmap.html

@@ -273,8 +273,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_envmaps.html

@@ -208,8 +208,6 @@
 
 				render();
 
-				controls.update();
-
 			}
 
 			function render() {

examples/webgl_materials_envmaps_hdr.html

@@ -208,8 +208,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -284,11 +282,11 @@
 						case 'front': side = THREE.FrontSide; break;
 						case 'back': side = THREE.BackSide; break;
 						case 'double': side = THREE.DoubleSide; break;
-	
+
 					}
 
 					if( standardMaterial.side !== side ) {
-						
+
 						standardMaterial.side = side;
 						standardMaterial.needsUpdate = true;
 

examples/webgl_materials_reflectivity.html

@@ -202,8 +202,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_transparency.html

@@ -154,8 +154,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_basic.html

@@ -177,8 +177,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_lambert.html

@@ -177,8 +177,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_phong.html

@@ -183,8 +183,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_physical.html

@@ -83,7 +83,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = textureCube;
-				
+
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
@@ -96,7 +96,7 @@
 					pmremCubeUVPacker.update( renderer );
 
 					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
-					 
+
 					// Materials
 
 					var cubeWidth = 400;
@@ -205,8 +205,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_standard.html

@@ -80,7 +80,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = textureCube;
-				
+
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
@@ -109,7 +109,7 @@
 					var numberOfSphersPerSide = 5;
 					var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 					var stepSize = 1.0 / numberOfSphersPerSide;
-					
+
 					var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
 					var index = 0;
@@ -130,7 +130,7 @@
 									color: diffuseColor,
 									metalness: beta,
 									roughness: 1.0 - alpha,
-									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture						
+									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
 								} );
 
 								index ++;
@@ -144,9 +144,9 @@
 								scene.add( mesh );
 
 							}
-							
+
 						}
-						
+
 						index ++;
 
 					}
@@ -212,8 +212,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_toon.html

@@ -187,8 +187,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_mirror.html

@@ -195,8 +195,6 @@
 				smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
 				smallSphere.rotation.z = timer * 0.8;
 
-				cameraControls.update();
-
 				renderer.render(scene, camera);
 
 			}

examples/webgl_mirror_nodes.html

@@ -306,8 +306,6 @@
 
 				groundMirrorMaterial.updateFrame( delta );
 
-				cameraControls.update();
-
 				render();
 			}
 

examples/webgl_modifier_simplifier.html

@@ -154,16 +154,14 @@
 
 			function animate() {
 
-				meshes.forEach( m => {
+				meshes.forEach( function( m ) {
 					m.rotation.x += 0.01;
 					m.rotation.y += 0.01;
 					m.rotation.z += 0.01;
-				})
+				} );
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_modifier_subdivision.html

@@ -303,8 +303,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_morphtargets_human.html

@@ -122,6 +122,7 @@
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 3000, 0 );
+				controls.update();
 
 				controls.addEventListener( 'change', render );
 
@@ -211,8 +212,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				render();
 
 			}

examples/webgl_panorama_cube.html

@@ -130,8 +130,6 @@
 
 		function animate() {
 
-			controls.update();
-
 			renderer.render( scene, camera );
 
 			requestAnimationFrame( animate );

examples/webgl_panorama_dualfisheye.html

@@ -61,6 +61,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				// Remap UVs

examples/webgl_panorama_equirectangular.html

@@ -61,7 +61,8 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var material = new THREE.MeshBasicMaterial( {

examples/webgl_physics_cloth.html

@@ -93,12 +93,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.x = -12;
-				camera.position.y = 7;
-				camera.position.z =  4;
+				camera.position.set( -12, 7, 4 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.y = 2;
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -402,8 +401,6 @@
 
 				updatePhysics( deltaTime );
 
-				controls.update( deltaTime );
-
 				renderer.render( scene, camera );
 
 				time += deltaTime;

examples/webgl_physics_convex_break.html

@@ -120,12 +120,11 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.x = -14;
-			camera.position.y = 8;
-			camera.position.z =  16;
+			camera.position.set( -14, 8, 16 );
 
 			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -430,8 +429,6 @@
 
 			updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
-
 			renderer.render( scene, camera );
 
 			time += deltaTime;

examples/webgl_physics_rope.html

@@ -100,12 +100,11 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.x = -7;
-			camera.position.y = 5;
-			camera.position.z =  8;
+			camera.position.set( -7, 5, 8 );
 
 			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -425,8 +424,6 @@
 
 			updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
-
 			renderer.render( scene, camera );
 
 			time += deltaTime;

examples/webgl_physics_terrain.html

@@ -403,8 +403,6 @@
 
 						updatePhysics( deltaTime );
 
-						controls.update( deltaTime );
-
 						renderer.render( scene, camera );
 
 						time += deltaTime;

examples/webgl_physics_volume.html

@@ -98,12 +98,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.x = -7;
-				camera.position.y = 5;
-				camera.position.z =  8;
+				camera.position.set( -7, 5, 8 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.y = 2;
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -133,7 +132,7 @@
 				scene.add( light );
 
 
-				container.innerHTML = "";
+				container.innerHTML = '';
 
 				container.appendChild( renderer.domElement );
 
@@ -474,8 +473,6 @@
 
 				processClick();
 
-				controls.update( deltaTime );
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_postprocessing_backgrounds.html

@@ -213,8 +213,6 @@
 				composer.addPass( copyPass );
 
 				var controls = new THREE.OrbitControls( cameraP, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_postprocessing_dof.html

@@ -176,8 +176,8 @@
 
 				var effectController  = {
 
-					focus: 		1.0,
-					aperture:	0.025,
+					focus: 		500.0,
+					aperture:	5,
 					maxblur:	1.0
 
 				};
@@ -185,17 +185,18 @@
 				var matChanger = function( ) {
 
 					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
-					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
+					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
 					postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;
 
 				};
 
 				var gui = new dat.GUI();
-				gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
-				gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
+				gui.add( effectController, "focus", 10.0, 3000.0, 10 ).onChange( matChanger );
+				gui.add( effectController, "aperture", 0, 10, 0.1 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
 				gui.close();
 
+				matChanger();
 			}
 
 			function onDocumentMouseMove( event ) {

examples/webgl_postprocessing_outline.html

@@ -387,7 +387,6 @@
 				renderer.setClearAlpha( 0.0 );
 
 				composer.render();
-				controls.update();
 				stats.end();
 			}
 

examples/webgl_postprocessing_ssao.html

@@ -67,8 +67,7 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 			var depthMaterial, effectComposer, depthRenderTarget;
 			var ssaoPass;
 			var group;
-			var depthScale = 1.0;
-			var postprocessing = { enabled : true, renderMode: 0 }; // renderMode: 0('framebuffer'), 1('onlyAO')
+			var postprocessing = { enabled: true, ao_only: false, radius: 32 };
 
 			init();
 			animate();
@@ -79,7 +78,6 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				document.body.appendChild( container );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
@@ -92,7 +90,7 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				group = new THREE.Object3D();
 				scene.add( group );
 
-				var geometry = new THREE.IcosahedronGeometry( 5, 1 );
+				var geometry = new THREE.BoxGeometry( 10, 10, 10 );
 				for ( var i = 0; i < 200; i ++ ) {
 
 					var material = new THREE.MeshBasicMaterial();
@@ -121,30 +119,23 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 
 				// Init gui
 				var gui = new dat.GUI();
-				gui.add( postprocessing, "enabled" ).onChange();
-				gui.add( postprocessing, "renderMode", { framebuffer: 0, onlyAO: 1 } ).onChange( renderModeChange ).listen();
+				gui.add( postprocessing, "enabled" );
+				gui.add( postprocessing, "ao_only", false ).onChange( renderModeChange );
+				gui.add( postprocessing, "radius" ).min( 0 ).max( 64 ).onChange( radiusChange );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
-			function renderModeChange( value ) {
-
-				if ( value == 0 ) {
-
-					// framebuffer
-					ssaoPass.uniforms[ 'onlyAO' ].value = false;
-
-				} else if ( value == 1 ) {
+			function radiusChange( value ) {
 
-					// onlyAO
-					ssaoPass.uniforms[ 'onlyAO' ].value = true;
+				ssaoPass.uniforms[ 'radius' ].value = value;
 
-				} else {
+			}
 
-					console.error( "Not define renderModeChange type: " + value );
+			function renderModeChange( value ) {
 
-				}
+				ssaoPass.uniforms[ 'onlyAO' ].value = value;
 
 			}
 
@@ -190,9 +181,6 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
 				ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
 				ssaoPass.uniforms[ 'cameraNear' ].value = camera.near;
 				ssaoPass.uniforms[ 'cameraFar' ].value = camera.far;
-				ssaoPass.uniforms[ 'onlyAO' ].value = ( postprocessing.renderMode == 1 );
-				ssaoPass.uniforms[ 'aoClamp' ].value = 0.3;
-				ssaoPass.uniforms[ 'lumInfluence' ].value = 0.5;
 
 				// Add pass to effect composer
 				effectComposer = new THREE.EffectComposer( renderer );

examples/webgl_postprocessing_unreal_bloom.html

@@ -184,8 +184,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_shaders_ocean.html

@@ -95,6 +95,7 @@
 				controls.maxDistance = 5000.0;
 				controls.maxPolarAngle = Math.PI * 0.495;
 				controls.target.set( 0, 500, 0 );
+				controls.update();
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
@@ -240,7 +241,6 @@
 				sphere.rotation.z = time * 0.51;
 
 				water.material.uniforms.time.value += 1.0 / 60.0;
-				controls.update();
 				water.render();
 				renderer.render( scene, camera );
 

examples/webgl_shaders_ocean2.html

@@ -183,7 +183,6 @@
 					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition.value = this.ms_Camera.position;
 					this.ms_Ocean.materialOcean.depthTest = true;
 					//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
-					this.ms_Controls.update();
 					this.Display();
 				},
 

examples/webgl_shaders_vector.html

@@ -110,6 +110,7 @@
 
 				controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 100, 0 );
+				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
@@ -361,7 +362,6 @@
 
 			function render() {
 
-				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_shading_physical.html

@@ -392,7 +392,7 @@
 				// render cube map
 
 				mesh.visible = false;
-				cubeCamera.updateCubeMap( renderer, scene );
+				cubeCamera.update( renderer, scene );
 				mesh.visible = true;
 
 				// render scene

examples/webgl_simple_gi.html

@@ -245,8 +245,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_skinning_simple.html

@@ -88,8 +88,6 @@
 
 				if ( mixer ) mixer.update( clock.getDelta() );
 
-				controls.update();
-
 				render();
 				stats.update();
 

examples/webgl_terrain_dynamic.html

@@ -257,7 +257,6 @@
 				camera.position.set( -1200, 800, 1200 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
 
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;
@@ -467,8 +466,6 @@
 
 				if ( terrain.visible ) {
 
-					controls.update();
-
 					var time = Date.now() * 0.001;
 
 					var fLow = 0.1, fHigh = 0.8;

examples/webgl_tonemapping.html

@@ -208,8 +208,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_video_panorama_equirectangular.html

@@ -64,6 +64,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var video = document.createElement( 'video' );
@@ -71,7 +72,7 @@
 				video.height = 360;
 				video.loop = true;
 				video.muted = true;
-				video.src = "textures/pano.webm";
+				video.src = 'textures/pano.webm';
 				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
 				video.play();
 

examples/webvr_cubes.html

@@ -4,8 +4,8 @@
 		<title>three.js webvr - cubes</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-07-28 -->
-		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="Ave6CPNUgSwHb3vCbyd55P/R7pfkwNniUJsYfSoUqI+l1X1BIOt6HfriVP0g2hmaG7Pp3qaUXuXdZeqGBmoMKg8AAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwMTI2NzQwNX0=">
+		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
 		<style>
 			body {
 				font-family: Monospace;

examples/webvr_daydream.html

@@ -4,8 +4,8 @@
 		<title>three.js webvr - daydream</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-07-28 -->
-		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="Ave6CPNUgSwHb3vCbyd55P/R7pfkwNniUJsYfSoUqI+l1X1BIOt6HfriVP0g2hmaG7Pp3qaUXuXdZeqGBmoMKg8AAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwMTI2NzQwNX0=">
+		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
 		<style>
 			body {
 				font-family: Monospace;
@@ -62,8 +62,13 @@
 				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - daydream';
 				container.appendChild( info );
 
+				var background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/MilkyWay/' )
+					.load( [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ] );
+				background.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x505050 );
+				scene.background = background;
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 

examples/webvr_panorama.html

@@ -4,8 +4,8 @@
 		<title>three.js webvr - panorama</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-07-28 -->
-		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="Ave6CPNUgSwHb3vCbyd55P/R7pfkwNniUJsYfSoUqI+l1X1BIOt6HfriVP0g2hmaG7Pp3qaUXuXdZeqGBmoMKg8AAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwMTI2NzQwNX0=">
+		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
 		<style>
 			html, body {
 				background-color: #000;

examples/webvr_rollercoaster.html

@@ -4,8 +4,8 @@
 		<title>three.js webvr - roller coaster</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-07-28 -->
-		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="Ave6CPNUgSwHb3vCbyd55P/R7pfkwNniUJsYfSoUqI+l1X1BIOt6HfriVP0g2hmaG7Pp3qaUXuXdZeqGBmoMKg8AAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwMTI2NzQwNX0=">
+		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
 		<style>
 			body {
 				margin: 0px;

examples/webvr_sandbox.html

@@ -4,8 +4,8 @@
 		<title>three.js webvr - sandbox</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-07-28 -->
-		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="Ave6CPNUgSwHb3vCbyd55P/R7pfkwNniUJsYfSoUqI+l1X1BIOt6HfriVP0g2hmaG7Pp3qaUXuXdZeqGBmoMKg8AAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwMTI2NzQwNX0=">
+		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
 		<style>
 			body {
 				margin: 0px;
@@ -40,8 +40,13 @@
 
 			function init() {
 
+				var background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/MilkyWay/' )
+					.load( [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ] );
+				background.format = THREE.RGBFormat;
+
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x101010 );
+				scene.background = background;
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 				scene.add( camera );