fixed style

examples/webgl_materials_texture3d_volume1.html → examples/webgl_materials_texture3d_volume.html

@@ -63,7 +63,7 @@
 
 	<script>
 
-		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+		if ( ! Detector.webgl ) { Detector.addGetWebGLMessage(); }
 
 		var container,
 			stats,
@@ -123,9 +123,10 @@
 				texture.needsUpdate = true;
 
 				// Colormap textures
-				this.cmtextures = { viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png' ),
-									gray: new THREE.TextureLoader().load( 'textures/cm_gray.png' )
-								  }
+				this.cmtextures = {
+					viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png' ),
+					gray: new THREE.TextureLoader().load( 'textures/cm_gray.png' )
+				};
 
 				// Material (shaders) to render the volume using raycasting
 				var volmaterial = new THREE.ShaderMaterial( THREE.VolumeRenderShader1 );
@@ -133,61 +134,27 @@
 
 				// Apply standard volume material uniform info
 				volmaterial.uniforms.u_data = { type: 't', value: texture };
-				volmaterial.uniforms.u_size = { type: 'v3', value: [volume.xLength, volume.yLength, volume.zLength] };
+				volmaterial.uniforms.u_size = { type: 'v3', value: [ volume.xLength, volume.yLength, volume.zLength ] };
 
 				// Geometry for the volume
 				var volgeometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
-				volgeometry = volgeometry.translate(volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5);
-				var volcube = new THREE.Mesh(volgeometry, volmaterial);
+				volgeometry = volgeometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
+				var volcube = new THREE.Mesh( volgeometry, volmaterial );
 				scene.add( volcube );
 
 				// Support modifying volume rendering settings at runtime
 				this.volmaterial = volmaterial;
-				this.volumeConfig = {clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis'};
+				this.volumeConfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
 				this.updateUniforms();
 
-				gui.add(volumeConfig, 'clim1', 0, 1, 0.01).onChange(this.updateUniforms.bind(this));
-				gui.add(volumeConfig, 'clim2', 0, 1, 0.01).onChange(this.updateUniforms.bind(this));
-				gui.add(volumeConfig, 'colormap', {gray: 'gray', viridis: 'viridis'}).onChange(this.updateUniforms.bind(this));
-				gui.add(volumeConfig, 'renderstyle', {mip: 'mip', iso: 'iso'}).onChange(this.updateUniforms.bind(this));
-				gui.add(volumeConfig, 'isothreshold', 0, 1, 0.01).onChange(this.updateUniforms.bind(this));
+				gui.add( volumeConfig, 'clim1', 0, 1, 0.01 ).onChange( this.updateUniforms.bind( this ) );
+				gui.add( volumeConfig, 'clim2', 0, 1, 0.01 ).onChange( this.updateUniforms.bind( this ) );
+				gui.add( volumeConfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( this.updateUniforms.bind( this ) );
+				gui.add( volumeConfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( this.updateUniforms.bind( this ) );
+				gui.add( volumeConfig, 'isothreshold', 0, 1, 0.01 ).onChange( this.updateUniforms.bind( this ) );
 
 				// TODO: the texture coordinates currently map directly to world coordinates. That's why we translate
-				// the geometry above. But the extractSlice() below assume that the volume is centered at the origin.
-				// We'd need to add a material attribute with texture coordinates to fix this.
-				return;
-
-				//z plane
-				var indexZ = 0;
-				var sliceZ = volume.extractSlice('z',Math.floor(volume.RASDimensions[2]/4));
-				scene.add( sliceZ.mesh );
-
-				//y plane
-				var indexY = 0;
-				var sliceY = volume.extractSlice('y',Math.floor(volume.RASDimensions[1]/2));
-				scene.add( sliceY.mesh );
-
-				//x plane
-				var indexX = 0;
-				var sliceX = volume.extractSlice('x',Math.floor(volume.RASDimensions[0]/2));
-				scene.add( sliceX.mesh );
-
-				gui.add( sliceX, "index", 0, volume.RASDimensions[0], 1 ).name( "indexX" ).onChange( function () {sliceX.repaint.call(sliceX);} );
-				gui.add( sliceY, "index", 0, volume.RASDimensions[1], 1 ).name( "indexY" ).onChange( function () {sliceY.repaint.call(sliceY);} );
-				gui.add( sliceZ, "index", 0, volume.RASDimensions[2], 1 ).name( "indexZ" ).onChange( function () {sliceZ.repaint.call(sliceZ);} );
-
-				gui.add( volume, "lowerThreshold", volume.min, volume.max, 1).name( "Lower Threshold").onChange( function () {
-					volume.repaintAllSlices();
-				});
-				gui.add( volume, "upperThreshold", volume.min, volume.max, 1).name( "Upper Threshold").onChange( function () {
-					volume.repaintAllSlices();
-				});
-				gui.add( volume, "windowLow", volume.min, volume.max, 1).name( "Window Low").onChange( function () {
-					volume.repaintAllSlices();
-				});
-				gui.add( volume, "windowHigh", volume.min, volume.max, 1).name( "Window High").onChange( function () {
-					volume.repaintAllSlices();
-				});
+				// the geometry above. We'd need to add a material attribute with texture coordinates to fix this.
 
 			} );
 
@@ -227,9 +194,9 @@
 
 			config = this.volumeConfig;
 
-			this.volmaterial.uniforms.u_clim = {type: 'v2', value: [config.clim1, config.clim2]};
-			this.volmaterial.uniforms.u_renderstyle = {type: 'int', value: config.renderstyle == 'mip' ? 0 : 1}; // 0: MIP, 1: ISO
-			this.volmaterial.uniforms.u_renderthreshold = {type: 'f', value: config.isothreshold};  // For ISO renderstyle
+			this.volmaterial.uniforms.u_clim = { type: 'v2', value: [ config.clim1, config.clim2 ] };
+			this.volmaterial.uniforms.u_renderstyle = { type: 'int', value: config.renderstyle == 'mip' ? 0 : 1 }; // 0: MIP, 1: ISO
+			this.volmaterial.uniforms.u_renderthreshold = { type: 'f', value: config.isothreshold };  // For ISO renderstyle
 			this.volmaterial.uniforms.u_cmdata = { type: 't', value: this.cmtextures[config.colormap] };
 
 			this.volmaterial.needsUpdate = true;
@@ -271,21 +238,21 @@
 
 		function rotateAroundWorldAxis(object, axis, radians) {
 			var rotWorldMatrix = new THREE.Matrix4();
-			rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
+			rotWorldMatrix.makeRotationAxis( axis.normalize(), radians );
 
-			object.applyMatrix(rotWorldMatrix);
+			object.applyMatrix( rotWorldMatrix );
 
 		}
 
 		function setupInset () {
 			var insetWidth = 150,
 				insetHeight = 150;
-			container2 = document.getElementById('inset');
+			container2 = document.getElementById( 'inset' );
 			container2.width = insetWidth;
 			container2.height = insetHeight;
 
 			// renderer
-			renderer2 = new THREE.WebGLRenderer( {alpha : true} );
+			renderer2 = new THREE.WebGLRenderer( { alpha : true } );
 			renderer2.setClearColor( 0x000000, 0 );
 			renderer2.setSize( insetWidth, insetHeight );
 			container2.appendChild( renderer2.domElement );