three-globe - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/three-globe.common.js

@@ -29,29 +29,37 @@ 'use strict';
 
-const materialDispose = material => {
-  if (material instanceof Array) {
-    material.forEach(materialDispose);
-  } else {
-    if (material.map) {
-      material.map.dispose();
+const emptyObject = obj => {
+  const materialDispose = material => {
+    if (material instanceof Array) {
+      material.forEach(materialDispose);
+    } else {
+      if (material.map) {
+        material.map.dispose();
+      }
+
+      material.dispose();
     }
+  };
 
-    material.dispose();
-  }
-};
+  const deallocate = obj => {
+    if (obj.geometry) {
+      obj.geometry.dispose();
+    }
 
-const deallocate = obj => {
-  if (obj.geometry) {
-    obj.geometry.dispose();
-  }
+    if (obj.material) {
+      materialDispose(obj.material);
+    }
 
-  if (obj.material) {
-    materialDispose(obj.material);
-  }
+    if (obj.texture) {
+      obj.texture.dispose();
+    }
 
-  if (obj.texture) {
-    obj.texture.dispose();
-  }
+    if (obj.children) {
+      obj.children.forEach(deallocate);
+    }
+  };
 
-  if (obj.children) {
-    obj.children.forEach(deallocate);
+  while (obj.children.length) {
+    const childObj = state.pointsG.children[0];
+    state.pointsG.remove(childObj);
+    deallocate(childObj);
   }
@@ -134,6 +142,33 @@ };
 
-    } // in deg
+    },
+    // in deg
+    customLayerData: {
+      default: [],
 
+      onChange(_, state) {
+        state.customLayerNeedsRepopulating = true;
+      }
+
+    },
+    customThreeObject: {
+      default: [],
+
+      onChange(_, state) {
+        state.customLayerNeedsRepopulating = true;
+      }
+
+    }
   },
   methods: {
+    getCoords(state, lat, lng, relAltitude = 1) {
+      const phi = (90 - lat) * Math.PI / 180;
+      const theta = (180 - lng) * Math.PI / 180;
+      const r = GLOBE_RADIUS * relAltitude;
+      return {
+        x: r * Math.sin(phi) * Math.cos(theta),
+        y: r * Math.cos(phi),
+        z: r * Math.sin(phi) * Math.sin(theta)
+      };
+    },
+
     _loadGlobeImage: function (state, imageUrl) {
@@ -162,8 +197,4 @@ if (state.globeObj && imageUrl) {
 
-    while (state.scene.children.length) {
-      const obj = state.scene.children[0];
-      state.scene.remove(obj);
-    } // add globe
+    emptyObject(state.scene); // add globe
 
-
     const globeGeometry = new THREE.SphereGeometry(GLOBE_RADIUS, 40, 30);
@@ -194,3 +225,5 @@ const globeObj = state.globeObj = new THREE.Mesh(globeGeometry, new THREE.MeshBasicMaterial({
 
-    state.scene.add(state.pointsG = new THREE.Group());
+    state.scene.add(state.pointsG = new THREE.Group()); // add custom layer group
+
+    state.scene.add(state.customLayerG = new THREE.Group());
   },
@@ -204,9 +237,4 @@
 
-      while (state.pointsG.children.length) {
-        const obj = state.pointsG.children[0];
-        state.pointsG.remove(obj);
-        deallocate(obj);
-      } // Data accessors
+      emptyObject(state.pointsG); // Data accessors
 
-
       const latAccessor = accessorFn(state.pointLat);
@@ -232,9 +260,8 @@ const lngAccessor = accessorFn(state.pointLng);
 
-        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]);
-        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
-        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
-        obj.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
-        obj.position.y = GLOBE_RADIUS * Math.cos(phi);
-        obj.position.z = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
-        obj.lookAt(state.globeObj.position);
+        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
+
+        Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
+
+        obj.lookAt(state.globeObj.position); // scale radius and altitude
+
         obj.scale.x = obj.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
@@ -250,2 +277,25 @@ obj.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
     }
+
+    if (state.customLayerNeedsRepopulating) {
+      state.pointsNeedRepopulating = false; // Clear the existing objects
+
+      emptyObject(state.customLayerG);
+      const customObjectAccessor = accessorFn(state.customThreeObject);
+      state.customLayerData.forEach(d => {
+        let obj = customObjectAccessor(d, GLOBE_RADIUS);
+
+        if (obj) {
+          if (state.customThreeObject === obj) {
+            // clone object if it's a shared object among all points
+            obj = obj.clone();
+          }
+        }
+
+        obj.__globeObjType = 'custom'; // Add object type
+
+        obj.__data = d; // Attach point data
+
+        state.customLayerG.add(d.__threeObj = obj);
+      });
+    }
   }
@@ -252,0 +302,0 @@

dist/three-globe.js

@@ -1,2 +0,2 @@
-// Version 0.3.0 three-globe - https://github.com/vasturiano/three-globe
+// Version 0.4.0 three-globe - https://github.com/vasturiano/three-globe
 (function (global, factory) {
@@ -52,29 +52,37 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
 
-	const materialDispose = material => {
-	  if (material instanceof Array) {
-	    material.forEach(materialDispose);
-	  } else {
-	    if (material.map) {
-	      material.map.dispose();
+	const emptyObject = obj => {
+	  const materialDispose = material => {
+	    if (material instanceof Array) {
+	      material.forEach(materialDispose);
+	    } else {
+	      if (material.map) {
+	        material.map.dispose();
+	      }
+
+	      material.dispose();
 	    }
+	  };
 
-	    material.dispose();
-	  }
-	};
+	  const deallocate = obj => {
+	    if (obj.geometry) {
+	      obj.geometry.dispose();
+	    }
 
-	const deallocate = obj => {
-	  if (obj.geometry) {
-	    obj.geometry.dispose();
-	  }
+	    if (obj.material) {
+	      materialDispose(obj.material);
+	    }
 
-	  if (obj.material) {
-	    materialDispose(obj.material);
-	  }
+	    if (obj.texture) {
+	      obj.texture.dispose();
+	    }
 
-	  if (obj.texture) {
-	    obj.texture.dispose();
-	  }
+	    if (obj.children) {
+	      obj.children.forEach(deallocate);
+	    }
+	  };
 
-	  if (obj.children) {
-	    obj.children.forEach(deallocate);
+	  while (obj.children.length) {
+	    const childObj = state.pointsG.children[0];
+	    state.pointsG.remove(childObj);
+	    deallocate(childObj);
 	  }
@@ -157,6 +165,33 @@ };
 
-	    } // in deg
+	    },
+	    // in deg
+	    customLayerData: {
+	      default: [],
 
+	      onChange(_, state) {
+	        state.customLayerNeedsRepopulating = true;
+	      }
+
+	    },
+	    customThreeObject: {
+	      default: [],
+
+	      onChange(_, state) {
+	        state.customLayerNeedsRepopulating = true;
+	      }
+
+	    }
 	  },
 	  methods: {
+	    getCoords(state, lat, lng, relAltitude = 1) {
+	      const phi = (90 - lat) * Math.PI / 180;
+	      const theta = (180 - lng) * Math.PI / 180;
+	      const r = GLOBE_RADIUS * relAltitude;
+	      return {
+	        x: r * Math.sin(phi) * Math.cos(theta),
+	        y: r * Math.cos(phi),
+	        z: r * Math.sin(phi) * Math.sin(theta)
+	      };
+	    },
+
 	    _loadGlobeImage: function (state, imageUrl) {
@@ -185,8 +220,4 @@ if (state.globeObj && imageUrl) {
 
-	    while (state.scene.children.length) {
-	      const obj = state.scene.children[0];
-	      state.scene.remove(obj);
-	    } // add globe
+	    emptyObject(state.scene); // add globe
 
-
 	    const globeGeometry = new THREE.SphereGeometry(GLOBE_RADIUS, 40, 30);
@@ -217,3 +248,5 @@ const globeObj = state.globeObj = new THREE.Mesh(globeGeometry, new THREE.MeshBasicMaterial({
 
-	    state.scene.add(state.pointsG = new THREE.Group());
+	    state.scene.add(state.pointsG = new THREE.Group()); // add custom layer group
+
+	    state.scene.add(state.customLayerG = new THREE.Group());
 	  },
@@ -227,9 +260,4 @@
 
-	      while (state.pointsG.children.length) {
-	        const obj = state.pointsG.children[0];
-	        state.pointsG.remove(obj);
-	        deallocate(obj);
-	      } // Data accessors
+	      emptyObject(state.pointsG); // Data accessors
 
-
 	      const latAccessor = accessorFn(state.pointLat);
@@ -255,9 +283,8 @@ const lngAccessor = accessorFn(state.pointLng);
 
-	        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]);
-	        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
-	        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
-	        obj.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
-	        obj.position.y = GLOBE_RADIUS * Math.cos(phi);
-	        obj.position.z = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
-	        obj.lookAt(state.globeObj.position);
+	        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
+
+	        Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
+
+	        obj.lookAt(state.globeObj.position); // scale radius and altitude
+
 	        obj.scale.x = obj.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
@@ -273,2 +300,25 @@ obj.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
 	    }
+
+	    if (state.customLayerNeedsRepopulating) {
+	      state.pointsNeedRepopulating = false; // Clear the existing objects
+
+	      emptyObject(state.customLayerG);
+	      const customObjectAccessor = accessorFn(state.customThreeObject);
+	      state.customLayerData.forEach(d => {
+	        let obj = customObjectAccessor(d, GLOBE_RADIUS);
+
+	        if (obj) {
+	          if (state.customThreeObject === obj) {
+	            // clone object if it's a shared object among all points
+	            obj = obj.clone();
+	          }
+	        }
+
+	        obj.__globeObjType = 'custom'; // Add object type
+
+	        obj.__data = d; // Attach point data
+
+	        state.customLayerG.add(d.__threeObj = obj);
+	      });
+	    }
 	  }
@@ -275,0 +325,0 @@

dist/three-globe.min.js

@@ -1,2 +0,2 @@
-// Version 0.3.0 three-globe - https://github.com/vasturiano/three-globe
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three")):"function"==typeof define&&define.amd?define(["three"],t):(e=e||self).ThreeGlobe=t(e.THREE)}(this,function(e){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}var o=n(function(e,t){"undefined"!=typeof self&&self,e.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){var o,r,i,a;a=function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.stateInit,n=void 0===t?function(){return{}}:t,o=e.props,l=void 0===o?{}:o,s=e.methods,u=void 0===s?{}:s,c=e.aliases,f=void 0===c?{}:c,d=e.init,p=void 0===d?function(){}:d,h=e.update,v=void 0===h?function(){}:h,m=Object.keys(l).map(function(e){return new a(e,l[e])});return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({},n instanceof Function?n(e):n,{initialised:!1});function o(t){return a(t,e),l(),o}var a=function(e,n){p.call(o,e,t,n),t.initialised=!0},l=(0,r.default)(function(){t.initialised&&v.call(o,t)},1);return m.forEach(function(e){o[e.name]=function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(e,t){};return function(i){var a=t[e];return arguments.length?(t[e]=i,r.call(o,i,t,a),n&&l(),o):a}}(e.name,e.triggerUpdate,e.onChange)}),Object.keys(u).forEach(function(e){o[e]=function(){for(var n,r=arguments.length,i=Array(r),a=0;a<r;a++)i[a]=arguments[a];return(n=u[e]).call.apply(n,[o,t].concat(i))}}),Object.entries(f).forEach(function(e){var t=i(e,2),n=t[0],r=t[1];return o[n]=o[r]}),o.resetProps=function(){return m.forEach(function(e){o[e.name](e.defaultVal)}),o},o.resetProps(),t._rerender=l,o}};var o,r=(o=n)&&o.__esModule?o:{default:o},i=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],o=!0,r=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(o=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){r=!0,i=e}finally{try{!o&&l.return&&l.return()}finally{if(r)throw i}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},a=function e(t,n){var o=n.default,r=void 0===o?null:o,i=n.triggerUpdate,a=void 0===i||i,l=n.onChange,s=void 0===l?function(e,t){}:l;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.name=t,this.defaultVal=r,this.triggerUpdate=a,this.onChange=s};e.exports=t.default},r=[e,t,n(1)],void 0===(i="function"==typeof(o=a)?o.apply(t,r):o)||(e.exports=i)},function(e,t){e.exports=function(e,t,n){var o,r,i,a,l;function s(){var u=Date.now()-a;u<t&&u>=0?o=setTimeout(s,t-u):(o=null,n||(l=e.apply(i,r),i=r=null))}null==t&&(t=100);var u=function(){i=this,r=arguments,a=Date.now();var u=n&&!o;return o||(o=setTimeout(s,t)),u&&(l=e.apply(i,r),i=r=null),l};return u.clear=function(){o&&(clearTimeout(o),o=null)},u.flush=function(){o&&(l=e.apply(i,r),i=r=null,clearTimeout(o),o=null)},u}}])}),r=t(o),i=(o.Kapsule,n(function(e,t){e.exports=function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){var o,r,i;r=[e,t],void 0!==(i="function"==typeof(o=function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e instanceof Function?e:"string"==typeof e?function(t){return t[e]}:function(t){return e}},e.exports=t.default})?o.apply(t,r):o)&&(e.exports=i)}])})),a=t(i);i.accessorFn;const l=window.THREE?window.THREE:{AdditiveBlending:e.AdditiveBlending,BackSide:e.BackSide,Color:e.Color,CylinderGeometry:e.CylinderGeometry,FaceColors:e.FaceColors,Geometry:e.Geometry,Group:e.Group,Matrix4:e.Matrix4,Mesh:e.Mesh,MeshBasicMaterial:e.MeshBasicMaterial,ShaderMaterial:e.ShaderMaterial,SphereGeometry:e.SphereGeometry,TextureLoader:e.TextureLoader,UniformsUtils:e.UniformsUtils},s=e=>{e instanceof Array?e.forEach(s):(e.map&&e.map.dispose(),e.dispose())},u=e=>{e.geometry&&e.geometry.dispose(),e.material&&s(e.material),e.texture&&e.texture.dispose(),e.children&&e.children.forEach(u)},c={earth:{uniforms:{texture:{type:"t",value:null}},vertexShader:["varying vec3 vNormal;","varying vec2 vUv;","void main() {","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","vNormal = normalize( normalMatrix * normal );","vUv = uv;","}"].join("\n"),fragmentShader:["uniform sampler2D texture;","varying vec3 vNormal;","varying vec2 vUv;","void main() {","vec3 diffuse = texture2D( texture, vUv ).xyz;","float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );","vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );","gl_FragColor = vec4( diffuse + atmosphere, 1.0 );","}"].join("\n")},atmosphere:{uniforms:{},vertexShader:["varying vec3 vNormal;","void main() {","vNormal = normalize( normalMatrix * normal );","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["varying vec3 vNormal;","void main() {","float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );","gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;","}"].join("\n")}};return function(e,t=Object,n=!1){class o extends t{constructor(...t){super(...t),this.__kapsuleInstance=e()(...n?[this]:[],...t)}}return Object.keys(e()).forEach(e=>o.prototype[e]=function(...t){const n=this.__kapsuleInstance[e](...t);return n===this.__kapsuleInstance?this:n}),o}(r({props:{globeImageUrl:{onChange(e){this._loadGlobeImage(e)},triggerUpdate:!1},pointsData:{default:[],onChange(e,t){t.pointsNeedsRepopulating=!0}},pointLat:{default:"lat",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointLng:{default:"lng",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointColor:{default:()=>"#ffffaa",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointHeight:{default:.1,onChange(e,t){t.pointsNeedsRepopulating=!0}},pointRadius:{default:.25,onChange(e,t){t.pointsNeedsRepopulating=!0}}},methods:{_loadGlobeImage:function(e,t){if(e.globeObj&&t){const n=c.earth,o=l.UniformsUtils.clone(n.uniforms);o.texture.value=(new l.TextureLoader).load(t),e.globeObj.material=new l.ShaderMaterial({uniforms:o,vertexShader:n.vertexShader,fragmentShader:n.fragmentShader})}return this}},stateInit:()=>({pointsNeedsRepopulating:!0}),init(e,t){for(t.scene=e;t.scene.children.length;){const e=t.scene.children[0];t.scene.remove(e)}const n=new l.SphereGeometry(200,40,30),o=t.globeObj=new l.Mesh(n,new l.MeshBasicMaterial({color:0}));o.rotation.y=Math.PI/4,t.scene.add(o),t.globeImageUrl&&this._loadGlobeImage(t.globeImageUrl);{const e=c.atmosphere,o=l.UniformsUtils.clone(e.uniforms),r=new l.ShaderMaterial({uniforms:o,vertexShader:e.vertexShader,fragmentShader:e.fragmentShader,side:l.BackSide,blending:l.AdditiveBlending,transparent:!0}),i=new l.Mesh(n,r);i.scale.set(1.1,1.1,1.1),t.scene.add(i)}t.scene.add(t.pointsG=new l.Group)},update(e){const t=2*Math.PI*200/360;if(e.pointsNeedsRepopulating){for(e.pointsNeedRepopulating=!1;e.pointsG.children.length;){const t=e.pointsG.children[0];e.pointsG.remove(t),u(t)}const n=a(e.pointLat),o=a(e.pointLng),r=a(e.pointHeight),i=a(e.pointRadius),s=a(e.pointColor),c=new l.CylinderGeometry(1,1,1,12);c.applyMatrix((new l.Matrix4).makeRotationX(Math.PI/2)),c.applyMatrix((new l.Matrix4).makeTranslation(0,0,-.5));const f={};e.pointsData.forEach(a=>{const u=s(a);f.hasOwnProperty(u)||(f[u]=new l.MeshBasicMaterial({color:new l.Color(u)}));const d=new l.Mesh(c,f[u]),p=(90-n(a))*Math.PI/180,h=(180-o(a))*Math.PI/180;d.position.x=200*Math.sin(p)*Math.cos(h),d.position.y=200*Math.cos(p),d.position.z=200*Math.sin(p)*Math.sin(h),d.lookAt(e.globeObj.position),d.scale.x=d.scale.y=Math.min(30,i(a))*t,d.scale.z=Math.max(200*r(a),.1),d.__globeObjType="point",d.__data=a,e.pointsG.add(a.__threeObj=d)})}}}),e.Group,!0)});
+// Version 0.4.0 three-globe - https://github.com/vasturiano/three-globe
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three")):"function"==typeof define&&define.amd?define(["three"],t):(e=e||self).ThreeGlobe=t(e.THREE)}(this,function(e){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}var o=n(function(e,t){"undefined"!=typeof self&&self,e.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){var o,r,a,i;i=function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.stateInit,n=void 0===t?function(){return{}}:t,o=e.props,s=void 0===o?{}:o,l=e.methods,u=void 0===l?{}:l,c=e.aliases,d=void 0===c?{}:c,p=e.init,f=void 0===p?function(){}:p,h=e.update,m=void 0===h?function(){}:h,v=Object.keys(s).map(function(e){return new i(e,s[e])});return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({},n instanceof Function?n(e):n,{initialised:!1});function o(t){return i(t,e),s(),o}var i=function(e,n){f.call(o,e,t,n),t.initialised=!0},s=(0,r.default)(function(){t.initialised&&m.call(o,t)},1);return v.forEach(function(e){o[e.name]=function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(e,t){};return function(a){var i=t[e];return arguments.length?(t[e]=a,r.call(o,a,t,i),n&&s(),o):i}}(e.name,e.triggerUpdate,e.onChange)}),Object.keys(u).forEach(function(e){o[e]=function(){for(var n,r=arguments.length,a=Array(r),i=0;i<r;i++)a[i]=arguments[i];return(n=u[e]).call.apply(n,[o,t].concat(a))}}),Object.entries(d).forEach(function(e){var t=a(e,2),n=t[0],r=t[1];return o[n]=o[r]}),o.resetProps=function(){return v.forEach(function(e){o[e.name](e.defaultVal)}),o},o.resetProps(),t._rerender=s,o}};var o,r=(o=n)&&o.__esModule?o:{default:o},a=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],o=!0,r=!1,a=void 0;try{for(var i,s=e[Symbol.iterator]();!(o=(i=s.next()).done)&&(n.push(i.value),!t||n.length!==t);o=!0);}catch(e){r=!0,a=e}finally{try{!o&&s.return&&s.return()}finally{if(r)throw a}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},i=function e(t,n){var o=n.default,r=void 0===o?null:o,a=n.triggerUpdate,i=void 0===a||a,s=n.onChange,l=void 0===s?function(e,t){}:s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.name=t,this.defaultVal=r,this.triggerUpdate=i,this.onChange=l};e.exports=t.default},r=[e,t,n(1)],void 0===(a="function"==typeof(o=i)?o.apply(t,r):o)||(e.exports=a)},function(e,t){e.exports=function(e,t,n){var o,r,a,i,s;function l(){var u=Date.now()-i;u<t&&u>=0?o=setTimeout(l,t-u):(o=null,n||(s=e.apply(a,r),a=r=null))}null==t&&(t=100);var u=function(){a=this,r=arguments,i=Date.now();var u=n&&!o;return o||(o=setTimeout(l,t)),u&&(s=e.apply(a,r),a=r=null),s};return u.clear=function(){o&&(clearTimeout(o),o=null)},u.flush=function(){o&&(s=e.apply(a,r),a=r=null,clearTimeout(o),o=null)},u}}])}),r=t(o),a=(o.Kapsule,n(function(e,t){e.exports=function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){var o,r,a;r=[e,t],void 0!==(a="function"==typeof(o=function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e instanceof Function?e:"string"==typeof e?function(t){return t[e]}:function(t){return e}},e.exports=t.default})?o.apply(t,r):o)&&(e.exports=a)}])})),i=t(a);a.accessorFn;const s=window.THREE?window.THREE:{AdditiveBlending:e.AdditiveBlending,BackSide:e.BackSide,Color:e.Color,CylinderGeometry:e.CylinderGeometry,FaceColors:e.FaceColors,Geometry:e.Geometry,Group:e.Group,Matrix4:e.Matrix4,Mesh:e.Mesh,MeshBasicMaterial:e.MeshBasicMaterial,ShaderMaterial:e.ShaderMaterial,SphereGeometry:e.SphereGeometry,TextureLoader:e.TextureLoader,UniformsUtils:e.UniformsUtils},l=e=>{const t=e=>{e instanceof Array?e.forEach(t):(e.map&&e.map.dispose(),e.dispose())},n=e=>{e.geometry&&e.geometry.dispose(),e.material&&t(e.material),e.texture&&e.texture.dispose(),e.children&&e.children.forEach(n)};for(;e.children.length;){const e=state.pointsG.children[0];state.pointsG.remove(e),n(e)}},u={earth:{uniforms:{texture:{type:"t",value:null}},vertexShader:["varying vec3 vNormal;","varying vec2 vUv;","void main() {","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","vNormal = normalize( normalMatrix * normal );","vUv = uv;","}"].join("\n"),fragmentShader:["uniform sampler2D texture;","varying vec3 vNormal;","varying vec2 vUv;","void main() {","vec3 diffuse = texture2D( texture, vUv ).xyz;","float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );","vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );","gl_FragColor = vec4( diffuse + atmosphere, 1.0 );","}"].join("\n")},atmosphere:{uniforms:{},vertexShader:["varying vec3 vNormal;","void main() {","vNormal = normalize( normalMatrix * normal );","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["varying vec3 vNormal;","void main() {","float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );","gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;","}"].join("\n")}};return function(e,t=Object,n=!1){class o extends t{constructor(...t){super(...t),this.__kapsuleInstance=e()(...n?[this]:[],...t)}}return Object.keys(e()).forEach(e=>o.prototype[e]=function(...t){const n=this.__kapsuleInstance[e](...t);return n===this.__kapsuleInstance?this:n}),o}(r({props:{globeImageUrl:{onChange(e){this._loadGlobeImage(e)},triggerUpdate:!1},pointsData:{default:[],onChange(e,t){t.pointsNeedsRepopulating=!0}},pointLat:{default:"lat",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointLng:{default:"lng",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointColor:{default:()=>"#ffffaa",onChange(e,t){t.pointsNeedsRepopulating=!0}},pointHeight:{default:.1,onChange(e,t){t.pointsNeedsRepopulating=!0}},pointRadius:{default:.25,onChange(e,t){t.pointsNeedsRepopulating=!0}},customLayerData:{default:[],onChange(e,t){t.customLayerNeedsRepopulating=!0}},customThreeObject:{default:[],onChange(e,t){t.customLayerNeedsRepopulating=!0}}},methods:{getCoords(e,t,n,o=1){const r=(90-t)*Math.PI/180,a=(180-n)*Math.PI/180,i=200*o;return{x:i*Math.sin(r)*Math.cos(a),y:i*Math.cos(r),z:i*Math.sin(r)*Math.sin(a)}},_loadGlobeImage:function(e,t){if(e.globeObj&&t){const n=u.earth,o=s.UniformsUtils.clone(n.uniforms);o.texture.value=(new s.TextureLoader).load(t),e.globeObj.material=new s.ShaderMaterial({uniforms:o,vertexShader:n.vertexShader,fragmentShader:n.fragmentShader})}return this}},stateInit:()=>({pointsNeedsRepopulating:!0}),init(e,t){t.scene=e,l(t.scene);const n=new s.SphereGeometry(200,40,30),o=t.globeObj=new s.Mesh(n,new s.MeshBasicMaterial({color:0}));o.rotation.y=Math.PI/4,t.scene.add(o),t.globeImageUrl&&this._loadGlobeImage(t.globeImageUrl);{const e=u.atmosphere,o=s.UniformsUtils.clone(e.uniforms),r=new s.ShaderMaterial({uniforms:o,vertexShader:e.vertexShader,fragmentShader:e.fragmentShader,side:s.BackSide,blending:s.AdditiveBlending,transparent:!0}),a=new s.Mesh(n,r);a.scale.set(1.1,1.1,1.1),t.scene.add(a)}t.scene.add(t.pointsG=new s.Group),t.scene.add(t.customLayerG=new s.Group)},update(e){const t=2*Math.PI*200/360;if(e.pointsNeedsRepopulating){e.pointsNeedRepopulating=!1,l(e.pointsG);const n=i(e.pointLat),o=i(e.pointLng),r=i(e.pointHeight),a=i(e.pointRadius),u=i(e.pointColor),c=new s.CylinderGeometry(1,1,1,12);c.applyMatrix((new s.Matrix4).makeRotationX(Math.PI/2)),c.applyMatrix((new s.Matrix4).makeTranslation(0,0,-.5));const d={};e.pointsData.forEach(i=>{const l=u(i);d.hasOwnProperty(l)||(d[l]=new s.MeshBasicMaterial({color:new s.Color(l)}));const p=new s.Mesh(c,d[l]);Object.assign(p.position,this.getCoords(n(i),o(i))),p.lookAt(e.globeObj.position),p.scale.x=p.scale.y=Math.min(30,a(i))*t,p.scale.z=Math.max(200*r(i),.1),p.__globeObjType="point",p.__data=i,e.pointsG.add(i.__threeObj=p)})}if(e.customLayerNeedsRepopulating){e.pointsNeedRepopulating=!1,l(e.customLayerG);const t=i(e.customThreeObject);e.customLayerData.forEach(n=>{let o=t(n,200);o&&e.customThreeObject===o&&(o=o.clone()),o.__globeObjType="custom",o.__data=n,e.customLayerG.add(n.__threeObj=o)})}}}),e.Group,!0)});

