three-globe - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/three-globe.common.js

@@ -168,3 +168,4 @@ 'use strict';
     }));
-    globeObj.rotation.y = Math.PI / 4;
+    globeObj.rotation.y = Math.PI / 4; // face Greenwich Meridian
+
     state.scene.add(globeObj);
@@ -193,2 +194,4 @@ state.globeImageUrl && this._loadGlobeImage(state.globeImageUrl); // add atmosphere
   update(state) {
+    const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
+
     if (state.pointsNeedsRepopulating) {
@@ -201,5 +204,11 @@ state.pointsNeedRepopulating = false; // Clear the existing points
         deallocate(obj);
-      } // Add WebGL points
+      } // Data accessors
 
 
+      const latAccessor = accessorFn(state.pointLat);
+      const lngAccessor = accessorFn(state.pointLng);
+      const heightAccessor = accessorFn(state.pointHeight);
+      const radiusAccessor = accessorFn(state.pointRadius);
+      const colorAccessor = accessorFn(state.pointColor); // Add WebGL points
+
       const pointGeometry = new THREE.CylinderGeometry(1, 1, 1, 12);
@@ -209,7 +218,6 @@ pointGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
       const point = new THREE.Mesh(pointGeometry);
-      const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
-
-      const addPoint = (lat, lng, height, width, color, subgeo) => {
-        var phi = (90 - lat) * Math.PI / 180;
-        var theta = (180 - lng) * Math.PI / 180;
+      const pointsGeometry = new THREE.Geometry();
+      state.pointsData.forEach(pnt => {
+        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
+        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
         point.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
@@ -219,11 +227,9 @@ point.position.y = GLOBE_RADIUS * Math.cos(phi);
         point.lookAt(state.globeObj.position);
-        point.scale.x = point.scale.y = Math.min(30, width) * pxPerDeg;
-        point.scale.z = Math.max(height * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
+        point.scale.x = point.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
+        point.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
 
         point.updateMatrix();
+        const color = new THREE.Color(colorAccessor(pnt));
+        point.geometry.faces.forEach(face => face.color = color);
 
-        for (var i = 0; i < point.geometry.faces.length; i++) {
-          point.geometry.faces[i].color = new THREE.Color(color);
-        }
-
         if (point.matrixAutoUpdate) {
@@ -233,13 +239,3 @@ point.updateMatrix();
 
-        subgeo.merge(point.geometry, point.matrix);
-      };
-
-      const latAccessor = accessorFn(state.pointLat);
-      const lngAccessor = accessorFn(state.pointLng);
-      const heightAccessor = accessorFn(state.pointHeight);
-      const widthAccessor = accessorFn(state.pointRadius);
-      const colorAccessor = accessorFn(state.pointColor);
-      const pointsGeometry = new THREE.Geometry();
-      state.pointsData.forEach(pnt => {
-        addPoint(latAccessor(pnt), lngAccessor(pnt), heightAccessor(pnt), widthAccessor(pnt), colorAccessor(pnt), pointsGeometry);
+        pointsGeometry.merge(point.geometry, point.matrix);
       });
@@ -246,0 +242,0 @@ const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({

dist/three-globe.js

@@ -1,2 +0,2 @@
-// Version 0.1.0 three-globe - https://github.com/vasturiano/three-globe
+// Version 0.2.0 three-globe - https://github.com/vasturiano/three-globe
 (function (global, factory) {
@@ -191,3 +191,4 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
 	    }));
-	    globeObj.rotation.y = Math.PI / 4;
+	    globeObj.rotation.y = Math.PI / 4; // face Greenwich Meridian
+
 	    state.scene.add(globeObj);
@@ -216,2 +217,4 @@ state.globeImageUrl && this._loadGlobeImage(state.globeImageUrl); // add atmosphere
 	  update(state) {
+	    const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
+
 	    if (state.pointsNeedsRepopulating) {
@@ -224,5 +227,11 @@ state.pointsNeedRepopulating = false; // Clear the existing points
 	        deallocate(obj);
-	      } // Add WebGL points
+	      } // Data accessors
 
 
+	      const latAccessor = accessorFn(state.pointLat);
+	      const lngAccessor = accessorFn(state.pointLng);
+	      const heightAccessor = accessorFn(state.pointHeight);
+	      const radiusAccessor = accessorFn(state.pointRadius);
+	      const colorAccessor = accessorFn(state.pointColor); // Add WebGL points
+
 	      const pointGeometry = new THREE.CylinderGeometry(1, 1, 1, 12);
@@ -232,7 +241,6 @@ pointGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
 	      const point = new THREE.Mesh(pointGeometry);
-	      const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
-
-	      const addPoint = (lat, lng, height, width, color, subgeo) => {
-	        var phi = (90 - lat) * Math.PI / 180;
-	        var theta = (180 - lng) * Math.PI / 180;
+	      const pointsGeometry = new THREE.Geometry();
+	      state.pointsData.forEach(pnt => {
+	        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
+	        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
 	        point.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
@@ -242,11 +250,9 @@ point.position.y = GLOBE_RADIUS * Math.cos(phi);
 	        point.lookAt(state.globeObj.position);
-	        point.scale.x = point.scale.y = Math.min(30, width) * pxPerDeg;
-	        point.scale.z = Math.max(height * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
+	        point.scale.x = point.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
+	        point.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
 
 	        point.updateMatrix();
+	        const color = new THREE.Color(colorAccessor(pnt));
+	        point.geometry.faces.forEach(face => face.color = color);
 
-	        for (var i = 0; i < point.geometry.faces.length; i++) {
-	          point.geometry.faces[i].color = new THREE.Color(color);
-	        }
-
 	        if (point.matrixAutoUpdate) {
@@ -256,13 +262,3 @@ point.updateMatrix();
 
-	        subgeo.merge(point.geometry, point.matrix);
-	      };
-
-	      const latAccessor = accessorFn(state.pointLat);
-	      const lngAccessor = accessorFn(state.pointLng);
-	      const heightAccessor = accessorFn(state.pointHeight);
-	      const widthAccessor = accessorFn(state.pointRadius);
-	      const colorAccessor = accessorFn(state.pointColor);
-	      const pointsGeometry = new THREE.Geometry();
-	      state.pointsData.forEach(pnt => {
-	        addPoint(latAccessor(pnt), lngAccessor(pnt), heightAccessor(pnt), widthAccessor(pnt), colorAccessor(pnt), pointsGeometry);
+	        pointsGeometry.merge(point.geometry, point.matrix);
 	      });
@@ -269,0 +265,0 @@ const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({

dist/three-globe.min.js

@@ -1,2 +0,2 @@
-// Version 0.1.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){return arguments.length?(t[e]=i,r.call(o,i,t),n&&l(),o):t[e]}}(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:{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){if(e.pointsNeedsRepopulating){for(e.pointsNeedRepopulating=!1;e.pointsG.children.length;){const t=e.pointsG.children[0];e.pointsG.remove(t),u(t)}const t=new l.CylinderGeometry(1,1,1,12);t.applyMatrix((new l.Matrix4).makeRotationX(Math.PI/2)),t.applyMatrix((new l.Matrix4).makeTranslation(0,0,-.5));const n=new l.Mesh(t),o=2*Math.PI*200/360,r=(t,r,i,a,s,u)=>{var c=(90-t)*Math.PI/180,f=(180-r)*Math.PI/180;n.position.x=200*Math.sin(c)*Math.cos(f),n.position.y=200*Math.cos(c),n.position.z=200*Math.sin(c)*Math.sin(f),n.lookAt(e.globeObj.position),n.scale.x=n.scale.y=Math.min(30,a)*o,n.scale.z=Math.max(200*i,.1),n.updateMatrix();for(var d=0;d<n.geometry.faces.length;d++)n.geometry.faces[d].color=new l.Color(s);n.matrixAutoUpdate&&n.updateMatrix(),u.merge(n.geometry,n.matrix)},i=a(e.pointLat),s=a(e.pointLng),c=a(e.pointHeight),f=a(e.pointRadius),d=a(e.pointColor),p=new l.Geometry;e.pointsData.forEach(e=>{r(i(e),s(e),c(e),f(e),d(e),p)});const h=new l.Mesh(p,new l.MeshBasicMaterial({color:16777215,vertexColors:l.FaceColors,morphTargets:!1}));e.pointsG.add(h)}}}),e.Group,!0)});
+// Version 0.2.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){return arguments.length?(t[e]=i,r.call(o,i,t),n&&l(),o):t[e]}}(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:{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=new l.Mesh(c),d=new l.Geometry;e.pointsData.forEach(a=>{const u=(90-n(a))*Math.PI/180,c=(180-o(a))*Math.PI/180;f.position.x=200*Math.sin(u)*Math.cos(c),f.position.y=200*Math.cos(u),f.position.z=200*Math.sin(u)*Math.sin(c),f.lookAt(e.globeObj.position),f.scale.x=f.scale.y=Math.min(30,i(a))*t,f.scale.z=Math.max(200*r(a),.1),f.updateMatrix();const p=new l.Color(s(a));f.geometry.faces.forEach(e=>e.color=p),f.matrixAutoUpdate&&f.updateMatrix(),d.merge(f.geometry,f.matrix)});const p=new l.Mesh(d,new l.MeshBasicMaterial({color:16777215,vertexColors:l.FaceColors,morphTargets:!1}));e.pointsG.add(p)}}}),e.Group,!0)});

dist/three-globe.module.js

@@ -164,3 +164,4 @@ import { AdditiveBlending, BackSide, Color, CylinderGeometry, FaceColors, Geometry, Group, Matrix4, Mesh, MeshBasicMaterial, ShaderMaterial, SphereGeometry, TextureLoader, UniformsUtils } from 'three';
     }));
-    globeObj.rotation.y = Math.PI / 4;
+    globeObj.rotation.y = Math.PI / 4; // face Greenwich Meridian
+
     state.scene.add(globeObj);
@@ -189,2 +190,4 @@ state.globeImageUrl && this._loadGlobeImage(state.globeImageUrl); // add atmosphere
   update(state) {
+    const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
+
     if (state.pointsNeedsRepopulating) {
@@ -197,5 +200,11 @@ state.pointsNeedRepopulating = false; // Clear the existing points
         deallocate(obj);
-      } // Add WebGL points
+      } // Data accessors
 
 
+      const latAccessor = accessorFn(state.pointLat);
+      const lngAccessor = accessorFn(state.pointLng);
+      const heightAccessor = accessorFn(state.pointHeight);
+      const radiusAccessor = accessorFn(state.pointRadius);
+      const colorAccessor = accessorFn(state.pointColor); // Add WebGL points
+
       const pointGeometry = new THREE.CylinderGeometry(1, 1, 1, 12);
@@ -205,7 +214,6 @@ pointGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
       const point = new THREE.Mesh(pointGeometry);
-      const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
-
-      const addPoint = (lat, lng, height, width, color, subgeo) => {
-        var phi = (90 - lat) * Math.PI / 180;
-        var theta = (180 - lng) * Math.PI / 180;
+      const pointsGeometry = new THREE.Geometry();
+      state.pointsData.forEach(pnt => {
+        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
+        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
         point.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
@@ -215,11 +223,9 @@ point.position.y = GLOBE_RADIUS * Math.cos(phi);
         point.lookAt(state.globeObj.position);
-        point.scale.x = point.scale.y = Math.min(30, width) * pxPerDeg;
-        point.scale.z = Math.max(height * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
+        point.scale.x = point.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
+        point.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
 
         point.updateMatrix();
+        const color = new THREE.Color(colorAccessor(pnt));
+        point.geometry.faces.forEach(face => face.color = color);
 
-        for (var i = 0; i < point.geometry.faces.length; i++) {
-          point.geometry.faces[i].color = new THREE.Color(color);
-        }
-
         if (point.matrixAutoUpdate) {
@@ -229,13 +235,3 @@ point.updateMatrix();
 
-        subgeo.merge(point.geometry, point.matrix);
-      };
-
-      const latAccessor = accessorFn(state.pointLat);
-      const lngAccessor = accessorFn(state.pointLng);
-      const heightAccessor = accessorFn(state.pointHeight);
-      const widthAccessor = accessorFn(state.pointRadius);
-      const colorAccessor = accessorFn(state.pointColor);
-      const pointsGeometry = new THREE.Geometry();
-      state.pointsData.forEach(pnt => {
-        addPoint(latAccessor(pnt), lngAccessor(pnt), heightAccessor(pnt), widthAccessor(pnt), colorAccessor(pnt), pointsGeometry);
+        pointsGeometry.merge(point.geometry, point.matrix);
       });
@@ -242,0 +238,0 @@ const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({

package.json

 {
   "name": "three-globe",
-  "version": "0.1.0",
+  "version": "0.2.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

@@ -150,3 +150,3 @@ import {
     const globeObj = state.globeObj = new THREE.Mesh(globeGeometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
-    globeObj.rotation.y = Math.PI / 4;
+    globeObj.rotation.y = Math.PI / 4; // face Greenwich Meridian
     state.scene.add(globeObj);
@@ -178,2 +178,4 @@ state.globeImageUrl && this._loadGlobeImage(state.globeImageUrl);
   update(state) {
+    const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
+
     if (state.pointsNeedsRepopulating) {
@@ -189,2 +191,9 @@ state.pointsNeedRepopulating = false;
 
+      // Data accessors
+      const latAccessor = accessorFn(state.pointLat);
+      const lngAccessor = accessorFn(state.pointLng);
+      const heightAccessor = accessorFn(state.pointHeight);
+      const radiusAccessor = accessorFn(state.pointRadius);
+      const colorAccessor = accessorFn(state.pointColor);
+
       // Add WebGL points
@@ -195,7 +204,8 @@ const pointGeometry = new THREE.CylinderGeometry(1, 1, 1, 12);
       const point = new THREE.Mesh(pointGeometry);
-      const pxPerDeg = 2 * Math.PI * GLOBE_RADIUS / 360;
-      const addPoint = (lat, lng, height, width, color, subgeo) => {
-        var phi = (90 - lat) * Math.PI / 180;
-        var theta = (180 - lng) * Math.PI / 180;
+      const pointsGeometry = new THREE.Geometry();
 
+      state.pointsData.forEach(pnt => {
+        const phi = (90 - latAccessor(pnt)) * Math.PI / 180;
+        const theta = (180 - lngAccessor(pnt)) * Math.PI / 180;
+
         point.position.x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
@@ -207,25 +217,13 @@ point.position.y = GLOBE_RADIUS * Math.cos(phi);
 
-        point.scale.x = point.scale.y = Math.min(30, width) * pxPerDeg;
-        point.scale.z = Math.max(height * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
+        point.scale.x = point.scale.y = Math.min(30, radiusAccessor(pnt)) * pxPerDeg;
+        point.scale.z = Math.max(heightAccessor(pnt) * GLOBE_RADIUS, 0.1); // avoid non-invertible matrix
         point.updateMatrix();
 
-        for (var i = 0; i < point.geometry.faces.length; i++) {
-          point.geometry.faces[i].color = new THREE.Color(color);
-        }
+        const color = new THREE.Color(colorAccessor(pnt));
+        point.geometry.faces.forEach(face => face.color = color);
+
         if (point.matrixAutoUpdate) {
           point.updateMatrix();
         }
-        subgeo.merge(point.geometry, point.matrix);
-      };
-
-      const latAccessor = accessorFn(state.pointLat);
-      const lngAccessor = accessorFn(state.pointLng);
-      const heightAccessor = accessorFn(state.pointHeight);
-      const widthAccessor = accessorFn(state.pointRadius);
-      const colorAccessor = accessorFn(state.pointColor);
-
-      const pointsGeometry = new THREE.Geometry();
-
-      state.pointsData.forEach(pnt => {
-        addPoint(latAccessor(pnt), lngAccessor(pnt), heightAccessor(pnt), widthAccessor(pnt), colorAccessor(pnt), pointsGeometry);
+        pointsGeometry.merge(point.geometry, point.matrix);
       });
@@ -232,0 +230,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

219959

decreased by-0.42%

Lines of code

1516

decreased by-0.98%

No dependency changes