Simplified example

examples/js/math/Lut.js

@@ -5,35 +5,8 @@
 THREE.Lut = function ( colormap, numberofcolors ) {
 
 	this.lut = [];
-	this.map = THREE.ColorMapKeywords[ colormap ];
-	this.n = numberofcolors || 32;
-	this.mapname = colormap;
-
-	var step = 1.0 / this.n;
-
-	for ( var i = 0; i <= 1; i += step ) {
-
-		for ( var j = 0; j < this.map.length - 1; j ++ ) {
-
-			if ( i >= this.map[ j ][ 0 ] && i < this.map[ j + 1 ][ 0 ] ) {
-
-				var min = this.map[ j ][ 0 ];
-				var max = this.map[ j + 1 ][ 0 ];
-
-				var minColor = new THREE.Color( this.map[ j ][ 1 ] );
-				var maxColor = new THREE.Color( this.map[ j + 1 ][ 1 ] );
-
-				var color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
-
-				this.lut.push( color );
-
-			}
-
-		}
-
-	}
-
-	return this.set( this );
+	this.setColorMap(colormap, numberofcolors);
+	return this;
 
 };
 
@@ -91,20 +64,37 @@ THREE.Lut.prototype = {
 
 	},
 
-	changeNumberOfColors: function ( numberofcolors ) {
-
-		this.n = numberofcolors;
-
-		return new THREE.Lut( this.mapname, this.n );
-
-	},
-
-	changeColorMap: function ( colormap ) {
-
+	setColorMap: function(colormap, numberofcolors){
+		this.map = THREE.ColorMapKeywords[ colormap ] || THREE.ColorMapKeywords.rainbow;
+		this.n = numberofcolors || 32;
 		this.mapname = colormap;
+	
+		var step = 1.0 / this.n;
+	
+		this.lut.length = 0;
+		for ( var i = 0; i <= 1; i += step ) {
+	
+			for ( var j = 0; j < this.map.length - 1; j ++ ) {
+	
+				if ( i >= this.map[ j ][ 0 ] && i < this.map[ j + 1 ][ 0 ] ) {
+	
+					var min = this.map[ j ][ 0 ];
+					var max = this.map[ j + 1 ][ 0 ];
+	
+					var minColor = new THREE.Color( this.map[ j ][ 1 ] );
+					var maxColor = new THREE.Color( this.map[ j + 1 ][ 1 ] );
+	
+					var color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
+	
+					this.lut.push( color );
+	
+				}
+	
+			}
+	
+		}
 
-		return new THREE.Lut( this.mapname, this.n );
-
+		return this;
 	},
 
 	copy: function ( lut ) {
@@ -147,33 +137,25 @@ THREE.Lut.prototype = {
 
 	},
 
-	setLegendOn: function ( parameters ) {
+	createCanvas: function(){
+		var canvas = document.createElement( 'canvas' );
+		canvas.setAttribute( 'width', 1 );
+		canvas.setAttribute( 'height', this.n );
+		canvas.setAttribute( 'id', 'legend' );
+		canvas.setAttribute( 'hidden', true );
 
-		parameters = parameters || defaultLegendParamters;
+		this.updateCanvas(canvas);
 
-		this.legend = {};
-
-		this.legend.layout = parameters.layout || defaultLegendParamters.layout;
-
-		this.legend.position = parameters.position || defaultLegendParamters.position;
-
-		this.legend.dimensions = parameters.dimensions || defaultLegendParamters.dimensions;
-
-		this.legend.canvas = document.createElement( 'canvas' );
-
-		this.legend.canvas.setAttribute( 'id', 'legend' );
-		this.legend.canvas.setAttribute( 'hidden', true );
-
-		document.body.appendChild( this.legend.canvas );
+		return canvas;
+	},
 
-		this.legend.ctx = this.legend.canvas.getContext( '2d' );
+	updateCanvas: function(canvas){
 
-		this.legend.canvas.setAttribute( 'width', 1 );
-		this.legend.canvas.setAttribute( 'height', this.n );
+		canvas = canvas || this.legend.canvas;
 
-		this.legend.texture = new THREE.Texture( this.legend.canvas );
+		var ctx = canvas.getContext('2d', {alpha : false});
 
-		var imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
+		var imageData = ctx.getImageData( 0, 0, 1, this.n );
 
 		var data = imageData.data;
 
@@ -210,7 +192,30 @@ THREE.Lut.prototype = {
 
 		}
 
-		this.legend.ctx.putImageData( imageData, 0, 0 );
+		ctx.putImageData( imageData, 0, 0 );
+
+		return canvas;
+	},
+
+	setLegendOn: function ( parameters ) {
+
+		parameters = parameters || defaultLegendParamters;
+
+		this.legend = {};
+
+		this.legend.layout = parameters.layout || defaultLegendParamters.layout;
+
+		this.legend.position = parameters.position || defaultLegendParamters.position;
+
+		this.legend.dimensions = parameters.dimensions || defaultLegendParamters.dimensions;
+
+		var canvas = this.createCanvas();
+
+		document.body.appendChild( canvas );
+
+		this.legend.canvas = canvas;
+
+		this.legend.texture = new THREE.Texture( canvas );
 		this.legend.texture.needsUpdate = true;
 
 		this.legend.legendGeometry = new THREE.PlaneBufferGeometry( this.legend.dimensions.width, this.legend.dimensions.height );

examples/webgl_geometry_colors_lookuptable.html

@@ -58,7 +58,8 @@
 			var mesh;
 			var scene, uiScene;
 
-			var params, verticalLegend, horizontalLegend;
+			var params, verticalLegendGroup, horizontalLegendGroup;
+			var updateColorEvent;
 
 			init();
 
@@ -71,16 +72,18 @@
 
 				uiScene = new THREE.Scene();
 
+				updateColorEvent = {type : 'updateColor'};
+
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
 				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
 				perpCamera.position.set( 0, 0, 10 );
 
-				verticalLegend = new THREE.Group();
-				horizontalLegend = new THREE.Group();
+				verticalLegendGroup = new THREE.Group();
+				horizontalLegendGroup = new THREE.Group();
 
-				uiScene.add( verticalLegend, horizontalLegend );
+				uiScene.add( verticalLegendGroup, horizontalLegendGroup );
 
 				// sized camera to legend dimenions
 				orthoCamera = new THREE.OrthographicCamera( - 6, 6, 2, - 2, 1, 10 );
@@ -96,6 +99,8 @@
 				} ) );
 				scene.add( mesh );
 
+				lut = new THREE.Lut();
+
 				params	= {
 					colorMap: 'rainbow',
 					legendLayout: 'vertical'
@@ -126,7 +131,6 @@
 
 				gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange( function(){
 					updateColors();
-					updateLegend();
 					render();
 				} );
 
@@ -171,36 +175,48 @@
 					mesh.geometry = geometry;
 					updateColors();
 
-					var legend = lut.setLegendOn();
-					verticalLegend.add(legend);
+					var labelParams = { 'title': 'Pressure', 'um': '[Pa]', 'ticks': 5 };
+
+					// vertical legend
+					var verticalLegend = lut.setLegendOn();
+					verticalLegendGroup.add(verticalLegend);
 
-					var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': '[Pa]', 'ticks': 5 } );
+					var labels = lut.setLegendLabels( labelParams );
 
-					verticalLegend.add( labels[ 'title' ] );
+					verticalLegendGroup.add( labels[ 'title' ] );
 
 					for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
 
-						verticalLegend.add( labels[ 'ticks' ][ i ] );
-						verticalLegend.add( labels[ 'lines' ][ i ] );
+						verticalLegendGroup.add( labels[ 'ticks' ][ i ] );
+						verticalLegendGroup.add( labels[ 'lines' ][ i ] );
 
 					}
 
-					var legend = lut.setLegendOn({layout : 'horizontal'});
-					horizontalLegend.add(legend);
+					// horizontal legend
+					var horizontalLegend = lut.setLegendOn({layout : 'horizontal'});
+					horizontalLegendGroup.add(horizontalLegend);
 
-					var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': '[Pa]', 'ticks': 5 } );
+					var labels = lut.setLegendLabels( labelParams);
 
-					horizontalLegend.add( labels[ 'title' ] );
+					horizontalLegendGroup.add( labels[ 'title' ] );
 
 					for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
 
-						horizontalLegend.add( labels[ 'ticks' ][ i ] );
-						horizontalLegend.add( labels[ 'lines' ][ i ] );
+						horizontalLegendGroup.add( labels[ 'ticks' ][ i ] );
+						horizontalLegendGroup.add( labels[ 'lines' ][ i ] );
 
 					}
 
+					uiScene.addEventListener('updateColor', function(){
+						lut.updateCanvas(horizontalLegend.material.map.image);
+						lut.updateCanvas(verticalLegend.material.map.image);
+
+						horizontalLegend.material.map.needsUpdate = true;
+						verticalLegend.material.map.needsUpdate = true;
+					});
+
 					// vertical layer = 0, horizontal layer = 1
-					horizontalLegend.traverse(function(obj)
+					horizontalLegendGroup.traverse(function(obj)
 					{
 						if(obj.layers)
 						{
@@ -216,7 +232,7 @@
 
 			function updateColors() {
 
-				lut = new THREE.Lut( params.colorMap );
+				lut.setColorMap(params.colorMap);
 
 				lut.setMax( 2000 );
 				lut.setMin( 0 );
@@ -243,6 +259,8 @@
 
 				colors.needsUpdate = true;
 
+				uiScene.dispatchEvent(updateColorEvent);
+
 			}
 
 			function updateLegend() {