zincjs 1.0.13 → 1.0.15

package/src/loaders/STLLoader.js

@@ -0,0 +1,399 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	FileLoader,
+	Float32BufferAttribute,
+	Loader,
+	LoaderUtils,
+	Vector3
+} from 'three';
+
+/**
+ * Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
+ *
+ * Supports both binary and ASCII encoded files, with automatic detection of type.
+ *
+ * The loader returns a non-indexed buffer geometry.
+ *
+ * Limitations:
+ *  Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
+ *  There is perhaps some question as to how valid it is to always assume little-endian-ness.
+ *  ASCII decoding assumes file is UTF-8.
+ *
+ * Usage:
+ *  const loader = new STLLoader();
+ *  loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
+ *    scene.add( new THREE.Mesh( geometry ) );
+ *  });
+ *
+ * For binary STLs geometry might contain colors for vertices. To use it:
+ *  // use the same code to load STL as above
+ *  if (geometry.hasColors) {
+ *    material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: true });
+ *  } else { .... }
+ *  const mesh = new THREE.Mesh( geometry, material );
+ *
+ * For ASCII STLs containing multiple solids, each solid is assigned to a different group.
+ * Groups can be used to assign a different color by defining an array of materials with the same length of
+ * geometry.groups and passing it to the Mesh constructor:
+ *
+ * const mesh = new THREE.Mesh( geometry, material );
+ *
+ * For example:
+ *
+ *  const materials = [];
+ *  const nGeometryGroups = geometry.groups.length;
+ *
+ *  const colorMap = ...; // Some logic to index colors.
+ *
+ *  for (let i = 0; i < nGeometryGroups; i++) {
+ *
+ *		const material = new THREE.MeshPhongMaterial({
+ *			color: colorMap[i],
+ *			wireframe: false
+ *		});
+ *
+ *  }
+ *
+ *  materials.push(material);
+ *  const mesh = new THREE.Mesh(geometry, materials);
+ */
+
+
+class STLLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const loader = new FileLoader( this.manager );
+		loader.setPath( this.path );
+		loader.setResponseType( 'arraybuffer' );
+		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( this.withCredentials );
+
+		loader.load( url, function ( text ) {
+
+			try {
+
+				onLoad( scope.parse( text ) );
+
+			} catch ( e ) {
+
+				if ( onError ) {
+
+					onError( e );
+
+				} else {
+
+					console.error( e );
+
+				}
+
+				scope.manager.itemError( url );
+
+			}
+
+		}, onProgress, onError );
+
+	}
+
+	parse( data ) {
+
+		function isBinary( data ) {
+
+			const reader = new DataView( data );
+			const face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
+			const n_faces = reader.getUint32( 80, true );
+			const expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
+
+			if ( expect === reader.byteLength ) {
+
+				return true;
+
+			}
+
+			// An ASCII STL data must begin with 'solid ' as the first six bytes.
+			// However, ASCII STLs lacking the SPACE after the 'd' are known to be
+			// plentiful.  So, check the first 5 bytes for 'solid'.
+
+			// Several encodings, such as UTF-8, precede the text with up to 5 bytes:
+			// https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
+			// Search for "solid" to start anywhere after those prefixes.
+
+			// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
+
+			const solid = [ 115, 111, 108, 105, 100 ];
+
+			for ( let off = 0; off < 5; off ++ ) {
+
+				// If "solid" text is matched to the current offset, declare it to be an ASCII STL.
+
+				if ( matchDataViewAt( solid, reader, off ) ) return false;
+
+			}
+
+			// Couldn't find "solid" text at the beginning; it is binary STL.
+
+			return true;
+
+		}
+
+		function matchDataViewAt( query, reader, offset ) {
+
+			// Check if each byte in query matches the corresponding byte from the current offset
+
+			for ( let i = 0, il = query.length; i < il; i ++ ) {
+
+				if ( query[ i ] !== reader.getUint8( offset + i, false ) ) return false;
+
+			}
+
+			return true;
+
+		}
+
+		function parseBinary( data ) {
+
+			const reader = new DataView( data );
+			const faces = reader.getUint32( 80, true );
+
+			let r, g, b, hasColors = false, colors;
+			let defaultR, defaultG, defaultB, alpha;
+
+			// process STL header
+			// check for default color in header ("COLOR=rgba" sequence).
+
+			for ( let index = 0; index < 80 - 10; index ++ ) {
+
+				if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
+					( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
+					( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
+
+					hasColors = true;
+					colors = new Float32Array( faces * 3 * 3 );
+
+					defaultR = reader.getUint8( index + 6 ) / 255;
+					defaultG = reader.getUint8( index + 7 ) / 255;
+					defaultB = reader.getUint8( index + 8 ) / 255;
+					alpha = reader.getUint8( index + 9 ) / 255;
+
+				}
+
+			}
+
+			const dataOffset = 84;
+			const faceLength = 12 * 4 + 2;
+
+			const geometry = new BufferGeometry();
+
+			const vertices = new Float32Array( faces * 3 * 3 );
+			const normals = new Float32Array( faces * 3 * 3 );
+
+			for ( let face = 0; face < faces; face ++ ) {
+
+				const start = dataOffset + face * faceLength;
+				const normalX = reader.getFloat32( start, true );
+				const normalY = reader.getFloat32( start + 4, true );
+				const normalZ = reader.getFloat32( start + 8, true );
+
+				if ( hasColors ) {
+
+					const packedColor = reader.getUint16( start + 48, true );
+
+					if ( ( packedColor & 0x8000 ) === 0 ) {
+
+						// facet has its own unique color
+
+						r = ( packedColor & 0x1F ) / 31;
+						g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
+						b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
+
+					} else {
+
+						r = defaultR;
+						g = defaultG;
+						b = defaultB;
+
+					}
+
+				}
+
+				for ( let i = 1; i <= 3; i ++ ) {
+
+					const vertexstart = start + i * 12;
+					const componentIdx = ( face * 3 * 3 ) + ( ( i - 1 ) * 3 );
+
+					vertices[ componentIdx ] = reader.getFloat32( vertexstart, true );
+					vertices[ componentIdx + 1 ] = reader.getFloat32( vertexstart + 4, true );
+					vertices[ componentIdx + 2 ] = reader.getFloat32( vertexstart + 8, true );
+
+					normals[ componentIdx ] = normalX;
+					normals[ componentIdx + 1 ] = normalY;
+					normals[ componentIdx + 2 ] = normalZ;
+
+					if ( hasColors ) {
+
+						colors[ componentIdx ] = r;
+						colors[ componentIdx + 1 ] = g;
+						colors[ componentIdx + 2 ] = b;
+
+					}
+
+				}
+
+			}
+
+			geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
+			geometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
+
+			if ( hasColors ) {
+
+				geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
+				geometry.hasColors = true;
+				geometry.alpha = alpha;
+
+			}
+
+			return geometry;
+
+		}
+
+		function parseASCII( data ) {
+
+			const geometry = new BufferGeometry();
+			const patternSolid = /solid([\s\S]*?)endsolid/g;
+			const patternFace = /facet([\s\S]*?)endfacet/g;
+			let faceCounter = 0;
+
+			const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)/.source;
+			const patternVertex = new RegExp( 'vertex' + patternFloat + patternFloat + patternFloat, 'g' );
+			const patternNormal = new RegExp( 'normal' + patternFloat + patternFloat + patternFloat, 'g' );
+
+			const vertices = [];
+			const normals = [];
+
+			const normal = new Vector3();
+
+			let result;
+
+			let groupCount = 0;
+			let startVertex = 0;
+			let endVertex = 0;
+
+			while ( ( result = patternSolid.exec( data ) ) !== null ) {
+
+				startVertex = endVertex;
+
+				const solid = result[ 0 ];
+
+				while ( ( result = patternFace.exec( solid ) ) !== null ) {
+
+					let vertexCountPerFace = 0;
+					let normalCountPerFace = 0;
+
+					const text = result[ 0 ];
+
+					while ( ( result = patternNormal.exec( text ) ) !== null ) {
+
+						normal.x = parseFloat( result[ 1 ] );
+						normal.y = parseFloat( result[ 2 ] );
+						normal.z = parseFloat( result[ 3 ] );
+						normalCountPerFace ++;
+
+					}
+
+					while ( ( result = patternVertex.exec( text ) ) !== null ) {
+
+						vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
+						normals.push( normal.x, normal.y, normal.z );
+						vertexCountPerFace ++;
+						endVertex ++;
+
+					}
+
+					// every face have to own ONE valid normal
+
+					if ( normalCountPerFace !== 1 ) {
+
+						console.error( 'THREE.STLLoader: Something isn\'t right with the normal of face number ' + faceCounter );
+
+					}
+
+					// each face have to own THREE valid vertices
+
+					if ( vertexCountPerFace !== 3 ) {
+
+						console.error( 'THREE.STLLoader: Something isn\'t right with the vertices of face number ' + faceCounter );
+
+					}
+
+					faceCounter ++;
+
+				}
+
+				const start = startVertex;
+				const count = endVertex - startVertex;
+
+				geometry.addGroup( start, count, groupCount );
+				groupCount ++;
+
+			}
+
+			geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+			geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+
+			return geometry;
+
+		}
+
+		function ensureString( buffer ) {
+
+			if ( typeof buffer !== 'string' ) {
+
+				return LoaderUtils.decodeText( new Uint8Array( buffer ) );
+
+			}
+
+			return buffer;
+
+		}
+
+		function ensureBinary( buffer ) {
+
+			if ( typeof buffer === 'string' ) {
+
+				const array_buffer = new Uint8Array( buffer.length );
+				for ( let i = 0; i < buffer.length; i ++ ) {
+
+					array_buffer[ i ] = buffer.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
+
+				}
+
+				return array_buffer.buffer || array_buffer;
+
+			} else {
+
+				return buffer;
+
+			}
+
+		}
+
+		// start
+
+		const binData = ensureBinary( data );
+
+		return isBinary( binData ) ? parseBinary( binData ) : parseASCII( ensureString( data ) );
+
+	}
+
+}
+
+export { STLLoader };

