zincjs 2.4.1-beta.7 → 3.0.1

package/src/minimap.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three/webgpu';
-import { copyVector3sArray } from "./utilities";
+import { copyVector3sArray } from './utilities';
 
 /**
  * This provide a full scale minimap. It will always
@@ -11,35 +11,41 @@ import { copyVector3sArray } from "./utilities";
  */
 const Minimap = function (sceneIn) {
   let targetScene = sceneIn;
-  this.camera = new THREE.OrthographicCamera(
-    -0.5, 0.5, 0.5, -0.5, 0.01, 10);
+  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,
+  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 );
+    transparent: true,
+  });
+  this.mask = new THREE.Mesh(geometry, material);
   let _box = new THREE.Box3();
   let _center = new THREE.Vector3();
   const _coord = new THREE.Vector3();
   const _lookAt = new THREE.Vector3();
   const _target = new THREE.Vector3();
-  const _corners = [new THREE.Vector3(), new THREE.Vector3(),
-    new THREE.Vector3(), new THREE.Vector3()];
-  const _boundaryVertices = [_corners[0], _corners[1], _corners[2],
-    _corners[2], _corners[3], _corners[0]];
+  const _corners = [
+    new THREE.Vector3(),
+    new THREE.Vector3(),
+    new THREE.Vector3(),
+    new THREE.Vector3(),
+  ];
+  const _boundaryVertices = [
+    _corners[0],
+    _corners[1],
+    _corners[2],
+    _corners[2],
+    _corners[3],
+    _corners[0],
+  ];
   //State the minimap was last computed from, it only needs to be updated
   //when the scene or the main camera changes.
   const _lastBoundingBox = new THREE.Box3();
@@ -50,36 +56,40 @@ const Minimap = function (sceneIn) {
   //Matrix4.equals treats NaN as different, e.g. with a zero sized canvas
   const matrixEquals = (a, b) => {
     for (let i = 0; i < 16; i++) {
-      if (!Object.is(a.elements[i], b.elements[i]))
-        return false;
+      if (!Object.is(a.elements[i], b.elements[i])) return false;
     }
     return true;
-  }
+  };
 
   this.getDiffFromNormalised = (x, y) => {
     _box.setFromBufferAttribute(positionAttributes).getCenter(_center);
     _coord.copy(_center).project(this.camera);
     //Returns a new vector, the caller may keep it
     return new THREE.Vector3(x, y, _coord.z).unproject(this.camera).sub(_center);
-  }
+  };
 
-  let setCurrentCameraSettings = (diameter, newViewport)  => {
-    if (targetScene.camera.near)
-      this.camera.near = targetScene.camera.near;
-    if (newViewport.farPlane)
-      this.camera.far = newViewport.farPlane;
+  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]);
+      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]);
+      this.camera.up.set(newViewport.upVector[0], newViewport.upVector[1], newViewport.upVector[2]);
     if (newViewport.targetPosition)
-      this.camera.lookAt(_lookAt.set(newViewport.targetPosition[0],
-        newViewport.targetPosition[1], newViewport.targetPosition[2]));
+      this.camera.lookAt(
+        _lookAt.set(
+          newViewport.targetPosition[0],
+          newViewport.targetPosition[1],
+          newViewport.targetPosition[2],
+        ),
+      );
     this.camera.zoom = 1 / diameter;
     this.camera.updateProjectionMatrix();
-  }
+  };
 
   this.getBoundary = () => {
     const camera = targetScene.camera;
@@ -89,16 +99,20 @@ const Minimap = function (sceneIn) {
     _corners[2].set(1, 1, _target.z).unproject(camera);
     _corners[3].set(-1, 1, _target.z).unproject(camera);
     copyVector3sArray(positionAttributes, _boundaryVertices);
-  }
+  };
 
   this.updateCamera = () => {
     const camera = targetScene.camera;
     let boundingBox = targetScene.getBoundingBox();
     //Nothing has changed since the last update
-    if (_cameraUpdated && boundingBox && boundingBox.equals(_lastBoundingBox) &&
+    if (
+      _cameraUpdated &&
+      boundingBox &&
+      boundingBox.equals(_lastBoundingBox) &&
       _lastNear === camera.near &&
       matrixEquals(_lastMatrixWorld, camera.matrixWorld) &&
-      matrixEquals(_lastProjectionMatrix, camera.projectionMatrix)) {
+      matrixEquals(_lastProjectionMatrix, camera.projectionMatrix)
+    ) {
       return;
     }
     this.getBoundary();
@@ -118,10 +132,16 @@ const Minimap = function (sceneIn) {
       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);
+        centreX,
+        centreY,
+        centreZ,
+        radius,
+        40,
+        radius * clip_factor,
+      );
       setCurrentCameraSettings(diameter, viewport);
     }
