three-globe - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/three-globe.common.js

@@ -152,2 +152,11 @@ 'use strict';
     // how many slice segments in the cylinder's circumference
+    pointsMerge: {
+      default: false,
+
+      onChange(_, state) {
+        state.pointsNeedsRepopulating = true;
+      }
+
+    },
+    // boolean. Whether to merge all points into a single mesh for rendering performance
     customLayerData: {
@@ -258,15 +267,6 @@ default: [],
       pointGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -0.5));
-      const pointMaterials = {}; // indexed by color
-
+      const pointObjs = [];
       state.pointsData.forEach(pnt => {
-        const color = colorAccessor(pnt);
+        const obj = new THREE.Mesh(pointGeometry); // position cylinder ground
 
-        if (!pointMaterials.hasOwnProperty(color)) {
-          pointMaterials[color] = new THREE.MeshBasicMaterial({
-            color: new THREE.Color(color)
-          });
-        }
-
-        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
-
         Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
@@ -283,4 +283,47 @@
 
-        state.pointsG.add(pnt.__threeObj = obj);
+        pointObjs.push(obj);
       });
+
+      if (state.pointsMerge) {
+        // merge points into a single mesh
+        const pointsGeometry = new THREE.Geometry();
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+          const color = new THREE.Color(colorAccessor(pnt));
+          obj.geometry.faces.forEach(face => face.color = color);
+          obj.updateMatrix();
+          pointsGeometry.merge(obj.geometry, obj.matrix);
+        });
+        const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({
+          color: 0xffffff,
+          vertexColors: THREE.FaceColors,
+          morphTargets: false
+        }));
+        points.__globeObjType = 'points'; // Add object type
+
+        points.__data = state.pointsData; // Attach obj data
+
+        state.pointsG.add(points);
+      } else {
+        // Add individual meshes per point
+        const pointMaterials = {}; // indexed by color
+
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+          const color = colorAccessor(pnt);
+
+          if (!pointMaterials.hasOwnProperty(color)) {
+            pointMaterials[color] = new THREE.MeshBasicMaterial({
+              color: new THREE.Color(color)
+            });
+          }
+
+          obj.material = pointMaterials[color];
+          obj.__globeObjType = 'point'; // Add object type
+
+          obj.__data = pnt; // Attach point data
+
+          state.pointsG.add(pnt.__threeObj = obj);
+        });
+      }
     }
@@ -287,0 +330,0 @@

dist/three-globe.js

@@ -1,2 +0,2 @@
-// Version 0.5.0 three-globe - https://github.com/vasturiano/three-globe
+// Version 0.6.0 three-globe - https://github.com/vasturiano/three-globe
 (function (global, factory) {
@@ -175,2 +175,11 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
 	    // how many slice segments in the cylinder's circumference
+	    pointsMerge: {
+	      default: false,
+
+	      onChange(_, state) {
+	        state.pointsNeedsRepopulating = true;
+	      }
+
+	    },
+	    // boolean. Whether to merge all points into a single mesh for rendering performance
 	    customLayerData: {
@@ -281,15 +290,6 @@ default: [],
 	      pointGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -0.5));
-	      const pointMaterials = {}; // indexed by color
-
+	      const pointObjs = [];
 	      state.pointsData.forEach(pnt => {
-	        const color = colorAccessor(pnt);
+	        const obj = new THREE.Mesh(pointGeometry); // position cylinder ground
 
-	        if (!pointMaterials.hasOwnProperty(color)) {
-	          pointMaterials[color] = new THREE.MeshBasicMaterial({
-	            color: new THREE.Color(color)
-	          });
-	        }
-
-	        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
-
 	        Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
@@ -306,4 +306,47 @@
 
-	        state.pointsG.add(pnt.__threeObj = obj);
+	        pointObjs.push(obj);
 	      });
+
+	      if (state.pointsMerge) {
+	        // merge points into a single mesh
+	        const pointsGeometry = new THREE.Geometry();
+	        pointObjs.forEach(obj => {
+	          const pnt = obj.__data;
+	          const color = new THREE.Color(colorAccessor(pnt));
+	          obj.geometry.faces.forEach(face => face.color = color);
+	          obj.updateMatrix();
+	          pointsGeometry.merge(obj.geometry, obj.matrix);
+	        });
+	        const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({
+	          color: 0xffffff,
+	          vertexColors: THREE.FaceColors,
+	          morphTargets: false
+	        }));
+	        points.__globeObjType = 'points'; // Add object type
+
+	        points.__data = state.pointsData; // Attach obj data
+
+	        state.pointsG.add(points);
+	      } else {
+	        // Add individual meshes per point
+	        const pointMaterials = {}; // indexed by color
+
+	        pointObjs.forEach(obj => {
+	          const pnt = obj.__data;
+	          const color = colorAccessor(pnt);
+
+	          if (!pointMaterials.hasOwnProperty(color)) {
+	            pointMaterials[color] = new THREE.MeshBasicMaterial({
+	              color: new THREE.Color(color)
+	            });
+	          }
+
+	          obj.material = pointMaterials[color];
+	          obj.__globeObjType = 'point'; // Add object type
+
+	          obj.__data = pnt; // Attach point data
+
+	          state.pointsG.add(pnt.__threeObj = obj);
+	        });
+	      }
 	    }
