Updated examples with API changes.

examples/js/math/Lut.js

@@ -11,9 +11,9 @@ THREE.Lut = function ( colormap, numberofcolors ) {
 
 	var step = 1.0 / this.n;
 
-	for ( var i = 0; i <= 1; i+=step ) {
+	for ( var i = 0; i <= 1; i += step ) {
 
-		for ( var j = 0; j < this.map.length - 1; j++ ) {
+		for ( var j = 0; j < this.map.length - 1; j ++ ) {
 
 			if ( i >= this.map[ j ][ 0 ] && i < this.map[ j + 1 ][ 0 ] ) {
 
@@ -28,9 +28,9 @@ THREE.Lut = function ( colormap, numberofcolors ) {
 
 				this.lut.push(color);
 
-			}         
+			}
 
-		}   
+		}
 
 	}
 
@@ -88,7 +88,7 @@ THREE.Lut.prototype = {
 
 	},
 
-  copy: function ( lut ) {
+	copy: function ( lut ) {
 
 		this.lut = lut.lut;
 		this.mapname = lut.mapname;
@@ -101,371 +101,362 @@ THREE.Lut.prototype = {
 
 	},
 
-  getColor: function ( alpha ) {
+	getColor: function ( alpha ) {
 
-	if ( alpha <= this.minV ) {
+		if ( alpha <= this.minV ) {
 
-		alpha = this.minV;
+			alpha = this.minV;
 
-	}   
+		} else if ( alpha >= this.maxV ) {
 
-	 else if ( alpha >= this.maxV ) {
+			alpha = this.maxV;
 
-		alpha = this.maxV;
+		}
 
-	}
+		alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
 
-	alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
+		var colorPosition = Math.round ( alpha * this.n );
+		colorPosition == this.n ? colorPosition -= 1 : colorPosition;
 
-	var colorPosition = Math.round ( alpha * this.n );
-	colorPosition == this.n ? colorPosition -= 1 : colorPosition;
+		return this.lut[ colorPosition ];
 
-	return this.lut[ colorPosition ];
+	},
 
-  },
+	addColorMap: function ( colormapName, arrayOfColors ) {
 
-  addColorMap: function ( colormapName, arrayOfColors ) {
+		THREE.ColorMapKeywords[ colormapName ] = arrayOfColors;
 
-	THREE.ColorMapKeywords[ colormapName ] = arrayOfColors;
+	},
 
-  },
+	setLegendOn: function ( parameters ) {
 
-  setLegendOn: function ( parameters ) {
+		if ( parameters === undefined ) { parameters = {}; }
 
-	if ( parameters === undefined ) { parameters = {}; }
+		this.legend = {};
 
-	this.legend = {};
+		this.legend.layout = parameters.hasOwnProperty( 'layout' ) ? parameters[ 'layout' ] : 'vertical';
 
-	this.legend.layout = parameters.hasOwnProperty( 'layout' ) ? parameters[ 'layout' ] : 'vertical';
+		this.legend.position = parameters.hasOwnProperty( 'position' ) ? parameters[ 'position' ] : { 'x': 21.5, 'y': 8, 'z': 5 };
 
-	this.legend.position = parameters.hasOwnProperty( 'position' ) ? parameters[ 'position' ] : { 'x': 21.5, 'y': 8, 'z': 5 };
+		this.legend.dimensions = parameters.hasOwnProperty( 'dimensions' ) ? parameters[ 'dimensions' ] : { 'width': 0.5, 'height': 3 };
 
-	this.legend.dimensions = parameters.hasOwnProperty( 'dimensions' ) ? parameters[ 'dimensions' ] : { 'width': 0.5, 'height': 3 };
+		this.legend.canvas = document.createElement( 'canvas' );
 
-	this.legend.canvas = document.createElement( 'canvas' );
+		this.legend.canvas.setAttribute( 'id', 'legend' );
+		this.legend.canvas.setAttribute( 'hidden', true );
 
-	this.legend.canvas.setAttribute( 'id', 'legend' );
-	this.legend.canvas.setAttribute( 'hidden', true );
+		document.body.appendChild( this.legend.canvas );
 
-	document.body.appendChild( this.legend.canvas );
+		this.legend.ctx = this.legend.canvas.getContext( '2d' );
 
-	this.legend.ctx = this.legend.canvas.getContext( '2d' );
+		this.legend.canvas.setAttribute( 'width',  1 );
+		this.legend.canvas.setAttribute( 'height', this.n );
 
-	this.legend.canvas.setAttribute( 'width',  1 );
-	this.legend.canvas.setAttribute( 'height', this.n );
+		this.legend.texture = new THREE.Texture( this.legend.canvas );
 
-	this.legend.texture = new THREE.Texture( this.legend.canvas );
+		imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
 
-	imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
+		data = imageData.data;
+		len = data.length;
 
-	data = imageData.data;
-	len = data.length;
+		this.map = THREE.ColorMapKeywords[ this.mapname ];
 
-	this.map = THREE.ColorMapKeywords[ this.mapname ];
+		var k = 0;
 
-	var k = 0;
+		var step = 1.0 / this.n;
 
-	var step = 1.0 / this.n;
+		for ( var i = 1; i >= 0; i-=step ) {
 
-	for ( var i = 1; i >= 0; i-=step ) {
+			for ( var j = this.map.length - 1; j >= 0; j-- ) {
 
-		for ( var j = this.map.length - 1; j >= 0; j-- ) {
+				if ( i < this.map[ j ][ 0 ] && i >= this.map[ j - 1 ][ 0 ]  ) {
 
-			if ( i < this.map[ j ][ 0 ] && i >= this.map[ j - 1 ][ 0 ]  ) {
+					var min = this.map[ j - 1 ][ 0 ];
+					var max = this.map[ j ][ 0 ];
+					var color = new THREE.Color( 0xffffff );
+					var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j - 1][ 1 ] );
+					var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
+					color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
 
-				var min = this.map[ j - 1 ][ 0 ];
-				var max = this.map[ j ][ 0 ];
-				var color = new THREE.Color( 0xffffff );
-				var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j - 1][ 1 ] );
-				var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
-				color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
+					data[ k * 4     ] = Math.round( color.r * 255 );
+					data[ k * 4 + 1 ] = Math.round( color.g * 255 );
+					data[ k * 4 + 2 ] = Math.round( color.b * 255 );
+					data[ k * 4 + 3 ] = 255;
 
-				data[ k * 4     ] = Math.round( color.r * 255 );
-				data[ k * 4 + 1 ] = Math.round( color.g * 255 );
-				data[ k * 4 + 2 ] = Math.round( color.b * 255 );
-				data[ k * 4 + 3 ] = 255;
+					k+=1;
 
-				k+=1;
+				}
 
 			}
 
 		}
 
-	}   
-
-	this.legend.ctx.putImageData( imageData, 0, 0 );
-	this.legend.texture.needsUpdate = true;
-
-	this.legend.legendGeometry = new THREE.PlaneGeometry( this.legend.dimensions.width , this.legend.dimensions.height  );
-	this.legend.legendMaterial = new THREE.MeshBasicMaterial( { map : this.legend.texture, side : THREE.DoubleSide } );
+		this.legend.ctx.putImageData( imageData, 0, 0 );
+		this.legend.texture.needsUpdate = true;
 
-	this.legend.mesh = new THREE.Mesh( this.legend.legendGeometry, this.legend.legendMaterial );
+		this.legend.legendGeometry = new THREE.PlaneGeometry( this.legend.dimensions.width , this.legend.dimensions.height );
+		this.legend.legendMaterial = new THREE.MeshBasicMaterial( { map : this.legend.texture, side : THREE.DoubleSide } );
 
-	if ( this.legend.layout == 'horizontal') {
+		this.legend.mesh = new THREE.Mesh( this.legend.legendGeometry, this.legend.legendMaterial );
 
-		this.legend.mesh.rotation.z = - 90 * ( Math.PI / 180 );
+		if ( this.legend.layout == 'horizontal') {
 
-		this.legend.mesh.position = new THREE.Vector3( this.legend.position.x, this.legend.position.y, this.legend.position.z );
+			this.legend.mesh.rotation.z = - 90 * ( Math.PI / 180 );
 
-	}   
-
-	else {
+		}
 
-		this.legend.mesh.position = new THREE.Vector3( this.legend.position.x, this.legend.position.y, this.legend.position.z );
+		this.legend.mesh.position.copy( this.legend.position );
 
-	}
+		return this.legend.mesh;
 
-	return this.legend.mesh;
+	},
 
-  },
+	setLegendOff: function () {
 
-  setLegendOff: function () {
+		this.legend = null;
 
-	this.legend = null;
+		return this.legend;
 
-	return this.legend;
+	},
 
-  },
+	setLegendLayout: function ( layout ) {
 
-  setLegendLayout: function ( layout ) {
+		if ( ! this.legend ) { return false; }
 
-	if ( ! this.legend ) { return false; }
+		if ( this.legend.layout == layout ) { return false; }
 
-	if ( this.legend.layout == layout ) { return false; }
+		if ( layout != 'horizontal' && layout != 'vertical' ) { return false; }
 
-	if ( layout != 'horizontal' && layout != 'vertical' ) { return false; }
+		this.layout = layout;
 
-	this.layout = layout;
+		if ( layout == 'horizontal' ) {
 
-	if ( layout == 'horizontal' ) {
+			this.legend.mesh.rotation.z = 90 * ( Math.PI / 180 );
 
-		this.legend.mesh.rotation.z = 90 * ( Math.PI / 180 );
+		}
 
-	}
+		if ( layout == 'vertical' ) {
 
-	if ( layout == 'vertical' ) {
+			this.legend.mesh.rotation.z = -90 * ( Math.PI / 180 );
 
-		this.legend.mesh.rotation.z = -90 * ( Math.PI / 180 );
+		}
 
-	}
+		return this.legend.mesh;
 
-	return this.legend.mesh;
+	},
 
-  },
+	setLegendPosition: function ( position ) {
 
-  setLegendPosition: function ( position ) {
+		this.legend.position = new THREE.Vector3( position.x, position.y, position.z );
 
-	this.legend.position = new THREE.Vector3( position.x, position.y, position.z );
+		return this.legend;
 
-	return this.legend;
+	},
 
-  },
+	setLegendLabels: function ( parameters, callback ) {
 
+		if ( ! this.legend ) { return false; }
 
-  setLegendLabels: function ( parameters, callback ) {
+		if ( typeof parameters === 'function') { callback = parameters; }
 
-	if ( ! this.legend ) { return false; }
+		if ( parameters === undefined ) { parameters = {}; }
 
-	if ( typeof parameters === 'function') { callback = parameters; }
+		this.legend.labels = {};
 
-	if ( parameters === undefined ) { parameters = {}; }
+		this.legend.labels.fontsize = parameters.hasOwnProperty( 'fontsize' ) ? parameters[ 'fontsize' ] : 24;
 
-	this.legend.labels = {};
+		this.legend.labels.fontface = parameters.hasOwnProperty( 'fontface' ) ? parameters[ 'fontface' ] : 'Arial';
 
-	this.legend.labels.fontsize = parameters.hasOwnProperty( 'fontsize' ) ? parameters[ 'fontsize' ] : 24;
+		this.legend.labels.title = parameters.hasOwnProperty( 'title' ) ? parameters[ 'title' ] : '';
 
-	this.legend.labels.fontface = parameters.hasOwnProperty( 'fontface' ) ? parameters[ 'fontface' ] : 'Arial';
+		this.legend.labels.um = parameters.hasOwnProperty( 'um' ) ? ' [ '+ parameters[ 'um' ] + ' ]': '';
 
-	this.legend.labels.title = parameters.hasOwnProperty( 'title' ) ? parameters[ 'title' ] : '';
+		this.legend.labels.ticks = parameters.hasOwnProperty( 'ticks' ) ? parameters[ 'ticks' ] : 0;
 
-	this.legend.labels.um = parameters.hasOwnProperty( 'um' ) ? ' [ '+ parameters[ 'um' ] + ' ]': '';
+		this.legend.labels.decimal = parameters.hasOwnProperty( 'decimal' ) ? parameters[ 'decimal' ] : 2;
 
-	this.legend.labels.ticks = parameters.hasOwnProperty( 'ticks' ) ? parameters[ 'ticks' ] : 0;
+		this.legend.labels.notation = parameters.hasOwnProperty( 'notation' ) ? parameters[ 'notation' ] : 'standard';
 
-	this.legend.labels.decimal = parameters.hasOwnProperty( 'decimal' ) ? parameters[ 'decimal' ] : 2;
+		var backgroundColor = { r: 255, g: 100, b: 100, a: 0.8 };
+		var borderColor =  { r: 255, g: 0, b: 0, a: 1.0 };
+		var borderThickness = 4;
 
-	this.legend.labels.notation = parameters.hasOwnProperty( 'notation' ) ? parameters[ 'notation' ] : 'standard';
+		var canvasTitle = document.createElement( 'canvas' );
+		var contextTitle = canvasTitle.getContext( '2d' );
 
-	var backgroundColor = { r: 255, g: 100, b: 100, a: 0.8 };
-	var borderColor =  { r: 255, g: 0, b: 0, a: 1.0 };
-	var borderThickness = 4;
+		contextTitle.font = 'Normal ' + this.legend.labels.fontsize * 1.2 + 'px ' + this.legend.labels.fontface;
 
-	var canvasTitle = document.createElement( 'canvas' );
-	var contextTitle = canvasTitle.getContext( '2d' );
+		var metrics = contextTitle.measureText( this.legend.labels.title.toString() + this.legend.labels.um.toString() );
+		var textWidth = metrics.width;
 
-	contextTitle.font = 'Normal ' + this.legend.labels.fontsize * 1.2 + 'px ' + this.legend.labels.fontface;
+		contextTitle.fillStyle   = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
 
-	var metrics = contextTitle.measureText( this.legend.labels.title.toString() + this.legend.labels.um.toString() );
-	var textWidth = metrics.width;
+		contextTitle.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
 
-	contextTitle.fillStyle   = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
+		contextTitle.lineWidth = borderThickness;
 
-	contextTitle.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
+		contextTitle.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
 
-	contextTitle.lineWidth = borderThickness;
+		contextTitle.fillText( this.legend.labels.title.toString() + this.legend.labels.um.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
 
-	contextTitle.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
+		var txtTitle = new THREE.Texture( canvasTitle );
 
-	contextTitle.fillText( this.legend.labels.title.toString() + this.legend.labels.um.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
+		txtTitle.needsUpdate = true;
 
-	var txtTitle = new THREE.Texture( canvasTitle );
+		var spriteMaterialTitle = new THREE.SpriteMaterial( { map: txtTitle, useScreenCoordinates: false } );
 
-	txtTitle.needsUpdate = true;
+		var spriteTitle = new THREE.Sprite( spriteMaterialTitle );
 
-	var spriteMaterialTitle = new THREE.SpriteMaterial( { map: txtTitle, useScreenCoordinates: false } );
+		spriteTitle.scale.set( 2, 1, 1.0 );
 
-	var spriteTitle = new THREE.Sprite( spriteMaterialTitle );
+		if ( this.legend.layout == 'vertical' ) {
 
-	spriteTitle.scale.set( 2, 1, 1.0 );
+			spriteTitle.position.set( this.legend.position.x + this.legend.dimensions.width, this.legend.position.y + ( this.legend.dimensions.height * 0.45 ), this.legend.position.z );
 
-	if ( this.legend.layout == 'vertical' ) {
+		}
 
-		spriteTitle.position.set( this.legend.position.x + this.legend.dimensions.width, this.legend.position.y + ( this.legend.dimensions.height * 0.45 ), this.legend.position.z );
+		if ( this.legend.layout == 'horizontal' ) {
 
-	}
+			spriteTitle.position.set( this.legend.position.x * 1.015, this.legend.position.y + ( this.legend.dimensions.height * 0.03 ), this.legend.position.z );
 
-	if ( this.legend.layout == 'horizontal' ) {
+		}
 
-		spriteTitle.position.set( this.legend.position.x * 1.015, this.legend.position.y + ( this.legend.dimensions.height * 0.03 ), this.legend.position.z );
+		if ( this.legend.labels.ticks > 0 ) {
 
-	}
+			var ticks = {};
+			var lines = {};
 
-	if ( this.legend.labels.ticks > 0 ) {
-
-		var ticks = {};
-		var lines = {};
+			if ( this.legend.layout == 'vertical' ) {
 
-		if ( this.legend.layout == 'vertical' ) {
+				var topPositionY = this.legend.position.y + ( this.legend.dimensions.height * 0.36 );
+				var bottomPositionY = this.legend.position.y - ( this.legend.dimensions.height * 0.61 );
 
-			var topPositionY = this.legend.position.y + ( this.legend.dimensions.height * 0.36 );
-			var bottomPositionY = this.legend.position.y - ( this.legend.dimensions.height * 0.61 );
+			}
 
-		}
+			if ( this.legend.layout == 'horizontal' ) {
 
-		if ( this.legend.layout == 'horizontal' ) {
+				var topPositionX = this.legend.position.x + ( this.legend.dimensions.height * 0.75 );
+				var bottomPositionX = this.legend.position.x - ( this.legend.dimensions.width * 1.2  ) ;
 
-			var topPositionX = this.legend.position.x + ( this.legend.dimensions.height * 0.75 );
-			var bottomPositionX = this.legend.position.x - ( this.legend.dimensions.width * 1.2  ) ;
+			}
 
-		}
+			for ( var i = 0; i < this.legend.labels.ticks; i++ ) {
 
-		for ( var i = 0; i < this.legend.labels.ticks; i++ ) {
+				var value = ( this.maxV - this.minV ) / ( this.legend.labels.ticks - 1  ) * i ;
 
-			var value = ( this.maxV - this.minV ) / ( this.legend.labels.ticks - 1  ) * i ;
+				if ( callback ) {
 
-			if ( callback ) {
+					value = callback ( value );
 
-				value = callback ( value );
+				}
 
-			}
+				else {
 
-			else {
+					if ( this.legend.labels.notation == 'scientific' ) {
 
-				if ( this.legend.labels.notation == 'scientific' ) {
+						value = value.toExponential( this.legend.labels.decimal );
 
-					value = value.toExponential( this.legend.labels.decimal );
+					}
 
-				}
+					else {
 
-				else {
+						value = value.toFixed( this.legend.labels.decimal );
 
-					value = value.toFixed( this.legend.labels.decimal );
+					}
 
 				}
 
-			}       
+				var canvasTick = document.createElement( 'canvas' );
+				var contextTick = canvasTick.getContext( '2d' );
 
-			var canvasTick = document.createElement( 'canvas' );
-			var contextTick = canvasTick.getContext( '2d' );
+				contextTick.font = 'Normal ' + this.legend.labels.fontsize + 'px ' + this.legend.labels.fontface;
 
-			contextTick.font = 'Normal ' + this.legend.labels.fontsize + 'px ' + this.legend.labels.fontface;
+				var metrics = contextTick.measureText( value.toString() );
+				var textWidth = metrics.width;
 
-			var metrics = contextTick.measureText( value.toString() );
-			var textWidth = metrics.width;
+				contextTick.fillStyle   = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
 
-			contextTick.fillStyle   = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
+				contextTick.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
 
-			contextTick.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
+				contextTick.lineWidth = borderThickness;
 
-			contextTick.lineWidth = borderThickness;
+				contextTick.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
 
-			contextTick.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
+				contextTick.fillText( value.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
 
-			contextTick.fillText( value.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
+				var txtTick = new THREE.Texture( canvasTick );
 
-			var txtTick = new THREE.Texture( canvasTick );
+				txtTick.needsUpdate = true;
 
-			txtTick.needsUpdate = true;
+				var spriteMaterialTick = new THREE.SpriteMaterial( { map: txtTick, useScreenCoordinates: false } );
 
-			var spriteMaterialTick = new THREE.SpriteMaterial( { map: txtTick, useScreenCoordinates: false } );
+				var spriteTick = new THREE.Sprite( spriteMaterialTick );
 
-			var spriteTick = new THREE.Sprite( spriteMaterialTick );
+				spriteTick.scale.set( 2, 1, 1.0 );
 
-			spriteTick.scale.set( 2, 1, 1.0 );
+				if ( this.legend.layout == 'vertical' ) {
 
-			if ( this.legend.layout == 'vertical' ) {
+					var position = bottomPositionY + ( topPositionY - bottomPositionY ) * ( value / ( this.maxV - this.minV ) );
 
-				var position = bottomPositionY + ( topPositionY - bottomPositionY ) * ( value / ( this.maxV - this.minV ) );
+					spriteTick.position.set( this.legend.position.x + ( this.legend.dimensions.width * 2.7 ), position, this.legend.position.z );
 
-				spriteTick.position.set( this.legend.position.x + ( this.legend.dimensions.width * 2.7 ), position, this.legend.position.z );
+				}
 
-			}
+				if ( this.legend.layout == 'horizontal' ) {
 
-			if ( this.legend.layout == 'horizontal' ) {
+					var position = bottomPositionX + ( topPositionX - bottomPositionX ) * ( value / ( this.maxV - this.minV ) );
 
-				var position = bottomPositionX + ( topPositionX - bottomPositionX ) * ( value / ( this.maxV - this.minV ) );
+					if ( this.legend.labels.ticks > 5 ) {
 
-				if ( this.legend.labels.ticks > 5 ) {
+						if ( i % 2 === 0 ) { var offset = 1.7; }
 
-					if ( i % 2 === 0 ) { var offset = 1.7; }
+						else { var offset = 2.1; }
 
-					else { var offset = 2.1; }
+					}
 
-				}             
+					else { var offset = 1.7; }
 
-				else { var offset = 1.7; }
+					spriteTick.position.set( position, this.legend.position.y - this.legend.dimensions.width * offset, this.legend.position.z );
 
-				spriteTick.position.set( position, this.legend.position.y - this.legend.dimensions.width * offset, this.legend.position.z );
+				}
 
-			}       
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );
 
-			var material = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );
+				var geometry = new THREE.Geometry();
 
-			var geometry = new THREE.Geometry();
 
+				if ( this.legend.layout == 'vertical' ) {
 
-			if ( this.legend.layout == 'vertical' ) {
+					var linePosition = ( this.legend.position.y - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( value / ( this.maxV - this.minV ) * 0.99 );
 
-				var linePosition = ( this.legend.position.y - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( value / ( this.maxV - this.minV ) * 0.99 );
+					geometry.vertices.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.55, linePosition , this.legend.position.z  ) );
 
-				geometry.vertices.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.55, linePosition , this.legend.position.z  ) );
+					geometry.vertices.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.7, linePosition, this.legend.position.z  ) );
 
-				geometry.vertices.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.7, linePosition, this.legend.position.z  ) );
+				}
 
-			}
+				if ( this.legend.layout == 'horizontal' ) {
 
-			if ( this.legend.layout == 'horizontal' ) {
+					var linePosition = ( this.legend.position.x - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( value / ( this.maxV - this.minV ) * 0.99 );
 
-				var linePosition = ( this.legend.position.x - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( value / ( this.maxV - this.minV ) * 0.99 );
+					geometry.vertices.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.55, this.legend.position.z  ) );
 
-				geometry.vertices.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.55, this.legend.position.z  ) );
+					geometry.vertices.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.7, this.legend.position.z  ) );
 
-				geometry.vertices.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.7, this.legend.position.z  ) );
+				}
 