package/src/loaders/primitivesLoader.js

@@ -0,0 +1,46 @@
+const JSONLoader = require('./JSONLoader').JSONLoader;
+
+exports.PrimitivesLoader = function () {
+  let concurrentDownloads = 0;
+  const MAX_DOWNLOAD = 20;
+  this.crossOrigin = "Anonymous";
+  const loader = new JSONLoader();
+  const waitingList = [];
+
+  this.load = (url, onLoad, onProgress, onError) => {
+    if (MAX_DOWNLOAD > concurrentDownloads) {
+      ++concurrentDownloads;
+      loader.crossOrigin = this.crossOrigin;
+      const onLoadCallback = new onFinally(onLoad, this);
+      const onErrorCallback = new onFinally(onError, this);
+      loader.load(url, onLoadCallback, onProgress, onErrorCallback);
+    } else {
+      waitingList.push({
+        url,
+        onLoad,
+        onProgress,
+        onError
+      });
+    }
+  }
+
+  this.loadFromWaitingList = () => {
+    const item = waitingList.shift();
+    if (item)
+      this.load(item.url, item.onLoad, item.onProgress, item.onError);
+  }
+
+  const onFinally = function(callback, loader) {
+    return (...args) => {
+      --concurrentDownloads;
+      callback(...args);
+      loader.loadFromWaitingList();
+    }
+  }
+
+
+  this.parse = data => {
+    return loader.parse(data);
+  }
+
+}