@@ -310,0 +353,0 @@

dist/three-globe.min.js

@@ -1,2 +0,2 @@
-// Version 0.5.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,p=void 0===c?{}:c,d=e.init,f=void 0===d?function(){}:d,h=e.update,m=void 0===h?function(){}:h,g=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 g.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(p).forEach(function(e){var t=a(e,2),n=t[0],r=t[1];return o[n]=o[r]}),o.resetProps=function(){return g.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}},pointResolution:{default:12,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=(-45-n)*Math.PI/180,i=100*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(100,40,30),o=t.globeObj=new s.Mesh(n,new s.MeshBasicMaterial({color:0}));o.rotation.y=Math.PI/4,o.__globeObjType="globe",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),a.__globeObjType="atmosphere",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*100/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,e.pointResolution);c.applyMatrix((new s.Matrix4).makeRotationX(Math.PI/2)),c.applyMatrix((new s.Matrix4).makeTranslation(0,0,-.5));const p={};e.pointsData.forEach(i=>{const l=u(i);p.hasOwnProperty(l)||(p[l]=new s.MeshBasicMaterial({color:new s.Color(l)}));const d=new s.Mesh(c,p[l]);Object.assign(d.position,this.getCoords(n(i),o(i))),d.lookAt(e.globeObj.position),d.scale.x=d.scale.y=Math.min(30,a(i))*t,d.scale.z=Math.max(100*r(i),.1),d.__globeObjType="point",d.__data=i,e.pointsG.add(i.__threeObj=d)})}if(e.customLayerNeedsRepopulating){e.pointsNeedRepopulating=!1,l(e.customLayerG);const t=i(e.customThreeObject);e.customLayerData.forEach(n=>{let o=t(n,100);o&&e.customThreeObject===o&&(o=o.clone()),o.__globeObjType="custom",o.__data=n,e.customLayerG.add(n.__threeObj=o)})}}}),e.Group,!0)});
+// Version 0.6.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,p=void 0===c?{}:c,d=e.init,f=void 0===d?function(){}:d,h=e.update,g=void 0===h?function(){}:h,m=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&&g.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(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(p).forEach(function(e){var t=a(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=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}},pointResolution:{default:12,onChange(e,t){t.pointsNeedsRepopulating=!0}},pointsMerge:{default:!1,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=(-45-n)*Math.PI/180,i=100*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(100,40,30),o=t.globeObj=new s.Mesh(n,new s.MeshBasicMaterial({color:0}));o.rotation.y=Math.PI/4,o.__globeObjType="globe",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),a.__globeObjType="atmosphere",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*100/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,e.pointResolution);c.applyMatrix((new s.Matrix4).makeRotationX(Math.PI/2)),c.applyMatrix((new s.Matrix4).makeTranslation(0,0,-.5));const p=[];if(e.pointsData.forEach(i=>{const l=new s.Mesh(c);Object.assign(l.position,this.getCoords(n(i),o(i))),l.lookAt(e.globeObj.position),l.scale.x=l.scale.y=Math.min(30,a(i))*t,l.scale.z=Math.max(100*r(i),.1),l.__globeObjType="point",l.__data=i,p.push(l)}),e.pointsMerge){const t=new s.Geometry;p.forEach(e=>{const n=e.__data,o=new s.Color(u(n));e.geometry.faces.forEach(e=>e.color=o),e.updateMatrix(),t.merge(e.geometry,e.matrix)});const n=new s.Mesh(t,new s.MeshBasicMaterial({color:16777215,vertexColors:s.FaceColors,morphTargets:!1}));n.__globeObjType="points",n.__data=e.pointsData,e.pointsG.add(n)}else{const t={};p.forEach(n=>{const o=n.__data,r=u(o);t.hasOwnProperty(r)||(t[r]=new s.MeshBasicMaterial({color:new s.Color(r)})),n.material=t[r],n.__globeObjType="point",n.__data=o,e.pointsG.add(o.__threeObj=n)})}}if(e.customLayerNeedsRepopulating){e.pointsNeedRepopulating=!1,l(e.customLayerG);const t=i(e.customThreeObject);e.customLayerData.forEach(n=>{let o=t(n,100);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

