:art: update: optimize

origin/tpanorama.js

@@ -25,7 +25,8 @@
         pRadius: 1000,//全景球的半径，推荐使用默认值
         minFocalLength: 1,//镜头最a小拉近距离
         maxFocalLength: 100,//镜头最大拉近距离
-        showlable: 'show' // show,click
+        sprite: 'label', // label,icon
+        onClick: () => { }
     }
 
 
@@ -45,7 +46,7 @@
             initRaycaster();
             makePanorama(this.def.pRadius, this.def.widthSegments, this.def.heightSegments, this.def.url);
             initRenderer();
-            initLable(this.def.lables, this.def.showlable);
+            initLable(this.def.lables, this.def.sprite);
             _container.addEventListener('mousedown', onDocumentMouseDown, false);
             _container.addEventListener('mousemove', onDocumentMouseMove, false);
             _container.addEventListener('mouseup', onDocumentMouseUp, false);
@@ -55,7 +56,7 @@
             _container.addEventListener('DOMMouseScroll', (e) => {
                 onDocumentMouseWheel(e, this.def.minFocalLength, this.def.maxFocalLength);
             }, false);
-            _container.addEventListener('click', onDocumentMouseClick, false);
+            _container.addEventListener('click', onDocumentMouseClick.bind(this), false);
             global.addEventListener('resize', onWindowResize, false);
             animate();
         }
@@ -134,9 +135,7 @@
         _mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         _raycaster.setFromCamera(_mouse, _cameraOrtho);
         var intersects = _raycaster.intersectObjects(_clickableObjects);
-        intersects.forEach(function (element) {
-            alert("Intersection: " + element.object.name);
-        });
+        intersects.forEach(this.def.onClick);
     }
 
     function onDocumentMouseWheel(ev, minFocalLength, maxFocalLength) {
@@ -173,12 +172,12 @@
         _renderer.setSize(window.innerWidth, window.innerHeight);
     }
 
-    function initLable(lables, showlable) {
-        if (showlable == 'show') {
+    function initLable(lables, sprite) {
+        if (sprite == 'label') {
             for (var i = 0; i < lables.length; i++) {
                 _lables.push(createLableSprite(_sceneOrtho, lables[i].text, lables[i].position));
             }
-        } else if (showlable == 'click') {
+        } else if (sprite == 'icon') {
             for (var i = 0; i < lables.length; i++) {
                 _sprites.push(createSprite(lables[i].position, lables[i].logoUrl, lables[i].text));
             }
@@ -191,11 +190,11 @@
         var metrics = context1.measureText(name);
         var width = metrics.width * 1.5;
         context1.font = "10px 宋体";
-        context1.fillStyle = "rgba(0,0,0,0.95)"; // white border
+        context1.fillStyle = "rgba(0,0,0,0.95)";
         context1.fillRect(0, 0, width + 8, 20 + 8);
-        context1.fillStyle = "rgba(0,0,0,0.2)"; // black filler
+        context1.fillStyle = "rgba(0,0,0,0.2)";
         context1.fillRect(2, 2, width + 4, 20 + 4);
-        context1.fillStyle = "rgba(255,255,255,0.95)"; // text color
+        context1.fillStyle = "rgba(255,255,255,0.95)";
         context1.fillText(name, 4, 20);
         var texture1 = new THREE.Texture(canvas1);
         texture1.needsUpdate = true;
@@ -213,6 +212,7 @@
             sprite: sprite1
         };
         _sceneOrtho.add(lable.sprite);
+        _clickableObjects.push(lable.sprite);
         return lable;
     }
 

src/component/tpanorama.js

@@ -30,7 +30,8 @@ var options = {
   pRadius: 1000,//全景球的半径，推荐使用默认值
   minFocalLength: 1,//镜头最小拉近距离
   maxFocalLength: 100,//镜头最大拉近距离
-  showlable: 'show' // show,click
+  sprite: 'label', // label,icon
+  onClick: () => { }
 }
 
 
@@ -50,7 +51,7 @@ tpanorama.prototype = {
     initRaycaster();
     makePanorama(this.def.pRadius, this.def.widthSegments, this.def.heightSegments, this.def.url);
     initRenderer();
-    initLable(this.def.lables, this.def.showlable);
+    initLable(this.def.lables, this.def.sprite);
     _container.addEventListener('mousedown', onDocumentMouseDown, false);
     _container.addEventListener('mousemove', onDocumentMouseMove, false);
     _container.addEventListener('mouseup', onDocumentMouseUp, false);
@@ -60,7 +61,7 @@ tpanorama.prototype = {
     _container.addEventListener('DOMMouseScroll', (e) => {
       onDocumentMouseWheel(e, this.def.minFocalLength, this.def.maxFocalLength);
     }, false);
-    _container.addEventListener('click', onDocumentMouseClick, false);
+    _container.addEventListener('click', onDocumentMouseClick.bind(this), false);
     global.addEventListener('resize', onWindowResize, false);
     animate();
   }
@@ -134,9 +135,7 @@ function onDocumentMouseClick(event) {
   _mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
   _raycaster.setFromCamera(_mouse, _cameraOrtho);
   var intersects = _raycaster.intersectObjects(_clickableObjects);
-  intersects.forEach(function (element) {
-    alert("Intersection: " + element.object.name);
-  });
+  intersects.forEach(this.def.onClick);
 }
 
 function onDocumentMouseWheel(ev, minFocalLength, maxFocalLength) {
@@ -173,12 +172,12 @@ function onWindowResize() {
   _renderer.setSize(window.innerWidth, window.innerHeight);
 }
 
-function initLable(lables, showlable) {
-  if (showlable == 'show') {
+function initLable(lables, sprite) {
+  if (sprite == 'label') {
     for (var i = 0; i < lables.length; i++) {
       _lables.push(createLableSprite(_sceneOrtho, lables[i].text, lables[i].position));
     }
-  } else if (showlable == 'click') {
+  } else if (sprite == 'icon') {
     for (var i = 0; i < lables.length; i++) {
       _sprites.push(createSprite(lables[i].position, lables[i].logoUrl, lables[i].text));
     }
@@ -191,11 +190,11 @@ function createLableSprite(scene, name, position) {
   var metrics = context1.measureText(name);
   var width = metrics.width * 1.5;
   context1.font = "10px 宋体";
-  context1.fillStyle = "rgba(0,0,0,0.95)"; // white border
+  context1.fillStyle = "rgba(0,0,0,0.95)";
   context1.fillRect(0, 0, width + 8, 20 + 8);
-  context1.fillStyle = "rgba(0,0,0,0.2)"; // black filler
+  context1.fillStyle = "rgba(0,0,0,0.2)";
   context1.fillRect(2, 2, width + 4, 20 + 4);
-  context1.fillStyle = "rgba(255,255,255,0.95)"; // text color
+  context1.fillStyle = "rgba(255,255,255,0.95)";
   context1.fillText(name, 4, 20);
   var texture1 = new Texture(canvas1);
   texture1.needsUpdate = true;
@@ -213,6 +212,7 @@ function createLableSprite(scene, name, position) {
     sprite: sprite1
   };
   _sceneOrtho.add(lable.sprite);
+  _clickableObjects.push(lable.sprite);
   return lable;
 }