瀏覽代碼

added example and documentation

daron1337 11 年之前
父節點
當前提交
25b65d3a97
共有 6 個文件被更改,包括 364 次插入10 次删除
  1. 104 0
      docs/api/math/Lut.html
  2. 1 0
      docs/list.js
  3. 2 1
      examples/index.html
  4. 141 0
      examples/js/math/Lut.js
  5. 86 0
      examples/webgl_geometry_colors_lookuptable.html
  6. 30 9
      src/math/Lut.js

+ 104 - 0
docs/api/math/Lut.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<script src="../../list.js"></script>
+		<script src="../../page.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<div class="desc">
+		Represents a lookup table for colormaps. It is used to determine the color values from a range of data values.
+		</div>
+
+
+		<h2>Example</h2>
+		<code>var lut = new THREE.Lut( "rainbow", 512 );</code>
+		<code>var data = [0, 10.1, 4.2, 3.4, 63, 28];</code>
+		<code>lut.setMax(63);</code>
+		<code>color = lut.getColor(10);</code>
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]( colormap, numberOfColors )</h3>
+                <div>
+                colormap - optional argument that sets a colormap from prefefined colormaps. Available colormaps are : "rainbow", "cooltowarm", "blackbody".
+                numberOfColors - optional argument that sets the number of colors used to represent the data array.
+		</div>
+
+		<h2>Properties</h2>
+
+		<h3>.[page:Float minV]</h3>
+		<div>
+		The minimum value to be represented with the lookup table. Default is 0.
+		</div>
+
+		<h3>.[page:Float maxV]</h3>
+		<div>
+		The maximum value to be represented with the lookup table. Default is 1.
+		</div>
+
+		<h2>Methods</h2>
+
+		<h3>.copy( [page:Lut lut] ) [page:Lut this]</h3>
+		<div>
+		color — Lut to copy.
+		</div>
+		<div>
+		Copies given lut.
+		</div>
+
+
+		<h3>.setminV( [page:Float minV] ) [page:Lut this]</h3>
+		<div>
+		minV — The minimum value to be represented with the lookup table.<br />
+		</div>
+		<div>
+		Sets this Lut with the minimum value to be represented.
+		</div>
+
+		<h3>.setmaxV( [page:Float maxV] ) [page:Lut this]</h3>
+		<div>
+		maxV — The maximum value to be represented with the lookup table.<br />
+		</div>
+		<div>
+		Sets this Lut with the maximum value to be represented.
+		</div>
+
+		<h3>.changeNumberOfColors( [page:Float numberOfColors] ) [page:Lut this]</h3>
+		<div>
+		numberOfColors — The number of colors to be used to represent the data array.<br />
+		</div>
+		<div>
+		Sets this Lut with the number of colors to be used.
+                </div>
+
+		<h3>.changeColorMap( [page:Float colorMap] ) [page:Lut this]</h3>
+		<div>
+		colorMap — The name of the color map to be used to represent the data array.<br />
+		</div>
+		<div>
+		Sets this Lut with the colormap to be used.
+		</div>
+
+		<h3>.addColorMap( colorMapName, arrayOfColors ) [page:Lut this]</h3>
+		<div>
+		Insert a new color map into the set of available color maps.
+		</div>
+
+		<h3>.getColor( value ) [page:Lut this]</h3>
+		<div>
+		value -- the data value to be displayed as a color.
+		</div>
+		<div>
+		Returns a Three.Color.
+		</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

+ 1 - 0
docs/list.js

