Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 4249585d 编写于 作者: M Mr.doob
浏览文件
操作

Merged #4743 by hand.

上级 784f3fbb
展开全部 隐藏空白更改
内联 并排
Showing with 690 addition and 194 deletion
examples/js/math/Lut.js
浏览文件 @ 4249585d
......@@ -4,51 +4,53 @@
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 );
this.lut = new Array();
this.map = THREE.ColorMapKeywords[ colormap ];
this.n = numberofcolors;
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 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,
lut: [], map: [], mapname: 'rainbow' , n: 256, minV: 0, maxV: 1, legend: null,
set: function ( value ) {
if ( value instanceof THREE.Lut ) {
this.copy( value );
}
}
return this;
......@@ -57,7 +59,7 @@ THREE.Lut.prototype = {
setMin: function ( min ) {
this.minV = min;
return this;
},
......@@ -65,77 +67,414 @@ THREE.Lut.prototype = {
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;
this.mapname = colormap;
return new THREE.Lut( this.mapname, this.n );
},
copy: function ( lut ) {
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;
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;
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;
},
setLegendOn: function ( parameters ) {
if ( parameters === undefined ) { parameters = {}; }
this.legend = {};
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.dimensions = parameters.hasOwnProperty( 'dimensions' ) ? parameters[ 'dimensions' ] : { 'width': 0.5, 'height': 3 };
this.legend.canvas = document.createElement( 'canvas' );
this.legend.canvas.setAttribute( 'id', 'legend' );
this.legend.canvas.setAttribute( 'hidden', true );
document.body.appendChild( this.legend.canvas );
this.legend.ctx = this.legend.canvas.getContext( '2d' );
this.legend.canvas.setAttribute( 'width', 1 );
this.legend.canvas.setAttribute( 'height', this.n );
this.legend.texture = new THREE.Texture( this.legend.canvas );
imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
data = imageData.data;
len = data.length;
this.map = THREE.ColorMapKeywords[ this.mapname ];
var k = 0;
var step = 1.0 / this.n;
for ( var i = 1; i >= 0; i-=step ) {
for ( var j = this.map.length - 1; j >= 0; j-- ) {
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 ] );
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;
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.mesh = new THREE.Mesh( this.legend.legendGeometry, this.legend.legendMaterial );
if ( this.legend.layout == 'horizontal') {
this.legend.mesh.rotation.z = - 90 * ( Math.PI / 180 );
this.legend.mesh.position = new THREE.Vector3( this.legend.position.x, this.legend.position.y, this.legend.position.z );
}
else {
this.legend.mesh.position = new THREE.Vector3( this.legend.position.x, this.legend.position.y, this.legend.position.z );
}
return this.legend.mesh;
},
setLegendOff: function () {
this.legend = null;
return this.legend;
},
setLegendLayout: function ( layout ) {
if ( ! this.legend ) { return false; }
if ( this.legend.layout == layout ) { return false; }
if ( layout != 'horizontal' && layout != 'vertical' ) { return false; }
this.layout = layout;
if ( layout == 'horizontal' ) {
this.legend.mesh.rotation.z = 90 * ( Math.PI / 180 );
}
if ( layout == 'vertical' ) {
this.legend.mesh.rotation.z = -90 * ( Math.PI / 180 );
}
return this.legend.mesh;
},
setLegendPosition: function ( position ) {
this.legend.position = new THREE.Vector3( position.x, position.y, position.z );
return this.legend;
},
setLegendLabels: function ( parameters, callback ) {
if ( ! this.legend ) { return false; }
if ( typeof parameters === 'function') { callback = parameters; }
if ( parameters === undefined ) { parameters = {}; }
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.title = parameters.hasOwnProperty( 'title' ) ? parameters[ 'title' ] : '';
this.legend.labels.um = parameters.hasOwnProperty( 'um' ) ? ' [ '+ parameters[ 'um' ] + ' ]': '';
this.legend.labels.ticks = parameters.hasOwnProperty( 'ticks' ) ? parameters[ 'ticks' ] : 0;
this.legend.labels.decimal = parameters.hasOwnProperty( 'decimal' ) ? parameters[ 'decimal' ] : 2;
this.legend.labels.notation = parameters.hasOwnProperty( 'notation' ) ? parameters[ 'notation' ] : 'standard';
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;
var canvasTitle = document.createElement( 'canvas' );
var contextTitle = canvasTitle.getContext( '2d' );
contextTitle.font = 'Normal ' + this.legend.labels.fontsize * 1.2 + 'px ' + this.legend.labels.fontface;
var metrics = contextTitle.measureText( this.legend.labels.title.toString() + this.legend.labels.um.toString() );
var textWidth = metrics.width;
contextTitle.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
contextTitle.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
contextTitle.lineWidth = borderThickness;
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 );
var txtTitle = new THREE.Texture( canvasTitle );
txtTitle.needsUpdate = true;
var spriteMaterialTitle = new THREE.SpriteMaterial( { map: txtTitle, useScreenCoordinates: false } );
var spriteTitle = new THREE.Sprite( spriteMaterialTitle );
spriteTitle.scale.set( 2, 1, 1.0 );
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.labels.ticks > 0 ) {
var ticks = {};
var lines = {};
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 );
}
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 ) ;
}
for ( var i = 0; i < this.legend.labels.ticks; i++ ) {
var value = ( this.maxV - this.minV ) / ( this.legend.labels.ticks - 1 ) * i ;
if ( callback ) {
value = callback ( value );
}
else {
if ( this.legend.labels.notation == 'scientific' ) {
value = value.toExponential( this.legend.labels.decimal );
}
else {
value = value.toFixed( this.legend.labels.decimal );
}
}
var canvasTick = document.createElement( 'canvas' );
var contextTick = canvasTick.getContext( '2d' );
contextTick.font = 'Normal ' + this.legend.labels.fontsize + 'px ' + this.legend.labels.fontface;
var metrics = contextTick.measureText( value.toString() );
var textWidth = metrics.width;
contextTick.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
contextTick.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
contextTick.lineWidth = borderThickness;
contextTick.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
contextTick.fillText( value.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
var txtTick = new THREE.Texture( canvasTick );
txtTick.needsUpdate = true;
var spriteMaterialTick = new THREE.SpriteMaterial( { map: txtTick, useScreenCoordinates: false } );
var spriteTick = new THREE.Sprite( spriteMaterialTick );
spriteTick.scale.set( 2, 1, 1.0 );
if ( this.legend.layout == 'vertical' ) {
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 );
}
if ( this.legend.layout == 'horizontal' ) {
var position = bottomPositionX + ( topPositionX - bottomPositionX ) * ( value / ( this.maxV - this.minV ) );
if ( this.legend.labels.ticks > 5 ) {
if ( i % 2 === 0 ) { var offset = 1.7; }
else { var offset = 2.1; }
}
else { var offset = 1.7; }
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 geometry = new THREE.Geometry();
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 );
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 ) );
}
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 );
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 ) );
}
var line = new THREE.Line( geometry, material );
lines[ i ] = line;
ticks[ i ] = spriteTick;
}
}
return { 'title': spriteTitle, 'ticks': ticks, 'lines': lines };
}
},
};
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' ] ]
"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' ] ],
"grayscale" : [ [ 0.0, '0x000000' ], [ 0.2, '0x404040' ], [ 0.5, '0x7F7F80' ], [ 0.8, '0xBFBFBF'], [1.0, '0xFFFFFF' ] ]
}
};
examples/models/json/pressure.json 0 → 100644
浏览文件 @ 4249585d
此差异已折叠。
examples/webgl_geometry_colors_lookuptable.html
浏览文件 @ 4249585d
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - buffergeometry</title>
<title>three.js webgl - lookup table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #cccccc;
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #050505;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
color: red;
}
</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank">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>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - lookuptable - vertex color values from a range of data values.</div>
<script src="../build/three.min.js"></script>
<script src="js/math/Lut.js"></script>
......@@ -41,14 +47,19 @@
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
if ( ! Detector.webgl ) { Detector.addGetWebGLMessage(); }
var container, stats;
var camera, scene, renderer;
var camera, scene, renderer, lut, legendLayout;
var position;
var mesh;
var colorMap;
var numberOfColors;
init();
animate();
......@@ -61,114 +72,64 @@
// CAMERA
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1800;
scene.add(camera);
camera.name = 'camera';
scene.add( camera );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
scene.add( new THREE.AmbientLight( 0x444444 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );
var color1, color2, color3, face1, face2, face3, numberOfSides, vertexIndex1, vertexIndex2, vertexIndex3;
// faces are indexed using characters
var faceIndices = [ 'a', 'b', 'c', 'd' ];
//this is the array with the values we want to show.
//we need a value for each vertex of the geometry.
datavalues = [1000.3, 883.88, 881.75, 886.47, 858.05, 784.53, 853.9, 869.68, 850.47, 827.71, 865.73, 848.11, 815.16, 798.06, 834.61, 808.2, 1601.8, 1592.6, 1579.8, 1614.6, 1615.5, 1588.2, 1600.3, 1576.5, 1549.6, 1542.5, 1557.7, 776.35, 773.84, 868.51, 884.28, 863.27, 949.64, 957.58, 1453, 1401.9, 1413, 1348.5, 952.91, 891.63, 806.77, 986.47, 1009.5, 919.57, 836.09, 840.81, 829.02, 826.03, 818.11, 1604.5, 1603.6, 1608.2, 1606.4, 1604.1, 1603.1, 1601.3, 1601.9, 971.04, 756.56, 722.62, 717.14, 772.86, 738.95, 789.41, 805.54, 1599.9, 1601.4, 1603, 1599.3, 1602.2, 1598.2, 1602.6, 1601.1, 1600.9, 1602.2, 1603.5, 1603.2, 2435.8, 2468.3, 747.93, 759.85, 751.31, 745.46, 752.63, 747.7, 744.74, 767.07, 767.8, 751.74, 1750, 1782.5, 1661.3, 1869.4, 1606.1, 1765.5, 1923.5, 1726.9, 1829.2, 1573.8, 1513.3, 1493, 2191.5, 2298.7, 2243.7, 2177.9, 797.67, 797.44, 795.38, 798.97, 798.35, 794.95, 795.72, 796.72, 794.75, 794.69, 791.91, 791.99, 785.07, 783.31, 788.63, 791.58, 781.16, 788.66, 783.57, 780.11, 782.96, 787.58, 794.84, 794.17, 799.32, 796.81, 785.1, 782.32, 780.25, 777.37, 1844.3, 1833.5, 1883.2, 1804.5, 1815.7, 1758.6, 1813.5, 969.15, 741.61, 1793.4, 1823.9, 1816.3, 1798.3, 1780.6, 1728.1, 1727.9, 1835.2, 1843.5, 1841.9, 1861.8, 1907.9, 1436.8, 767.76, 802.37, 766.61, 740.87, 748.45, 801.62, 778.44, 798.51, 857.84, 844.66, 731.26, 763, 795.36, 1142.1, 789.08, 767.61, 1290.2, 1249.2, 903.61, 1590.9, 1593.9, 1591.4, 1593.4, 1590.3, 1592.9, 1589.7, 1593.3, 1595.9, 1594.7, 1594.3, 1594.2, 775.05, 779.75, 803.27, 797.14, 804.58, 777.96, 771.5, 915.69, 906.3, 913.67, 908.55, 919.44, 921.61, 909.6, 906.71, 899.47, 896.17, 910.9, 918.07, 1595.7, 1593.7, 1596.2, 1594.3, 1594.5, 1596, 1596, 1596.2, 1596.8, 759.79, 760.36, 761.58, 758.92, 752.49, 744.72, 754.53, 757.04, 757.96, 758.38, 760.98, 887.53, 891.32, 775.84, 788.91, 792.3, 799.14, 788.8, 788.77, 789.04, 1032.8, 970.02, 996.1, 1053, 1060.4, 1600.2, 1602.1, 1182.3, 1060.2, 993.57, 1270.9, 1416.7, 1277.2, 1091, 1150.2, 983.75, 919.33, 890.11, 979.49, 1666.5, 1656.6, 1635.1, 1618.9, 751.13, 736.89, 724.91, 736.25, 753.98, 787.12, 826.23, 769.11, 720.36, 708.37, 707.2, 755.58, 757.13, 759.74, 765.86, 673.91, 703.34, 727.47, 723.94, 665.68, 632.01, 631.38, 648.02, 725.78, 717.65, 671.89, 736.47, 735.67, 1629.4, 1648.7, 1580.7, 1578.3, 1621, 1690.2, 1637.2, 1604.5, 1718.6, 1700.7, 1538.7, 1536.3, 789.51, 793.52, 791.26, 726.07, 729.24, 728.45, 717.49, 716.65, 725.35, 726.02, 721.63, 728.59, 727.13, 730.59, 726.08, 729.23, 726.22, 728.27, 727.19, 730.07, 725.6, 730.12, 722.43, 729.05, 1676.9, 1631.4, 1621, 1663.1, 1725.2, 1747, 1742.4, 1589.8, 1684.8, 1593.4, 1631.2, 1606.3, 1404, 1389.3, 1535.3, 1552.4, 1552.9, 1524.2, 1524.6, 1503.6, 1516.4, 1561.8, 1574.2, 1548.1, 1555.3, 1580.2, 777.92, 783.28, 779.34, 783, 775.03, 783.5, 774.42, 777.44, 787.99, 788.15, 786.18, 789.43, 793.96, 793.77, 1538.4, 1535.2, 1535.3, 1562.5, 1530.4, 1517.1, 1679.1, 1621.2, 1532.2, 1559.1, 1498.5, 1494.8, 1392.2, 774.98, 865.4, 883.99, 871.45, 874.71, 859.11, 848.76, 849.32, 894.86, 902.12, 890.67, 850.73, 1821, 1528.1, 712.65, 734.12, 717.44, 714.99, 754.71, 746.85, 742.24, 760.04, 943.09, 928.17, 968.11, 949.85, 933.75, 967.38, 904.17, 947.28, 877.86, 924.4, 969.79, 977.7, 1579.9, 1546, 1541.8, 1483.4, 1511, 1503.3, 1455.2, 1439.1, 1471.1, 1498, 1520.8, 1555.1, 1566.2, 1461.8, 1517.4, 1491.2, 724.78, 750.21, 887.33, 881.62, 879.61, 1580.2, 1556.6, 800.13, 857.61, 1194.1, 1264, 1212.2, 1156.9, 1135.3, 1154.3, 1264.9, 1213.8, 1326.4, 1270.6, 1331.8, 1168.2, 1221.2, 781.63, 779.62, 777.96, 782.51, 785.51, 778.55, 782.5, 780.61, 777.64, 782.26, 775.19, 775.29, 958.64, 982.11, 941.42, 933.08, 971.55, 920.31, 992.01, 1014.4, 1003.5, 962.22, 904.26, 925.61, 1771.5, 1810.8, 1760.3, 1754.5, 1727.8, 1798.2, 1770.5, 1775.9, 1256.6, 1247.9, 709.99, 712.71, 750.55, 750.85, 739.65, 745.81, 753.71, 778.5, 1051.3, 1042.3, 1005.7, 1026.3, 1069.6, 1061.6, 993.02, 1028.4, 1066.2, 975.66, 980.64, 1594.2, 1589.5, 1519.1, 1649, 1631.2, 1638.1, 1611.9, 1641.8, 813.64, 795.91, 822.98, 680.73, 715.97, 770.63, 767.96, 1339.2, 1384.2, 1851.5, 1792.7, 1820.2, 1888.3, 1880.6, 1856, 1836.5, 1783.8, 1798.5, 1744.7, 1760.2, 1795.3, 1816.7, 1568.2, 1554.1, 1598.9, 1599.1, 1600, 1598.2, 1599.1, 1598.5, 1599.3, 1599.2, 1600.2, 1599.2, 1600, 1599.2, 1600.1, 1599.3, 1599.9, 1599.3, 1600, 943.59, 939.74, 934.1, 939.77, 953.25, 925.97, 928.25, 931.37, 927.31, 935.22, 927.74, 1597.9, 1599, 1595.4, 1599.1, 1599, 1600.9, 1597.3, 1593, 1605.1, 1596.9, 1596.3, 1592.1, 1595.6, 1515.2, 967.54, 986.66, 916.39, 664.06, 625.87, 1689.7, 1657.1, 1660, 1661.2, 1695.5, 1740.9, 1733, 1625, 1638, 1634.9, 1649.4, 1664.5, 832.04, 791.09, 1635.6, 1638.9, 1668.5, 1623.1, 1590.4, 1688.6, 1948.2, 1963.9, 1926.8, 1933.1, 1967.5, 1896.6, 1937.3, 1975.4, 1981.3, 1904.6, 1622.9, 1539.7, 1582.2, 1635.4, 1723.4, 1662.7, 1605, 1487.4, 1548.3, 1556.9, 1571.5, 1692.3, 1696, 1640.9, 1726.1, 1656.8, 1750.4, 1712.4, 1759.5, 1672.3, 1779.7, 1592.1, 1593.1, 694.27, 630.47, 684.02, 647.15, 717.59, 719.33, 706.71, 651.92, 622.49, 630.7, 688.91, 727.4, 1271.3, 1280.2, 1281.5, 1249.6, 1272.4, 1233, 1268.1, 1281.3, 1279.5, 881.76, 892, 854.68, 868.11, 839.9, 1076.7, 1092.7, 1073.7, 1063.8, 1091.3, 1039.9, 1029.6, 1144.1, 1158.1, 1103.7, 1073.4, 1050.5, 961.87, 943.2, 949.77, 979.04, 974.51, 955.69, 967.58, 931.91, 935.55, 938.93, 937.94, 952.66, 1590.8, 1598.6, 705.09, 587.72, 607.38, 790.02, 655.38, 751.29, 818.02, 592.3, 570.46, 596.94, 655.34, 616.74, 767.77, 803.3, 805.18, 803.64, 802.83, 800.86, 805.84, 805.24, 804.91, 1671.4, 1667.9, 1667.9, 1670.9, 1669.9, 1675, 1671.4, 1670.2, 1676.3, 1669.6, 1654.1, 1667.7, 1658.9, 1657.6, 842.97, 847.76, 824.96, 873.59, 864.48, 829.7, 811.24, 877.16, 841.26, 808.26, 794.28, 1564.2, 1575.3, 775.8, 771.99, 773.09, 781.49, 777.05, 779.3, 773.42, 775.06, 766.85, 773.09, 1819.7, 1131.4, 1114.1, 1165.7, 1153, 1250, 1438, 1515.4, 924.57, 944.05, 869.31, 949.43, 965.04, 896.82, 865.51, 979.14, 952.98, 890.35, 825.15, 820.29, 806.88, 921.21, 954.58, 978.05, 986.54, 1596.9, 1554.5, 810.33, 837.33, 976.29, 969.93, 983.16, 988.49, 965.59, 980.14, 964.31, 982.59, 978.81, 967, 996.23, 986.4, 795.94, 784.24, 773.68, 765.28, 777.12, 1052.2, 1658.7, 1659.3, 1649.5, 1643.4, 1656.6, 1634.7, 1628.8, 1622.3, 1692.1, 1655.6, 759.19, 763.34, 754.9, 745.32, 771.36, 755.15, 767.1, 756.52, 766.63, 772.11, 852.18, 2244.5, 2084.9, 1955.2, 2097.7, 2359.9, 2412.5, 2258.7, 2011.7, 1881.5, 1811.3, 1699.4, 1698.5, 748.49, 776.15, 907.9, 903.22, 755.05, 766.92, 778.27, 784.07, 771.01, 723.62, 1858.9, 1859.4, 1867.3, 1887.5, 1875.2, 1874.6, 1870.1, 1885.7, 1847.8, 1859, 1894.8, 1910.7, 890.02, 1730, 1872.1, 1775.4, 2001.8, 1563.8, 1538.6, 1529.2, 1581.5, 1555.9, 1586.2, 1505.9, 1500.3, 1512.5, 1491.2, 1765.2, 2160.4, 2016.6, 1850.7, 1637.2, 937.62, 999.11, 961.58, 997.75, 898.53, 911.58, 1052.9, 1128.7, 1159.7, 1146.2, 990.61, 1097.7, 1207.2, 1207.8, 807.14, 808.43, 805.17, 826.59, 814.93, 815.24, 831.05, 840.16, 811.5, 1893, 1879, 1596.8, 1594.7, 1593.8, 1595.4, 906.04, 861.63, 899.63, 931.72, 762.67, 887.33, 887.64, 963.98, 912.27, 1641.5, 1661.8, 1602.4, 965.67, 968.77, 1597.3, 1606.5, 1636.5, 1040, 1074, 1595.1, 1106.6, 1127.2, 1089.6, 1148.2, 1078.3, 1128.5, 1096.4, 1110, 1175, 1091, 1061.1, 1067.6, 1125.4, 1122, 1123.5, 1181.5, 1077.8, 1083.6, 1107.6, 1087.3, 825.11, 860.84, 878.2, 863.58, 825, 1683.5, 1658.7, 1847.2, 1789.2, 1766.6, 873.49, 882.06, 884.79, 825.07, 847.42, 861.03, 893.98, 898.36, 822.87, 854.46, 879.76, 901.99, 896.82, 659.44, 855.34, 855.48];
var geometry_rainbow = new THREE.IcosahedronGeometry( 100, 2 );
var geometry_cooltowarm = new THREE.IcosahedronGeometry( 100, 2 );
var geometry_blackbody = new THREE.IcosahedronGeometry( 100, 2 );
var lut_rainbow = new THREE.Lut('rainbow',512);
var lut_cooltowarm = new THREE.Lut('cooltowarm',128);
var lut_blackbody = new THREE.Lut('blackbody',32);
var max = Math.max.apply( Math, datavalues );
var min = Math.min.apply( Math, datavalues );
lut_rainbow.setMax(max);
lut_rainbow.setMin(min);
lut_cooltowarm.setMax(max);
lut_cooltowarm.setMin(min);
lut_blackbody.setMax(max);
lut_blackbody.setMin(min);
//lut_rainbow
for ( var i = 0; i < geometry_rainbow.faces.length; i++ )
{
face1 = geometry_rainbow.faces[ i ];
numberOfSides = ( face1 instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < numberOfSides; j++ )
{
vertexIndex1 = face1[ faceIndices[ j ] ];
color1 = new THREE.Color( 0xfdffff );
color1 = lut_rainbow.getColor(datavalues[3 * i + j]);
face1.vertexColors[ j ] = color1;
}
}
//lut_cooltowarm
for ( var i = 0; i < geometry_cooltowarm.faces.length; i++ )
{
face2 = geometry_cooltowarm.faces[ i ];
numberOfSides = ( face2 instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < numberOfSides; j++ )
{
vertexIndex2 = face2[ faceIndices[ j ] ];
color2 = new THREE.Color( 0xfdffff );
color2 = lut_cooltowarm.getColor(datavalues[3 * i + j]);
face2.vertexColors[ j ] = color2;
}
}
//lut_blackbody
for ( var i = 0; i < geometry_blackbody.faces.length; i++ )
{
face3 = geometry_blackbody.faces[ i ];
numberOfSides = ( face3 instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < numberOfSides; j++ )
{
vertexIndex3 = face3[ faceIndices[ j ] ];
color3 = new THREE.Color( 0xfdffff );
color3 = lut_blackbody.getColor(datavalues[3 * i + j]);
face3.vertexColors[ j ] = color3;
}
}
solid1 = new THREE.Mesh( geometry_rainbow, material );
solid1.position.set(-250, 0, 0);
scene.add(solid1);
solid2 = new THREE.Mesh( geometry_cooltowarm, material );
solid2.position.set(0, 0, 0);
scene.add(solid2);
solid3 = new THREE.Mesh( geometry_blackbody, material );
solid3.position.set(250, 0, 0);
scene.add(solid3);
var ambientLight = new THREE.AmbientLight( 0x444444 );
ambientLight.name = 'ambientLight';
scene.add( ambientLight );
colorMap = 'rainbow';
numberOfColors = 512;
legendLayout = 'vertical';
loadModel( colorMap, numberOfColors, legendLayout );
camera.position.x = 17;
camera.position.y = 9;
camera.position.z = 32;
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight.position.x = 17;
directionalLight.position.y = 9;
directionalLight.position.z = 30;
directionalLight.name = 'directionalLight';
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
window.addEventListener( "keypress", onKeyPress, true);
}
var rotWorldMatrix;
function rotateAroundWorldAxis( object, axis, radians ) {
if ( ! axis ) return;
rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationAxis( axis.normalize(), radians );
rotWorldMatrix.multiply( object.matrix );
object.matrix = rotWorldMatrix;
object.rotation.setFromRotationMatrix( object.matrix );
}
function onWindowResize() {
......@@ -176,10 +137,10 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function animate() {
requestAnimationFrame( animate );
......@@ -191,20 +152,198 @@
function render() {
var time = Date.now() * 0.001;
solid1.rotation.x = time * 0.25;
solid1.rotation.y = time * 0.5;
solid2.rotation.x = time * 0.25;
solid2.rotation.y = time * 0.5;
solid3.rotation.x = time * 0.25;
solid3.rotation.y = time * 0.5;
rotateAroundWorldAxis(mesh, position, Math.PI / 180);
renderer.render( scene, camera );
}
function loadModel ( colorMap, numberOfColors, legendLayout ) {
var loader = new THREE.BufferGeometryLoader();
loader.load( "models/json/pressure.json", function( geometry ) {
geometry.computeVertexNormals();
geometry.normalizeNormals();
var material = new THREE.MeshLambertMaterial( {
side: THREE.DoubleSide,
specular: 0xF5F5F5,
color: 0xF5F5F5,
ambient : 0xFFFFFF,
shininess: 5,
vertexColors: THREE.VertexColors
} );
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 ];
color = lut.getColor( colorValue );
if ( color == undefined ) {
console.log( "ERROR: " + colorValue );
} else {
lutColors[ 3 * i ] = color.r;
lutColors[ 3 * i + 1 ] = color.g;
lutColors[ 3 * i + 2 ] = color.b;
}
}
geometry.addAttribute( 'color', new THREE.Float32Attribute( new Float32Array( lutColors ), 3) );
mesh = new THREE.Mesh ( geometry, material );
geometry.computeBoundingBox();
var boundingBox = geometry.boundingBox;
var center = boundingBox.center();
if ( position === undefined ) {
position = new THREE.Vector3(center.x, center.y, center.z);
}
scene.add ( mesh );
if ( legendLayout ) {
if ( legendLayout == 'horizontal' ) {
legend = lut.setLegendOn( { 'layout':'horizontal', 'position': { 'x': 21, 'y': 6, 'z': 5 } } );
}
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 ] );
}
}
} );
}
function cleanScene () {
var elementsInTheScene = scene.children.length;
for ( var i = elementsInTheScene-1; i > 0; i-- ) {
if ( scene.children [ i ].name != 'camera' &&
scene.children [ i ].name != 'ambientLight' &&
scene.children [ i ].name != 'directionalLight') {
scene.remove ( scene.children [ i ] );
}
}
}
function onKeyPress ( e ) {
var maps = [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ];
var colorNumbers = ['16', '128', '256', '512' ];
if ( e.keyCode == 97 ) {
cleanScene();
var index = maps.indexOf( colorMap ) >= maps.length - 1 ? 0 : maps.indexOf( colorMap ) + 1;
colorMap = maps [ index ];
loadModel ( colorMap, numberOfColors, legendLayout );
} else if ( e.keyCode == 115 ) {
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 == 100 ) {
if ( ! legendLayout ) {
cleanScene();
legendLayout = 'vertical';
loadModel ( colorMap , numberOfColors, legendLayout );
} else {
cleanScene();
legendLayout = lut.setLegendOff();
loadModel ( colorMap , numberOfColors, legendLayout );
}
} else if ( e.keyCode == 102 ) {
cleanScene();
if ( ! legendLayout ) return false;
lut.setLegendOff();
if ( legendLayout == 'horizontal') {
legendLayout = 'vertical';
} else {
legendLayout = 'horizontal';
}
loadModel ( colorMap , numberOfColors, legendLayout );
}
}
</script>
</body>
</html>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或