add: babel

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "stage-1"
+  ]
+}

examples/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <title>全景展示</title>
     <script src="/src/three.js"></script>
-    <script src="/src/tpanorama.js"></script>
+    <script src="/lib/tpanorama.js"></script>
     <style>
         body {
             margin: 0;

examples/page1.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <title>全景展示</title>
     <script src="/src/three.js"></script>
-    <script src="/src/tpanorama.js"></script>
+    <script src="/lib/tpanorama.js"></script>
     <style>
         body {
             margin: 0;

examples/page2.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <title>全景标记设置(自动参数)</title>
     <script src="src/three.js"></script>
-    <script src="src/tpanorama.js"></script>
+    <script src="lib/tpanorama.js"></script>
 
     <style>
         body {

examples/page3.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <title>全景标记设置(自定义参数)</title>
     <script src="src/three.js"></script>
-    <script src="src/tpanorama.js"></script>
+    <script src="lib/tpanorama.js"></script>
 
     <style>
         body {

lib/tpanorama.js

@@ -1,3 +1,5 @@
+'use strict';
+
 (function (global, undefined) {
 
     var _camera, _scene, _renderer;
@@ -7,9 +9,12 @@
     var _raycaster;
     var _container;
     var _isUserInteracting = false;
-    var _lon = 0, _lat = 0;
-    var _onPointerDownLon = 0, _onPointerDownLat = 0;
-    var _onPointerDownPointerX = 0, _onPointerDownPointerY = 0;
+    var _lon = 0,
+        _lat = 0;
+    var _onPointerDownLon = 0,
+        _onPointerDownLat = 0;
+    var _onPointerDownPointerX = 0,
+        _onPointerDownPointerY = 0;
     var _mouse = new THREE.Vector2();
     var _clickableObjects = [];
     var _sprites = [];
@@ -17,17 +22,16 @@
     var _count1 = 1;
 
     var options = {
-        container: 'panoramaConianer',//容器
-        url: 'resources/img/panorama/pano-7.jpg',//全景图路径
-        lables: [],//标记   {position:{lon:114,lat:38},logoUrl:'lableLogo.png',text:'我是一个标记'}
-        widthSegments: 60,//水平切段数
-        heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢）
-        pRadius: 1000,//全景球的半径，推荐使用默认值
-        minFocalLength: 1,//镜头最a小拉近距离
-        maxFocalLength: 100,//镜头最大拉近距离
+        container: 'panoramaConianer', //容器
+        url: 'resources/img/panorama/pano-7.jpg', //全景图路径
+        lables: [], //标记   {position:{lon:114,lat:38},logoUrl:'lableLogo.png',text:'我是一个标记'}
+        widthSegments: 60, //水平切段数
+        heightSegments: 40, //垂直切段数（值小粗糙速度快，值大精细速度慢）
+        pRadius: 1000, //全景球的半径，推荐使用默认值
+        minFocalLength: 1, //镜头最a小拉近距离
+        maxFocalLength: 100, //镜头最大拉近距离
         showlable: 'show' // show,click
-    }
-
+    };
 
     function tpanorama(opt) {
         this.render(opt);
@@ -36,7 +40,9 @@
     tpanorama.prototype = {
         constructor: this,
         def: {},
-        render: function (opt) {
+        render: function render(opt) {
+            var _this = this;
+
             this.def = extend(options, opt, true);
             document.getElementById(this.def.container).innerHTML = '';
             _lables = [];
@@ -49,17 +55,17 @@
             _container.addEventListener('mousedown', onDocumentMouseDown, false);
             _container.addEventListener('mousemove', onDocumentMouseMove, false);
             _container.addEventListener('mouseup', onDocumentMouseUp, false);
-            _container.addEventListener('mousewheel', (e) => {
-                onDocumentMouseWheel(e, this.def.minFocalLength, this.def.maxFocalLength);
+            _container.addEventListener('mousewheel', function (e) {
+                onDocumentMouseWheel(e, _this.def.minFocalLength, _this.def.maxFocalLength);
             }, false);
-            _container.addEventListener('DOMMouseScroll', (e) => {
-                onDocumentMouseWheel(e, this.def.minFocalLength, this.def.maxFocalLength);
+            _container.addEventListener('DOMMouseScroll', function (e) {
+                onDocumentMouseWheel(e, _this.def.minFocalLength, _this.def.maxFocalLength);
             }, false);
             _container.addEventListener('click', onDocumentMouseClick, false);
             global.addEventListener('resize', onWindowResize, false);
             animate();
         }
-    }
+    };
 
     function extend(o, n, override) {
         for (var key in n) {
@@ -94,10 +100,7 @@
     }
 
     function makePanorama(pRadius, widthSegments, heightSegments, u) {
-        var mesh = new THREE.Mesh(new THREE.SphereGeometry(pRadius, widthSegments, heightSegments),
-            new THREE.MeshBasicMaterial(
-                { map: THREE.ImageUtils.loadTexture(u) }
-            ));
+        var mesh = new THREE.Mesh(new THREE.SphereGeometry(pRadius, widthSegments, heightSegments), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture(u) }));
         mesh.scale.x = -1;
         _scene.add(mesh);
     }
@@ -130,7 +133,7 @@
     }
 
     function onDocumentMouseClick(event) {
-        _mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        _mouse.x = event.clientX / window.innerWidth * 2 - 1;
         _mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         _raycaster.setFromCamera(_mouse, _cameraOrtho);
         var intersects = _raycaster.intersectObjects(_clickableObjects);
@@ -146,12 +149,12 @@
         down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
         if (down) {
             if (m > minFocalLength) {
-                m -= m * 0.05
+                m -= m * 0.05;
                 _camera.setFocalLength(m);
             }
         } else {
             if (m < maxFocalLength) {
-                m += m * 0.05
+                m += m * 0.05;
                 _camera.setFocalLength(m);
             }
         }
@@ -216,7 +219,6 @@
         return lable;
     }
 
-
     function createSprite(position, url, name) {
         var textureLoader = new THREE.TextureLoader();
         var ballMaterial = new THREE.SpriteMaterial({
@@ -235,20 +237,17 @@
         return sp1;
     }
 
-
     function animate() {
         requestAnimationFrame(animate);
         render();
     }
 
-
     function render() {
         calPosition();
         addSprites();
         runRender();
     }
 
-
     function calPosition() {
         _lat = Math.max(-85, Math.min(85, _lat));
         var phi = THREE.Math.degToRad(90 - _lat);
@@ -259,9 +258,8 @@
         _camera.lookAt(_camera.target);
     }
 
-
     function addSprites() {
-        if (typeof (_sprites) != "undefined") {
+        if (typeof _sprites != "undefined") {
             for (var i = 0; i < _sprites.length; i++) {
                 var wp = geoPosition2World(_sprites[i].pos.lon, _sprites[i].pos.lat);
                 var sp = worldPostion2Screen(wp, _camera);
@@ -270,14 +268,13 @@
                 if (test.x > -1 && test.x < 1 && test.y > -1 && test.y < 1 && test.z > -1 && test.z < 1) {
                     _sprites[i].sprite.scale.set(32, 32, 32);
                     _sprites[i].sprite.position.set(sp.x, sp.y, 1);
-                }
-                else {
+                } else {
                     _sprites[i].sprite.scale.set(1.0, 1.0, 1.0);
                     _sprites[i].sprite.position.set(0, 0, 0);
                 }
             }
         }
-        if (typeof (_lables) != "undefined") {
+        if (typeof _lables != "undefined") {
             for (var i = 0; i < _lables.length; i++) {
                 var wp = geoPosition2World(_lables[i].pos.lon, _lables[i].pos.lat);
                 var sp = worldPostion2Screen(wp, _camera);
@@ -288,8 +285,7 @@
                     var width = metrics.width * 3.5;
                     _lables[i].sprite.scale.set(400, 150, 1.0);
                     _lables[i].sprite.position.set(sp.x + width, sp.y - 40, 1);
-                }
-                else {
+                } else {
                     _lables[i].sprite.scale.set(1.0, 1.0, 1.0);
                     _lables[i].sprite.position.set(0, 0, 0);
                 }
@@ -297,7 +293,6 @@
         }
     }
 
-
     function geoPosition2World(lon, lat) {
         lat = Math.max(-85, Math.min(85, lat));
         var phi = THREE.Math.degToRad(90 - lat);
@@ -307,7 +302,7 @@
             x: _pRadius * Math.sin(phi) * Math.cos(theta),
             y: _pRadius * Math.cos(phi),
             z: _pRadius * Math.sin(phi) * Math.sin(theta)
-        }
+        };
         return new THREE.Vector3(result.x, result.y, result.z);
     }
 
@@ -322,7 +317,6 @@
         return new THREE.Vector3(result.x, result.y, result.z);
     }
 
-
     function runRender() {
         _renderer.clear();
         _renderer.render(_scene, _camera);
@@ -330,8 +324,6 @@
         _renderer.render(_sceneOrtho, _cameraOrtho);
     }
 
-
-
     var _setContainer;
     var _hideImgId = "hideimgid825";
     var _himg;
@@ -342,34 +334,31 @@
     var _lable = [];
     var count = 1;
 
-
     var setOpt = {
-        container: 'myDiv',//setting容器
+        container: 'myDiv', //setting容器
         imgUrl: 'resources/img/panorama/3.jpg',
-        width: '',//指定宽度，高度自适应
-        showGrid: true,//是否显示格网
-        showPosition: true,//是否显示经纬度提示
-        lableColor: '#9400D3',//标记颜色
-        gridColor: '#48D1CC',//格网颜色
-        lables: [],//标记   {lon:114,lat:38,text:'标记一'}
-        addLable: true,//开启后双击添加标记  (必须开启经纬度提示)
-        getLable: true,//开启后右键查询标记  (必须开启经纬度提示)
-        deleteLbale: true,//开启默认中键删除 （必须开启经纬度提示）
-    }
-
+        width: '', //指定宽度，高度自适应
+        showGrid: true, //是否显示格网
+        showPosition: true, //是否显示经纬度提示
+        lableColor: '#9400D3', //标记颜色
+        gridColor: '#48D1CC', //格网颜色
+        lables: [], //标记   {lon:114,lat:38,text:'标记一'}
+        addLable: true, //开启后双击添加标记  (必须开启经纬度提示)
+        getLable: true, //开启后右键查询标记  (必须开启经纬度提示)
+        deleteLbale: true //开启默认中键删除 （必须开启经纬度提示）
+    };
 
     function panoramaSetting(opt) {
         this.config(opt);
     }
 
-
     panoramaSetting.prototype = {
         constructor: this,
         def: {},
-        config: function (opt) {
+        config: function config(opt) {
             this.def = extend(setOpt, opt, true);
         },
-        init: function () {
+        init: function init() {
             var that = this;
             _lable = this.def.lables;
             initSetContainer(this.def.container, this.def.imgUrl);
@@ -425,30 +414,29 @@
             }, 100);
             count++;
         },
-        getAllLables: function () {
+        getAllLables: function getAllLables() {
             return _lable;
         },
-        addLable: function (e, text) {
+        addLable: function addLable(e, text) {
             var position = addMark(e, this.def.lableColor, text);
         },
-        getLable: function (e) {
+        getLable: function getLable(e) {
             return selectLable1(e);
         },
-        listen: function (type, fun) {
+        listen: function listen(type, fun) {
             _info.addEventListener(type, function (e) {
                 fun(e);
-            })
+            });
         },
-        delete: function (p) {
+        delete: function _delete(p) {
             if (!isEmpty(p.lon)) {
                 removeByValue(_lable, p);
             }
         },
-        clean: function () {
+        clean: function clean() {
             document.getElementById(this.def.container).innerHTML = '';
         }
-    }
-
+    };
 
     function initSetContainer(c, url) {
         _setContainer = document.getElementById(c);
@@ -492,7 +480,6 @@
         document.body.appendChild(_info);
     }
 
-
     function adptpImg(width, url) {
         if (!isEmpty(width)) {
             _setContainer.style.width = width;
@@ -504,7 +491,6 @@
         var height = scale * _setContainer.style.width.split("px")[0];
         _setContainer.style.height = height + "px";
 
-
         setTimeout(function () {
             _setContainer.style.backgroundRepeat = 'no-repeat';
             _setContainer.style.backgroundPosition = '0% 0%';
@@ -513,7 +499,6 @@
         }, 100);
     }
 
-
     function initGrid(color) {
         _cv.width = _setContainer.style.width.split("px")[0];
         _cv.height = _setContainer.style.height.split("px")[0];
@@ -554,7 +539,6 @@
         ctx.clearRect(0, 0, w, h);
     }
 
-
     function initCursor() {
         var minX = _setContainer.offsetLeft;
         var maxX = minX + _setContainer.style.width.split("px")[0];
@@ -574,7 +558,6 @@
         };
     }
 
-
     function getXY(eve) {
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -587,7 +570,6 @@
         _info.innerHTML = html;
     }
 
-
     function calLonLat(e) {
         var h = _setContainer.style.height.split("px")[0];
         var w = _setContainer.style.width.split("px")[0];
@@ -608,14 +590,13 @@
         if (latS > 0.5) {
             lat = (latS - 0.5) * 180;
         } else {
-            lat = (0.5 - latS) * 180 * -1
+            lat = (0.5 - latS) * 180 * -1;
         }
         lon = lon.toFixed(2);
         lat = lat.toFixed(2);
         return { lon: lon, lat: lat };
     }
 
-
     function initLables(arr, color) {
         for (var i in arr) {
             var p = arr[i];
@@ -625,7 +606,6 @@
         }
     }
 
-
     function drawText(x, y, txt, lableColor) {
         var canvas = _cv;
         var ctx = canvas.getContext("2d");
@@ -634,7 +614,6 @@
         ctx.fillText(txt, x, y);
     }
 
-
     function drawCircle(x, y) {
         var canvas = _cv;
         var ctx = canvas.getContext("2d");
@@ -653,7 +632,6 @@
         ctx.fill();
     }
 
-
     function getXYByLonLat(lon, lat) {
         var x = 0;
         var y = 0;
@@ -667,12 +645,11 @@
         if (lat > 0) {
             y = (1 - lat / 90) * h * 0.5;
         } else {
-            y = -1 * lat / 90 * 0.5 * h + 0.5 * h
+            y = -1 * lat / 90 * 0.5 * h + 0.5 * h;
         }
-        return { x: x, y: y }
+        return { x: x, y: y };
     }
 
-
     function addMark(e, color, text) {
         var pos = getXY(e);
         var iX = _setContainer.offsetLeft;
@@ -682,7 +659,7 @@
         drawCircle(x, y);
         drawText(x, y, text, color);
         var ll = calLonLat(e);
-        var l = { lon: ll.lon, lat: ll.lat, text: text }
+        var l = { lon: ll.lon, lat: ll.lat, text: text };
         _lable.push(l);
         return l;
     }
@@ -714,7 +691,6 @@
         }
     }
 
-
     function removeByValue(arr, val) {
         for (var i = 0; i < arr.length; i++) {
             if (arr[i].lon == val.lon && arr[i].lat == val.lat) {
@@ -724,9 +700,7 @@
         }
     }
 
-
     global.tpanorama = tpanorama;
     global.tpanoramaSetting = panoramaSetting;
     global.tpanoramaSetContainer = _setContainer;
-
-}(window));
+})(window);

package.json

@@ -3,7 +3,8 @@
   "version": "1.0.2",
   "description": "全景标记，全景生成插件",
   "scripts": {
-    "start": "node ./server/www"
+    "build": "babel ./src/tpanorama.js --out-file ./lib/tpanorama.js",
+    "start": "npm run build && node ./server/www"
   },
   "repository": {
     "type": "git",
@@ -24,5 +25,15 @@
     "handlebars": "^4.0.12",
     "http-errors": "~1.6.2",
     "morgan": "~1.9.0"
+  },
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.14.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-istanbul": "^2.0.1",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-stage-1": "^6.24.1"
   }
-}
+}