dist/three-globe.module.js

@@ -25,29 +25,37 @@ import { AdditiveBlending, BackSide, Color, CylinderGeometry, FaceColors, Geometry, Group, Matrix4, Mesh, MeshBasicMaterial, ShaderMaterial, SphereGeometry, TextureLoader, UniformsUtils } from 'three';
 
-const materialDispose = material => {
-  if (material instanceof Array) {
-    material.forEach(materialDispose);
-  } else {
-    if (material.map) {
-      material.map.dispose();
+const emptyObject = obj => {
+  const materialDispose = material => {
+    if (material instanceof Array) {
+      material.forEach(materialDispose);
+    } else {
+      if (material.map) {
+        material.map.dispose();
+      }
+
+      material.dispose();
     }
+  };
 
-    material.dispose();
-  }
-};
+  const deallocate = obj => {
+    if (obj.geometry) {
+      obj.geometry.dispose();
+    }
 
-const deallocate = obj => {
-  if (obj.geometry) {
-    obj.geometry.dispose();
-  }
+    if (obj.material) {
+      materialDispose(obj.material);
+    }
 
-  if (obj.material) {
-    materialDispose(obj.material);
-  }
+    if (obj.texture) {
+      obj.texture.dispose();
+    }
 
-  if (obj.texture) {
-    obj.texture.dispose();
-  }
+    if (obj.children) {
+      obj.children.forEach(deallocate);
+    }
+  };
 
-  if (obj.children) {
-    obj.children.forEach(deallocate);
+  while (obj.children.length) {
+    const childObj = state.pointsG.children[0];
+    state.pointsG.remove(childObj);
+    deallocate(childObj);
   }
@@ -130,6 +138,33 @@ };
 
-    } // in deg
+    },
+    // in deg
+    customLayerData: {
+      default: [],
 
+      onChange(_, state) {
+        state.customLayerNeedsRepopulating = true;
+      }
+
+    },
+    customThreeObject: {
+      default: [],
+
+      onChange(_, state) {
+        state.customLayerNeedsRepopulating = true;
+      }
+
+    }
   },
   methods: {
+    getCoords(state, lat, lng, relAltitude = 1) {
+      const phi = (90 - lat) * Math.PI / 180;
+      const theta = (180 - lng) * Math.PI / 180;
+      const r = GLOBE_RADIUS * relAltitude;
+      return {
+        x: r * Math.sin(phi) * Math.cos(theta),
+        y: r * Math.cos(phi),
+        z: r * Math.sin(phi) * Math.sin(theta)
+      };
+    },
+
     _loadGlobeImage: function (state, imageUrl) {
@@ -158,8 +193,4 @@ if (state.globeObj && imageUrl) {
 
-    while (state.scene.children.length) {
-      const obj = state.scene.children[0];
-      state.scene.remove(obj);
-    } // add globe
+    emptyObject(state.scene); // add globe
 
-
     const globeGeometry = new THREE.SphereGeometry(GLOBE_RADIUS, 40, 30);
@@ -190,3 +221,5 @@ const globeObj = state.globeObj = new THREE.Mesh(globeGeometry, new THREE.MeshBasicMaterial({
 
-    state.scene.add(state.pointsG = new THREE.Group());
+    state.scene.add(state.pointsG = new THREE.Group()); // add custom layer group
+
+    state.scene.add(state.customLayerG = new THREE.Group());
   },
@@ -200,9 +233,4 @@
 
-      while (state.pointsG.children.length) {
-        const obj = state.pointsG.children[0];
-        state.pointsG.remove(obj);
-        deallocate(obj);
-      } // Data accessors
+      emptyObject(state.pointsG); // Data accessors
 
-
       const latAccessor = accessorFn(state.pointLat);
@@ -228,9 +256,8 @@ const lngAccessor = accessorFn(state.pointLng);
 
-        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]);
-        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
-        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
-        obj.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
-        obj.position.y = GLOBE_RADIUS * Math.cos(phi);
-        obj.position.z = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
-        obj.lookAt(state.globeObj.position);
+        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
+
+        Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
+
+        obj.lookAt(state.globeObj.position); // scale radius and altitude
+
         obj.scale.x = obj.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
@@ -246,2 +273,25 @@ obj.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
     }
+
+    if (state.customLayerNeedsRepopulating) {
+      state.pointsNeedRepopulating = false; // Clear the existing objects
+
+      emptyObject(state.customLayerG);
+      const customObjectAccessor = accessorFn(state.customThreeObject);
+      state.customLayerData.forEach(d => {
+        let obj = customObjectAccessor(d, GLOBE_RADIUS);
+
+        if (obj) {
+          if (state.customThreeObject === obj) {
+            // clone object if it's a shared object among all points
+            obj = obj.clone();
+          }
+        }
+
+        obj.__globeObjType = 'custom'; // Add object type
+
+        obj.__data = d; // Attach point data
+
+        state.customLayerG.add(d.__threeObj = obj);
+      });
+    }
   }
@@ -248,0 +298,0 @@

package.json

 {
   "name": "three-globe",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Globe data visualization as a ThreeJS reusable 3D object",
@@ -5,0 +5,0 @@ "unpkg": "dist/three-globe.min.js",

src/globe-kapsule.js

@@ -44,16 +44,24 @@ import {
 
-const materialDispose = material => {
-  if (material instanceof Array) {
-    material.forEach(materialDispose);
-  } else {
-    if (material.map) { material.map.dispose(); }
-    material.dispose();
+const emptyObject = obj => {
+  const materialDispose = material => {
+    if (material instanceof Array) {
+      material.forEach(materialDispose);
+    } else {
+      if (material.map) { material.map.dispose(); }
+      material.dispose();
+    }
+  };
+  const deallocate = obj => {
+    if (obj.geometry) { obj.geometry.dispose(); }
+    if (obj.material) { materialDispose(obj.material); }
+    if (obj.texture) { obj.texture.dispose(); }
+    if (obj.children) { obj.children.forEach(deallocate); }
+  };
+
+  while (obj.children.length) {
+    const childObj = state.pointsG.children[0];
+    state.pointsG.remove(childObj);
+    deallocate(childObj);
   }
 };
-const deallocate = obj => {
-  if (obj.geometry) { obj.geometry.dispose(); }
-  if (obj.material) { materialDispose(obj.material); }
-  if (obj.texture) { obj.texture.dispose(); }
-  if (obj.children) { obj.children.forEach(deallocate); }
-};
 
@@ -114,6 +122,18 @@ const Shaders = {
     pointHeight: { default: 0.1, onChange(_, state) { state.pointsNeedsRepopulating = true } }, // in units of globe radius
-    pointRadius: { default: 0.25, onChange(_, state) { state.pointsNeedsRepopulating = true } } // in deg
+    pointRadius: { default: 0.25, onChange(_, state) { state.pointsNeedsRepopulating = true } }, // in deg
+    customLayerData: { default: [], onChange(_, state) { state.customLayerNeedsRepopulating = true }},
+    customThreeObject: { default: [], onChange(_, state) { state.customLayerNeedsRepopulating = true }}
   },
 
   methods: {
+    getCoords(state, lat, lng, relAltitude = 1) {
+      const phi = (90 - lat) * Math.PI / 180;
+      const theta = (180 - lng) * Math.PI / 180;
+      const r = GLOBE_RADIUS * relAltitude;
+      return {
+        x: r * Math.sin(phi) * Math.cos(theta),
+        y: r * Math.cos(phi),
+        z: r * Math.sin(phi) * Math.sin(theta)
+      };
+    },
     _loadGlobeImage: function(state, imageUrl) {
@@ -144,6 +164,3 @@ if (state.globeObj && imageUrl) {
     // Clear the scene
-    while (state.scene.children.length) {
-      const obj = state.scene.children[0];
-      state.scene.remove(obj);
-    }
+    emptyObject(state.scene);
 
@@ -177,2 +194,5 @@ // add globe
     state.scene.add(state.pointsG = new THREE.Group());
+
+    // add custom layer group
+    state.scene.add(state.customLayerG = new THREE.Group());
   },
@@ -187,7 +207,3 @@
       // Clear the existing points
-      while (state.pointsG.children.length) {
-        const obj = state.pointsG.children[0];
-        state.pointsG.remove(obj);
-        deallocate(obj);
-      }
+      emptyObject(state.pointsG);
 
@@ -217,11 +233,9 @@ // Data accessors
 
-        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
-        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
+        // position cylinder ground
+        Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt)));
 
-        obj.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
-        obj.position.y = GLOBE_RADIUS * Math.cos(phi);
-        obj.position.z = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
-
+        // orientate outwards
         obj.lookAt(state.globeObj.position);
 
+        // scale radius and altitude
         obj.scale.x = obj.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
@@ -236,3 +250,28 @@ obj.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
     }
+
+    if (state.customLayerNeedsRepopulating) {
+      state.pointsNeedRepopulating = false;
+
+      // Clear the existing objects
+      emptyObject(state.customLayerG);
+
+      const customObjectAccessor = accessorFn(state.customThreeObject);
+
+      state.customLayerData.forEach(d => {
+        let obj = customObjectAccessor(d, GLOBE_RADIUS);
+
+        if (obj) {
+          if (state.customThreeObject === obj) {
+            // clone object if it's a shared object among all points
+            obj = obj.clone();
+          }
+        }
+
+        obj.__globeObjType = 'custom'; // Add object type
+        obj.__data = d; // Attach point data
+
+        state.customLayerG.add(d.__threeObj = obj);
+      });
+    }
   }
 });

No alert changes

Improved metrics

Total package byte prevSize

198055

increased by4.29%

Lines of code

1049

increased by15.66%

No dependency changes