-			}       
+				var line = new THREE.Line( geometry, material );
 
-			var line = new THREE.Line( geometry, material );
+				lines[ i ] = line;
+				ticks[ i ] = spriteTick;
 
-			lines[ i ] = line;
-			ticks[ i ] = spriteTick;
+			}
 
 		}
 
-	}
-
-	return { 'title': spriteTitle,  'ticks': ticks, 'lines': lines };
+		return { 'title': spriteTitle,  'ticks': ticks, 'lines': lines };
 
-  }
+	}
 
 };
 

examples/webgl_animation_skinning_blending.html

@@ -64,7 +64,7 @@
 				scene.add ( new THREE.AmbientLight( 0xaaaaaa ) );
 
 				var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light.position = new THREE.Vector3( 0, 0, 1000.0 );
+				light.position.set( 0, 0, 1000 );
 				scene.add( light );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );

examples/webgl_buffergeometry.html

@@ -195,10 +195,10 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.Uint16Attribute( indices, 1 ) );
-				geometry.addAttribute( 'position', new THREE.Float32Attribute( positions, 3 ) );
-				geometry.addAttribute( 'normal', new THREE.Float32Attribute( normals, 3 ) );
-				geometry.addAttribute( 'color', new THREE.Float32Attribute( colors, 3 ) );
+				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
 				var offsets = triangles / chunkSize;
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -114,14 +114,14 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms: 		uniforms,
+				uniforms:       uniforms,
 				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				blending: 		THREE.AdditiveBlending,
