调整全景地图控制

hookehuyr
Commit 46664c99e93a166b58afc83bbfb049349e0916a7 46664c99 1 parent e01cc48d
Showing 3 changed files with 73 additions and 10 deletions
package.json
src/components/VRViewer/index.vue
yarn.lock
--- a/package.json
View file @46664c9
+++ b/package.json
View file @46664c9
@@ -14,7 +14,9 @@
   "dependencies": {
     "@photo-sphere-viewer/core": "^5.2.0",
     "@photo-sphere-viewer/gallery-plugin": "^5.2.0",
+    "@photo-sphere-viewer/gyroscope-plugin": "^5.2.0",
     "@photo-sphere-viewer/markers-plugin": "^5.2.0",
+    "@photo-sphere-viewer/stereo-plugin": "^5.2.0",
     "@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0",
     "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-legacy": "^1.8.2",
--- a/src/components/VRViewer/index.vue
View file @46664c9
+++ b/src/components/VRViewer/index.vue
View file @46664c9
 <!--
  * @Date: 2023-08-16 09:29:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-17 09:55:35
+ * @LastEditTime: 2023-08-17 13:53:41
  * @FilePath: /map-demo/src/components/VRViewer/index.vue
  * @Description: 文件描述
 -->
@@ -9,11 +9,11 @@
   <div class="vr-viewer">
     <van-popup v-model:show="show_vr" position="right" :overlay="true"
       :style="{ height: '100%', width: '100%', background: '#FFF' }">
-      <div class="vr" style="height: 90%;">
+      <!-- <div style="height: 10%;">
-        <div id="viewer"></div>
-      </div>
-      <div style="height: 10%;">
         <span @click="onClose">关闭</span>
+      </div> -->
+      <div class="vr" style="height: 100%;">
+        <div id="viewer"></div>
       </div>
     </van-popup>
   </div>
@@ -25,6 +25,8 @@ import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
 import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
 import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';
 import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
+import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
+// import { StereoPlugin } from '@photo-sphere-viewer/stereo-plugin';
 import '@photo-sphere-viewer/core/index.css' //引入CSS样式
 import '@photo-sphere-viewer/markers-plugin/index.css'
 import '@photo-sphere-viewer/gallery-plugin/index.css'
@@ -116,6 +118,7 @@ export default {
               panorama: temp_img,
               links: [
                 {
+                  name: '2',
                   nodeId: '2',
                   // position: { textureX: 2000, textureY: 1000 },
                   position: { yaw: -300, pitch: 0 },
@@ -123,7 +126,7 @@ export default {
                     color: '#AEEEEE',
                     hoverColor: 0xaa5500,
                     outlineColor: 0x000000,
-                    scale: [0.5, 2],
+                    scale: [1, 1],
                   }
                 },
               ],
@@ -164,13 +167,17 @@ export default {
                 },
               ],
               name: '卧室',
-              thumbnail: temp_img
+              thumbnail: temp_img,
             },
             {
               id: '2',
               panorama: temp_img2,
               links: [
                 {
+                  nodeId: '1',
+                  position: { yaw: 10, pitch: 0 },
+                },
+                {
                   nodeId: '3',
                   // position: { textureX: 1000, textureY: 1000 },
                   position: { yaw: 0, pitch: 0 },
@@ -186,13 +193,29 @@ export default {
                 {
                   nodeId: '1',
                   // position: { textureX: 1000, textureY: 1000 },
-                  position: { yaw: 300, pitch: 0 },
+                  position: { yaw: 10, pitch: 0 },
+                },
+                {
+                  nodeId: '2',
+                  position: { yaw: 0, pitch: 0 },
                 },
               ],
               name: '室外',
               thumbnail: temp_img3
             },
           ], 1);
+          // 监听节点切换状态
+          virtualTour.addEventListener('node-changed', ({ node, data }) => {
+            // console.log(`Current node is ${node.id}`);
+            // if (data.fromNode) {
+            //   // other data are available
+            //   console.log(`Previous node was ${data.fromNode.id}`);
+            // }
+            // console.warn(node);
+            // console.warn(data);
+            // 打开陀螺仪
+            // $('.psv-gyroscope-button').trigger('click');
+          });
         })
       }
     }
