zincjs 1.20.1 → 2.0.0

package/src/utilities.js

@@ -1,10 +1,13 @@
-const THREE = require('three');
-const THREEGeometry = require('./three/Geometry').Geometry;
-const SpriteText = require('three-spritetext').default;
+import * as THREE from 'three';
+import { Geometry as THREEGeometry } from './three/Geometry';
+import SpriteTextModule from 'three-spritetext';
+const SpriteText = SpriteTextModule.default || SpriteTextModule;
+import Zinc from './zinc';
+import discPNG from './assets/disc.png';
 
 function resolveURL(url) {
 	let actualURL = url;
-	let prefix = (require("./zinc").modelPrefix);
+	let prefix = Zinc.modelPrefix;
 
 	if (prefix) {
 		if (prefix[prefix.length -1] != '/')
@@ -84,23 +87,20 @@ function getBoundingBox(mesh, cachedBox, b1, v1, v2) {
 //Convenient function
 function loadExternalFile(url, data, callback, errorCallback) {
     // Set up an asynchronous request
-    const request = new XMLHttpRequest();
-    request.open('GET', resolveURL(url), true);
-
-    // Hook the event that gets called as the request progresses
-    request.onreadystatechange = () => {
-        // If the request is "DONE" (completed or failed)
-        if (request.readyState == 4) {
-            // If we got HTTP status 200 (OK)
-            if (request.status == 200) {
-                callback(request.responseText, data)
-            } else { // Failed
-                errorCallback(url);
-            }
-        }
-    };
-
-    request.send(null);
+  fetch(resolveURL(url))
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.text();
+  })
+  .then((responseText) => {
+    callback(responseText, data);
+  })
+  .catch((error) => {
+    console.error(`Fetch string payload retrieval failed for: ${requestURL}`, error);
+    errorCallback(url);
+  });
 }
 
 function loadExternalFiles(urls, callback, errorCallback) {
@@ -126,7 +126,7 @@ function loadExternalFiles(urls, callback, errorCallback) {
 
 
 //Get the colours at index
-exports.getColorsRGB = (colors, index) => {
+const getColorsRGB = (colors, index) => {
     const index_in_colors = Math.floor(index/3);
     const remainder = index%3;
     let hex_value = 0;
@@ -146,7 +146,7 @@ exports.getColorsRGB = (colors, index) => {
     return [mycolor.r, mycolor.g, mycolor.b];
 }
 
-exports.updateMorphColorAttribute = function(targetGeometry, morph) {
+const updateMorphColorAttribute = function(targetGeometry, morph) {
   if (morph && targetGeometry && targetGeometry.morphAttributes &&
     targetGeometry.morphAttributes[ "color" ]) {
     const morphColors = targetGeometry.morphAttributes[ "color" ];
@@ -173,7 +173,7 @@ exports.updateMorphColorAttribute = function(targetGeometry, morph) {
 }
 
 
-exports.toBufferGeometry = (geometryIn, options) => {
+const toBufferGeometry = (geometryIn, options) => {
   let geometry = undefined;
   if (geometryIn instanceof THREEGeometry) {
     if (options.localTimeEnabled && !geometryIn.morphNormalsReady &&
@@ -194,11 +194,10 @@ exports.toBufferGeometry = (geometryIn, options) => {
   return geometry;
 }
 
-exports.copyMorphColorsToBufferGeometry = (geometry, bufferGeometry) => {
+const copyMorphColorsToBufferGeometry = (geometry, bufferGeometry) => {
   if (geometry && geometry.morphColors && geometry.morphColors.length > 0 ) {
     let array = [];
     let morphColors = geometry.morphColors;
-    const getColorsRGB = require("./utilities").getColorsRGB;
     for ( var i = 0, l = morphColors.length; i < l; i ++ ) {
       let morphColor = morphColors[ i ];
       let colorArray = [];
@@ -224,7 +223,6 @@ const copyMorphColorsToIndexedBufferGeometry = (geometry, bufferGeometry) => {
   if (geometry && geometry.morphColors && geometry.morphColors.length > 0 ) {
     let array = [];
     let morphColors = geometry.morphColors;
-    const getColorsRGB = require("./utilities").getColorsRGB;
     for ( let i = 0, l = morphColors.length; i < l; i ++ ) {
       const morphColor = morphColors[ i ];
       const colorArray = [];
@@ -343,7 +341,7 @@ function mergeAttributes( attributes ) {
  * @param {boolean} [useGroups=false] - Whether to use groups or not.
  * @return {?BufferGeometry} The merged geometry. Returns `null` if the merge does not succeed.
  */
-exports.mergeGeometries = ( geometries, useGroups = false ) => {
+const mergeGeometries = ( geometries, useGroups = false ) => {
 
   const isIndexed = geometries[ 0 ].index !== null;
 
@@ -534,7 +532,7 @@ exports.mergeGeometries = ( geometries, useGroups = false ) => {
 
 }
 
-exports.mergeVertices = ( geometry, tolerance = 1e-4 ) => {
+const mergeVertices = ( geometry, tolerance = 1e-4 ) => {
 
   tolerance = Math.max( tolerance, Number.EPSILON );
 
@@ -742,7 +740,7 @@ function createBufferGeometry(length, coords) {
 
 function getCircularTexture() {
   const image = new Image();
-  image.src = require("./assets/disc.png");
+  image.src = discPNG;
   const texture = new THREE.Texture();
   texture.image = image;
   texture.needsUpdate = true;
@@ -844,14 +842,24 @@ function removeVertexAtIndex(geometry, index, maintainLength) {
 
 }
 
-exports.getBoundingBox = getBoundingBox;
-exports.createNewURL = createNewURL;
-exports.createBufferGeometry = createBufferGeometry;
-exports.getCircularTexture = getCircularTexture;
-exports.resolveURL = resolveURL;
-exports.loadExternalFile = loadExternalFile;
-exports.loadExternalFiles = loadExternalFiles;
-exports.PhongToToon = PhongToToon;
-exports.createNewSpriteText = createNewSpriteText;
-exports.isRegionGroup = isRegionGroup;
-exports.removeVertexAtIndex = removeVertexAtIndex;
+
+export {
+  copyMorphColorsToBufferGeometry,
+  createBufferGeometry,
+  createNewSpriteText,
+  createNewURL,
+  getBoundingBox,
+  getCircularTexture,
+  getColorsRGB,
+  isRegionGroup,
+  loadExternalFile,
+  loadExternalFiles,
+  mergeGeometries,
+  mergeVertices,
+  PhongToToon,
+  removeVertexAtIndex,
+  resolveURL,
+  updateMorphColorAttribute,
+  toBufferGeometry,
+ };
+

package/src/videoHandler.js

@@ -1,15 +1,15 @@
-var THREE = require('three');
+import * as THREE from 'three';
 
 /**
  * Provide basic functionality to display video as texture.
  * VideoTexture is used for creating and updating a video projected onto a Three.js texture
- * 
+ *
  * @class
  * @param {Object} containerIn - Container to create the renderer on.
  * @author Alan Wu
  * @return {VideoHandler}
  */
-exports.VideoHandler = function(srcIn)  {
+const VideoHandler = function(srcIn)  {
 
 	var _this = this;
 	this.video = undefined;
@@ -22,7 +22,7 @@ exports.VideoHandler = function(srcIn)  {
 	var lastPlayPos    = 0;
 	var currentPlayPos = 0;
 	var bufferingDetected = false;
-	
+
 	var checkBuffering = function(delta, playAnimation) {
 	    currentPlayPos = _this.video.currentTime;
 
@@ -54,7 +54,7 @@ exports.VideoHandler = function(srcIn)  {
 		  	_this.video.src = src;
 		  	_this.video.load();
         _this.video.loop = true;
-        
+
 		}
 	}
 
@@ -76,7 +76,7 @@ exports.VideoHandler = function(srcIn)  {
     _this.video.currentTime = 0;
 		return _this.videoTexture;
 	}
-	
+
 	this.getCurrentTime = function(duration) {
 		if (_this.video)
 			return duration * (_this.video.currentTime / _this.video.duration);
@@ -91,8 +91,10 @@ exports.VideoHandler = function(srcIn)  {
 		}
 		return false;
 	}
-	
-	//this should be handle by scene... check the sync at 
+
+	//this should be handle by scene... check the sync at
 	initialise();
 
-}
+}
+
+export { VideoHandler }

package/src/workers/geometryCSG.worker.js

@@ -1,73 +1,74 @@
-const Geometry = require('../primitives/geometry').Geometry;
-const THREE = require('three');
+
+import { Geometry } from '../primitives/geometry';
+import { GeometryCSGInternal } from './geometryCSGInternal';
+import * as THREE from 'three';
+
 const JSONLoader = THREE.BufferGeometryLoader;
+let core = undefined;
+
+var geometryFromJSON = function(object) {
+  var JSONParser = new JSONLoader();
+  var geometry = JSONParser.parse(object);
+  var material = new THREE.MeshPhongMaterial();
+  var mesh = new THREE.Mesh(geometry.geometry, material);
+  var host = new Geometry();
+  host.setMorph(mesh);
+  return host;
+}
+
+var initialise = function(object) {
+  var host = geometryFromJSON(object);
+  core = new GeometryCSGInternal(host);
+  self.postMessage({action:"message", message: "Initialised"});
+}
 
-module.exports = function (self) {
-	let core = undefined;
-	
-	var geometryFromJSON = function(object) {
-		var JSONParser = new JSONLoader();
-		var geometry = JSONParser.parse(object);
-		var material = new THREE.MeshPhongMaterial();
-    var mesh = new THREE.Mesh(geometry.geometry, material);
-    var host = new Geometry();
-    host.setMorph(mesh);
-    return host;
-	}
+var intersect = function(object) {
+  if (core) {
+    var guest = geometryFromJSON(object);
+    var result = core.intersect(guest);
+    var json = result.toBufferGeometry().toJSON();
+    self.postMessage({action: "result", object: json});
+  }
+}
+
+var subtract = function(object) {
+  if (core) {
+    var guest = geometryFromJSON(object);
+    var result = core.subtract(guest);
+    var json = result.toBufferGeometry().toJSON();
+    self.postMessage({action: "result", object: json});
+  }
+}
+
+var union = function(object) {
+  if (core) {
+    var guest = geometryFromJSON(object);
+    var result = core.union(guest);
+    var json = result.toBufferGeometry().toJSON();
+    self.postMessage({action: "result", object: json});
+  }
+}
+
+self.addEventListener('message',function (ev){
+    switch (ev.data.action) {
+        case 'initialise':
+              initialise(ev.data.object);
+              break;
+        case 'intersect':
+          intersect(ev.data.object);
+              break;
+        case 'subtract':
+          subtract(ev.data.object);
+              break;
+        case 'union':
+          union(ev.data.object);
+              break;
+        default:
+          throw 'Cannot handle specified action.';
+    }
+});
 
-	var initialise = function(object) {
-		var host = geometryFromJSON(object);
-		core = new (require('./geometryCSGInternal').GeometryCSGInternal)(host);
-		self.postMessage({action:"message", message: "Initialised"});
-	}
-	
-	var intersect = function(object) {
-		if (core) {
-			var guest = geometryFromJSON(object);
-			var result = core.intersect(guest);
-			var json = result.toBufferGeometry().toJSON();
-			self.postMessage({action: "result", object: json});
-		}
-	}
-	
-	var subtract = function(object) {
-		if (core) {
-			var guest = geometryFromJSON(object);
-			var result = core.subtract(guest);
-			var json = result.toBufferGeometry().toJSON();
-			self.postMessage({action: "result", object: json});
-		}
-	}
-	
-	var union = function(object) {
-		if (core) {
-			var guest = geometryFromJSON(object);
-			var result = core.union(guest);
-			var json = result.toBufferGeometry().toJSON();
-			self.postMessage({action: "result", object: json});
-		}
-	}
-	
-	self.addEventListener('message',function (ev){
-	    switch (ev.data.action) {
-        	case 'initialise':
-                initialise(ev.data.object);
-                break;
-        	case 'intersect':
-        		intersect(ev.data.object);
-                break;
-        	case 'subtract':
-        		subtract(ev.data.object);
-                break;
-        	case 'union':
-        		union(ev.data.object);
-                break;
-        	default:
-        		throw 'Cannot handle specified action.';
-	    }
-	});
-		
     //var test = ev.data;
     //self.postMessage(test, [test]);
-};
+
 

package/src/workers/geometryCSGInternal.js

@@ -1,7 +1,7 @@
-const THREE = require('three');
-const ThreeBSP = require('../three-js-csg')(THREE);
-const Geometry = require('../primitives/geometry').Geometry;
-const GeometryCSG = require('../geometryCSG').GeometryCSG;
+import * as THREE from 'three';
+import { ThreeBSPWrapper } from '../three-js-csg';
+const ThreeBSP = ThreeBSPWrapper(THREE);
+
 
 const GeometryCSGInternal = function (hostIn) {
   //ZincGeoemtry of the main geometry
@@ -9,17 +9,17 @@ const GeometryCSGInternal = function (hostIn) {
   if (hostIn && hostIn.isGeometry)
     host = hostIn;
   let hostCSG = undefined;
-  
+
   this.setGeometry = hostIn => {
     if (hostIn && hostIn.isGeometry)
 	  host = hostIn;
     hostCSG = undefined;
   }
-  
+
   this.setCSG = csg => {
 	  hostCSG = csg;
   }
-  
+
   const prepareCSG = guestGeometry => {
 	  if (host && host.morph && guestGeometry && guestGeometry.morph) {
 	      if (hostCSG === undefined)
@@ -29,7 +29,7 @@ const GeometryCSGInternal = function (hostIn) {
 	  }
 	  return undefined;
   };
-  
+
   this.intersect = guestGeometry => {
 	  const guestCSG = prepareCSG(guestGeometry);
 	  if (hostCSG && guestCSG) {
@@ -37,7 +37,7 @@ const GeometryCSGInternal = function (hostIn) {
 	  }
 	  return undefined;
   }
-  
+
   this.subtract = guestGeometry => {
 	  const guestCSG = prepareCSG(guestGeometry);
 	  if (hostCSG && guestCSG) {
@@ -45,7 +45,7 @@ const GeometryCSGInternal = function (hostIn) {
 	  }
 	  return undefined;
   }
-  
+
   this.union = guestGeometry => {
 	  const guestCSG = prepareCSG(guestGeometry);
 	  if (hostCSG && guestCSG) {
@@ -55,4 +55,5 @@ const GeometryCSGInternal = function (hostIn) {
   }
 };
 
-exports.GeometryCSGInternal = GeometryCSGInternal;
+export { GeometryCSGInternal };
+

package/src/zinc.js

@@ -1,5 +1,29 @@
-require("url-polyfill");
-const PACKAGE = require('../package.json');
+import * as THREE from 'three';
+import PACKAGE from '../package.json';
+
+// Import all internal primitives and modules
+import { Geometry } from './primitives/geometry';
+import { Glyph } from './primitives/glyph';
+import { Glyphset } from './primitives/glyphset';
+import { Pointset } from './primitives/pointset';
+import { Label } from './primitives/label';
+import { Lines } from './primitives/lines';
+import { TextureArray } from './texture/textureArray';
+import { TextureSlides } from './primitives/textureSlides';
+import { Renderer } from './renderer';
+import { Scene } from './scene';
+//import { GeometryCSG } from './geometryCSG';
+//import { GlyphsetCSG } from './glyphsetCSG';
+import {
+  Viewport,
+  CameraControls,
+  SmoothCameraTransition,
+  RayCaster,
+  CameraAutoTumble,
+  StereoEffect
+} from './controls';
+import { loadExternalFile, loadExternalFiles } from './utilities';
+
 const version = PACKAGE.version;
 
 /**
@@ -8,33 +32,33 @@ const version = PACKAGE.version;
  * @namespace
  * @author Alan Wu
  */
-
 const Zinc = function() {
   this.Revision = version;
   this.defaultMaterialColor = 0xFFFFFF;
   this.defaultOpacity = 1.0;
   this.modelPrefix = undefined;
-  this.Geometry = require('./primitives/geometry').Geometry;
-  this.Glyph = require('./primitives/glyph').Glyph;
-  this.Glyphset = require('./primitives/glyphset').Glyphset;
-  this.Pointset = require('./primitives/pointset').Pointset;
-  this.Label = require('./primitives/label').Label;
-  this.Lines = require('./primitives/lines').Lines;
-  this.TextureArray = require('./texture/textureArray').TextureArray;
-  this.TextureSlides = require('./primitives/textureSlides').TextureSlides;
-  this.Renderer = require('./renderer').Renderer;
-  this.Scene = require('./scene').Scene;
-  this.GeometryCSG = require('./geometryCSG').GeometryCSG;
-  this.GlyphsetCSG = require('./glyphsetCSG').GlyphsetCSG;
-  this.Viewport = require('./controls').Viewport;
-  this.CameraControls = require('./controls').CameraControls;
-  this.SmoothCameraTransition = require('./controls').SmoothCameraTransition;
-  this.RayCaster = require('./controls').RayCaster;
-  this.CameraAutoTumble = require('./controls').CameraAutoTumble;
-  this.StereoEffect = require('./controls').StereoEffect;
-  this.loadExternalFile = require('./utilities').loadExternalFile;
-  this.loadExternalFiles = require('./utilities').loadExternalFiles;
-  this.THREE = require('three');
+  // Assign hoisted modules to the instance
+  this.Geometry = Geometry;
+  this.Glyph = Glyph;
+  this.Glyphset = Glyphset;
+  this.Pointset = Pointset;
+  this.Label = Label;
+  this.Lines = Lines;
+  this.TextureArray = TextureArray;
+  this.TextureSlides = TextureSlides;
+  this.Renderer = Renderer;
+  this.Scene = Scene;
+  //this.GeometryCSG = GeometryCSG;
+  //this.GlyphsetCSG = GlyphsetCSG;
+  this.Viewport = Viewport;
+  this.CameraControls = CameraControls;
+  this.SmoothCameraTransition = SmoothCameraTransition;
+  this.RayCaster = RayCaster;
+  this.CameraAutoTumble = CameraAutoTumble;
+  this.StereoEffect = StereoEffect;
+  this.loadExternalFile = loadExternalFile;
+  this.loadExternalFiles = loadExternalFiles;
+  this.THREE = THREE;
 };
 
-module.exports = new Zinc();
+export default new Zinc();

package/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    outDir: 'build',
+    minify: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/zinc.js'),
+      name: 'Zinc',
+      fileName: () => 'zinc.js',
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      external: (id) => !id.startsWith('.') && !path.isAbsolute(id) && !id.includes('package.json'),
+      output: {
+        extend: true,
+        globals: {
+          'css-element-queries': 'cssElememtQueries',
+          three: 'THREE',
+          'three-spritetext': 'SpriteText',
+          'three/examples/jsm/loaders/GLTFLoader': 'GLTFLoader'
+        }
+      }
+    },
+    assetsInlineLimit: 8192,
+  },
+});