-				depthTest: 		false,
-				transparent:	true
+				blending:       THREE.AdditiveBlending,
+				depthTest:      false,
+				transparent:    true
 
 			});
 
@@ -152,11 +152,11 @@
 
 			}
 
-			geometry.addAttribute( 'position', new THREE.Float32Attribute( positions, 3 ) );
-			geometry.addAttribute( 'customColor', new THREE.Float32Attribute( values_color, 3 ) );
-			geometry.addAttribute( 'size', new THREE.Float32Attribute( values_size, 1 ) );
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( values_color, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( values_size, 1 ) );
 
-			particleSystem = new THREE.ParticleSystem( geometry, shaderMaterial );
+			particleSystem = new THREE.PointCloud( geometry, shaderMaterial );
 
 			scene.add( particleSystem );
 

examples/webgl_buffergeometry_lines.html

@@ -94,8 +94,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32Attribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.Float32Attribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 

examples/webgl_buffergeometry_particles.html

@@ -102,16 +102,16 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32Attribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.Float32Attribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 
 				//
 
-				var material = new THREE.ParticleSystemMaterial( { size: 15, vertexColors: true } );
+				var material = new THREE.PointCloudMaterial( { size: 15, vertexColors: true } );
 
-				particleSystem = new THREE.ParticleSystem( geometry, material );
+				particleSystem = new THREE.PointCloud( geometry, material );
 				scene.add( particleSystem );
 
 				//

