Refactored example code

examples/js/math/Lut.js

@@ -37,6 +37,26 @@ THREE.Lut = function ( colormap, numberofcolors ) {
 
 };
 
+var defaultLegendParamters = {
+	layout : 'vertical',
+	position : new THREE.Vector3(),
+	dimensions : {width : 0.5, height: 3}
+};
+
+var defaultLabelParameters = {
+	fontsize : 24,
+	fontface : 'Arial',
+	title : '',
+	um : '',
+	ticks : 0,
+	decimal : 2,
+	notation : 'standard'
+};
+
+var defaultBackgroundColor = { r: 255, g: 100, b: 100, a: 0.8 };
+		var defaultBorderColor = { r: 255, g: 0, b: 0, a: 1.0 };
+		var defaultBorderThickness = 4;
+
 THREE.Lut.prototype = {
 
 	constructor: THREE.Lut,
@@ -129,19 +149,15 @@ THREE.Lut.prototype = {
 
 	setLegendOn: function ( parameters ) {
 
-		if ( parameters === undefined ) {
-
-			parameters = {};
-
-		}
+		parameters = parameters || defaultLegendParamters;
 
 		this.legend = {};
 
-		this.legend.layout = parameters.hasOwnProperty( 'layout' ) ? parameters[ 'layout' ] : 'vertical';
+		this.legend.layout = parameters.layout || defaultLegendParamters.layout;
 
-		this.legend.position = parameters.hasOwnProperty( 'position' ) ? parameters[ 'position' ] : { 'x': 4, 'y': 0, 'z': 0 };
+		this.legend.position = parameters.position || defaultLegendParamters.position;
 
-		this.legend.dimensions = parameters.hasOwnProperty( 'dimensions' ) ? parameters[ 'dimensions' ] : { 'width': 0.5, 'height': 3 };
+		this.legend.dimensions = parameters.dimensions || defaultLegendParamters.dimensions;
 
 		this.legend.canvas = document.createElement( 'canvas' );
 
@@ -262,7 +278,11 @@ THREE.Lut.prototype = {
 
 	setLegendPosition: function ( position ) {
 
-		this.legend.position = new THREE.Vector3( position.x, position.y, position.z );
+		if(position.isVector3){
+			this.legend.position.copy(position);
+		}
+		else{
+		this.legend.position.set( position.x, position.y, position.z );}
 
 		return this.legend;
 
@@ -279,49 +299,41 @@ THREE.Lut.prototype = {
 		if ( typeof parameters === 'function' ) {
 
 			callback = parameters;
+			parameters = undefined;
 
 		}
 
-		if ( parameters === undefined ) {
-
-			parameters = {};
-
-		}
-
+		parameters = parameters || defaultLabelParameters;
 		this.legend.labels = {};
 
-		this.legend.labels.fontsize = parameters.hasOwnProperty( 'fontsize' ) ? parameters[ 'fontsize' ] : 24;
-
-		this.legend.labels.fontface = parameters.hasOwnProperty( 'fontface' ) ? parameters[ 'fontface' ] : 'Arial';
+		this.legend.labels.fontsize = parameters.fontsize || defaultLabelParameters.fontsize;
 
-		this.legend.labels.title = parameters.hasOwnProperty( 'title' ) ? parameters[ 'title' ] : '';
+		this.legend.labels.fontface = parameters.fontface || defaultLabelParameters.fontface;
 
-		this.legend.labels.um = parameters.hasOwnProperty( 'um' ) ? ' [ ' + parameters[ 'um' ] + ' ]' : '';
+		this.legend.labels.title = parameters.title || defaultLabelParameters.title;
 
-		this.legend.labels.ticks = parameters.hasOwnProperty( 'ticks' ) ? parameters[ 'ticks' ] : 0;
+		this.legend.labels.um = parameters.um || defaultLabelParameters.um;
 
-		this.legend.labels.decimal = parameters.hasOwnProperty( 'decimal' ) ? parameters[ 'decimal' ] : 2;
+		this.legend.labels.ticks = parameters.ticks || defaultLabelParameters.ticks;
 
-		this.legend.labels.notation = parameters.hasOwnProperty( 'notation' ) ? parameters[ 'notation' ] : 'standard';
+		this.legend.labels.decimal = parameters.decimal || defaultLabelParameters.decimal;
 
-		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.notation || defaultLabelParameters.notation;
 
 		var canvasTitle = document.createElement( 'canvas' );
 		var contextTitle = canvasTitle.getContext( '2d' );
 
 		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 + ')';
+		contextTitle.fillStyle = 'rgba(' + defaultBackgroundColor.r + ',' + defaultBackgroundColor.g + ',' + defaultBackgroundColor.b + ',' + defaultBackgroundColor.a + ')';
 
-		contextTitle.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
+		contextTitle.strokeStyle = 'rgba(' + defaultBorderColor.r + ',' + defaultBorderColor.g + ',' + defaultBorderColor.b + ',' + defaultBorderColor.a + ')';
 
-		contextTitle.lineWidth = borderThickness;
+		contextTitle.lineWidth = defaultBorderThickness;
 
 		contextTitle.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
 
-		contextTitle.fillText( this.legend.labels.title.toString() + this.legend.labels.um.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
+		contextTitle.fillText( this.legend.labels.title.toString() + this.legend.labels.um.toString(), defaultBorderThickness, this.legend.labels.fontsize + defaultBorderThickness );
 
 		var txtTitle = new THREE.CanvasTexture( canvasTitle );
 		txtTitle.minFilter = THREE.LinearFilter;
@@ -390,15 +402,15 @@ THREE.Lut.prototype = {
 
 				contextTick.font = 'Normal ' + this.legend.labels.fontsize + 'px ' + this.legend.labels.fontface;
 
-				contextTick.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
+				contextTick.fillStyle = 'rgba(' + defaultBackgroundColor.r + ',' + defaultBackgroundColor.g + ',' + defaultBackgroundColor.b + ',' + defaultBackgroundColor.a + ')';
 
-				contextTick.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
+				contextTick.strokeStyle = 'rgba(' + defaultBorderColor.r + ',' + defaultBorderColor.g + ',' + defaultBorderColor.b + ',' + defaultBorderColor.a + ')';
 
-				contextTick.lineWidth = borderThickness;
+				contextTick.lineWidth = defaultBorderThickness;
 
 				contextTick.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
 
-				contextTick.fillText( value.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
+				contextTick.fillText( value.toString(), defaultBorderThickness, this.legend.labels.fontsize + defaultBorderThickness );
 
 				var txtTick = new THREE.CanvasTexture( canvasTick );
 				txtTick.minFilter = THREE.LinearFilter;

examples/webgl_geometry_colors_lookuptable.html

@@ -34,7 +34,6 @@
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lookuptable - vertex color values from a range of data values.<br />
-		press A: change color map, press S: change numberOfColors, press D: toggle Legend on/off, press F: change Legend layout<br />
 		</div>
 
 		<div id="container"></div>
@@ -42,7 +41,8 @@
 		<script src="../build/three.js"></script>
 		<script src="js/math/Lut.js"></script>
 		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
 
@@ -52,267 +52,204 @@
 
 			}
 
-			var container, stats;
+			var container;
 
-			var camera, scene, renderer, lut, legendLayout;
+			var perpCamera, orthoCamera, renderer, lut;
 
-			var mesh, material;
+			var mesh;
+			var scene, uiScene;
 
-			var colorMap;
-			var numberOfColors;
-
-			var loader = new THREE.BufferGeometryLoader();
+			var params;
 
 			init();
-			animate();
 
 			function init() {
 
 				container = document.getElementById( 'container' );
 
-				// SCENE
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				// CAMERA
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100 );
-				camera.position.set( 0, 0, 10 );
+				uiScene = new THREE.Scene();
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
-				// LIGHT
-				var ambientLight = new THREE.AmbientLight( 0x444444 );
-				scene.add( ambientLight );
+				perpCamera = new THREE.PerspectiveCamera(60, width / height, 1, 100);
+				perpCamera.position.set(0, 0, 10);
 
-				colorMap = 'rainbow';
-				numberOfColors = 512;
+				// sized camera to legend dimenions
+				orthoCamera = new THREE.OrthographicCamera( -6, 6, 2, -2, 1, 10 );
+				orthoCamera.position.set(3, 0, 10);
 
-				legendLayout = 'vertical';
+				var ambientLight = new THREE.AmbientLight( 0x444444 );
+				scene.add( ambientLight );
 
-				material = new THREE.MeshLambertMaterial( {
+				mesh = new THREE.Mesh(undefined, new THREE.MeshLambertMaterial( {
 					side: THREE.DoubleSide,
 					color: 0xF5F5F5,
 					vertexColors: THREE.VertexColors
-				} );
+				} ));
+				scene.add(mesh);
 
-				loadModel( colorMap, numberOfColors, legendLayout );
+			params	= {
+				numberOfColors : 16,
+				colorMap : 'rainbow',
+				legendLayout : 'vertical'
+			}
+				loadModel( );
 
 				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
 				directionalLight.position.set( 17, 9, 30 );
 				scene.add( directionalLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
-				window.addEventListener( 'keydown', onKeyDown, true );
-
-			}
-
-			function onWindowResize() {
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+				var controls = new THREE.OrbitControls( perpCamera, renderer.domElement );
+				controls.addEventListener('change', render);
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				render();
+				var gui = new dat.GUI();
 
+				gui.add( params, 'legendLayout', ['vertical', 'horizontal'] ).onChange(updateLegend);
+				gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange(updateColors);
+				gui.add( params, 'numberOfColors', 2, 64 ).step(1).onChange(updateColors);
 			}
 
-			function animate() {
+			function onWindowResize() {
+
+				var width = window.innerWidth; 
+				var height = window.innerHeight;
 
-				requestAnimationFrame( animate );
+				perpCamera.aspect = width / height;
+				perpCamera.updateProjectionMatrix();
 
+				renderer.setSize(width, height );
 				render();
-				stats.update();
 
 			}
 
 			function render() {
 
-				if ( mesh !== undefined ) mesh.rotation.y += 0.01;
-
-				renderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( scene, perpCamera );
+				renderer.render( uiScene, orthoCamera );
 
 			}
 
-			function loadModel( colorMap, numberOfColors, legendLayout ) {
+			function loadModel( ) {
 
+				var loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
 
-					var lutColors = [];
-
-					lut = new THREE.Lut( colorMap, numberOfColors );
-
-					lut.setMax( 2000 );
-					lut.setMin( 0 );
-
-					for ( var i = 0; i < geometry.attributes.pressure.array.length; i ++ ) {
-
-						var colorValue = geometry.attributes.pressure.array[ i ];
-
-						var color = lut.getColor( colorValue );
-
-						if ( color === undefined ) {
-
-							console.log( 'Unable to determine color for value:', colorValue );
-
-						} else {
-
-							lutColors[ 3 * i ] = color.r;
-							lutColors[ 3 * i + 1 ] = color.g;
-							lutColors[ 3 * i + 2 ] = color.b;
-
-						}
-
-					}
-
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( lutColors, 3 ) );
-					geometry.removeAttribute( 'pressure' );
-
-					mesh = new THREE.Mesh( geometry, material );
-
-					scene.add( mesh );
-
-					if ( legendLayout ) {
-
-						var legend;
-
-						if ( legendLayout === 'horizontal' ) {
-
-							legend = lut.setLegendOn( { 'layout': 'horizontal', 'position': { 'x': 4, 'y': 0, 'z': 0 } } );
-
-						} else {
-
-							legend = lut.setLegendOn();
-
-						}
-
-						scene.add( legend );
-
-						var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': 'Pa', 'ticks': 5 } );
-
-						scene.add( labels[ 'title' ] );
-
-						for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
-
-							scene.add( labels[ 'ticks' ][ i ] );
-							scene.add( labels[ 'lines' ][ i ] );
-
-						}
-
-					}
-
+					mesh.geometry = geometry;
+					updateColors();
 				} );
 
 			}
 
-			function cleanScene() {
+			function updateColors()
+			{
+				var lutColors = [];
 
-				var elementsInTheScene = scene.children.length;
+				lut = new THREE.Lut( params.colorMap, params.numberOfColors );
 
-				for ( var i = elementsInTheScene - 1; i > 0; i -- ) {
+				lut.setMax( 2000 );
+				lut.setMin( 0 );
 
-					var child = scene.children[ i ];
+				var geometry = mesh.geometry;
 
-					if ( ! child.isLight ) {
+				for ( var i = 0; i < geometry.attributes.pressure.array.length; i ++ ) {
 
-						scene.remove( child );
+					var colorValue = geometry.attributes.pressure.array[ i ];
 
-						if ( child.isMesh || child.isLine ) {
+					var color = lut.getColor( colorValue );
 
-							child.geometry.dispose();
-							child.material.dispose();
-							if ( child.material.map ) child.material.map.dispose();
+					if ( color === undefined ) {
 
+						console.log( 'Unable to determine color for value:', colorValue );
 
-						} else if ( child.isSprite ) {
+					} else {
 
-							child.material.dispose();
-							if ( child.material.map ) child.material.map.dispose();
-
-						}
+						lutColors[ 3 * i ] = color.r;
+						lutColors[ 3 * i + 1 ] = color.g;
+						lutColors[ 3 * i + 2 ] = color.b;
 
 					}
 
 				}
 
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( lutColors, 3 ) );
+				updateLegend();
 			}
 
-			function onKeyDown( e ) {
-
-				var maps = [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ];
-
-				var colorNumbers = [ '16', '128', '256', '512' ];
-
-				if ( e.keyCode === 65 ) {
-
-					cleanScene();
-
-					var index = maps.indexOf( colorMap ) >= maps.length - 1 ? 0 : maps.indexOf( colorMap ) + 1;
+			function updateLegend()
+			{
+				if ( params.legendLayout ) {
 
-					colorMap = maps[ index ];
+					uiScene.traverse(dispose);
+					uiScene.children.length = 0;
 
-					loadModel( colorMap, numberOfColors, legendLayout );
+					var legend;
 
-				} else if ( e.keyCode === 83 ) {
+					if ( params.legendLayout === 'horizontal' ) {
 
-					cleanScene();
-
-					var index = colorNumbers.indexOf( numberOfColors ) >= colorNumbers.length - 1 ? 0 : colorNumbers.indexOf( numberOfColors ) + 1;
-
-					numberOfColors = colorNumbers[ index ];
-
-					loadModel( colorMap, numberOfColors, legendLayout );
-
-				} else if ( e.keyCode === 68 ) {
-
-					if ( ! legendLayout ) {
-
-						cleanScene();
-
-						legendLayout = 'vertical';
-
-						loadModel( colorMap, numberOfColors, legendLayout );
+						legend = lut.setLegendOn( { 'layout': 'horizontal' });
 
 					} else {
 
-						cleanScene();
-
-						legendLayout = lut.setLegendOff();
-
-						loadModel( colorMap, numberOfColors, legendLayout );
+						legend = lut.setLegendOn();
 
 					}
 
-				} else if ( e.keyCode === 70 ) {
+					uiScene.add( legend );
 
-					cleanScene();
+					var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': '[Pa]', 'ticks': 5 } );
 
-					if ( ! legendLayout ) return false;
+					uiScene.add( labels[ 'title' ] );
 
-					lut.setLegendOff();
+					for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
 
-					if ( legendLayout === 'horizontal' ) {
-
-						legendLayout = 'vertical';
-
-					} else {
-
-						legendLayout = 'horizontal';
+						uiScene.add( labels[ 'ticks' ][ i ] );
+						uiScene.add( labels[ 'lines' ][ i ] );
 
 					}
 
-					loadModel( colorMap, numberOfColors, legendLayout );
+					var box = new THREE.Box3();
+					uiScene.traverse(function(obj)
+					{
+						if(obj.geometry){
+							obj.geometry.computeBoundingBox();
+							box.union(obj.geometry.boundingBox);
+						}
+					});
+					console.log(box);
 
+					render();
 				}
+				
+			}
 
+			function dispose(obj)
+			{
+				if(obj.geometry){
+					obj.geometry.dispose();
+				}
+				if(obj.material){
+					obj.material.dispose();
+					if(obj.material.map)
+					{
+						obj.material.map.dispose();
+					}
+				}
 			}
 
 		</script>