super-three 0.141.0 → 0.147.0

package/examples/js/misc/VolumeSlice.js

@@ -8,104 +8,95 @@
  * @param   {string}       [axis='z']      For now only 'x', 'y' or 'z' but later it will change to a normal vector
  * @see Volume
  */
+	class VolumeSlice {
 
-	function VolumeSlice( volume, index, axis ) {
+		constructor( volume, index, axis ) {
 
-		const slice = this;
-		/**
-   * @member {Volume} volume The associated volume
-   */
-
-		this.volume = volume;
-		/**
-   * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
-   */
-
-		index = index || 0;
-		Object.defineProperty( this, 'index', {
-			get: function () {
-
-				return index;
+			const slice = this;
+			/**
+     * @member {Volume} volume The associated volume
+     */
+			this.volume = volume;
+			/**
+     * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
+     */
+			index = index || 0;
+			Object.defineProperty( this, 'index', {
+				get: function () {
 
-			},
-			set: function ( value ) {
+					return index;
 
-				index = value;
-				slice.geometryNeedsUpdate = true;
-				return index;
+				},
+				set: function ( value ) {
 
-			}
-		} );
-		/**
-   * @member {String} axis The normal axis
-   */
-
-		this.axis = axis || 'z';
-		/**
-   * @member {HTMLCanvasElement} canvas The final canvas used for the texture
-   */
-
-		/**
-   * @member {CanvasRenderingContext2D} ctx Context of the canvas
-   */
-
-		this.canvas = document.createElement( 'canvas' );
-		/**
-   * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
-   */
-
-		/**
-   * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
-   */
-
-		this.canvasBuffer = document.createElement( 'canvas' );
-		this.updateGeometry();
-		const canvasMap = new THREE.Texture( this.canvas );
-		canvasMap.minFilter = THREE.LinearFilter;
-		canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
-		const material = new THREE.MeshBasicMaterial( {
-			map: canvasMap,
-			side: THREE.DoubleSide,
-			transparent: true
-		} );
-		/**
-   * @member {Mesh} mesh The mesh ready to get used in the scene
-   */
+					index = value;
+					slice.geometryNeedsUpdate = true;
+					return index;
 
-		this.mesh = new THREE.Mesh( this.geometry, material );
-		this.mesh.matrixAutoUpdate = false;
-		/**
-   * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
-   */
-
-		this.geometryNeedsUpdate = true;
-		this.repaint();
-		/**
-   * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
-   */
-
-		/**
-   * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
-   */
-
-		/**
-   * @member {Function} sliceAccess Function that allow the slice to access right data
-   * @see Volume.extractPerpendicularPlane
-   * @param {Number} i The first coordinate
-   * @param {Number} j The second coordinate
-   * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
-   */
-
-	}
+				}
+			} );
+			/**
+     * @member {String} axis The normal axis
+     */
+			this.axis = axis || 'z';
+
+			/**
+     * @member {HTMLCanvasElement} canvas The final canvas used for the texture
+     */
+			/**
+     * @member {CanvasRenderingContext2D} ctx Context of the canvas
+     */
+			this.canvas = document.createElement( 'canvas' );
+			/**
+     * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
+     */
+			/**
+     * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
+     */
+			this.canvasBuffer = document.createElement( 'canvas' );
+			this.updateGeometry();
+			const canvasMap = new THREE.Texture( this.canvas );
+			canvasMap.minFilter = THREE.LinearFilter;
+			canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
+			const material = new THREE.MeshBasicMaterial( {
+				map: canvasMap,
+				side: THREE.DoubleSide,
+				transparent: true
+			} );
+			/**
+     * @member {Mesh} mesh The mesh ready to get used in the scene
+     */
+			this.mesh = new THREE.Mesh( this.geometry, material );
+			this.mesh.matrixAutoUpdate = false;
+			/**
+     * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
+     */
+			this.geometryNeedsUpdate = true;
+			this.repaint();
+
+			/**
+     * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
+     */
+
+			/**
+     * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
+     */
+
+			/**
+     * @member {Function} sliceAccess Function that allow the slice to access right data
+     * @see Volume.extractPerpendicularPlane
+     * @param {Number} i The first coordinate
+     * @param {Number} j The second coordinate
+     * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
+     */
 
-	VolumeSlice.prototype = {
-		constructor: VolumeSlice,
+		}
 
 		/**
    * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
    * @memberof VolumeSlice
    */
-		repaint: function () {
+		repaint() {
 
 			if ( this.geometryNeedsUpdate ) {
 
@@ -118,18 +109,19 @@
 				sliceAccess = this.sliceAccess,
 				volume = this.volume,
 				canvas = this.canvasBuffer,
-				ctx = this.ctxBuffer; // get the imageData and pixel array from the canvas
+				ctx = this.ctxBuffer;
 
+			// get the imageData and pixel array from the canvas
 			const imgData = ctx.getImageData( 0, 0, iLength, jLength );
 			const data = imgData.data;
 			const volumeData = volume.data;
 			const upperThreshold = volume.upperThreshold;
 			const lowerThreshold = volume.lowerThreshold;
 			const windowLow = volume.windowLow;
-			const windowHigh = volume.windowHigh; // manipulate some pixel elements
+			const windowHigh = volume.windowHigh;
 
+			// manipulate some pixel elements
 			let pixelCount = 0;
-
 			if ( volume.dataType === 'label' ) {
 
 				//this part is currently useless but will be used when colortables will be handled
@@ -157,10 +149,10 @@
 					for ( let i = 0; i < iLength; i ++ ) {
 
 						let value = volumeData[ sliceAccess( i, j ) ];
-						let alpha = 0xff; //apply threshold
-
-						alpha = upperThreshold >= value ? lowerThreshold <= value ? alpha : 0 : 0; //apply window level
-
+						let alpha = 0xff;
+						//apply threshold
+						alpha = upperThreshold >= value ? lowerThreshold <= value ? alpha : 0 : 0;
+						//apply window level
 						value = Math.floor( 255 * ( value - windowLow ) / ( windowHigh - windowLow ) );
 						value = value > 255 ? 255 : value < 0 ? 0 : value | 0;
 						data[ 4 * pixelCount ] = value;
@@ -179,14 +171,14 @@
 			this.ctx.drawImage( canvas, 0, 0, iLength, jLength, 0, 0, this.canvas.width, this.canvas.height );
 			this.mesh.material.map.needsUpdate = true;
 
-		},
+		}
 
 		/**
    * @member {Function} Refresh the geometry according to axis and index
    * @see Volume.extractPerpendicularPlane
    * @memberof VolumeSlice
    */
-		updateGeometry: function () {
+		updateGeometry() {
 
 			const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
 			this.sliceAccess = extracted.sliceAccess;
@@ -202,11 +194,10 @@
 			if ( this.geometry ) this.geometry.dispose(); // dispose existing geometry
 
 			this.geometry = new THREE.PlaneGeometry( extracted.planeWidth, extracted.planeHeight );
-
 			if ( this.mesh ) {
 
-				this.mesh.geometry = this.geometry; //reset mesh matrix
-
+				this.mesh.geometry = this.geometry;
+				//reset mesh matrix
 				this.mesh.matrix.identity();
 				this.mesh.applyMatrix4( this.matrix );
 
@@ -215,7 +206,8 @@
 			this.geometryNeedsUpdate = false;
 
 		}
-	};
+
+	}
 
 	THREE.VolumeSlice = VolumeSlice;
 

package/examples/js/modifiers/CurveModifier.js

@@ -4,12 +4,12 @@
 	const CHANNELS = 4;
 	const TEXTURE_WIDTH = 1024;
 	const TEXTURE_HEIGHT = 4;
+
 	/**
  * Make a new THREE.DataTexture to store the descriptions of the curves.
  *
  * @param { number } numberOfCurves the number of curves needed to be described by this texture.
  */
-
 	function initSplineTexture( numberOfCurves = 1 ) {
 
 		const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
@@ -21,6 +21,7 @@
 		return dataTexture;
 
 	}
+
 	/**
  * Write the curve description to the data texture
  *
@@ -28,7 +29,6 @@
  * @param { Curve } splineCurve The curve to describe
  * @param { number } offset Which curve slot to write to
  */
-
 	function updateSplineTexture( texture, splineCurve, offset = 0 ) {
 
 		const numberOfPoints = Math.floor( TEXTURE_WIDTH * ( TEXTURE_HEIGHT / 4 ) );
@@ -36,7 +36,6 @@
 		splineCurve.updateArcLengths();
 		const points = splineCurve.getSpacedPoints( numberOfPoints );
 		const frenetFrames = splineCurve.computeFrenetFrames( numberOfPoints, true );
-
 		for ( let i = 0; i < numberOfPoints; i ++ ) {
 
 			const rowOffset = Math.floor( i / TEXTURE_WIDTH );
@@ -63,20 +62,18 @@
 			data
 		} = image;
 		const i = CHANNELS * TEXTURE_WIDTH * o; // Row Offset
-
 		data[ index * CHANNELS + i + 0 ] = x;
 		data[ index * CHANNELS + i + 1 ] = y;
 		data[ index * CHANNELS + i + 2 ] = z;
 		data[ index * CHANNELS + i + 3 ] = 1;
 
 	}
+
 	/**
  * Create a new set of uniforms for describing the curve modifier
  *
  * @param { THREE.DataTexture } Texture which holds the curve description
  */
-
-
 	function getUniforms( splineTexture ) {
 
 		const uniforms = {
@@ -114,7 +111,6 @@
 
 		if ( material.__ok ) return;
 		material.__ok = true;
-
 		material.onBeforeCompile = shader => {
 
 			if ( shader.__modified ) return;
@@ -132,10 +128,17 @@
 		float textureStacks = ${TEXTURE_HEIGHT / 4}.;
 
 		${shader.vertexShader}
-		` // chunk import moved in front of modified shader below
-				.replace( '#include <beginnormal_vertex>', '' ) // vec3 transformedNormal declaration overriden below
-				.replace( '#include <defaultnormal_vertex>', '' ) // vec3 transformed declaration overriden below
-				.replace( '#include <begin_vertex>', '' ) // shader override
+		`
+			// chunk import moved in front of modified shader below
+				.replace( '#include <beginnormal_vertex>', '' )
+
+			// vec3 transformedNormal declaration overriden below
+				.replace( '#include <defaultnormal_vertex>', '' )
+
+			// vec3 transformed declaration overriden below
+				.replace( '#include <begin_vertex>', '' )
+
+			// shader override
 				.replace( /void\s*main\s*\(\)\s*\{/, `
 void main() {
 #include <beginnormal_vertex>
@@ -180,10 +183,10 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 		};
 
 	}
+
 	/**
  * A helper class for making meshes bend aroudn curves
  */
-
 	class Flow {
 
 		/**
@@ -212,7 +215,6 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			this.uniforms = uniforms;
 
 		}
-
 		updateCurve( index, curve ) {
 
 			if ( index >= this.curveArray.length ) throw Error( 'Index out of range for Flow' );
@@ -223,7 +225,6 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			updateSplineTexture( this.splineTexure, curve, index );
 
 		}
-
 		moveAlongCurve( amount ) {
 
 			this.uniforms.pathOffset.value += amount;
@@ -232,10 +233,10 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 
 	}
 	const matrix = new THREE.Matrix4();
+
 	/**
  * A helper class for creating instanced versions of flow, where the instances are placed on the curve.
  */
-
 	class InstancedFlow extends Flow {
 
 		/**
@@ -254,14 +255,13 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			this.whichCurve = new Array( count ).fill( 0 );
 
 		}
+
 		/**
    * The extra information about which curve and curve position is stored in the translation components of the matrix for the instanced objects
    * This writes that information to the matrix and marks it as needing update.
    *
    * @param {number} index of the instanced element to update
    */
-
-
 		writeChanges( index ) {
 
 			matrix.makeTranslation( this.curveLengthArray[ this.whichCurve[ index ] ], this.whichCurve[ index ], this.offsets[ index ] );
@@ -269,28 +269,26 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			this.object3D.instanceMatrix.needsUpdate = true;
 
 		}
+
 		/**
    * Move an individual element along the curve by a specific amount
    *
    * @param {number} index Which element to update
    * @param {number} offset Move by how much
    */
-
-
 		moveIndividualAlongCurve( index, offset ) {
 
 			this.offsets[ index ] += offset;
 			this.writeChanges( index );
 
 		}
+
 		/**
    * Select which curve to use for an element
    *
    * @param {number} index the index of the instanced element to update
    * @param {number} curveNo the index of the curve it should use
    */
-
-
 		setCurve( index, curveNo ) {
 
 			if ( isNaN( curveNo ) ) throw Error( 'curve index being set is Not a Number (NaN)' );

package/examples/js/modifiers/EdgeSplitModifier.js

@@ -1,11 +1,8 @@
 ( function () {
 
 	const _A = new THREE.Vector3();
-
 	const _B = new THREE.Vector3();
-
 	const _C = new THREE.Vector3();
-
 	class EdgeSplitModifier {
 
 		modify( geometry, cutOffAngle, tryKeepNormals = true ) {
@@ -13,27 +10,17 @@
 			function computeNormals() {
 
 				normals = new Float32Array( indexes.length * 3 );
-
 				for ( let i = 0; i < indexes.length; i += 3 ) {
 
 					let index = indexes[ i ];
-
 					_A.set( positions[ 3 * index ], positions[ 3 * index + 1 ], positions[ 3 * index + 2 ] );
-
 					index = indexes[ i + 1 ];
-
 					_B.set( positions[ 3 * index ], positions[ 3 * index + 1 ], positions[ 3 * index + 2 ] );
-
 					index = indexes[ i + 2 ];
-
 					_C.set( positions[ 3 * index ], positions[ 3 * index + 1 ], positions[ 3 * index + 2 ] );
-
 					_C.sub( _B );
-
 					_A.sub( _B );
-
 					const normal = _C.cross( _A ).normalize();
-
 					for ( let j = 0; j < 3; j ++ ) {
 
 						normals[ 3 * ( i + j ) ] = normal.x;
@@ -49,11 +36,9 @@
 			function mapPositionsToIndexes() {
 
 				pointToIndexMap = Array( positions.length / 3 );
-
 				for ( let i = 0; i < indexes.length; i ++ ) {
 
 					const index = indexes[ i ];
-
 					if ( pointToIndexMap[ index ] == null ) {
 
 						pointToIndexMap[ index ] = [];
@@ -69,18 +54,15 @@
 			function edgeSplitToGroups( indexes, cutOff, firstIndex ) {
 
 				_A.set( normals[ 3 * firstIndex ], normals[ 3 * firstIndex + 1 ], normals[ 3 * firstIndex + 2 ] ).normalize();
-
 				const result = {
 					splitGroup: [],
 					currentGroup: [ firstIndex ]
 				};
-
 				for ( const j of indexes ) {
 
 					if ( j !== firstIndex ) {
 
 						_B.set( normals[ 3 * j ], normals[ 3 * j + 1 ], normals[ 3 * j + 2 ] ).normalize();
-
 						if ( _B.dot( _A ) < cutOff ) {
 
 							result.splitGroup.push( j );
@@ -103,7 +85,6 @@
 
 				if ( indexes.length === 0 ) return;
 				const groupResults = [];
-
 				for ( const index of indexes ) {
 
 					groupResults.push( edgeSplitToGroups( indexes, cutOff, index ) );
@@ -111,7 +92,6 @@
 				}
 
 				let result = groupResults[ 0 ];
-
 				for ( const groupResult of groupResults ) {
 
 					if ( groupResult.currentGroup.length > result.currentGroup.length ) {
@@ -141,12 +121,10 @@
 
 			let hadNormals = false;
 			let oldNormals = null;
-
 			if ( geometry.attributes.normal ) {
 
 				hadNormals = true;
 				geometry = geometry.clone();
-
 				if ( tryKeepNormals === true && geometry.index !== null ) {
 
 					oldNormals = geometry.attributes.normal.array;
@@ -170,7 +148,6 @@
 			computeNormals();
 			mapPositionsToIndexes();
 			const splitIndexes = [];
-
 			for ( const vertexIndexes of pointToIndexMap ) {
 
 				edgeSplit( vertexIndexes, Math.cos( cutOffAngle ) - 0.001 );
@@ -178,7 +155,6 @@
 			}
 
 			const newAttributes = {};
-
 			for ( const name of Object.keys( geometry.attributes ) ) {
 
 				const oldAttribute = geometry.attributes[ name ];
@@ -190,12 +166,10 @@
 
 			const newIndexes = new Uint32Array( indexes.length );
 			newIndexes.set( indexes );
-
 			for ( let i = 0; i < splitIndexes.length; i ++ ) {
 
 				const split = splitIndexes[ i ];
 				const index = indexes[ split.original ];
-
 				for ( const attribute of Object.values( newAttributes ) ) {
 
 					for ( let j = 0; j < attribute.itemSize; j ++ ) {
@@ -216,7 +190,6 @@
 
 			geometry = new THREE.BufferGeometry();
 			geometry.setIndex( new THREE.BufferAttribute( newIndexes, 1 ) );
-
 			for ( const name of Object.keys( newAttributes ) ) {
 
 				geometry.setAttribute( name, newAttributes[ name ] );
@@ -226,13 +199,10 @@
 			if ( hadNormals ) {
 
 				geometry.computeVertexNormals();
-
 				if ( oldNormals !== null ) {
 
 					const changedNormals = new Array( oldNormals.length / 3 ).fill( false );
-
 					for ( const splitData of splitIndexes ) changedNormals[ splitData.original ] = true;
-
 					for ( let i = 0; i < changedNormals.length; i ++ ) {
 
 						if ( changedNormals[ i ] === false ) {