@@ -148,2 +148,11 @@ import { AdditiveBlending, BackSide, Color, CylinderGeometry, FaceColors, Geometry, Group, Matrix4, Mesh, MeshBasicMaterial, ShaderMaterial, SphereGeometry, TextureLoader, UniformsUtils } from 'three';
     // how many slice segments in the cylinder's circumference
+    pointsMerge: {
+      default: false,
+
+      onChange(_, state) {
+        state.pointsNeedsRepopulating = true;
+      }
+
+    },
+    // boolean. Whether to merge all points into a single mesh for rendering performance
     customLayerData: {
@@ -254,15 +263,6 @@ default: [],
       pointGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -0.5));
-      const pointMaterials = {}; // indexed by color
-
+      const pointObjs = [];
       state.pointsData.forEach(pnt => {
-        const color = colorAccessor(pnt);
+        const obj = new THREE.Mesh(pointGeometry); // position cylinder ground
 
-        if (!pointMaterials.hasOwnProperty(color)) {
-          pointMaterials[color] = new THREE.MeshBasicMaterial({
-            color: new THREE.Color(color)
-          });
-        }
-
-        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]); // position cylinder ground
-
         Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt))); // orientate outwards
@@ -279,4 +279,47 @@
 
-        state.pointsG.add(pnt.__threeObj = obj);
+        pointObjs.push(obj);
       });
+
+      if (state.pointsMerge) {
+        // merge points into a single mesh
+        const pointsGeometry = new THREE.Geometry();
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+          const color = new THREE.Color(colorAccessor(pnt));
+          obj.geometry.faces.forEach(face => face.color = color);
+          obj.updateMatrix();
+          pointsGeometry.merge(obj.geometry, obj.matrix);
+        });
+        const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({
+          color: 0xffffff,
+          vertexColors: THREE.FaceColors,
+          morphTargets: false
+        }));
+        points.__globeObjType = 'points'; // Add object type
+
+        points.__data = state.pointsData; // Attach obj data
+
+        state.pointsG.add(points);
+      } else {
+        // Add individual meshes per point
+        const pointMaterials = {}; // indexed by color
+
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+          const color = colorAccessor(pnt);
+
+          if (!pointMaterials.hasOwnProperty(color)) {
+            pointMaterials[color] = new THREE.MeshBasicMaterial({
+              color: new THREE.Color(color)
+            });
+          }
+
+          obj.material = pointMaterials[color];
+          obj.__globeObjType = 'point'; // Add object type
+
+          obj.__data = pnt; // Attach point data
+
+          state.pointsG.add(pnt.__threeObj = obj);
+        });
+      }
     }
