feat:通过URL参数定位初始化热点镜头

H5场景本地化/src/views/gui/compomemt/hotspot.vue

@@ -4,18 +4,36 @@
       <!-- 关闭按钮 -->
       <div class="closeX" @click="$emit('close')">
         <img
-          :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
-          src="../../../assets/img/closeX.png" alt="" />
+          :style="{
+            width:
+              screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px',
+            height:
+              screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px',
+          }"
+          src="../../../assets/img/closeX.png"
+          alt=""
+        />
       </div>
       <div class="top">
-        <img :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 27) + 'px' : '70px' }"
-          src="../../../assets/img/hotTop.png" alt="" />
+        <img
+          :style="{
+            width:
+              screenWidth > 1000 ? parseInt(screenWidth / 27) + 'px' : '70px',
+          }"
+          src="../../../assets/img/hotTop.png"
+          alt=""
+        />
       </div>
       <div class="main">
         <div class="txtNone" v-if="data.length === 0">暂无热点</div>
         <div class="txt" v-else>
-          <span :class="{ active: hotInd === index }" @click="openHot(item, index)" v-for="(item, index) in data"
-            :key="index">{{ item.info.title ? item.info.title : "热点" }}</span>
+          <span
+            :class="{ active: hotInd === index }"
+            @click="openHot(item, index)"
+            v-for="(item, index) in data"
+            :key="index"
+            >{{ item.info.title ? item.info.title : "热点" }}</span
+          >
         </div>
       </div>
     </div>
@@ -41,8 +59,8 @@ export default {
   watch: {
     screenWidth: {
       handler: function (val, oldVal) {
-        this.dialogWidth = val
-        console.log('热点打开', this.dialogWidth)
+        this.dialogWidth = val;
+        console.log("热点打开", this.dialogWidth);
       },
     },
   },
@@ -51,6 +69,7 @@ export default {
     openHot(e, index) {
       // 停止自动导览
       window.player.director.stopTour();
+      console.log("热点打开被触发", e, index, window.myHotList);
       setTimeout(() => {
         e && e.examine(window.player, true);
         this.hotInd = index;
@@ -59,28 +78,28 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log('-------------',window.myHotList );
+    console.log("-------------", window.myHotList);
     this.data = window.myHotList || [];
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.screenWidth = document.body.clientWidth
+    this.screenWidth = document.body.clientWidth;
     window.onresize = () => {
       return (() => {
-        this.screenWidth = document.body.clientWidth
-      })()
-    }
+        this.screenWidth = document.body.clientWidth;
+      })();
+    };
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .hotspot {
   width: 100%;
   height: 100%;
@@ -127,7 +146,7 @@ export default {
         transform: translateX(-50%);
       }
 
-      &>img {
+      & > img {
         min-width: 40px;
         min-height: 40px;
         max-width: 160px;
@@ -145,7 +164,7 @@ export default {
         top: auto;
       }
 
-      &>img {
+      & > img {
         width: 70px;
       }
     }
@@ -181,14 +200,13 @@ export default {
         @media screen and (min-width: 1000px) {
           height: 76%;
           margin-top: 20%;
-
         }
 
         @media screen and (min-width: 1921px) {
           font-size: 43px;
         }
 
-        &>span {
+        & > span {
           margin-top: 20px;
           cursor: pointer;
           display: block;
@@ -219,4 +237,4 @@ export default {
     }
   }
 }
-</style>
+</style>

H5场景本地化/src/views/gui/menu.vue

@@ -754,22 +754,33 @@ export default {
       setTimeout(() => {
         this.timer = false;
       }, 5200);
-
       let timeA = -1;
 
       timeA = window.setInterval(() => {
         if (window.hotData) {
           clearInterval(timeA);
         }
+
+        setTimeout(() => {
+          this.isFingerpost = true;
+        }, 400);
+        // 是否需要初始化相机视角位置
+        if (this.$route.query) {
+          const locId = {
+            id: this.$route.query.id,
+            x: Number(this.$route.query.x),
+            y: Number(this.$route.query.y),
+            z: Number(this.$route.query.z),
+            w: Number(this.$route.query.w),
+          };
+          this.initCamera(locId);
+        }
         console.log(
           "是否显示",
           window.hotData,
           window.myHotList,
           window.myHotList.length
         );
-        setTimeout(() => {
-          this.isFingerpost = true;
-        }, 400);
         if (window.hotData && window.myHotList && window.myHotList.length) {
           // 显示列表
           this.showHotList = true;
@@ -782,6 +793,34 @@ export default {
     }
   },
   methods: {
+    // 初始化相机视角位置
+    initCamera(locId) {
+      // 要有5个参数 id、x、y、z、w
+      // "97A24AFC-DE12-4644-9AAD-54E3B4D4CAB4"
+      const current = window.myHotList.find((item) => {
+        return item.sid == locId.id;
+      });
+
+      const c =
+        current.closestPanoTowardTag(window.player.mode, window.player.currentPano) ||
+        window.player.currentPano;
+      
+      setTimeout(() => {
+        // current && current.goQua(window.player, true);
+        console.log(c)
+        window.player.flyToPano({
+          // 移动到点位
+          pano: c,
+          // 移动视角
+          quaternion: new window.THREE.Quaternion(
+            locId.x,
+            locId.y,
+            locId.z,
+            locId.w
+          ),
+        });
+      }, 200);
+    },
     // 关闭使用指引
     instructionsClose() {
       this.isFingerpost = false;