@@ -76,6 +76,7 @@ var list = {
 			[ "Box2", "api/math/Box2" ],
 			[ "Box3", "api/math/Box3" ],
 			[ "Color", "api/math/Color" ],
+                        [ "LookupTable", "api/math/Lut" ],
 			[ "Euler", "api/math/Euler" ],
 			[ "Frustum", "api/math/Frustum" ],
 			[ "Line3", "api/math/Line3" ],

+ 2 - 1
examples/index.html

@@ -124,7 +124,8 @@
 				"webgl_geometries",
 				"webgl_geometries2",
 				"webgl_geometry_colors",
-				"webgl_geometry_colors_blender",
+                                "webgl_geometry_colors_blender",
+                                "webgl_geometry_colors_lookuptable",
 				"webgl_geometry_convex",
 				"webgl_geometry_cube",
 				"webgl_geometry_dynamic",

+ 141 - 0
examples/js/math/Lut.js

@@ -0,0 +1,141 @@
+/**
+ * @author daron1337 / http://daron1337.github.io/
+ */
+
+THREE.Lut = function ( colormap, numberofcolors ) {
+
+  this.lut = new Array();
+  this.map = THREE.ColorMapKeywords[ colormap ];
+  this.n = numberofcolors;
+  
+  var step = 1. / 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 color = new THREE.Color( 0xffffff ); 
+        var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
+        var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j+1 ][ 1 ] );	
+        			
+        color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
+        
+        this.lut.push(color);
+        
+      }
+      
+    }
+    
+  }
+  
+  return this.set( this );
+  
+};
+
+THREE.Lut.prototype = {
+
+	constructor: THREE.Lut,
+  
+        lut: [], map: [], mapname: 'rainbow' , n: 256, minV: 0, maxV: 1,
+  
+	set: function ( value ) {
+
+		if ( value instanceof THREE.Lut ) {
+
+			this.copy( value );
+
+		} 
+
+		return this;
+
+	},
+
+	setMin: function ( min ) {
+
+		this.minV = min;
+		
+		return this;
+
+	},
+
+	setMax: function ( max ) {
+
+		this.maxV = max;
+		
+		return this;
+
+	},
+	
+	changeNumberOfColors: function ( numberofcolors ) {
+
+		this.n = numberofcolors;
+		
+		return new THREE.Lut( this.mapname, this.n );
+
+	},
+	
+	changeColorMap: function ( colormap ) {
+    
+                this.mapname = colormap;
+		
+		return new THREE.Lut( this.mapname, this.n );
+
+	},
+  
+        copy: function ( lut ) {
+
+		this.lut = lut.lut;
+		this.mapname = lut.mapname;
+		this.map = lut.map;
+		this.n = lut.n;
+                this.minV = lut.minV;
+                this.maxV = lut.maxV;
+
+		return this;
+
+	},
+  
+	getColor: function ( alpha ) {
+                
+                
+                if ( alpha <= this.minV ) {
+                
+                            alpha = this.minV;
+                
+                }
+                
+                else if ( alpha >= this.maxV ) {
+                
+                            alpha = this.maxV;               
+                
+                }
+                
+                
+                alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
+                
+                var colorPosition = Math.round ( alpha * this.n );
+                colorPosition == this.n ? colorPosition -= 1 : colorPosition;
+		
+                return this.lut[ colorPosition ];
+		
+	},
+
+        addColorMap: function ( colormapName, arrayOfColors ) {
+        
+                THREE.ColorMapKeywords[ colormapName ] = arrayOfColors;
+
+        },
+	
+};
+
+THREE.ColorMapKeywords = {
+
+                "rainbow": [ [ 0.0, '0x0000FF' ], [ 0.2, '0x00FFFF' ], [ 0.5, '0x00FF00' ], [ 0.8, '0xFFFF00'],  [1.0, '0xFF0000' ] ],
+                "cooltowarm": [ [ 0.0, '0x3C4EC2' ], [ 0.2, '0x9BBCFF' ], [ 0.5, '0xDCDCDC' ], [ 0.8, '0xF6A385'],  [1.0, '0xB40426' ] ],
+                "blackbody" : [ [ 0.0, '0x000000' ], [ 0.2, '0x780000' ], [ 0.5, '0xE63200' ], [ 0.8, '0xFFFF00'],  [1.0, '0xFFFFFF' ] ]
+
+}

文件差異過大導致無法顯示
+ 86 - 0
examples/webgl_geometry_colors_lookuptable.html


+ 30 - 9
src/math/Lut.js

@@ -56,7 +56,7 @@ THREE.Lut.prototype = {
 
 	setMin: function ( min ) {
 
-		this.minV = min
+		this.minV = min;
 		
 		return this;
 
@@ -64,7 +64,7 @@ THREE.Lut.prototype = {
 
 	setMax: function ( max ) {
 
-		this.maxV = max
+		this.maxV = max;
 		
 		return this;
 
@@ -72,7 +72,7 @@ THREE.Lut.prototype = {
 	
 	changeNumberOfColors: function ( numberofcolors ) {
 
-		this.n = numberofcolors
+		this.n = numberofcolors;
 		
 		return new THREE.Lut( this.mapname, this.n );
 
@@ -92,22 +92,43 @@ THREE.Lut.prototype = {
 		this.mapname = lut.mapname;
 		this.map = lut.map;
 		this.n = lut.n;
+                this.minV = lut.minV;
+                this.maxV = lut.maxV;
 
 		return this;
 
 	},
   
 	getColor: function ( alpha ) {
-    
-                alpha = ( alpha - this.minV ) / ( this.maxV - this.minV ); 
-  
-                var colorPosition = Math.round( alpha * this.n );
-		
+                
+                
+                if ( alpha <= this.minV ) {
+                
+                            alpha = this.minV;
+                
+                }
+                
+                else if ( alpha >= this.maxV ) {
+                
+                            alpha = this.maxV;               
+                
+                }
+                
+                
+                alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
+                
+                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 ) {
+        
+                THREE.ColorMapKeywords[ colormapName ] = arrayOfColors;
+
+        },
 	
 };
 

部分文件因文件數量過多而無法顯示