Merge branch 'dev' of https://github.com/mrdoob/three.js into FBXLoader_parseColor_fix

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

@@ -100,7 +100,7 @@
 		animate();
 		</code>
 
-		<div>This will create a loop that causes the renderer to draw the scene 60 times per second. If you're new to writing games in the browser, you might say <em>"why don't we just create a setInterval ?"</em> The thing is - we could, but <strong>requestAnimationFrame</strong> has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.</div>
+		<div>This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second). If you're new to writing games in the browser, you might say <em>"why don't we just create a setInterval ?"</em> The thing is - we could, but <strong>requestAnimationFrame</strong> has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.</div>
 
 		<h2>Animating the cube</h2>
 
@@ -113,7 +113,7 @@
 		cube.rotation.y += 0.1;
 		</code>
 
-		<div>This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don't end up with a <strong>animate</strong> function that's hundreds of lines.
+		<div>This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don't end up with a <strong>animate</strong> function that's hundreds of lines.
 		</div>
 
 		<h2>The result</h2>

examples/js/loaders/FBXLoader.js

@@ -2224,32 +2224,39 @@
 		for ( var nodeID in rawLayers ) {
 
 			var layer = [];
-			var children = connections.get( parseInt( nodeID ) ).children;
 
-			for ( var childIndex = 0; childIndex < children.length; childIndex ++ ) {
+			var connection = connections.get( parseInt( nodeID ) );
 
-				// Skip lockInfluenceWeights
-				if ( tmpMap.has( children[ childIndex ].ID ) ) {
+			if ( connection !== undefined ) {
 
-					var curveNode = tmpMap.get( children[ childIndex ].ID );
-					var boneID = curveNode.containerBoneID;
-					if ( layer[ boneID ] === undefined ) {
+				var children = connection.children;
 
-						layer[ boneID ] = {
-							T: null,
-							R: null,
-							S: null
-						};
+				for ( var childIndex = 0; childIndex < children.length; childIndex ++ ) {
 
-					}
+					// Skip lockInfluenceWeights
+					if ( tmpMap.has( children[ childIndex ].ID ) ) {
+
+						var curveNode = tmpMap.get( children[ childIndex ].ID );
+						var boneID = curveNode.containerBoneID;
+						if ( layer[ boneID ] === undefined ) {
+
+							layer[ boneID ] = {
+								T: null,
+								R: null,
+								S: null
+							};
+
+						}
+
+						layer[ boneID ][ curveNode.attr ] = curveNode;
 
-					layer[ boneID ][ curveNode.attr ] = curveNode;
+					}
 
 				}
 
-			}
+				returnObject.layers[ nodeID ] = layer;
 
-			returnObject.layers[ nodeID ] = layer;
+			}
 
 		}
 

examples/js/loaders/ImageBitmapLoader.js

@@ -2,7 +2,7 @@
  * @author thespite / http://clicktorelease.com/
  */
 
-function detectCreateImageBitmap ( optionsList ) {
+function detectCreateImageBitmap( optionsList ) {
 
 	var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
 

examples/js/loaders/PDBLoader.js

@@ -152,7 +152,7 @@ THREE.PDBLoader.prototype = {
 
 		var bhash = {};
 
-		var x, y, z, e;
+		var x, y, z, index, e;
 
 		// parse
 
@@ -165,6 +165,7 @@ THREE.PDBLoader.prototype = {
 				x = parseFloat( lines[ i ].substr( 30, 7 ) );
 				y = parseFloat( lines[ i ].substr( 38, 7 ) );
 				z = parseFloat( lines[ i ].substr( 46, 7 ) );
+				index = parseInt( lines[ i ].substr( 6, 5 ) ) - 1;
 
 				e = trim( lines[ i ].substr( 76, 2 ) ).toLowerCase();
 
@@ -174,7 +175,7 @@ THREE.PDBLoader.prototype = {
 
 				}
 
-				atoms.push( [ x, y, z, CPK[ e ], capitalize( e ) ] );
+				atoms[ index ] = [ x, y, z, CPK[ e ], capitalize( e ) ];
 
 				if ( histogram[ e ] === undefined ) {
 

examples/js/objects/Water.js

@@ -7,9 +7,9 @@
  * @author Jonas Wagner / http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
  */
 
-THREE.Water = function ( width, height, options ) {
+THREE.Water = function ( geometry, options ) {
 
-	THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );
+	THREE.Mesh.call( this, geometry );
 
 	var scope = this;
 

examples/js/objects/Water2.js

@@ -7,9 +7,9 @@
  *
  */
 
-THREE.Water = function ( width, height, options ) {
+THREE.Water = function ( geometry, options ) {
 
-	THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );
+	THREE.Mesh.call( this, geometry );
 
 	this.type = 'Water';
 
@@ -54,13 +54,13 @@ THREE.Water = function ( width, height, options ) {
 
 	}
 
-	var reflector = new THREE.Reflector( width, height, {
+	var reflector = new THREE.Reflector( geometry, {
 		textureWidth: textureWidth,
 		textureHeight: textureHeight,
 		clipBias: clipBias
 	} );
 
-	var refractor = new THREE.Refractor( width, height, {
+	var refractor = new THREE.Refractor( geometry, {
 		textureWidth: textureWidth,
 		textureHeight: textureHeight,
 		clipBias: clipBias

examples/webgl_loader_imagebitmap.html

@@ -5,16 +5,14 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-			body
-			{
+			body {
 				font-family: Monospace;
 				background-color: #000;
 				color: #fff;
 				margin: 0px;
 				overflow: hidden;
 			}
-			#info
-			{
+			#info {
 				position: absolute;
 				top: 10px;
 				width: 100%;
@@ -22,34 +20,12 @@
 				z-index: 100;
 				display:block;
 			}
-			#info a, .button
-			{
+			#info a, .button {
 				color: #f00;
 				font-weight: bold;
 				text-decoration: underline;
 				cursor: pointer
 			}
-			.actions{
-				padding: 2em;
-				line-height: 0;
-			}
-			.actions span{
-				line-height: 4em;
-				padding: 1em;
-				border: 1px solid white;
-				cursor: pointer;
-				white-space: nowrap;
-				user-select: none;
-			}
-			.actions span:hover{
-				color: red;
-				border-color: red;
-			}
-			.actions span:active{
-				color: black;
-				background-color: red;
-				border-color: red;
-			}
 		</style>
 	</head>
 	<body>
@@ -58,20 +34,12 @@
 		<script src="js/loaders/ImageBitmapLoader.js"></script>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Texture loader using ImageBitmap
-			<div class="actions">
-				<span id="add_ib_btn">Add ImageBitmap</span>
-				<span id="add_i_btn">Add Image</span>
-				<span id="clear_btn">Clear</span>
-			</div>
 		</div>
 
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			THREE.Cache.enabled = true;
-
 			var container;
 
 			var camera, scene, renderer;
@@ -80,20 +48,21 @@
 			init();
 			animate();
 
-			function addImageBitmap () {
+			function addImageBitmap() {
 
 				new THREE.ImageBitmapLoader()
 					.setOptions( { imageOrientation: 'none' } )
-					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function( imageBitmap ) {
+					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( imageBitmap ) {
 
-						var tex = new THREE.CanvasTexture( imageBitmap );
+						var texture = new THREE.CanvasTexture( imageBitmap );
+						var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 						/* ImageBitmap should be disposed when done with it
 						   Can't be done until it's actually uploaded to WebGLTexture */
 
 						// imageBitmap.close();
 
-						addCube( tex );
+						addCube( material );
 
 					}, function( p ) {
 						console.log( p );
@@ -103,22 +72,21 @@
 
 			}
 
-			function addImage () {
+			function addImage() {
 
 				new THREE.ImageLoader()
 					.setCrossOrigin( '*' )
-					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function( image ) {
-							var tex = new THREE.CanvasTexture( image );
-							addCube( tex );
+					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( image ) {
+							var texture = new THREE.CanvasTexture( image );
+							var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
+							addCube( material );
 				});
 
 			}
 
 			var geometry = new THREE.BoxBufferGeometry( 1,1,1 );
 
-			function addCube( texture ) {
-
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+			function addCube( material ) {
 
 				var cube = new THREE.Mesh( geometry, material );
 				cube.position.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
@@ -152,31 +120,6 @@
 				cubes = new THREE.Group();
 				group.add( cubes );
 
-				addImageBitmap();
-				addImage();
-
-				var ibBtn = document.getElementById( 'add_ib_btn' );
-				ibBtn.addEventListener( 'click', function( e ) {
-					addImageBitmap();
-					e.preventDefault();
-				} );
-
-				var iBtn = document.getElementById( 'add_i_btn' );
-				iBtn.addEventListener( 'click', function( e ) {
-					addImage();
-					e.preventDefault();
-				} );
-
-				var clearBtn = document.getElementById( 'clear_btn' );
-				clearBtn.addEventListener( 'click', function( e ) {
-					while( cubes.children.length ) {
-						var cube = cubes.children[ 0 ]
-						cubes.remove( cube );
-						cube.geometry.dispose();
-						cube.material.map.dispose();
-					}
-				})
-
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -184,9 +127,19 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				// TESTS
+
+				setTimeout( addImage, 300 );
+				setTimeout( addImage, 600 );
+				setTimeout( addImage, 900 );
+				setTimeout( addImageBitmap, 1300 );
+				setTimeout( addImageBitmap, 1600 );
+				setTimeout( addImageBitmap, 1900 );
+
 				// EVENTS
 
 				window.addEventListener( 'resize', onWindowResize, false );
+
 			}
 
 			function onWindowResize() {

examples/webgl_mirror.html

@@ -73,7 +73,7 @@
 				scene = new THREE.Scene();
 
 				// camera
-				camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 				camera.position.set( 0, 75, 160 );
 
 				cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
@@ -88,7 +88,7 @@
 
 				// reflectors/mirrors
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var geometry = new THREE.CircleBufferGeometry( 40, 64 );
 				var groundMirror = new THREE.Reflector( geometry, {
 					clipBias: 0.003,
 					textureWidth: WIDTH * window.devicePixelRatio,
@@ -96,10 +96,11 @@
 					color: 0x777777,
 					recursion: 1
 				} );
+				groundMirror.position.y = 0.5;
 				groundMirror.rotateX( - Math.PI / 2 );
 				scene.add( groundMirror );
 
-				var geometry = new THREE.CircleBufferGeometry( 40, 6 );
+				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				var verticalMirror = new THREE.Reflector( geometry, {
 					clipBias: 0.003,
 					textureWidth: WIDTH * window.devicePixelRatio,
@@ -108,7 +109,7 @@
 					recursion: 1
 				} );
 				verticalMirror.position.y = 50;
-				verticalMirror.position.z = -45;
+				verticalMirror.position.z = - 50;
 				scene.add( verticalMirror );
 
 
@@ -141,10 +142,9 @@
 				planeTop.rotateX( Math.PI / 2 );
 				scene.add( planeTop );
 
-				var planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
-				planeBack.position.z = -50;
-				planeBack.position.y = 50;
-				scene.add( planeBack );
+				var planeBottom = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
+				planeBottom.rotateX( - Math.PI / 2 );
+				scene.add( planeBottom );
 
 				var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
 				planeFront.position.z = 50;

examples/webgl_refraction.html

@@ -77,7 +77,9 @@
 
 			// refractor
 
-			refractor = new THREE.Refractor( 10, 10, {
+			var refractorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+
+			refractor = new THREE.Refractor( refractorGeometry, {
 				color: 0x999999,
 				textureWidth: 1024,
 				textureHeight: 1024,

examples/webgl_shaders_ocean.html

@@ -154,9 +154,10 @@
 
 			function setWater() {
 
+				var waterGeometry = new THREE.PlaneBufferGeometry( parameters.oceanSide * 5, parameters.oceanSide * 5 );
+
 				water = new THREE.Water(
-					parameters.oceanSide * 5,
-					parameters.oceanSide * 5,
+					waterGeometry,
 					{
 						textureWidth: 512,
 						textureHeight: 512,

examples/webgl_water.html

@@ -109,7 +109,9 @@
 
 			// water
 
-			water = new THREE.Water( 20, 20, {
+			var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+
+			water = new THREE.Water( waterGeometry, {
 				color: params.color,
 				scale: params.scale,
 				flowDirection: new THREE.Vector2( params.flowX, params.flowY ),

examples/webgl_water_flowmap.html

@@ -86,9 +86,10 @@
 
 			// water
 
+			var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 			var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
 
-			water = new THREE.Water( 20, 20, {
+			water = new THREE.Water( waterGeometry, {
 				scale: 2,
 				textureWidth: 1024,
 				textureHeight: 1024,

src/extras/curves/EllipseCurve.js

@@ -14,7 +14,7 @@ function EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockw
 	this.xRadius = xRadius || 1;
 	this.yRadius = yRadius || 1;
 
-	this.aStartAngle = aStartAngle || 0;
+	this.aStartAngle = aStartAngle || 0;
 	this.aEndAngle = aEndAngle || 2 * Math.PI;
 
 	this.aClockwise = aClockwise || false;