package/src/minimap.js

@@ -0,0 +1,82 @@
+const THREE = require('three');
+
+exports.Minimap = function (sceneIn) {
+  let targetScene = sceneIn;
+  this.camera = new THREE.OrthographicCamera(
+    -0.5, 0.5, 0.5, -0.5, 0.01, 10);
+  this.helper = undefined;
+  let geometry = new THREE.BufferGeometry();
+  var vertices = new Float32Array( [
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0, -1.0,  1.0
+  ] );
+  let positionAttributes = new THREE.BufferAttribute( vertices, 3 );
+  geometry.setAttribute( 'position', positionAttributes);
+  var material = new THREE.MeshBasicMaterial( { color: 0x333333, 
+    depthTest: false,
+    depthWrite: false,
+    opacity: 0.5,
+    transparent: true } );
+  this.mask = new THREE.Mesh( geometry, material );
+  let _box = new THREE.Box3();
+  let _center = new THREE.Vector3();
+
+  this.getDiffFromNormalised = (x, y) => {
+    _box.setFromBufferAttribute(positionAttributes).getCenter(_center);
+    let coord = _center.clone().project(this.camera);
+    let new_coord = new THREE.Vector3(x, y, coord.z).unproject(this.camera);
+    return new_coord.sub(_center);
+  }
+
+  let setCurrentCameraSettings = (diameter, newViewport)  => {
+    if (targetScene.camera.near)
+      this.camera.near = targetScene.camera.near;
+    if (newViewport.farPlane)
+      this.camera.far = newViewport.farPlane;
+    if (newViewport.eyePosition)
+      this.camera.position.set(newViewport.eyePosition[0],
+        newViewport.eyePosition[1], newViewport.eyePosition[2]);
+    if (newViewport.upVector)
+      this.camera.up.set(newViewport.upVector[0], newViewport.upVector[1],
+        newViewport.upVector[2]);
+    if (newViewport.targetPosition)
+      this.camera.lookAt(new THREE.Vector3(newViewport.targetPosition[0],
+        newViewport.targetPosition[1], newViewport.targetPosition[2]));
+    this.camera.zoom = 1 / diameter;
+    this.camera.updateProjectionMatrix();
+  }
+
+  this.getBoundary = () => {
+    let target = new THREE.Vector3().copy(
+      targetScene.camera.target).project(targetScene.camera);
+    let v1 = new THREE.Vector3(-1, -1, target.z).unproject(targetScene.camera);
+    let v2 = new THREE.Vector3(1, -1, target.z).unproject(targetScene.camera);
+    let v3 = new THREE.Vector3(1, 1, target.z).unproject(targetScene.camera);
+    let v4 = new THREE.Vector3(-1, 1, target.z).unproject(targetScene.camera);
+    let array = [v1, v2, v3, v3, v4, v1];
+    positionAttributes.copyVector3sArray(array);
+    positionAttributes.needsUpdate = true;
+  }
+
+  this.updateCamera = () => {
+    this.getBoundary();
+    let cameraControl = targetScene.getZincCameraControls();
+    let boundingBox = targetScene.getBoundingBox();
+    if (boundingBox) {
+      // enlarge radius to keep image within edge of window
+      const diameter = boundingBox.min.distanceTo(boundingBox.max);
+      const radius = diameter / 2.0;
+      const centreX = (boundingBox.min.x + boundingBox.max.x) / 2.0;
+      const centreY = (boundingBox.min.y + boundingBox.max.y) / 2.0;
+      const centreZ = (boundingBox.min.z + boundingBox.max.z) / 2.0;
+      const clip_factor = 4.0;
+      const viewport = cameraControl.getViewportFromCentreAndRadius(
+        centreX, centreY, centreZ, radius, 40, radius * clip_factor);
+      setCurrentCameraSettings(diameter, viewport);
+    }
+  }
+}