@@ -207,7 +230,15 @@ export default {
           // loadingImg: temp_img_loading,
           panorama: temp_img,
           defaultZoomLvl: 0,
-          navbar: 'zoom move gallery',
+          navbar: ['zoom', 'move', 'gallery' , 'gyroscope', {
+            id: 'my-button',
+            content: '<svg t="1692238613802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4229" width="64" height="64"><path d="M879.480512 64.020082c-22.23235 0-42.339294 9.080819-56.830333 23.728424l-0.007163-0.007163L511.706311 398.677025 200.77063 87.741343l-0.007163 0.007163c-14.492062-14.647605-34.597983-23.728424-56.830333-23.728424-44.155662 0-79.950913 35.795251-79.950913 79.950913 0 22.23235 9.080819 42.339294 23.728424 56.830333l-0.007163 0.007163 310.935682 310.935682L87.702458 822.680878l0.007163 0.007163c-14.647605 14.492062-23.728424 34.597983-23.728424 56.830333 0 44.155662 35.795251 79.950913 79.950913 79.950913 22.23235 0 42.339294-9.080819 56.830333-23.728424l0.007163 0.007163 310.935682-310.935682 310.935682 310.935682 0.007163-0.007163c14.492062 14.647605 34.597983 23.728424 56.830333 23.728424 44.155662 0 79.950913-35.795251 79.950913-79.950913 0-22.23235-9.080819-42.339294-23.728424-56.830333l0.007163-0.007163L624.77346 511.745197l310.935682-310.935682-0.007163-0.007163c14.647605-14.492062 23.728424-34.597983 23.728424-56.830333C959.431425 99.815333 923.635151 64.020082 879.480512 64.020082z" fill="#cecdcb" p-id="4230"></path></svg>',
+            title: 'Hello world',
+            className: 'custom-button',
+            onClick: (viewer) => {
+              this.onClose();
+            },
+          },],
           plugins: [
             [MarkersPlugin, {
               // markers: [
@@ -230,6 +261,8 @@ export default {
               // ],
             }],
             VirtualTourPlugin,
+            GyroscopePlugin,
+            // StereoPlugin,
             [GalleryPlugin, {
               thumbnailSize: { width: 150, height: 150 },
             }]
@@ -260,5 +293,18 @@ export default {
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
+  .custom-button {
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .psv-navbar {
+    height: 50px;
+  }
+  .psv--has-navbar .psv-gallery {
+    bottom: 50px;
+    transform: translateY(calc(100% + 50px));
+  }
 </style>
--- a/yarn.lock
View file @46664c9
+++ b/yarn.lock
View file @46664c9
@@ -143,6 +143,13 @@
   dependencies:
     "@photo-sphere-viewer/core" "5.2.0"
+"@photo-sphere-viewer/gyroscope-plugin@5.2.0", "@photo-sphere-viewer/gyroscope-plugin@^5.2.0":
+  version "5.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gyroscope-plugin/-/gyroscope-plugin-5.2.0.tgz#a956df8e17ec075157809aa8368d26844073b88d"
+  integrity sha512-Cbtuij+pZ3x2X32JtTt+MJD4dvJp4TuEJo/+rcmHJdMaNc2N62nj7kxrUY7zg+ZTdZ1iMDlH7nT51TVBYQGU9g==
+  dependencies:
+    "@photo-sphere-viewer/core" "5.2.0"
+
 "@photo-sphere-viewer/markers-plugin@5.2.0", "@photo-sphere-viewer/markers-plugin@^5.2.0":
   version "5.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/markers-plugin/-/markers-plugin-5.2.0.tgz#709a4a0848aa86496d2334557c94ac7b05ccc3b5"
@@ -150,6 +157,14 @@
   dependencies:
     "@photo-sphere-viewer/core" "5.2.0"
+"@photo-sphere-viewer/stereo-plugin@^5.2.0":
+  version "5.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/stereo-plugin/-/stereo-plugin-5.2.0.tgz#6fe8922e0179b08dce3be8d980c2a5d96372b739"
+  integrity sha512-TU5AngtCHhjikK49HKWvAA52NqOfCYbOU0vWMAX49aXf70hS5A0N3AgpQqZEAB6DKS5Pq0gW4VsxQABFLejtyw==
+  dependencies:
+    "@photo-sphere-viewer/core" "5.2.0"
+    "@photo-sphere-viewer/gyroscope-plugin" "5.2.0"
+
 "@photo-sphere-viewer/virtual-tour-plugin@^5.2.0":
   version "5.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/virtual-tour-plugin/-/virtual-tour-plugin-5.2.0.tgz#32419fe510d5de91e783ce56bdf759ef2a1e1244"