examples/webgl_buffergeometry_uint.html

@@ -190,10 +190,10 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.Uint32Attribute( indices, 1 ) );
-				geometry.addAttribute( 'position', new THREE.Float32Attribute( positions, 3 ) );
-				geometry.addAttribute( 'normal', new THREE.Float32Attribute( normals, 3 ) );
-				geometry.addAttribute( 'color', new THREE.Float32Attribute( colors, 3 ) );
+				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 

examples/webgl_camera.html

@@ -130,7 +130,7 @@
 
 				}
 
-				var particles = new THREE.ParticleSystem( geometry, new THREE.ParticleSystemMaterial( { color: 0x888888 } ) );
+				var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) );
 				scene.add( particles );
 
 				//

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -168,10 +168,6 @@
 				light.position.set(100,100,100);
 				scene.add(light);
 
-				var pointlight = new THREE.PointLight(0xffccaa, .1);
-				pointlight.position = camera.position;
-				scene.add(pointlight);
-
 				var materialargs = {
 					color: 0xffffff,
 					specular: 0xffaa00,

examples/webgl_custom_attributes_particles.html

@@ -119,14 +119,14 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms: 		uniforms,
+				uniforms:       uniforms,
 				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				blending: 		THREE.AdditiveBlending,
-				depthTest: 		false,
-				transparent:	true
+				blending:       THREE.AdditiveBlending,
+				depthTest:      false,
+				transparent:    true
 
 			});
 