package/src/primitives/augmentShader.js

@@ -0,0 +1,22 @@
+exports.augmentMorphColor = function() {
+    return function(shader) {
+        shader.vertexShader = shader.vertexShader.replace(
+            '#include <color_pars_vertex>',
+            [
+	            'varying vec3 vColor;',
+                'attribute vec3 morphColor0;',
+                'attribute vec3 morphColor1;'
+            ].join( '\n' )
+        );
+        shader.vertexShader = shader.vertexShader.replace(
+            '#include <color_vertex>',
+            [
+                'vColor.xyz = color.xyz;',
+                '#ifdef USE_MORPHTARGETS',
+                'vColor = morphColor0 * morphTargetInfluences[ 0 ];',
+                'vColor += morphColor1 * morphTargetInfluences[ 1 ];',
+                '#endif'
+            ].join( '\n' )
+        );
+    };
+}

package/src/primitives/geometry.js

@@ -0,0 +1,109 @@
+const THREE = require('three');
+
+/**
+ * Provides an object which stores geometry and provides method which controls its animations.
+ * This is created when a valid json file containging geometry is read into a {@link Zinc.Scene}
+ * object.
+ * 
+ * @class
+ * @author Alan Wu
+ * @return {Zinc.Geometry}
+ */
+const Geometry = function () {
+  (require('./zincObject').ZincObject).call(this);
+	// THREE.Geometry or THREE.BufferGeometry
+	this.videoHandler = undefined;
+  this.isGeometry = true;
+
+	this.createMesh = (geometryIn, materialIn, options) => {
+		if (this.geometry && this.morph && (geometryIn != undefined))
+			return;
+		// First copy the geometry
+		let geometry = this.toBufferGeometry(geometryIn, options);
+
+		let isTransparent = false;
+		if (1.0 > options.opacity)
+			  isTransparent = true;
+
+		let material = undefined;
+		if (geometry._video === undefined) {
+      const morphTargets = options.localTimeEnabled || options.localMorphColour;
+			if (materialIn) {
+				material = materialIn;
+				material.morphTargets = morphTargets;
+				material.morphNormals = options.localTimeEnabled;
+			} else {
+				if (geometry instanceof THREE.BufferGeometry && geometry.attributes.color === undefined) {
+					material = new THREE.MeshPhongMaterial({
+						color : options.colour,
+						morphTargets : morphTargets,
+						morphNormals : options.localTimeEnabled,
+						transparent : isTransparent,
+						opacity : options.opacity,
+						side : THREE.DoubleSide
+					});
+				} else {
+					material = new THREE.MeshPhongMaterial({
+						color : options.colour,
+						morphTargets : morphTargets,
+						morphNormals : options.localTimeEnabled,
+						vertexColors : THREE.VertexColors,
+						transparent : isTransparent,
+						opacity : options.opacity,
+						side : THREE.DoubleSide
+					});
+				}
+			}
+			//material = PhongToToon(material);
+			if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+				material.onBeforeCompile = (require("./augmentShader").augmentMorphColor)();
+			}
+		} else {
+			let videoTexture = geometry._video.createCanvasVideoTexture();
+			material = new THREE.MeshBasicMaterial({
+				morphTargets : options.localTimeEnabled,
+				color : new THREE.Color(1, 1, 1),
+				transparent : isTransparent,
+				opacity : options.opacity,
+				map : videoTexture,
+				side : THREE.DoubleSide
+			});
+			this.videoHandler = geometry._video;
+		}
+		let mesh = new THREE.Mesh(geometry, material); 
+		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
+	}
+	
+	this.calculateUVs = () => {
+		this.geometry.computeBoundingBox();
+		const max = this.geometry.boundingBox.max, min = this.geometry.boundingBox.min;
+		const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
+		const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
+		this.geometry.faceVertexUvs[0] = [];
+		for (let i = 0; i < this.geometry.faces.length ; i++) {
+		    const v1 = this.geometry.vertices[this.geometry.faces[i].a];
+		    const v2 = this.geometry.vertices[this.geometry.faces[i].b];
+		    const v3 = this.geometry.vertices[this.geometry.faces[i].c];
+		    geometry.faceVertexUvs[0].push(
+		        [
+		            new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
+		            new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
+		            new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
+		        ]);
+		}
+		geometry.uvsNeedUpdate = true;	
+	}
+	
+	/**
+	 * Set wireframe display for this geometry.
+	 * 
+	 * @param {Boolean} wireframe - Flag to turn on/off wireframe display.
+	 */
+	this.setWireframe = wireframe => {
+		this.morph.material.wireframe = wireframe;
+	}
+	
+}
+
+Geometry.prototype = Object.create((require('./zincObject').ZincObject).prototype);
+exports.Geometry = Geometry;