zincjs 2.3.1-beta.0 → 2.3.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.3.1-beta.0",
+  "version": "2.3.1-beta.1",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",

package/src/primitives/marker.js

@@ -3,11 +3,9 @@ import myImage from '../assets/mapMarker.svg';
 import { createNewSpriteText } from '../utilities';
 import { ZincObject } from './zincObject';
 
-const markerImage = new Image(128, 128);
-markerImage.src = myImage;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(myImage);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -197,6 +195,7 @@ const Marker = function(zincObject) {
     }
     if (!label && numberIn) {
       label = createNewSpriteText(numberIn, 0.012, "black", "Asap", 120, 700);
+      label.renderOrder = 10001;
       this.morph.add(label);
     }
     number = numberIn;

package/src/primitives/markerCluster.js

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
 import { ZincObject } from './zincObject';
-const markerImage = new Image(128, 128);
 import mapMarkerOrange from '../assets/mapMarkerOrange.svg';
-markerImage.src = mapMarkerOrange;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+import { createNewSpriteText } from '../utilities';
+
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(mapMarkerOrange);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -15,7 +15,6 @@ const spriteMaterial = new THREE.SpriteMaterial({
   depthWrite: false,
   sizeAttenuation: false
 });
-import { createNewSpriteText } from '../utilities';
 
 /**
  * A special graphics type with a tear drop shape.
@@ -46,9 +45,9 @@ const MarkerCluster = function(sceneIn) {
    *
    * @param {Number} size - size to be set.
    */
-  this.setSpriteSize = size => {
+  this.setSpriteSize = sizeIn => {
     sprite.scale.set(0.015, 0.02, 1);
-    sprite.scale.multiplyScalar(size);
+    sprite.scale.multiplyScalar(sizeIn);
   }
 
   this.clear = () => {
@@ -101,6 +100,7 @@ const MarkerCluster = function(sceneIn) {
         sprite.label.material.dispose();
       }
       sprite.label = createNewSpriteText(number, 0.012, "black", "Asap", 120, 700);
+      sprite.label.renderOrder = 10001;
       sprite.number = number;
       sprite.group.add(sprite.label);
     }

package/src/utilities.js

@@ -742,7 +742,7 @@ function createNewSpriteText(text, height, colour, font, pixel, weight) {
   sprite.material.depthWrite = false;
   sprite.material.depthTest = false;
   sprite.center.set(0.5, -1.2);
-  sprite.renderOrder = 10000;
+  sprite.renderOrder = 10001;
   return sprite;
 }