@@ -283,0 +326,0 @@

package.json

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

@@ -117,8 +117,9 @@ import {
     pointsData: { default: [], onChange(_, state) { state.pointsNeedsRepopulating = true }},
-    pointLat: { default: 'lat', onChange(_, state) { state.pointsNeedsRepopulating = true } },
-    pointLng: { default: 'lng', onChange(_, state) { state.pointsNeedsRepopulating = true } },
-    pointColor: { default: () => '#ffffaa', onChange(_, state) { state.pointsNeedsRepopulating = true } },
-    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
-    pointResolution: { default: 12, onChange(_, state) { state.pointsNeedsRepopulating = true } }, // how many slice segments in the cylinder's circumference
+    pointLat: { default: 'lat', onChange(_, state) { state.pointsNeedsRepopulating = true }},
+    pointLng: { default: 'lng', onChange(_, state) { state.pointsNeedsRepopulating = true }},
+    pointColor: { default: () => '#ffffaa', onChange(_, state) { state.pointsNeedsRepopulating = true }},
+    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
+    pointResolution: { default: 12, onChange(_, state) { state.pointsNeedsRepopulating = true }}, // how many slice segments in the cylinder's circumference
+    pointsMerge: { default: false, onChange(_, state) { state.pointsNeedsRepopulating = true }}, // boolean. Whether to merge all points into a single mesh for rendering performance
     customLayerData: { default: [], onChange(_, state) { state.customLayerNeedsRepopulating = true }},
@@ -220,14 +221,8 @@ customThreeObject: { default: [], onChange(_, state) { state.customLayerNeedsRepopulating = true }}
       pointGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -0.5));
-      const pointMaterials = {}; // indexed by color
 
+      const pointObjs = [];
+
       state.pointsData.forEach(pnt => {
-        const color = colorAccessor(pnt);
-        if (!pointMaterials.hasOwnProperty(color)) {
-          pointMaterials[color] = new THREE.MeshBasicMaterial({
-            color: new THREE.Color(color)
-          });
-        }
+        const obj = new THREE.Mesh(pointGeometry);
 
-        const obj = new THREE.Mesh(pointGeometry, pointMaterials[color]);
-
         // position cylinder ground
@@ -246,4 +241,51 @@ Object.assign(obj.position, this.getCoords(latAccessor(pnt), lngAccessor(pnt)));
 
-        state.pointsG.add(pnt.__threeObj = obj);
+        pointObjs.push(obj);
       });
+
+      if (state.pointsMerge) { // merge points into a single mesh
+        const pointsGeometry = new THREE.Geometry();
+
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+
+          const color = new THREE.Color(colorAccessor(pnt));
+          obj.geometry.faces.forEach(face => face.color = color);
+
+          obj.updateMatrix();
+
+          pointsGeometry.merge(obj.geometry, obj.matrix);
+        });
+
+        const points = new THREE.Mesh(pointsGeometry, new THREE.MeshBasicMaterial({
+          color: 0xffffff,
+          vertexColors: THREE.FaceColors,
+          morphTargets: false
+        }));
+
+        points.__globeObjType = 'points'; // Add object type
+        points.__data = state.pointsData; // Attach obj data
+
+        state.pointsG.add(points);
+
+      } else { // Add individual meshes per point
+
+        const pointMaterials = {}; // indexed by color
+
+        pointObjs.forEach(obj => {
+          const pnt = obj.__data;
+          const color = colorAccessor(pnt);
+          if (!pointMaterials.hasOwnProperty(color)) {
+            pointMaterials[color] = new THREE.MeshBasicMaterial({
+              color: new THREE.Color(color)
+            });
+          }
+
+          obj.material = pointMaterials[color];
+
+          obj.__globeObjType = 'point'; // Add object type
+          obj.__data = pnt; // Attach point data
+
+          state.pointsG.add(pnt.__threeObj = obj);
+        });
+      }
     }
@@ -250,0 +292,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

208858

increased by4.37%

Lines of code

1215

increased by12.6%

No dependency changes