-  }
-}
+  };
+};
 
-export { Minimap };
+export { Minimap };

package/src/primitives/geometry.js

@@ -1,9 +1,9 @@
 import * as THREE from 'three/webgpu';
 import { toBufferGeometry } from '../utilities';
 import { applyMorphColorNode } from '../tsl/morphColorMaterial';
-import { ZincObject} from './zincObject';
+import { ZincObject } from './zincObject';
 
-const createMeshForGeometry =  (geometryIn, materialIn, options) => {
+const createMeshForGeometry = (geometryIn, materialIn, options) => {
   // First copy the geometry
   let geometry = toBufferGeometry(geometryIn, options);
 
@@ -17,14 +17,14 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
       material = materialIn;
     } else {
       material = new THREE.MeshPhongMaterial({
-        color : options.colour,
-        vertexColors : false,
-        transparent : isTransparent,
-        opacity : options.opacity,
-        side : THREE.DoubleSide
+        color: options.colour,
+        vertexColors: false,
+        transparent: isTransparent,
+        opacity: options.opacity,
+        side: THREE.DoubleSide,
       });
     }
-    if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+    if (options.localMorphColour && geometry.morphAttributes['color']) {
       //Force vertexColors off (even if materialIn already had it true) -
       //NodeMaterial would otherwise multiply our morph colour blend by
       //the static, non-morph 'color' attribute (vertexColor() in
@@ -38,15 +38,15 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
   } else {
     let videoTexture = geometry._video.createCanvasVideoTexture();
     material = new THREE.MeshBasicMaterial({
-      color : new THREE.Color(1, 1, 1),
-      transparent : isTransparent,
-      opacity : options.opacity,
-      map : videoTexture,
-      side : THREE.DoubleSide
+      color: new THREE.Color(1, 1, 1),
+      transparent: isTransparent,
+      opacity: options.opacity,
+      map: videoTexture,
+      side: THREE.DoubleSide,
     });
   }
   return new THREE.Mesh(geometry, material);
-}
+};
 
 /**
  * Provides an object which stores geometry and provides method which controls its animations.
@@ -59,8 +59,8 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
  */
 const Geometry = function () {
   ZincObject.call(this);
-	// THREE.Geometry or THREE.BufferGeometry
-	this.videoHandler = undefined;
+  // THREE.Geometry or THREE.BufferGeometry
+  this.videoHandler = undefined;
   this.isGeometry = true;
 
   /**
@@ -76,46 +76,45 @@ const Geometry = function () {
    * time dependent.
    * @param {Number} options.opacity - Opacity to be set for the geometry
    */
-	this.createMesh = (geometryIn, materialIn, options) => {
+  this.createMesh = (geometryIn, materialIn, options) => {
     //Skip if there is a morph already
-		if (this.morph && this.morph.geometry && (geometryIn != undefined))
-			return;
-		const mesh = createMeshForGeometry(geometryIn, materialIn, options);
+    if (this.morph && this.morph.geometry && geometryIn != undefined) return;
+    const mesh = createMeshForGeometry(geometryIn, materialIn, options);
     this.videoHandler = mesh.geometry._video;
-		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
-	}
+    this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
+  };
 
   /**
    * Handle transparent mesh, create a clone for backside rendering if it is
    * transparent.
    */
-  this.checkTransparentMesh = function() {
+  this.checkTransparentMesh = function () {
     this._lod.checkTransparentMesh();
-  }
+  };
 
-	/**
-	 * Set wireframe display for this geometry.
-	 *
-	 * @param {Boolean} wireframe - Flag to turn on/off wireframe display.
-	 */
-	this.setWireframe = wireframe => {
-		this.requestRender();
-		this.morph.material.wireframe = wireframe;
-	}
+  /**
+   * Set wireframe display for this geometry.
+   *
+   * @param {Boolean} wireframe - Flag to turn on/off wireframe display.
+   */
+  this.setWireframe = (wireframe) => {
+    this.requestRender();
+    this.morph.material.wireframe = wireframe;
+  };
 
   /**
    * Edit Vertice in index.
    */
-  this.editVertices = function(coords, i) {
+  this.editVertices = function (coords, i) {
     this.requestRender();
     if (coords && coords.length) {
       let mesh = this.getMorph();
-      const attribute = mesh.geometry.getAttribute("position");
+      const attribute = mesh.geometry.getAttribute('position');
       if (!mesh || 0 > i) {
         return;
       } else {
         let index = i * 3;
-        coords.forEach(coord => {
+        coords.forEach((coord) => {
           attribute.array[index++] = coord[0];
           attribute.array[index++] = coord[1];
           attribute.array[index++] = coord[2];
@@ -126,21 +125,18 @@ const Geometry = function () {
         this.boundingBoxUpdateRequired = true;
       }
     }
-  }
+  };
 
   /**
    * Check if the geometry is time varying.
    *
    * @return {Boolean}
    */
-  this.isTimeVarying = function() {
-    if (this.timeEnabled || this.morphColour || this.videoHandler)
-      return true;
+  this.isTimeVarying = function () {
+    if (this.timeEnabled || this.morphColour || this.videoHandler) return true;
     return false;
-  }
-
-
-}
+  };
+};
 
 Geometry.prototype = Object.create(ZincObject.prototype);
 export { Geometry };

package/src/primitives/glyph.js

@@ -35,7 +35,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    *
    * @returns {Boolean} true if successful
    */
-  this.fromMesh = meshIn => {
+  this.fromMesh = (meshIn) => {
     if (meshIn && meshIn.isMesh) {
       this.morph = meshIn.clone();
       this.morph.userData = this;
@@ -43,7 +43,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       return true;
     }
     return false;
-  }
+  };
 
   if (geometry && material) {
     this.fromMesh(new THREE.Mesh(geometry, material));
@@ -56,20 +56,19 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    */
   this.getGlyphset = function () {
     return parent;
-  }
+  };
 
   /**
    * Set and update the text containing this glyph.
    * @param   {String} text - Label to be set for this instance
    */
-  this.setLabel = text => {
+  this.setLabel = (text) => {
     parent?.requestRender?.();
     if (text && (typeof text === 'string' || text instanceof String)) {
       labelString = text;
-      if (this.morph)
-        this.morph.name = text;
+      if (this.morph) this.morph.name = text;
     }
-  }
+  };
 
   /**
    * Display label with the choosen colour. It will replace the current
@@ -96,7 +95,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       sprite.material.depthWrite = false;
       this.group.add(label.getSprite());
     }
-  }
+  };
 
   /**
    * Hide label with the choosen colour.
@@ -109,7 +108,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       label.dispose();
       label = undefined;
     }
-  }
+  };
 
   /**
    * Get the label of this glyph
@@ -117,7 +116,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    */
   this.getLabel = () => {
     return labelString;
-  }
+  };
 
   /**
    * Get the mesh of this glyph.
@@ -125,7 +124,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    */
   this.getMesh = () => {
     return this.morph;
-  }
+  };
 
   /**
    * Set the transformation of this glyph.
@@ -163,7 +162,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
     if (label) {
       label.setPosition(position[0], position[1], position[2]);
     }
-  }
+  };
 
   /**
    * Set the color of the glyph and its label. Remembered (see showLabel())
@@ -177,14 +176,13 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
   this.setColour = (color) => {
     parent?.requestRender?.();
     _colour = color ? color.clone() : undefined;
-    if (label)
-      label.setColour(color);
+    if (label) label.setColour(color);
     if (this.secondaryMesh && this.secondaryMesh.material)
       this.secondaryMesh.material.color = color;
     if (this.geometry) {
       this.geometry.colorsNeedUpdate = true;
     }
-  }
+  };
 
   /**
    * Get the last colour set via setColour(), if any.
@@ -200,11 +198,10 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       label.dispose();
       label = undefined;
     }
-    if (this.material)
-      this.material.dispose();
+    if (this.material) this.material.dispose();
     this.morph = undefined;
-  }
-}
+  };
+};
 
 Glyph.prototype = Object.create(ZincObject.prototype);
 export { Glyph };