zincjs 1.2.0 → 1.4.0-beta.0

package/src/primitives/zincObject.js

@@ -1,5 +1,4 @@
 const THREE = require('three');
-const THREEGeometry = require('../three/Geometry').Geometry;
 
 let uniqueiId = 0;
 
@@ -20,9 +19,8 @@ const ZincObject = function() {
   this.geometry = undefined;
   // THREE.Mesh
   this.morph = undefined;
-  // THREE.Mesh - for utilities purpose such as rendering 
-  // transparent surfaces - one for front face and one for back face.
-  this.secondaryMesh = undefined;
+  this.group = new THREE.Group();
+  this._lod = new (require("./lod").LOD)(this);
   /**
 	 * Groupname given to this geometry.
 	 */
@@ -46,12 +44,17 @@ const ZincObject = function() {
   this.closestVertexIndex = -1;
   this.boundingBoxUpdateRequired = true;
   this.cachedBoundingBox = new THREE.Box3();
-  this._vertex = new THREE.Vector3();
   this.anatomicalId = undefined;
   this.region = undefined;
   this.animationClip = undefined;
   this.markerMode = "inherited";
   this.uuid = getUniqueId();
+  this._v1 = new THREE.Vector3();
+  this._v2 = new THREE.Vector3();
+  this._b1 = new THREE.Box3();
+  this.center = new THREE.Vector3();
+  this.radius = 0;
+  this.visible = true;
 }
 
 /**
@@ -77,7 +80,7 @@ ZincObject.prototype.getDuration = function() {
 
 /**
  * Set the region this object belongs to.
- * 
+ *
  * @param {Region} region
  */
 ZincObject.prototype.setRegion = function(region) {
@@ -94,61 +97,42 @@ ZincObject.prototype.getRegion = function() {
 }
 
 /**
- * Convert a {THREE.Geometry} into a {THREE.BufferGeometry}.
+ * Get the threejs object3D. 
+ * 
+ * @return {Object}
  */
-ZincObject.prototype.toBufferGeometry = function(geometryIn, options) {
-  let geometry = undefined;
-  if (geometryIn instanceof THREEGeometry) {
-    if (options.localTimeEnabled && !geometryIn.morphNormalsReady && 
-      (geometryIn.morphNormals == undefined || geometryIn.morphNormals.length == 0))
-      geometryIn.computeMorphNormals();
-    geometry = geometryIn.toIndexedBufferGeometry();
-    if (options.localMorphColour) {
-      require("../utilities").copyMorphColorsToIndexedBufferGeometry(geometryIn, geometry);
-    }
-  } else if (geometryIn instanceof THREE.BufferGeometry) {
-    geometry = geometryIn.clone();
-  }
-  geometry.colorsNeedUpdate = true;
-  geometry.computeBoundingBox();
-  geometry.computeBoundingSphere();
-  if (geometryIn._video)
-    geometry._video = geometryIn._video;
-  return geometry;
+ ZincObject.prototype.getMorph = function() {
+  const morph =  this._lod.getCurrentMorph();
+  return morph ? morph : this.morph;
 }
 
 /**
- * Handle transparent mesh, create a clone for backside rendering if it is
- * transparent.
+ * Get the threejs object3D. 
+ * 
+ * @return {Object}
  */
-ZincObject.prototype.checkAndCreateTransparentMesh = function() {
-  if (this.isGeometry && this.morph.material && this.morph.material.transparent) {
-    if (!this.secondaryMesh) {
-      let secondaryMaterial = this.morph.material.clone();
-      secondaryMaterial.side =  THREE.FrontSide;
-      this.secondaryMesh = new THREE.Mesh(this.morph.geometry, secondaryMaterial);
-      this.secondaryMesh.renderOrder = this.morph.renderOrder + 1;
-      this.secondaryMesh.userData = this;
-      this.secondaryMesh.name = this.groupName;
-    }
-    this.morph.material.side = THREE.BackSide;
-    this.morph.material.needsUpdate = true;
-    this.morph.add(this.secondaryMesh);
-    this.animationGroup.add(this.secondaryMesh);
-  }
+ ZincObject.prototype.getGroup = function() {
+  return this.group;
 }
 
 /**
- * Handle transparent mesh, remove a clone for backside rendering if it is
+ * Set the internal threejs object3D. 
+ */
+ ZincObject.prototype.setMorph = function(mesh) {
+  this.morph = mesh;
+  this.group.add(this.morph);
+  //this is the base level object
+  const distance = this._lod.calculateDistance("far");
+  this._lod.addLevel(mesh, distance);
+  this._lod.setMaterial(mesh.material);
+}
+
+/**
+ * Handle transparent mesh, create a clone for backside rendering if it is
  * transparent.
  */
-ZincObject.prototype.checkAndRemoveTransparentMesh = function() {
-  if (this.isGeometry && this.secondaryMesh) {
-    this.morph.remove(this.secondaryMesh);
-    this.animationGroup.uncache(this.secondaryMesh);
-    this.animationGroup.remove(this.secondaryMesh);
-  }
-  this.morph.material.side = THREE.DoubleSide;
+ZincObject.prototype.checkTransparentMesh = function(transparentChanged) {
+  return;
 }
 
 /**
@@ -161,16 +145,20 @@ ZincObject.prototype.checkAndRemoveTransparentMesh = function() {
  * time dependent.
  */
 ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour) {
+  //Note: we assume all layers are consistent with time frame
+  //Thus adding them to the same animation group should work.
+  //This step is only required for the primary (level 0) mesh.
   this.animationGroup = new THREE.AnimationObjectGroup(mesh);
   this.mixer = new THREE.AnimationMixer(this.animationGroup);
+  const geometry = mesh.geometry;
   this.geometry = mesh.geometry;
   this.clipAction = undefined;
-  if (this.geometry && this.geometry.morphAttributes) {
-    let morphAttribute = this.geometry.morphAttributes.position;
+  if (geometry && geometry.morphAttributes) {
+    let morphAttribute = geometry.morphAttributes.position;
     if (!morphAttribute) {
-      morphAttribute = this.geometry.morphAttributes.color ?
-        this.geometry.morphAttributes.color :
-        this.geometry.morphAttributes.normal;
+      morphAttribute = geometry.morphAttributes.color ?
+        geometry.morphAttributes.color :
+        geometry.morphAttributes.normal;
     }
     if (morphAttribute) {
       this.animationClip = THREE.AnimationClip.CreateClipsFromMorphTargetSequences(
@@ -186,16 +174,16 @@ ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour
   }
   this.timeEnabled = localTimeEnabled;
   this.morphColour = localMorphColour;
-  this.morph = mesh;
-  this.morph.userData = this;
-  this.morph.matrixAutoUpdate = false;
-  this.checkAndCreateTransparentMesh();
+  mesh.userData = this;
+  mesh.matrixAutoUpdate = false;
+  this.setMorph(mesh);
+  this.checkTransparentMesh(true);
   if (this.timeEnabled) {
     this.setFrustumCulled(false);
   } else {
     if (this.morphColour) {
-      this.geometry.setAttribute('morphTarget0', this.geometry.getAttribute( 'position' ) );
-      this.geometry.setAttribute('morphTarget1', this.geometry.getAttribute( 'position' ) );
+      geometry.setAttribute('morphTarget0', geometry.getAttribute( 'position' ) );
+      geometry.setAttribute('morphTarget1', geometry.getAttribute( 'position' ) );
     }
   }
   this.boundingBoxUpdateRequired = true;
@@ -208,12 +196,7 @@ ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour
  */
 ZincObject.prototype.setName = function(groupNameIn) {
   this.groupName = groupNameIn;
-  if (this.morph) {
-    this.morph.name = this.groupName;
-  }
-  if (this.secondaryMesh) {
-    this.secondaryMesh.name = this.groupName;
-  }
+  this._lod.setName(groupNameIn);
 }
 
 /**
@@ -231,32 +214,6 @@ ZincObject.prototype.getCurrentTime = function() {
   }
 }
 
-const updateMorphColorAttribute = function(targetGeometry, morph) {
-  if (morph && targetGeometry && targetGeometry.morphAttributes &&
-    targetGeometry.morphAttributes[ "color" ]) {
-    const morphColors = targetGeometry.morphAttributes[ "color" ];
-    const influences = morph.morphTargetInfluences;
-    const length = influences.length;
-    targetGeometry.deleteAttribute( 'morphColor0' );
-    targetGeometry.deleteAttribute( 'morphColor1' );
-    let bound = 0;
-    let morphArray = [];
-    for (let i = 0; (1 > bound) || (i < length); i++) {
-      if (influences[i] > 0) {
-        bound++;
-        morphArray.push([i, influences[i]]);
-      }
-    }
-    if (morphArray.length == 2) {
-      targetGeometry.setAttribute('morphColor0', morphColors[ morphArray[0][0] ] );
-      targetGeometry.setAttribute('morphColor1', morphColors[ morphArray[1][0] ] );
-    } else if (morphArray.length == 1) {
-      targetGeometry.setAttribute('morphColor0', morphColors[ morphArray[0][0] ] );
-      targetGeometry.setAttribute('morphColor1', morphColors[ morphArray[0][0] ] );
-    }
-  }
-}
-
 /**
  * Set the local time of this geometry.
  * 
@@ -290,7 +247,8 @@ ZincObject.prototype.setMorphTime = function(time) {
   }
   if (timeChanged) {
     this.boundingBoxUpdateRequired = true;
-    updateMorphColorAttribute(this.geometry, this.morph);
+    const morph = this._lod.getCurrentMorph();
+    this._lod.updateMorphColorAttribute(true);
     if (this.timeEnabled)
       this.markerUpdateRequired = true;
   }
@@ -312,7 +270,7 @@ ZincObject.prototype.isTimeVarying = function() {
  * 
  */
 ZincObject.prototype.getVisibility = function() {
-  return this.morph.visible;
+  return this.visible;
 }
 
 /**
@@ -321,10 +279,15 @@ ZincObject.prototype.getVisibility = function() {
  * @param {Boolean} visible - a boolean flag indicate the visibility to be set 
  */
 ZincObject.prototype.setVisibility = function(visible) {
-  if (this.morph.visible !== visible) {
-    this.morph.visible = visible;
+  this.visible = visible;
+  this.group.visible = visible;
+  /*
+  const morph = this.getMorph();
+  if (morph.visible !== visible) {
+    morph.visible = visible;
     if (this.region) this.region.pickableUpdateRequired = true;
   }
+  */
 }
 
 /**
@@ -335,20 +298,14 @@ ZincObject.prototype.setVisibility = function(visible) {
  * can be any value between from 0 to 1.0.
  */
 ZincObject.prototype.setAlpha = function(alpha) {
-  const material = this.morph.material;
+  const material = this._lod._material;
   let isTransparent = false;
   if (alpha  < 1.0)
     isTransparent = true;
   let transparentChanged = material.transparent == isTransparent ? false : true;
   material.opacity = alpha;
   material.transparent = isTransparent;
-  if (transparentChanged)
-    if (isTransparent)
-      this.checkAndCreateTransparentMesh();
-    else
-      this.checkAndRemoveTransparentMesh();
-  if (this.secondaryMesh && this.secondaryMesh.material)
-    this.secondaryMesh.material.opacity = alpha;
+  this.checkTransparentMesh(transparentChanged);
 }
 
 /**
@@ -359,9 +316,8 @@ ZincObject.prototype.setAlpha = function(alpha) {
  * @param {Boolean} flag - Set frustrum culling on/off based on this flag.
  */
 ZincObject.prototype.setFrustumCulled = function(flag) {
-  if (this.morph) {
-    this.morph.frustumCulled = flag;
-  }
+  //multilayers - set for all layers
+  this._lod.setFrustumCulled(flag);
 }
 
 /**
@@ -371,10 +327,9 @@ ZincObject.prototype.setFrustumCulled = function(flag) {
  * @param {Boolean} vertexColors - Set display with vertex color on/off.
  */
 ZincObject.prototype.setVertexColors = function(vertexColors) {
-  this.morph.material.vertexColors = vertexColors;
-  this.geometry.colorsNeedUpdate = true;
-  if (this.secondaryMesh && this.secondaryMesh.material)
-    this.secondaryMesh.material.vertexColors = vertexColors;
+  //multilayers - set for all
+  this._lod.setVertexColors(vertexColors);
+
 }
 
 /**
@@ -383,8 +338,8 @@ ZincObject.prototype.setVertexColors = function(vertexColors) {
  * @return {THREE.Color}
  */
 ZincObject.prototype.getColour = function() {
-  if (this.morph && this.morph.material)
-    return this.morph.material.color;
+  if (this._lod._material)
+    return this._lod._material.color;
 	return undefined;
 }
   
@@ -394,10 +349,7 @@ ZincObject.prototype.getColour = function() {
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setColour = function(colour) {
-  this.morph.material.color = colour;
-  if (this.secondaryMesh && this.secondaryMesh.material)
-    this.secondaryMesh.material.color = colour;
-  this.geometry.colorsNeedUpdate = true;
+  this._lod.setColour(colour);
 }
 
 /**
@@ -407,8 +359,8 @@ ZincObject.prototype.setColour = function(colour) {
  */
 ZincObject.prototype.getColourHex = function() {
   if (!this.morphColour) {
-    if (this.morph && this.morph.material && this.morph.material.color)
-      return this.morph.material.color.getHexString();
+    if (this._lod._material && this._lod._material.color)
+      return this._lod._material.color.getHexString();
   }
   return undefined;
 }
@@ -419,9 +371,10 @@ ZincObject.prototype.getColourHex = function() {
  * @param {String} hex - The colour value in hex form.
  */
 ZincObject.prototype.setColourHex = function(hex) {
-  this.morph.material.color.setHex(hex);
-  if (this.secondaryMesh && this.secondaryMesh.material)
-    this.secondaryMesh.material.color.setHex(hex);
+  this._lod._material.color.setHex(hex);
+  if (this._lod._secondaryMaterial) {
+    this._lod._secondaryMaterial.color.setHex(hex);
+  }
 }
 
 /**
@@ -430,13 +383,7 @@ ZincObject.prototype.setColourHex = function(hex) {
  * @param {THREE.Material} material - Material to be set for this geometry.
  */
 ZincObject.prototype.setMaterial = function(material) {
-  this.morph.material = material;
-  this.geometry.colorsNeedUpdate = true;
-  if (this.secondaryMesh && this.secondaryMesh.material) {
-    this.secondaryMesh.material.dispose();
-    this.secondaryMesh.material = material.clone()
-    this.secondaryMesh.material.side = THREE.FrontSide;
-  }
+  this._lod.setMaterial(material);
 }
 
 /**
@@ -446,18 +393,17 @@ ZincObject.prototype.setMaterial = function(material) {
  */
 ZincObject.prototype.getClosestVertexIndex = function() {
   let closestIndex = -1;
-  if (this.morph) {
-    let position = this.morph.geometry.attributes.position;
-    let boundingBox = new THREE.Box3().setFromBufferAttribute(position);
-    let center = new THREE.Vector3();
-    boundingBox.getCenter(center);
-    if (position && boundingBox) {
+  const morph = this.getMorph();
+  if (morph) {
+    let position = morph.geometry.attributes.position;
+    this._b1.setFromBufferAttribute(position);
+    this._b1.getCenter(this._v1);
+    if (position) {
       let distance = -1;
       let currentDistance = 0;
-      let current = new THREE.Vector3();
       for (let i = 0; i < position.count; i++) {
-        current.fromArray(position.array, i * 3);
-        currentDistance = current.distanceTo(center);
+        this._v2.fromArray(position.array, i * 3);
+        currentDistance = this._v2.distanceTo(this._v1);
         if (distance == -1)
           distance = currentDistance;
         else if (distance > (currentDistance)) {
@@ -488,9 +434,9 @@ ZincObject.prototype.getClosestVertex = function(applyMatrixWorld) {
       for (let i = 0; i < influences.length; i++) {
         if (influences[i] > 0) {
           found = true;
-          this._vertex.fromArray(
+          this._v1.fromArray(
             attributes.position[i].array, this.closestVertexIndex * 3);
-          position.add(this._vertex.multiplyScalar(influences[i]));
+          position.add(this._v1.multiplyScalar(influences[i]));
         }
       }
       if (found) {
@@ -502,7 +448,8 @@ ZincObject.prototype.getClosestVertex = function(applyMatrixWorld) {
       return applyMatrixWorld ? position.applyMatrix4(this.morph.matrixWorld) : position;
     }
   }
-  this.getBoundingBox().getCenter(position);
+  this.getBoundingBox();
+  position.copy(this.center);
   return applyMatrixWorld ? position.applyMatrix4(this.morph.matrixWorld) : position;
 }
 
@@ -512,34 +459,13 @@ ZincObject.prototype.getClosestVertex = function(applyMatrixWorld) {
  * @return {THREE.Box3}.
  */
 ZincObject.prototype.getBoundingBox = function() {
-  if (this.morph && this.morph.visible) {
+  let morph = this._lod.getCurrentMorph();
+  if (morph && morph.visible) {
     if (this.boundingBoxUpdateRequired) {
-      let influences = this.morph.morphTargetInfluences;
-      let attributes = undefined;
-      if (this.morph.geometry)
-        attributes = this.morph.geometry.morphAttributes;
-      let found = false;
-      if (influences && attributes && attributes.position) {
-        let min = new THREE.Vector3();
-        let max = new THREE.Vector3();
-        let box = new THREE.Box3();
-        for (let i = 0; i < influences.length; i++) {
-          if (influences[i] > 0) {
-            found = true;
-            box.setFromArray(attributes.position[i].array);
-            min.add(box.min.multiplyScalar(influences[i]));
-            max.add(box.max.multiplyScalar(influences[i]));
-          }
-        }
-        if (found)
-          this.cachedBoundingBox.set(min, max);
-      }
-      if (!found) {
-        this.cachedBoundingBox.setFromBufferAttribute(
-          this.morph.geometry.attributes.position);
-      }
-      this.morph.updateWorldMatrix();
-      this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+      require("../utilities").getBoundingBox(morph, this.cachedBoundingBox,
+        this._b1, this._v1, this._v2);
+      this.cachedBoundingBox.getCenter(this.center);
+      this.radius = this.center.distanceTo(this.cachedBoundingBox.max);
       this.boundingBoxUpdateRequired = false;
     }
     return this.cachedBoundingBox;
@@ -551,17 +477,12 @@ ZincObject.prototype.getBoundingBox = function() {
  * Clear this geometry and free the memory.
  */
 ZincObject.prototype.dispose = function() {
-  if (this.morph && this.morph.geometry)
-    this.morph.geometry.dispose();
-  if (this.morph && this.morph.material)
-    this.morph.material.dispose();
-  if (this.secondaryMesh && this.secondaryMesh.material)
-    this.secondaryMesh.material.dispose();
-  if (this.geometry)
-    this.geometry.dispose();
+  //multilayyers
+  this._lod.dispose();
   this.animationGroup = undefined;
   this.mixer = undefined;
   this.morph = undefined;
+  this.group = undefined;
   this.clipAction = undefined;
   this.groupName = undefined;
 }
@@ -606,13 +527,15 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
       }
       if (!this.marker.isEnabled()) {
         this.marker.enable();
-        this.morph.add(this.marker.morph);
+        this.group.add(this.marker.morph);
+        //this._lod.toggleMarker(this.marker.morph, true);
       }
     }
   } else {
     if (this.marker && this.marker.isEnabled()) {
       this.marker.disable();
-      this.morph.remove(this.marker.morph);
+      this.group.remove(this.marker.morph);
+      //this._lod.toggleMarker(this.marker.morph, false);
     }
     this.markerUpdateRequired = true;
   }
@@ -625,19 +548,15 @@ ZincObject.prototype.processMarkerVisual = function(min, max) {
 }
 
 ZincObject.prototype.initiateMorphColor = function() {
-  if ((this.morphColour == 1) && (typeof this.geometry !== "undefined") &&
-      ((this.morph.material.vertexColors == THREE.VertexColors) ||
-      (this.morph.material.vertexColors == true))) {
-        updateMorphColorAttribute(this.geometry, this.morph);
-      }
+  //Multilayers - set all
+  if (this.morphColour == 1) {
+    this._lod.updateMorphColorAttribute(false);
+  }
 }
 
 ZincObject.prototype.setRenderOrder = function(renderOrder) {
-  if (this.morph && (renderOrder !== undefined)) {
-    this.morph.renderOrder = renderOrder;
-    if (this.secondaryMesh)
-      this.secondaryMesh.renderOrder = this.morph.renderOrder + 1;
-  }
+  //multiilayers
+  this._lod.setRenderOrder(renderOrder);
 }
 
 /**
@@ -680,12 +599,18 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
     } else {
       this.markerMode = "inherited";
     }
-    if (this.region) this.region.pickableUpdateRequired = true;
+    if (this.region) {
+      this.region.pickableUpdateRequired = true;
+    }
   }
 }
 
 //Update the geometry and colours depending on the morph.
-ZincObject.prototype.render = function(delta, playAnimation, options) {
+ZincObject.prototype.render = function(delta, playAnimation,
+  cameraControls, options) {
+  if (this.visible && !(this.timeEnabled && playAnimation)) {
+    this._lod.update(cameraControls, this.center);
+  }
   if (playAnimation == true)
   {
     if ((this.clipAction) && this.isTimeVarying()) {
@@ -697,15 +622,25 @@ ZincObject.prototype.render = function(delta, playAnimation, options) {
         targetTime = targetTime - this.duration;
       this.inbuildTime = targetTime;
     }
-    if (delta != 0) {
+    //multilayers
+    if (this.visible && delta != 0) {
       this.boundingBoxUpdateRequired = true;
-      if ((this.morphColour == 1) && (typeof this.geometry !== "undefined") &&
-         ((this.morph.material.vertexColors == THREE.VertexColors) ||
-         (this.morph.material.vertexColors == true)))
-        updateMorphColorAttribute(this.geometry, this.morph);
+      if (this.morphColour == 1) {
+        this._lod.updateMorphColorAttribute(true);
+      }
     }
   }
   this.updateMarker(playAnimation, options);
 }
 
+
+/**
+ * Add lod from an url into the lod object.
+ */
+ZincObject.prototype.addLOD = function(loader, level, url, preload) {
+  this._lod.addLevelFromURL(loader, level, url, preload);
+}
+
+
+
 exports.ZincObject = ZincObject;

package/src/region.js

@@ -292,12 +292,14 @@ let Region = function (parentIn) {
   this.addZincObject = zincObject => {
     if (zincObject) {
       zincObject.setRegion(this);
-      group.add(zincObject.morph);
+      //group.add(zincObject.getMorph());
+      group.add(zincObject.getGroup());
       zincObjects.push(zincObject);
       this.pickableUpdateRequired = true;
     }
   }
 
+
   /**
    * Remove a ZincObject from this region if it presents. This will eventually
    * destroy the object and free up the memory.
@@ -307,7 +309,7 @@ let Region = function (parentIn) {
   this.removeZincObject = zincObject => {
     for (let i = 0; i < zincObjects.length; i++) {
       if (zincObject === zincObjects[i]) {
-        group.remove(zincObject.morph);
+        group.remove(zincObject.getGroup());
         zincObjects.splice(i, 1);
         zincObject.dispose();
         return;
@@ -340,12 +342,12 @@ let Region = function (parentIn) {
    */
   this.getPickableThreeJSObjects = (objectsList,  transverse) => {
     zincObjects.forEach(zincObject => {
-      if (zincObject.morph && zincObject.morph.visible) {
+      if (zincObject.getGroup() && zincObject.getGroup().visible) {
         let marker = zincObject.marker;
         if (marker && marker.isEnabled()) {
-          objectsList.push(marker.morph);
+          objectsList.push(marker.getMorph());
         }
-        objectsList.push(zincObject.morph);
+        objectsList.push(zincObject.getGroup());
       }
     });
     if (transverse) {
@@ -422,7 +424,7 @@ let Region = function (parentIn) {
       children.forEach(childRegion => childRegion.clear(transverse));
     }
     zincObjects.forEach(zincObject => {
-      group.remove(zincObject.morph);
+      group.remove(zincObject.getMorph());
       zincObject.dispose();
     });
     children = [];
@@ -727,11 +729,11 @@ let Region = function (parentIn) {
    * Update geometries and glyphsets based on the calculated time.
    * @private
    */
-  this.renderGeometries = (playRate, delta, playAnimation, options, transverse) => {
+  this.renderGeometries = (playRate, delta, playAnimation, cameraControls, options, transverse) => {
     // Let video dictates the progress if one is present
     const allObjects = this.getAllObjects(transverse);
     allObjects.forEach(zincObject => {
-      zincObject.render(playRate * delta, playAnimation, options);
+      zincObject.render(playRate * delta, playAnimation, cameraControls, options);
     });
     //process markers visibility and size
     if (options && options.displayMarkers && (playAnimation === false)) {

package/src/scene.js

@@ -581,7 +581,7 @@ exports.Scene = function (containerIn, rendererIn) {
 				  zincCameraControls.setTime(currentTime);
 				  zincCameraControls.update(0);
           rootRegion.setMorphTime(currentTime, true);
-          rootRegion.renderGeometries(0, 0, playAnimation, undefined, true);
+          rootRegion.renderGeometries(0, 0, playAnimation, zincCameraControls, undefined, true);
 			  } else {
 				  zincCameraControls.update(0);
 			  }
@@ -592,7 +592,7 @@ exports.Scene = function (containerIn, rendererIn) {
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {
         zincCameraControls.update(delta);
-        rootRegion.renderGeometries(playRate, delta, playAnimation, options, true);
+        rootRegion.renderGeometries(playRate, delta, playAnimation, zincCameraControls, options, true);
 		  } else {
 			  zincCameraControls.update(0);
 		  }

package/src/sceneExporter.js

@@ -16,7 +16,7 @@ const SceneExporter = function (sceneIn) {
     const animations = [];
     zincObjects.forEach(zincObject => {
       if (zincObject.animationClip) {
-        animations.push({clip: zincObject.animationClip[0], mesh: zincObject.morph});
+        animations.push({clip: zincObject.animationClip[0], mesh: zincObject.getMorph()});
       }
     });
     const exporter = new GLTFExporter();