@@ -134,7 +134,7 @@
 			var radius = 200;
 			var geometry = new THREE.Geometry();
 
-			for ( var i = 0; i < 100000; i++ ) {
+			for ( var i = 0; i < 100000; i ++ ) {
 
 				var vertex = new THREE.Vector3();
 				vertex.x = Math.random() * 2 - 1;
@@ -146,7 +146,7 @@
 
 			}
 
-			sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
+			sphere = new THREE.PointCloud( geometry, shaderMaterial );
 
 			sphere.dynamic = true;
 			//sphere.sortParticles = true;
@@ -155,8 +155,7 @@
 			var values_size = attributes.size.value;
 			var values_color = attributes.customColor.value;
 
-
-			for( var v = 0; v < vertices.length; v++ ) {
+			for ( var v = 0; v < vertices.length; v++ ) {
 
 				values_size[ v ] = 10;
 				values_color[ v ] = new THREE.Color( 0xffaa00 );

examples/webgl_custom_attributes_particles2.html

@@ -117,11 +117,11 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms: 		uniforms,
+				uniforms:       uniforms,
 				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				transparent:	true
+				transparent:    true
 
 			});
 
@@ -134,7 +134,7 @@
 			var geometry2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
 			geometry.merge( geometry2 );
 
-			sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
+			sphere = new THREE.PointCloud( geometry, shaderMaterial );
 
 			sphere.dynamic = true;
 			sphere.sortParticles = true;
@@ -143,7 +143,7 @@
 			var values_size = attributes.size.value;
 			var values_color = attributes.ca.value;
 
-			for( var v = 0; v < vertices.length; v++ ) {
+			for ( var v = 0; v < vertices.length; v ++ ) {
 
 				values_size[ v ] = 10;
 				values_color[ v ] = new THREE.Color( 0xffffff );

examples/webgl_custom_attributes_particles3.html

@@ -125,7 +125,7 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms: 		uniforms,
+				uniforms:       uniforms,
 				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
@@ -193,8 +193,7 @@
 
 			// particle system
 
-			object = new THREE.ParticleSystem( geometry, shaderMaterial );
-			object.dynamic = true;
+			object = new THREE.PointCloud( geometry, shaderMaterial );
 
 			// custom attributes
 
@@ -203,7 +202,7 @@
 			var values_size = attributes.size.value;
 			var values_color = attributes.ca.value;
 
-			for( var v = 0; v < vertices.length; v ++ ) {
+			for ( var v = 0; v < vertices.length; v ++ ) {
 
 				values_size[ v ] = 10;
 				values_color[ v ] = new THREE.Color( 0xffffff );

examples/webgl_geometry_colors_lookuptable.html

@@ -205,7 +205,7 @@
 
 					}
 
-					geometry.addAttribute( 'color', new THREE.Float32Attribute( new Float32Array( lutColors ), 3) );
+					geometry.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( lutColors ), 3 ) );
 
 					mesh = new THREE.Mesh ( geometry, material );
 
@@ -346,4 +346,4 @@
 		</script>
 
 	</body>
-</html>
+</html>

examples/webgl_geometry_extrude_shapes.html

@@ -61,13 +61,11 @@
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
 				var light = new THREE.PointLight( 0xffffff );
-				light.position = camera.position;
+				light.position.copy( camera.position );
 				scene.add( light );
 
-
 				//
 
-
 				var closedSpline = new THREE.ClosedSplineCurve3( [
 					new THREE.Vector3( -60, -100,  60 ),
 					new THREE.Vector3( -60,   20,  60 ),

examples/webgl_geometry_extrude_splines.html

@@ -95,7 +95,6 @@
 		dropdown += '</select>';
 
 		var closed2 = true;
-		var debug = true;
 		var parent;
 		var tube, tubeMesh;
 		var animation = false, lookAhead = false;
@@ -108,16 +107,15 @@
 
 			var segments = parseInt(document.getElementById('segments').value);
 			closed2 = document.getElementById('closed').checked;
-			debug = document.getElementById('debug').checked;
 
 			var radiusSegments = parseInt(document.getElementById('radiusSegments').value);
 
-			console.log('adding tube', value, closed2, debug, radiusSegments);
+			console.log('adding tube', value, closed2, radiusSegments);
 			if (tubeMesh) parent.remove(tubeMesh);
 
 			extrudePath = splines[value];
 
-			tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2, debug);
+			tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2);
 
 			addGeometry(tube, 0xff00ff);
 			setScale();
@@ -148,8 +146,6 @@
 					transparent: true
 			})]);
 
