Skip to content

Commit

Permalink
Merge pull request #14639 from Mugen87/dev11
Browse files Browse the repository at this point in the history 
webgl_geometry_colors_lookuptable: Clean up
  • Loading branch information
@Mugen87
Mugen87 authored Aug 4, 2018
2 parents 492d936 + 289f663 commit fb20615
Showing 1 changed file with 62 additions and 73 deletions.
135 changes: 62 additions & 73 deletions examples/webgl_geometry_colors_lookuptable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,17 @@

var camera, scene, renderer, lut, legendLayout;

var position;
var axis;

var mesh;
var mesh, material;

var colorMap;
var numberOfColors;

var loader = new THREE.BufferGeometryLoader();
var center = new THREE.Vector3();
var rotWorldMatrix = new THREE.Matrix4();

init();
animate();

Expand All @@ -72,33 +76,31 @@

// CAMERA
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
camera.name = 'camera';
scene.add( camera );

stats = new Stats();
container.appendChild( stats.dom );

// LIGHT
var ambientLight = new THREE.AmbientLight( 0x444444 );
ambientLight.name = 'ambientLight';
scene.add( ambientLight );

colorMap = 'rainbow';
numberOfColors = 512;

legendLayout = 'vertical';

material = new THREE.MeshLambertMaterial( {
side: THREE.DoubleSide,
color: 0xF5F5F5,
vertexColors: THREE.VertexColors
} );

loadModel( colorMap, numberOfColors, legendLayout );

camera.position.x = 17;
camera.position.y = 9;
camera.position.z = 32;
camera.position.set( 17, 9, 32 );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight.position.x = 17;
directionalLight.position.y = 9;
directionalLight.position.z = 30;
directionalLight.name = 'directionalLight';
directionalLight.position.set( 17, 9, 30 );
scene.add( directionalLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
Expand All @@ -107,23 +109,7 @@
container.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize, false );

window.addEventListener( "keydown", onKeyDown, 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 );
window.addEventListener( 'keydown', onKeyDown, true);

}

Expand All @@ -148,79 +134,69 @@

function render() {

rotateAroundWorldAxis(mesh, position, Math.PI / 180);
if ( axis ) mesh.rotateOnAxis( axis, Math.PI / 180 );

renderer.render( scene, camera );

}

var center = new THREE.Vector3();

function loadModel ( colorMap, numberOfColors, legendLayout ) {

var loader = new THREE.BufferGeometryLoader();

loader.load( "models/json/pressure.json", function( geometry ) {
loader.load( 'models/json/pressure.json', function( geometry ) {

geometry.computeVertexNormals();
geometry.normalizeNormals();

var material = new THREE.MeshLambertMaterial( {

side: THREE.DoubleSide,
color: 0xF5F5F5,
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++ ) {
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 ) {
if ( color === undefined ) {

console.log( "ERROR: " + colorValue );
console.log( 'Unable to determine color for value:', colorValue );

} else {

lutColors[ 3 * i ] = color.r;
lutColors[ 3 * i ] = color.r;
lutColors[ 3 * i + 1 ] = color.g;
lutColors[ 3 * i + 2 ] = color.b;

}

}

geometry.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( lutColors ), 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( lutColors, 3 ) );
geometry.removeAttribute( 'pressure' );

mesh = new THREE.Mesh ( geometry, material );
mesh = new THREE.Mesh( geometry, material );

geometry.computeBoundingBox();
var boundingBox = geometry.boundingBox;
boundingBox.getCenter( center );

if ( position === undefined ) {
if ( axis === undefined ) {

position = new THREE.Vector3(center.x, center.y, center.z);
axis = center.clone();
axis.normalize();

}

scene.add ( mesh );
scene.add( mesh );

if ( legendLayout ) {

var legend;

if ( legendLayout == 'horizontal' ) {
if ( legendLayout === 'horizontal' ) {

legend = lut.setLegendOn( { 'layout':'horizontal', 'position': { 'x': 21, 'y': 6, 'z': 5 } } );

Expand All @@ -236,7 +212,7 @@

scene.add ( labels['title'] );

for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i++ ) {
for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {

scene.add ( labels[ 'ticks' ][ i ] );
scene.add ( labels[ 'lines' ][ i ] );
Expand All @@ -249,80 +225,93 @@

}

function cleanScene () {
function cleanScene() {

var elementsInTheScene = scene.children.length;

for ( var i = elementsInTheScene-1; i > 0; i-- ) {
for ( var i = elementsInTheScene - 1; i > 0; i -- ) {

var child = scene.children[ i ];

if ( ! child.isLight ) {

scene.remove( child );

if ( scene.children [ i ].name != 'camera' &&
scene.children [ i ].name != 'ambientLight' &&
scene.children [ i ].name != 'directionalLight') {
if ( child.isMesh || child.isLine ) {

scene.remove ( scene.children [ i ] );
child.geometry.dispose();
child.material.dispose();
if ( child.material.map ) child.material.map.dispose();


} else if ( child.isSprite ) {

child.material.dispose();
if ( child.material.map ) child.material.map.dispose();

}

}

}

}


function onKeyDown ( e ) {
function onKeyDown( e ) {

var maps = [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ];

var colorNumbers = ['16', '128', '256', '512' ];
var colorNumbers = [ '16', '128', '256', '512' ];

if ( e.keyCode == 65 ) {
if ( e.keyCode === 65 ) {

cleanScene();

var index = maps.indexOf( colorMap ) >= maps.length - 1 ? 0 : maps.indexOf( colorMap ) + 1;

colorMap = maps [ index ];

loadModel ( colorMap, numberOfColors, legendLayout );
loadModel( colorMap, numberOfColors, legendLayout );

} else if ( e.keyCode == 83 ) {
} else if ( e.keyCode === 83 ) {

cleanScene();

var index = colorNumbers.indexOf( numberOfColors ) >= colorNumbers.length - 1 ? 0 : colorNumbers.indexOf( numberOfColors ) + 1;

numberOfColors = colorNumbers [ index ];

loadModel ( colorMap , numberOfColors, legendLayout );
loadModel( colorMap , numberOfColors, legendLayout );

} else if ( e.keyCode == 68 ) {
} else if ( e.keyCode === 68 ) {

if ( ! legendLayout ) {

cleanScene();

legendLayout = 'vertical';

loadModel ( colorMap , numberOfColors, legendLayout );
loadModel( colorMap , numberOfColors, legendLayout );

} else {

cleanScene();

legendLayout = lut.setLegendOff();

loadModel ( colorMap , numberOfColors, legendLayout );
loadModel( colorMap , numberOfColors, legendLayout );

}

} else if ( e.keyCode == 70 ) {
} else if ( e.keyCode === 70 ) {

cleanScene();

if ( ! legendLayout ) return false;

lut.setLegendOff();

if ( legendLayout == 'horizontal') {
if ( legendLayout === 'horizontal') {

legendLayout = 'vertical';

Expand All @@ -332,7 +321,7 @@

}

loadModel ( colorMap , numberOfColors, legendLayout );
loadModel( colorMap , numberOfColors, legendLayout );

}

Expand Down

0 comments on commit fb20615

Please sign in to comment.