maptalks.three - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/maptalks.three.es.js

 /*!
- * maptalks.three v0.6.0
+ * maptalks.three v0.6.1
  * LICENSE : MIT
@@ -7,3 +7,3 @@ * (c) 2016-2018 maptalks.org
 import { Util, MultiPolygon, CanvasLayer, Browser, renderer } from 'maptalks';
-import { Vector3, Shape, REVISION, ExtrudeGeometry, BufferGeometry, Mesh, WebGLRenderer, Color, Scene, Camera } from 'three';
+import { Vector3, Shape, REVISION, ExtrudeGeometry, BufferGeometry, Mesh, WebGLRenderer, Color, Scene, PerspectiveCamera } from 'three';
 
@@ -348,4 +348,9 @@ function _inheritsLoose(subClass, superClass) {
     var scene = this.scene = new Scene();
-    var camera = this.camera = new Camera();
+    var map = this.layer.getMap();
+    var fov = map.getFov() * Math.PI / 180;
+    var camera = this.camera = new PerspectiveCamera(fov, map.width / map.height, map.cameraNear, map.cameraFar);
     camera.matrixAutoUpdate = false;
+
+    this._syncCamera();
+
     scene.add(camera);
@@ -401,3 +406,3 @@ };
   _proto2.renderScene = function renderScene() {
-    this._locateCamera();
+    this._syncCamera();
 
@@ -414,3 +419,3 @@ this.context.render(this.scene, this.camera);
 
-  _proto2._locateCamera = function _locateCamera() {
+  _proto2._syncCamera = function _syncCamera() {
     var map = this.getMap();
@@ -450,2 +455,2 @@ this.camera.matrix.elements = map.cameraWorldMatrix;
 
-typeof console !== 'undefined' && console.log('maptalks.three v0.6.0, requires maptalks@>=0.39.0.');
+typeof console !== 'undefined' && console.log('maptalks.three v0.6.1, requires maptalks@>=0.39.0.');

dist/maptalks.three.js

 /*!
- * maptalks.three v0.6.0
+ * maptalks.three v0.6.1
  * LICENSE : MIT
@@ -350,4 +350,9 @@ * (c) 2016-2018 maptalks.org
       var scene = this.scene = new THREE.Scene();
-      var camera = this.camera = new THREE.Camera();
+      var map = this.layer.getMap();
+      var fov = map.getFov() * Math.PI / 180;
+      var camera = this.camera = new THREE.PerspectiveCamera(fov, map.width / map.height, map.cameraNear, map.cameraFar);
       camera.matrixAutoUpdate = false;
+
+      this._syncCamera();
+
       scene.add(camera);
@@ -403,3 +408,3 @@ };
     _proto2.renderScene = function renderScene() {
-      this._locateCamera();
+      this._syncCamera();
 
@@ -416,3 +421,3 @@ this.context.render(this.scene, this.camera);
 
-    _proto2._locateCamera = function _locateCamera() {
+    _proto2._syncCamera = function _syncCamera() {
       var map = this.getMap();
@@ -455,4 +460,4 @@ this.camera.matrix.elements = map.cameraWorldMatrix;
 
-  typeof console !== 'undefined' && console.log('maptalks.three v0.6.0, requires maptalks@>=0.39.0.');
+  typeof console !== 'undefined' && console.log('maptalks.three v0.6.1, requires maptalks@>=0.39.0.');
 
 })));

dist/maptalks.three.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("maptalks"),require("three")):"function"==typeof define&&define.amd?define(["exports","maptalks","three"],t):t(e.maptalks=e.maptalks||{},e.maptalks,e.THREE)}(this,function(e,f,p){"use strict";function n(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var a=Math.PI/180,t=function(e){function t(){return e.apply(this,arguments)||this}n(t,e);var r=t.prototype;return r.draw=function(){this.renderScene()},r.drawOnInteracting=function(){this.renderScene()},r.coordinateToVector3=function(e,t){void 0===t&&(t=0);var r=this.getMap();if(!r)return null;var n=r.coordinateToPoint(e,l(r));return new p.Vector3(n.x,n.y,t)},r.distanceToVector3=function(e,t,r){var n=this.getMap(),a=l(n),i=r||n.getCenter(),o=n.locate(i,e,t),s=n.coordinateToPoint(i,a),c=n.coordinateToPoint(o,a),h=Math.abs(c.x-s.x)*f.Util.sign(e),u=Math.abs(c.y-s.y)*f.Util.sign(t);return new p.Vector3(h,u,0)},r.toShape=function(e){var r=this;if(!e)return null;if(e instanceof f.MultiPolygon)return e.getGeometries().map(function(e){return r.toShape(e)});var t=e.getCenter(),n=this.coordinateToVector3(t),a=e.getShell().map(function(e){return r.coordinateToVector3(e).sub(n)}).reverse(),i=new p.Shape(a),o=e.getHoles();return o&&0<o.length&&(i.holes=o.map(function(e){var t=e.map(function(e){return r.coordinateToVector3(e).sub(n)});return new p.Shape(t)})),i},r.toExtrudeMesh=function(e,t,r,n){var a=this;if(!e)return null;if(e instanceof f.MultiPolygon)return e.getGeometries().map(function(e){return a.toExtrudeGeometry(e,t,r,n)});var i=e.getCoordinates();i.forEach(function(e){for(var t=e.length-1;1<=t;t--)e[t].equals(e[t-1])&&e.splice(t,1)}),e.setCoordinates(i);var o=this.toShape(e),s=this.coordinateToVector3(e.getCenter());n=f.Util.isNumber(n)?n:t,n=this.distanceToVector3(n,n).x;var c=this.distanceToVector3(t,t).x,h={bevelEnabled:!1,bevelSize:1};h[93<=parseInt(p.REVISION)?"depth":"amount"]=n;var u=new p.ExtrudeGeometry(o,h);(new p.BufferGeometry).fromGeometry(u);var l=new p.Mesh(u,r);return l.position.set(s.x,s.y,c-n),l},r.clearMesh=function(){var e=this.getScene();if(!e)return this;for(var t=e.children.length-1;0<=t;t--)e.children[t]instanceof p.Mesh&&e.remove(e.children[t]);return this},r.lookAt=function(e){var t=this._getRenderer();return t&&t.context.lookAt(e),this},r.getCamera=function(){var e=this._getRenderer();return e?e.camera:null},r.getScene=function(){var e=this._getRenderer();return e?e.scene:null},r.renderScene=function(){var e=this._getRenderer();return e?e.renderScene():this},r.getThreeRenderer=function(){var e=this._getRenderer();return e?e.context:null},r._getFovRatio=function(){var e=this.getMap().getFov();return Math.tan(e/2*a)},t}(f.CanvasLayer);t.mergeOptions({renderer:"gl",doubleBuffer:!1,glOptions:null});var r=function(e){function t(){return e.apply(this,arguments)||this}n(t,e);var r=t.prototype;return r.getPrepareParams=function(){return[this.scene,this.camera]},r.getDrawParams=function(){return[this.scene,this.camera]},r._drawLayer=function(){e.prototype._drawLayer.apply(this,arguments),this.renderScene()},r.hitDetect=function(){return!1},r.createCanvas=function(){e.prototype.createCanvas.call(this),this.createContext()},r.createContext=function(){if(this.canvas.gl&&this.canvas.gl.wrap)this.gl=this.canvas.gl.wrap();else{var e=this.layer.options.glOptions||{alpha:!0,depth:!0,antialias:!0,stencil:!0};e.preserveDrawingBuffer=!0,this.gl=this.gl||this._createGLContext(this.canvas,e)}this._initThreeRenderer(),this.layer.onCanvasCreate(this.context,this.scene,this.camera)},r._initThreeRenderer=function(){var e=new p.WebGLRenderer({context:this.gl,alpha:!0});e.autoClear=!1,e.setClearColor(new p.Color(1,1,1),0),e.setSize(this.canvas.width,this.canvas.height),e.clear(),e.canvas=this.canvas,this.context=e;var t=this.scene=new p.Scene,r=this.camera=new p.Camera;r.matrixAutoUpdate=!1,t.add(r)},r.onCanvasCreate=function(){e.prototype.onCanvasCreate.call(this)},r.resizeCanvas=function(e){if(this.canvas){var t;t=e||this.getMap().getSize();var r=f.Browser.retina?2:1,n=this.canvas;n.height=r*t.height,n.width=r*t.width,this.context.setSize(n.width,n.height)}},r.clearCanvas=function(){this.canvas&&this.context.clear()},r.prepareCanvas=function(){return this.canvas?this.clearCanvas():this.createCanvas(),this.layer.fire("renderstart",{context:this.context}),null},r.renderScene=function(){this._locateCamera(),this.context.render(this.scene,this.camera),this.completeRender()},r.remove=function(){delete this._drawContext,e.prototype.remove.call(this)},r._locateCamera=function(){var e=this.getMap();this.camera.matrix.elements=e.cameraWorldMatrix,this.camera.projectionMatrix.elements=e.projMatrix},r._createGLContext=function(e,t){for(var r=["webgl","experimental-webgl"],n=null,a=0;a<r.length;++a){try{n=e.getContext(r[a],t)}catch(e){}if(n)break}return n},t}(f.renderer.CanvasLayerRenderer);function l(e){return e.getGLZoom()}t.registerRenderer("gl",r),e.ThreeLayer=t,e.ThreeRenderer=r,Object.defineProperty(e,"__esModule",{value:!0}),"undefined"!=typeof console&&console.log("maptalks.three v0.6.0, requires maptalks@>=0.39.0.")});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("maptalks"),require("three")):"function"==typeof define&&define.amd?define(["exports","maptalks","three"],t):t(e.maptalks=e.maptalks||{},e.maptalks,e.THREE)}(this,function(e,p,f){"use strict";function n(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var a=Math.PI/180,t=function(e){function t(){return e.apply(this,arguments)||this}n(t,e);var r=t.prototype;return r.draw=function(){this.renderScene()},r.drawOnInteracting=function(){this.renderScene()},r.coordinateToVector3=function(e,t){void 0===t&&(t=0);var r=this.getMap();if(!r)return null;var n=r.coordinateToPoint(e,l(r));return new f.Vector3(n.x,n.y,t)},r.distanceToVector3=function(e,t,r){var n=this.getMap(),a=l(n),i=r||n.getCenter(),o=n.locate(i,e,t),s=n.coordinateToPoint(i,a),c=n.coordinateToPoint(o,a),h=Math.abs(c.x-s.x)*p.Util.sign(e),u=Math.abs(c.y-s.y)*p.Util.sign(t);return new f.Vector3(h,u,0)},r.toShape=function(e){var r=this;if(!e)return null;if(e instanceof p.MultiPolygon)return e.getGeometries().map(function(e){return r.toShape(e)});var t=e.getCenter(),n=this.coordinateToVector3(t),a=e.getShell().map(function(e){return r.coordinateToVector3(e).sub(n)}).reverse(),i=new f.Shape(a),o=e.getHoles();return o&&0<o.length&&(i.holes=o.map(function(e){var t=e.map(function(e){return r.coordinateToVector3(e).sub(n)});return new f.Shape(t)})),i},r.toExtrudeMesh=function(e,t,r,n){var a=this;if(!e)return null;if(e instanceof p.MultiPolygon)return e.getGeometries().map(function(e){return a.toExtrudeGeometry(e,t,r,n)});var i=e.getCoordinates();i.forEach(function(e){for(var t=e.length-1;1<=t;t--)e[t].equals(e[t-1])&&e.splice(t,1)}),e.setCoordinates(i);var o=this.toShape(e),s=this.coordinateToVector3(e.getCenter());n=p.Util.isNumber(n)?n:t,n=this.distanceToVector3(n,n).x;var c=this.distanceToVector3(t,t).x,h={bevelEnabled:!1,bevelSize:1};h[93<=parseInt(f.REVISION)?"depth":"amount"]=n;var u=new f.ExtrudeGeometry(o,h);(new f.BufferGeometry).fromGeometry(u);var l=new f.Mesh(u,r);return l.position.set(s.x,s.y,c-n),l},r.clearMesh=function(){var e=this.getScene();if(!e)return this;for(var t=e.children.length-1;0<=t;t--)e.children[t]instanceof f.Mesh&&e.remove(e.children[t]);return this},r.lookAt=function(e){var t=this._getRenderer();return t&&t.context.lookAt(e),this},r.getCamera=function(){var e=this._getRenderer();return e?e.camera:null},r.getScene=function(){var e=this._getRenderer();return e?e.scene:null},r.renderScene=function(){var e=this._getRenderer();return e?e.renderScene():this},r.getThreeRenderer=function(){var e=this._getRenderer();return e?e.context:null},r._getFovRatio=function(){var e=this.getMap().getFov();return Math.tan(e/2*a)},t}(p.CanvasLayer);t.mergeOptions({renderer:"gl",doubleBuffer:!1,glOptions:null});var r=function(e){function t(){return e.apply(this,arguments)||this}n(t,e);var r=t.prototype;return r.getPrepareParams=function(){return[this.scene,this.camera]},r.getDrawParams=function(){return[this.scene,this.camera]},r._drawLayer=function(){e.prototype._drawLayer.apply(this,arguments),this.renderScene()},r.hitDetect=function(){return!1},r.createCanvas=function(){e.prototype.createCanvas.call(this),this.createContext()},r.createContext=function(){if(this.canvas.gl&&this.canvas.gl.wrap)this.gl=this.canvas.gl.wrap();else{var e=this.layer.options.glOptions||{alpha:!0,depth:!0,antialias:!0,stencil:!0};e.preserveDrawingBuffer=!0,this.gl=this.gl||this._createGLContext(this.canvas,e)}this._initThreeRenderer(),this.layer.onCanvasCreate(this.context,this.scene,this.camera)},r._initThreeRenderer=function(){var e=new f.WebGLRenderer({context:this.gl,alpha:!0});e.autoClear=!1,e.setClearColor(new f.Color(1,1,1),0),e.setSize(this.canvas.width,this.canvas.height),e.clear(),e.canvas=this.canvas,this.context=e;var t=this.scene=new f.Scene,r=this.layer.getMap(),n=r.getFov()*Math.PI/180,a=this.camera=new f.PerspectiveCamera(n,r.width/r.height,r.cameraNear,r.cameraFar);a.matrixAutoUpdate=!1,this._syncCamera(),t.add(a)},r.onCanvasCreate=function(){e.prototype.onCanvasCreate.call(this)},r.resizeCanvas=function(e){if(this.canvas){var t;t=e||this.getMap().getSize();var r=p.Browser.retina?2:1,n=this.canvas;n.height=r*t.height,n.width=r*t.width,this.context.setSize(n.width,n.height)}},r.clearCanvas=function(){this.canvas&&this.context.clear()},r.prepareCanvas=function(){return this.canvas?this.clearCanvas():this.createCanvas(),this.layer.fire("renderstart",{context:this.context}),null},r.renderScene=function(){this._syncCamera(),this.context.render(this.scene,this.camera),this.completeRender()},r.remove=function(){delete this._drawContext,e.prototype.remove.call(this)},r._syncCamera=function(){var e=this.getMap();this.camera.matrix.elements=e.cameraWorldMatrix,this.camera.projectionMatrix.elements=e.projMatrix},r._createGLContext=function(e,t){for(var r=["webgl","experimental-webgl"],n=null,a=0;a<r.length;++a){try{n=e.getContext(r[a],t)}catch(e){}if(n)break}return n},t}(p.renderer.CanvasLayerRenderer);function l(e){return e.getGLZoom()}t.registerRenderer("gl",r),e.ThreeLayer=t,e.ThreeRenderer=r,Object.defineProperty(e,"__esModule",{value:!0}),"undefined"!=typeof console&&console.log("maptalks.three v0.6.1, requires maptalks@>=0.39.0.")});

index.js

@@ -268,4 +268,7 @@ import * as maptalks from 'maptalks';
         const scene = this.scene = new THREE.Scene();
-        const camera = this.camera =  new THREE.Camera();
+        const map = this.layer.getMap();
+        const fov = map.getFov() * Math.PI / 180;
+        const camera = this.camera =  new THREE.PerspectiveCamera(fov, map.width / map.height, map.cameraNear, map.cameraFar);
         camera.matrixAutoUpdate = false;
+        this._syncCamera();
         scene.add(camera);
@@ -316,3 +319,3 @@ }
     renderScene() {
-        this._locateCamera();
+        this._syncCamera();
         this.context.render(this.scene, this.camera);
@@ -327,3 +330,3 @@ this.completeRender();
 
-    _locateCamera() {
+    _syncCamera() {
         const map = this.getMap();
@@ -330,0 +333,0 @@ this.camera.matrix.elements = map.cameraWorldMatrix;

package.json

 {
   "name": "maptalks.three",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A maptalks Layer to render with THREE.js.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -23,3 +23,4 @@ # maptalks.three
 * Re-implementated locateCamera, sync with map's projMatrix and viewMatrix
-* Because direction of camera changes, material's side need to set to THREE.BackSide or THREE.DoublSide to render correctly
+* For THREE <= 0.94, material's side need to set to THREE.BackSide or THREE.DoubleSide to render correctly
+    * THREE >= 0.95 doesn't need, maybe due to [#14379](https://github.com/mrdoob/three.js/pull/14379)
 * Add support for THREE >= 0.93
@@ -32,3 +33,3 @@ * Add support for GroupGLLayer
 ```html
-<script type="text/javascript" src="https://unpkg.com/three@0.84.0/build/three.min.js"></script>
+<script type="text/javascript" src="https://unpkg.com/three@0.97.0/build/three.min.js"></script>
 <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
@@ -39,4 +40,5 @@ <script type="text/javascript" src="https://unpkg.com/maptalks.three/dist/maptalks.three.js"></script>
 threeLayer.prepareToDraw = function (gl, scene, camera) {
-    var light = new THREE.PointLight(0xffffff, 0.8);
-    camera.add(light);
+    var light = new THREE.DirectionalLight(0xffffff);
+    light.position.set(0, -10, -10).normalize();
+    scene.add(light);
     var me = this;
@@ -49,3 +51,3 @@ countries.features.forEach(function (g) {
 
-        var mesh = me.toExtrudeGeometry(maptalks.GeoJSON.toGeometry(g), num / 4E2, m);
+        var mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), num / 4E2, m);
         if (Array.isArray(mesh)) {
@@ -66,2 +68,3 @@ scene.add.apply(scene, mesh);
 ```javascript
+import * as THREE from 'three';
 import * as maptalks from 'maptalks';
@@ -74,3 +77,5 @@ import { ThreeLayer } from 'maptalks.three';
 threeLayer.prepareToDraw = function (gl, scene, camera) {
-    var light = new THREE.PointLight(0xffffff, 0.8);
+    const light = new THREE.DirectionalLight(0xffffff);
+    light.position.set(0, -10, -10).normalize();
+    scene.add(light);
     //...
@@ -121,18 +126,8 @@ };
 ```shell
-$ gulp watch
+$ npm run dev
 ```
 
-* Tests
-```shell
-$ npm test
-```
-
-* Watch source changes and run tests repeatedly
-```shell
-$ gulp tdd
-```
-
 * Package and generate minified bundles to dist directory
 ```shell
-$ gulp minify
+$ npm run build
 ```
@@ -139,0 +134,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 2 instances in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3346126

increased by30.01%

Number of package files

38

increased by22.58%

Lines of code

25778

increased by4.81%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

5

decreased by-50%

Worsened metrics

Number of lines in readme file

132

decreased by-3.65%

No dependency changes