-			if ( geometry.debug ) tubeMesh.add( geometry.debug );
-
 			parent.add( tubeMesh );
 
 		}
@@ -192,7 +188,7 @@
 			info.innerHTML += '<br/>Scale: <select id="scale" onchange="setScale()"><option>1</option><option>2</option><option selected>4</option><option>6</option><option>10</option></select>';
 			info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
 			info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>8</option><option>12</option></select>';
-			info.innerHTML += '<br/>Debug normals: <input id="debug" type="checkbox" onchange="addTube()"  /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';
+			info.innerHTML += '<br/>Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';
 
 			info.innerHTML += '<br/><br/><input id="animation" type="button" onclick="animateCamera(true)" value="Camera Spline Animation View: OFF"/><br/> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" /> Camera Helper <input id="cameraHelper" type="checkbox" onchange="animateCamera()" />';
 
@@ -369,8 +365,8 @@
 			// We move on a offset on its binormal
 			pos.add( normal.clone().multiplyScalar( offset ) );
 
-			splineCamera.position = pos;
-			cameraEye.position = pos;
+			splineCamera.position.copy( pos );
+			cameraEye.position.copy( pos );
 
 
 			// Camera Orientation 1 - default look at

examples/webgl_geometry_large_mesh.html

@@ -111,25 +111,19 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x101010 );
-				scene.add( ambient );
-
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				directionalLight.position.set( 1, 1, 2 ).normalize();
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffaa00 );
-				pointLight.position.set( 0, 0, 0 );
+				pointLight = new THREE.PointLight( 0xffffff, 3, 1000 );
 				scene.add( pointLight );
 
 				// light representation
 
