zincjs 1.12.3 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {

package/src/primitives/textureSlides.js

@@ -19,7 +19,6 @@ const TextureSlides = function (textureIn) {
   this.morph = new THREE.Group();
   this.group = this.morph;
   this.morph.userData = this;
-  let edgesLine = undefined;
   let flipY = true;
 
   /**
@@ -60,7 +59,7 @@ const TextureSlides = function (textureIn) {
     mesh.position.z = 0;
     switch (settings.direction) {
       case "x":
-        const rotation = -Math.PI / 2;
+        const rotation = flipY ? -Math.PI / 2 : Math.PI / 2;
         mesh.rotation.y = rotation;
         uniforms.direction.value = 1;
         uniforms.slide.value.set(settings.value, 0, 0);
@@ -304,13 +303,9 @@ const TextureSlides = function (textureIn) {
     this.boundingBoxUpdateRequired = true;
   }
 
-  this.setRenderOrder = (order) => {
-    //multiilayers
-    this.morph.renderOrder = order;
-  }
-
   this.initialise = (textureData, finishCallback) => {
     if (textureData) {
+
       const locations = textureData.locations;
       if (locations && locations.length > 0) {
         this.applyTransformation(locations[0].orientation,
@@ -325,25 +320,6 @@ const TextureSlides = function (textureIn) {
       }
     }
   }
-
-  this.showEdges = (color) => {
-    if (!edgesLine) {
-      const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
-      geometry.translate(0.5, 0.5, 0.5);
-      const edges = new THREE.EdgesGeometry( geometry ); 
-      edgesLine = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color } ) );
-      this.group.add( edgesLine );
-    } else {
-      edgesLine.material.color = color;
-    }
-    edgesLine.visible = true;
-  }
-
-  this.hideEdges = () => {
-    if (edgesLine) {
-      edgesLine.visible = false;
-    }
-  }
 }
 
 TextureSlides.prototype = Object.create((require('./texturePrimitive').TexturePrimitive).prototype);

package/src/scene.js

@@ -5,6 +5,7 @@ const SceneExporter = require('./sceneExporter').SceneExporter;
 const Viewport = require('./controls').Viewport;
 const createBufferGeometry = require('./utilities').createBufferGeometry;
 const getCircularTexture = require('./utilities').getCircularTexture;
+const createNewSpriteText = require('./utilities').createNewSpriteText;
 let uniqueiId = 0;
 
 const getUniqueId = function () {
@@ -42,6 +43,7 @@ exports.Scene = function (containerIn, rendererIn) {
   let zincObjectRemovedCallbacks = {};
   let zincObjectRemovedCallbacks_id = 0;
   const scene = new THREE.Scene();
+  const miniAxesScene = new THREE.Scene();
   const rootRegion = new (require('./region').Region)(undefined, this);
   scene.add(rootRegion.getGroup());
   const tempGroup = new THREE.Group();
@@ -63,12 +65,13 @@ exports.Scene = function (containerIn, rendererIn) {
   this.autoClearFlag = true;
   this.displayMarkers = false;
   this.displayMinimap = false;
+  this.displayMiniAxes = false;
   this.minimapScissor = {
     x_offset: 16,
     y_offset: 16,
     width: 128,
     height: 128,
-    align: "top-left",
+    align: "top-right",
     updateRequired: true
   };
   let scissor = {x: 0,  y: 0};
@@ -80,6 +83,11 @@ exports.Scene = function (containerIn, rendererIn) {
   let markerCluster = new MarkerCluster(this);
   markerCluster.disable();
   scene.add(markerCluster.group);
+  let axisDisplay = {
+    main: [],
+    mini: [],
+  }
+  const _v3 = new THREE.Vector3( 0, 0, 0 );
 
   const getDrawingWidth = () => {
     if (container)
@@ -668,7 +676,7 @@ exports.Scene = function (containerIn, rendererIn) {
   }
 
   const renderMinimap = renderer => {
-    if (this.displayMinimap === true) {
+    if (this.displayMinimap || this.displayMiniAxes) {
       renderer.setScissorTest(true);
       renderer.getSize(_markerTarget);
       if (this.minimapScissor.updateRequired) {
@@ -691,9 +699,13 @@ exports.Scene = function (containerIn, rendererIn) {
         this.minimapScissor.width,
         this.minimapScissor.height); 
       minimap.updateCamera();
-      scene.add(minimap.mask);
-      renderer.render(scene, minimap.camera);
-      scene.remove(minimap.mask);
+      if (this.displayMiniAxes) {
+        renderer.render(miniAxesScene, minimap.camera);
+      } else {
+        scene.add(minimap.mask);
+        renderer.render(scene, minimap.camera);
+        scene.remove(minimap.mask);
+      }
       renderer.setScissorTest(false);
       renderer.setViewport(0, 0, _markerTarget.x, _markerTarget.y);
     }
@@ -799,8 +811,7 @@ exports.Scene = function (containerIn, rendererIn) {
    */
   this.alignBoundingBoxToCameraView = (boundingBox, transitionTime) => {
     if (boundingBox) {
-      const center = new THREE.Vector3();
-      boundingBox.getCenter(center);
+      boundingBox.getCenter(_v3);
       const viewport = this.getZincCameraControls().getCurrentViewport();
       const target = new THREE.Vector3(viewport.targetPosition[0],
         viewport.targetPosition[1], viewport.targetPosition[2]);
@@ -867,10 +878,9 @@ exports.Scene = function (containerIn, rendererIn) {
    */
   this.setCameraTargetToObject = zincObject => {
     if (this.objectIsInScene(zincObject)) {
-      const center = new THREE.Vector3();
       const boundingBox = zincObject.getBoundingBox();
       const viewport = this.getZincCameraControls().getCurrentViewport();
-      boundingBox.getCenter(center);
+      boundingBox.getCenter(_v3);
       const target = new THREE.Vector3(viewport.targetPosition[0],
         viewport.targetPosition[1], viewport.targetPosition[2]);
       const eyePosition = new THREE.Vector3(viewport.eyePosition[0],
@@ -1274,7 +1284,8 @@ exports.Scene = function (containerIn, rendererIn) {
       region = rootRegion.createChildFromPath(regionPath);
     }
     const box = boundingBox ? boundingBox : this.getBoundingBox();
-    const dim = new THREE.Vector3().subVectors(box.max, box.min);
+    _v3.set(0.0, 0.0, 0.0);
+    const dim = _v3.subVectors(box.max, box.min);
     const boxGeo = new THREE.BoxGeometry(dim.x, dim.y, dim.z);
     const primitive = region.createGeometryFromThreeJSGeometry(
       group, boxGeo, colour, opacity, visibility, 10000);
@@ -1296,7 +1307,8 @@ exports.Scene = function (containerIn, rendererIn) {
         region = rootRegion.createChildFromPath(regionPath);
       }
       const box = boundingBox ? boundingBox : this.getBoundingBox();
-      const dim = new THREE.Vector3().subVectors(box.max, box.min);
+      _v3.set(0.0, 0.0, 0.0);
+      const dim = _v3.subVectors(box.max, box.min);
       const directions = ["x", "y", "z"];
       const primitives = [];
       let index = 0;
@@ -1350,6 +1362,99 @@ exports.Scene = function (containerIn, rendererIn) {
     }
     this.forcePickableObjectsUpdate = true;
   }
-}
 
+  /*
+	 * Destory static axis display object
+	 */
+  this.destroyAxisDisplay = () => {
+    this.displayMiniAxes = false;
+    if (axisDisplay.main) {
+      this.enableAxisDisplay(false, false);
+      axisDisplay.main.forEach(axis => {
+        if (axis.dispose) { 
+          axis.dispose();
+        }
+      });
+    }
+    if (axisDisplay.mini) {
+      this.enableAxisDisplay(false, true);
+      axisDisplay.mini.forEach(axis => {
+        if (axis.dispose) { 
+          axis.dispose();
+        }
+      });
+    }
+    axisDisplay = {
+      main: [],
+      mini: [],
+    };
+  }
+
+  /*
+	 * Create static axis display object
+	 */
+  this.createAxisDisplay = (fitBoundingBox = false) => {
+    this.destroyAxisDisplay();
+    const XYZ = [
+      {
+        name: "x",
+        dir: new THREE.Vector3(1, 0, 0),
+        colour: "red",
+        hex: 0xFF5555
+      },
+      {
+        name: "y",
+        dir: new THREE.Vector3(0, 1, 0),
+        colour: "green",
+        hex: 0x55FF55
+      },
+      {
+        name: "z",
+        dir: new THREE.Vector3(0, 0, 1),
+        colour: "blue",
+        hex: 0x5555FF
+      }
+    ];
+    const boundingBox = this.getBoundingBox();
+    const size = boundingBox.min.distanceTo(boundingBox.max);
+    let origin = new THREE.Vector3(0, 0, 0);
+    if (fitBoundingBox) {
+      origin.copy(boundingBox.min);
+    }
+    XYZ.forEach((xyzObj) => {
+      const arrowHelper = new THREE.ArrowHelper(xyzObj.dir, origin, size, xyzObj.hex);
+      axisDisplay.main.push(arrowHelper);
+      const miniArrowHelper = new THREE.ArrowHelper(xyzObj.dir, boundingBox.getCenter(_v3), size / 2, xyzObj.hex);
+      axisDisplay.mini.push(miniArrowHelper);
+
+      /*
+      const miniLabel = createNewSpriteText(xyzObj.name, 0.1, xyzObj.colour, "Asap", 120, 400);
+      const miniPosition = xyzObj.dir.clone().multiplyScalar(size/2).add(_v3[xyzObj.name]);
+      miniLabel.position.set(miniPosition.x, miniPosition.y, miniPosition.z);
+      axisDisplay.mini.push(miniLabel);
+      */
+
+      const axesLabel = createNewSpriteText(xyzObj.name, 0.036, xyzObj.colour, "Asap", 120, 700);
+      const position = xyzObj.dir.clone().multiplyScalar(size).add(origin);
+      axesLabel.position.set(position.x, position.y, position.z);
+      axisDisplay.main.push(axesLabel);
+    })
+  }
 
+  /*
+	 * Enable static axis display, createAxisDisplay must be called
+   * before the axis can be display.
+	 */
+  this.enableAxisDisplay = (enable, miniaxes = false) => {
+    if (miniaxes && axisDisplay?.mini?.length) {
+      this.displayMiniAxes = enable;
+      axisDisplay.mini.forEach(axis => {
+        enable ? miniAxesScene.add(axis) : miniAxesScene.remove(axis);
+      });
+    } else if (!miniaxes && axisDisplay.main) {
+      axisDisplay.main.forEach(axis => {
+        enable ? scene.add(axis) : scene.remove(axis);
+      });
+    }
+  }
+}

package/src/texture/textureArray.js

@@ -78,9 +78,8 @@ const TextureArray = function () {
       if (options) {
         if (options.vs && options.fs) {
           let transparent = true;
-          if ("transparent" in options) {
+          if (options.transparent)
             transparent = options.transparent;
-          }
           let side = THREE.FrontSide;
           if (options.side)
             side = options.side;