-				sphere = new THREE.SphereGeometry( 100, 16, 8, 1 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.scale.set( 0.05, 0.05, 0.05 );
-				lightMesh.position = pointLight.position;
-				scene.add( lightMesh );
+				sphere = new THREE.SphereGeometry( 10, 16, 8, 1 );
 
+				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				scene.add( lightMesh );
 
 				if ( render_gl ) {
 					try {
@@ -164,12 +158,10 @@
 				bwebgl.addEventListener( "click", toggleWebGL, false );
 
 				loader = new THREE.BinaryLoader( true );
-				//loader = new THREE.JSONLoader( true );
 				document.body.appendChild( loader.statusDomElement );
 
 				var start = Date.now();
 
-				//loader.load( 'obj/lucy/Lucy100k_slim.js', callback );
 				loader.load( 'obj/lucy/Lucy100k_bin.js', function ( geometry, materials ) {
 
 					addMesh( geometry, 0.75, 900, 0, 0,  0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
@@ -223,19 +215,20 @@
 
 			}
 
-			var r = 0;
-
 			function render() {
+			
+				var time = Date.now() * 0.001;
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.lookAt( scene.position );
 
-				lightMesh.position.x = 700 * Math.cos( r );
-				lightMesh.position.z = 700 * Math.sin( r );
+				pointLight.position.x = 600 * Math.cos( time );
+				pointLight.position.y = 400 * Math.cos( time * 1.25 );
+				pointLight.position.z = 300 * Math.sin( time );
 
-				r += 0.01;
+				lightMesh.position.copy( pointLight.position );
 
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );

examples/webgl_geometry_minecraft_ao.html

@@ -167,9 +167,11 @@
 
 						var h = getY( x, z );
 
-						dummy.position.x = x * 100 - worldHalfWidth * 100;
-						dummy.position.y = h * 100;
-						dummy.position.z = z * 100 - worldHalfDepth * 100;
+						matrix.makeTranslation(
+							x * 100 - worldHalfWidth * 100,
+							h * 100,
+							z * 100 - worldHalfDepth * 100
+						);
 
 						var px = getY( x + 1, z );
 						var nx = getY( x - 1, z );
@@ -188,93 +190,83 @@
 
 						if ( a + c > b + d ) {
 
-							dummy.geometry = py2Geometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = py2Geometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = b === 0 ? shadow : light;
 							colors[ 1 ] = c === 0 ? shadow : light;
 							colors[ 2 ] = a === 0 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = py2Geometry.faces[ 1 ].vertexColors;
 							colors[ 0 ] = c === 0 ? shadow : light;
 							colors[ 1 ] = d === 0 ? shadow : light;
 							colors[ 2 ] = a === 0 ? shadow : light;
+							
+							geometry.merge( py2Geometry, matrix );
 
 						} else {
 
-							dummy.geometry = pyGeometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = pyGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = a === 0 ? shadow : light;
 							colors[ 1 ] = b === 0 ? shadow : light;
 							colors[ 2 ] = d === 0 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = pyGeometry.faces[ 1 ].vertexColors;
 							colors[ 0 ] = b === 0 ? shadow : light;
 							colors[ 1 ] = c === 0 ? shadow : light;
 							colors[ 2 ] = d === 0 ? shadow : light;
+							
+							geometry.merge( pyGeometry, matrix );
 
 						}
 
-						THREE.GeometryUtils.merge( geometry, dummy );
-
 						if ( ( px != h && px != h + 1 ) || x == 0 ) {
 
-							dummy.geometry = pxGeometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = pxGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = pxpz > px && x > 0 ? shadow : light;
 							colors[ 2 ] = pxnz > px && x > 0 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = pxGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = pxnz > px && x > 0 ? shadow : light;
 
-							THREE.GeometryUtils.merge( geometry, dummy );
+							geometry.merge( pxGeometry, matrix );
 
 						}
 
 						if ( ( nx != h && nx != h + 1 ) || x == worldWidth - 1 ) {
 
-							dummy.geometry = nxGeometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = nxGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = nxnz > nx && x < worldWidth - 1 ? shadow : light;
 							colors[ 2 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = nxGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
-							THREE.GeometryUtils.merge( geometry, dummy );
+							geometry.merge( nxGeometry, matrix );
 
 						}
 
 						if ( ( pz != h && pz != h + 1 ) || z == worldDepth - 1 ) {
 
-							dummy.geometry = pzGeometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = pzGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = nxpz > pz && z < worldDepth - 1 ? shadow : light;
 							colors[ 2 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = pzGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-							THREE.GeometryUtils.merge( geometry, dummy );
+							geometry.merge( pzGeometry, matrix );
 
 						}
 
 						if ( ( nz != h && nz != h + 1 ) || z == 0 ) {
 
-							dummy.geometry = nzGeometry;
-
-							var colors = dummy.geometry.faces[ 0 ].vertexColors;
+							var colors = nzGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = pxnz > nz && z > 0 ? shadow : light;
 							colors[ 2 ] = nxnz > nz && z > 0 ? shadow : light;
 
-							var colors = dummy.geometry.faces[ 1 ].vertexColors;
+							var colors = nzGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = nxnz > nz && z > 0 ? shadow : light;
 
-							THREE.GeometryUtils.merge( geometry, dummy );
+							geometry.merge( nzGeometry, matrix );
 
 						}
 

examples/webgl_geometry_shapes.html

@@ -14,13 +14,10 @@
 		</style>
 	</head>
 	<body>
-		<canvas id="debug" style="position:absolute; left:100px"></canvas>
 
 		<script src="../build/three.min.js"></script>
-
 		<script src="js/libs/stats.min.js"></script>
 
-
 		<script>
 
 			var container, stats;
@@ -111,7 +108,7 @@
 					// vertices from real points
 
 					var pgeo = points.clone();
-					var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleSystemMaterial( { color: color, size: 2, opacity: 0.75 } ) );
+					var particles = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 2, opacity: 0.75 } ) );
 					particles.position.set( x, y, z + 75 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -128,7 +125,7 @@
 					// equidistance sampled points
 
 					var pgeo = spacedPoints.clone();
-					var particles2 = new THREE.ParticleSystem( pgeo, new THREE.ParticleSystemMaterial( { color: color, size: 2, opacity: 0.5 } ) );
+					var particles2 = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 2, opacity: 0.5 } ) );
 					particles2.position.set( x, y, z + 125 );
 					particles2.rotation.set( rx, ry, rz );
 					particles2.scale.set( s, s, s );
@@ -314,12 +311,10 @@
 				splinepts.push( new THREE.Vector2 ( -140, 350 ) );
 				splinepts.push( new THREE.Vector2 ( 0, 0 ) );
 
-				var splineShape = new THREE.Shape(  );
+				var splineShape = new THREE.Shape();
 				splineShape.moveTo( 0, 0 );
 				splineShape.splineThru( splinepts );
 
-				// splineShape.debug( document.getElementById("debug") );
-
 				// TODO 3d path?
 
 				var apath = new THREE.SplineCurve3();

examples/webgl_interactive_cubes_gpu.html

@@ -104,51 +104,43 @@
 
 				}
 
+				var geom = new THREE.BoxGeometry( 1, 1, 1 );
+				var color = new THREE.Color();
+
+				var matrix = new THREE.Matrix4();
+				var quaternion = new THREE.Quaternion();
+
 				for ( var i = 0; i < 5000; i ++ ) {
 
 					var position = new THREE.Vector3();
-
 					position.x = Math.random() * 10000 - 5000;
 					position.y = Math.random() * 6000 - 3000;
 					position.z = Math.random() * 8000 - 4000;
 
 					var rotation = new THREE.Euler();
-
 					rotation.x = Math.random() * 2 * Math.PI;
 					rotation.y = Math.random() * 2 * Math.PI;
 					rotation.z = Math.random() * 2 * Math.PI;
 
 					var scale = new THREE.Vector3();
-
 					scale.x = Math.random() * 200 + 100;
 					scale.y = Math.random() * 200 + 100;
 					scale.z = Math.random() * 200 + 100;
 
-					// give the geom's vertices a random color, to be displayed
-
-					var geom = new THREE.BoxGeometry( 1, 1, 1 );
-					var color = new THREE.Color( Math.random() * 0xffffff );
-					applyVertexColors( geom, color );
+					quaternion.setFromEuler( rotation, false );
+					matrix.compose( position, quaternion, scale );
 
-					var cube = new THREE.Mesh( geom );
-					cube.position.copy( position );
-					cube.rotation.copy( rotation );
-					cube.scale.copy( scale );
+					// give the geom's vertices a random color, to be displayed
 
-					THREE.GeometryUtils.merge( geometry, cube );
+					applyVertexColors( geom, color.setHex( Math.random() * 0xffffff ) );
 
-					//give the pickingGeom's vertices a color corresponding to the "id"
+					geometry.merge( geom, matrix );
 
-					var pickingGeom = new THREE.BoxGeometry( 1, 1, 1 );
-					var pickingColor = new THREE.Color( i );
-					applyVertexColors( pickingGeom, pickingColor );
+					// give the geom's vertices a color corresponding to the "id"
 
-					var pickingCube = new THREE.Mesh( pickingGeom );
-					pickingCube.position.copy( position );
-					pickingCube.rotation.copy( rotation );
-					pickingCube.scale.copy( scale );
+					applyVertexColors( geom, color.setHex( i ) );
 
-					THREE.GeometryUtils.merge( pickingGeometry, pickingCube );
+					pickingGeometry.merge( geom, matrix );
 
 					pickingData[ i ] = {
 
@@ -165,7 +157,10 @@
 
 				pickingScene.add( new THREE.Mesh( pickingGeometry, pickingMaterial ) );
 
-				highlightBox = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshLambertMaterial( { color: 0xffff00 } ) );
+				highlightBox = new THREE.Mesh(
+					new THREE.BoxGeometry( 1, 1, 1 ),
+					new THREE.MeshLambertMaterial( { color: 0xffff00 }
+				) );
 				scene.add( highlightBox );
 
 				projector = new THREE.Projector();
@@ -174,7 +169,6 @@
 				renderer.setClearColor( 0xffffff, 1 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
-
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_interactive_voxelpainter.html

@@ -288,7 +288,7 @@
 					if ( intersector ) {
 
 						setVoxelPosition( intersector );
-						rollOverMesh.position = voxelPosition;
+						rollOverMesh.position.copy( voxelPosition );
 
 					}
 

src/extras/helpers/ArrowHelper.js

@@ -14,11 +14,10 @@
  *  headWidth - Number
  */
 
-THREE.ArrowHelper = ( function (){
+THREE.ArrowHelper = ( function () {
 
 	var lineGeometry = new THREE.Geometry();
-	lineGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
-	lineGeometry.vertices.push( new THREE.Vector3( 0, 1, 0 ) );
+	lineGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ) );
 
 	var coneGeometry = new THREE.CylinderGeometry( 0, 0.5, 1, 5, 1 );
 	coneGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, - 0.5, 0 ) );
@@ -53,7 +52,7 @@ THREE.ArrowHelper = ( function (){
 
 THREE.ArrowHelper.prototype = Object.create( THREE.Object3D.prototype );
 
-THREE.ArrowHelper.prototype.setDirection = function () {
+THREE.ArrowHelper.prototype.setDirection = ( function () {
 
 	var axis = new THREE.Vector3();
 	var radians;
@@ -82,7 +81,7 @@ THREE.ArrowHelper.prototype.setDirection = function () {
 
 	};
 
-}();
+}() );
 
 THREE.ArrowHelper.prototype.setLength = function ( length, headLength, headWidth ) {
 

src/extras/helpers/VertexNormalsHelper.js

@@ -25,8 +25,7 @@ THREE.VertexNormalsHelper = function ( object, size, hex, linewidth ) {
 
 		for ( var j = 0, jl = face.vertexNormals.length; j < jl; j ++ ) {
 
-			geometry.vertices.push( new THREE.Vector3() );
-			geometry.vertices.push( new THREE.Vector3() );
+			geometry.vertices.push( new THREE.Vector3(), new THREE.Vector3() );
 
 		}
 

src/extras/helpers/WireframeHelper.js

@@ -46,9 +46,7 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2 * 3, 3 ) );
-
-		var coords = geometry.attributes.position.array;
+		var coords = new Float32Array( numEdges * 2 * 3 );
 
 		for ( var i = 0, l = numEdges; i < l; i ++ ) {
 
@@ -65,7 +63,9 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-	} else if ( object.geometry instanceof THREE.BufferGeometry && object.geometry.attributes.index !== undefined ) { // indexed BufferGeometry
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( coords, 3 ) );
+
+	} else if ( object.geometry instanceof THREE.BufferGeometry && object.geometry.attributes.index !== undefined ) { // Indexed BufferGeometry
 
 		var vertices = object.geometry.attributes.position.array;
 		var indices = object.geometry.attributes.index.array;
@@ -106,9 +106,7 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2 * 3, 3 ) );
-
-		var coords = geometry.attributes.position.array;
+		var coords = new Float32Array( numEdges * 2 * 3 );
 
 		for ( var i = 0, l = numEdges; i < l; i ++ ) {
 
@@ -124,15 +122,15 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-	} else if ( object.geometry instanceof THREE.BufferGeometry	) { // non-indexed BufferGeometry
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( coords, 3 ) );
+
+	} else if ( object.geometry instanceof THREE.BufferGeometry ) { // non-indexed BufferGeometry
 
 		var vertices = object.geometry.attributes.position.array;
 		var numEdges = vertices.length / 3;
 		var numTris = numEdges / 3;
 
-		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2 * 3, 3 ) );
-
-		var coords = geometry.attributes.position.array;
+		var coords = new Float32Array( numEdges * 2 * 3 );
 
 		for ( var i = 0, l = numTris; i < l; i ++ ) {
 
@@ -154,6 +152,8 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( coords, 3 ) );
+
 	}
 
 	THREE.Line.call( this, geometry, new THREE.LineBasicMaterial( { color: color } ), THREE.LinePieces );