fix:更改游戏页面返回点位逻辑

scene/src/views/gui/menu.vue

@@ -206,6 +206,10 @@ export default {
     }
     window.initCamera = this.initCamera
 
+    window.savePano = this.savePano
+
+    window.initCameraByPano = this.initCameraByPano
+
     window.closeHotListIcon = function () {
       _this.isOpenHotList = false
       console.log('外部点击关闭')
@@ -256,7 +260,7 @@ export default {
         window.parent.window.openPricePageFu()
       }
     },
-    // 跳转到制定热点
+    // 跳转到指定热点
     initCamera(locId) {
       setTimeout(() => {
         const current = window.myHotList.find((item) => {
@@ -280,8 +284,42 @@ export default {
               current.quaternion.w
             ),
           });
-        },100);
-      },500)
+        }, 100);
+      }, 500)
+    },
+
+    // 根据点位信息初始化镜头（游戏返回后回到之前点位）
+    initCameraByPano(locId) {
+      setTimeout(() => {
+        window.player.flyToPano({
+          // 移动到点位
+          pano: window.player.model.panos.index[locId.id],
+          // 移动视角
+          quaternion: new window.THREE.Quaternion(
+            locId.x,
+            locId.y,
+            locId.z,
+            locId.w
+          ),
+        });
+
+        setTimeout(() => {
+          localStorage.removeItem('currentPano')
+        }, 1000)
+      }, 1000)
+
+    },
+    // 跳转游戏页面之前保存当前点位信息在本地缓存中
+    savePano() {
+      console.log('跳转前保存当前点位信息在缓存中', window.player.currentPano, window.player.quaternion)
+      // localStorage.setItem('currentPano', JSON.stringify({
+      //   id: window.player.currentPano.id,
+      //   x: window.player.quaternion._x,
+      //   y: window.player.quaternion._y,
+      //   z: window.player.quaternion._x,
+      //   w: window.player.quaternion._w,
+      // }))
+      localStorage.setItem('currentPanoPath', `&firstView=pano:${window.player.currentPano.id},qua:${window.player.quaternion._x},${window.player.quaternion._y},${window.player.quaternion._z},${window.player.quaternion._w}&qs=1`)
     },
     hotListChange() {
       if (window.parent.window.hotListShowChangeFu) {
@@ -477,7 +515,8 @@ export default {
   >div {
     margin-right: @margin;
 
-    @media screen and (max-width: 700px),(orientation: portrait) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       margin-bottom: @margin;
     }
 
@@ -544,7 +583,8 @@ export default {
   display: flex;
   justify-content: center;
 
-  @media screen and (max-width: 700px),(orientation: portrait) {
+  @media screen and (max-width: 700px),
+  (orientation: portrait) {
     width: 50px;
   }
 
@@ -552,7 +592,8 @@ export default {
     width: @wh;
     margin-bottom: 5px;
 
-    @media screen and (max-width: 700px),(orientation: portrait) {
+    @media screen and (max-width: 700px),
+    (orientation: portrait) {
       margin-bottom: 10px !important;
     }
   }
@@ -565,7 +606,9 @@ export default {
 }
 
 .toHomeBox2 {
-  @media screen and (max-width: 700px),(orientation: portrait) {
+
+  @media screen and (max-width: 700px),
+  (orientation: portrait) {
     margin: 10px 0;
   }
 }
@@ -602,7 +645,8 @@ export default {
 }
 
 // 移动端
-@media screen and (max-width: 1000px),(orientation: portrait) {
+@media screen and (max-width: 1000px),
+(orientation: portrait) {
   .hoverTit {
     opacity: 0 !important;
   }

zhengquan/src/views/Game/gamePage.vue

@@ -13,37 +13,30 @@ const router = useRouter()
 const store = useStore()
 
 
-// 返回到之前场景
-// const goBackScene = () => {
-//   router.push({
-//     path: '/scene',
-//     query: {
-//       code: store.currentUnit.code,
-//       name: store.currentUnit.name == '尾厅' ? '尾厅' : ''
-//     }
-//   })
-// }
-
 onMounted(() => {
-  // window.addEventListener('message', (e: any) => {
-  //   console.log('获得返回场景信号', e.data.from)
-  //   if (e.data.from == 'game') {
-  //     console.log('获得返回场景信号', e.data)
-  //     goBackScene()
-  //   }
-  // })
-
   window.goBackSceneFu = () => {
     store.isShowGameThumb = false
     const currentUnit = localStorage.getItem('currentUnit')
-    console.log('刷新后', store.currentUnit.code, JSON.parse(currentUnit!))
-    router.replace({
-      path: '/scene',
-      query: {
-        code: store.currentUnit.code ? store.currentUnit.code : JSON.parse(currentUnit!).code,
-        name: store.currentUnit.name == '尾厅' ? '尾厅' : ''
-      }
-    })
+
+    if (localStorage.getItem('currentPanoPath')) {
+      router.replace({
+        path: '/scene',
+        query: {
+          code: store.currentUnit.code ? store.currentUnit.code : JSON.parse(currentUnit!).code,
+          name: store.currentUnit.name == '尾厅' ? '尾厅' : '',
+          pano: localStorage.getItem('currentPanoPath')
+        }
+      })
+    } else {
+      router.replace({
+        path: '/scene',
+        query: {
+          code: store.currentUnit.code ? store.currentUnit.code : JSON.parse(currentUnit!).code,
+          name: store.currentUnit.name == '尾厅' ? '尾厅' : ''
+        }
+      })
+    }
+
   }
 })
 </script>

zhengquan/src/views/Home/homePage.vue

@@ -28,8 +28,8 @@ const closeUnitList = () => {
   isShowUnitList.value = false
 }
 
-// const baseAPIUrl = ref('')
-const baseAPIUrl = ref('http://192.168.20.61:8063')
+const baseAPIUrl = ref('')
+// const baseAPIUrl = ref('http://192.168.20.61:8063')
 // const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')
 
 // const store = useStore()

zhengquan/src/views/Scene/ScenePage.vue

@@ -55,6 +55,7 @@ const changeUnit = (unit: any) => {
   // }
   clostHotListFu()
   isShowExperienceGame.value = true
+
 }
 const hotspots = ref([] as any)
 // 用Object.keys 和 reduce 方法过滤空值属性
@@ -73,7 +74,7 @@ const sortHotspots = (hotspots: any) => {
   let newHotspots = Object.values(hotspots)
   let newShowHotspots = [] as any
 
-  console.log('所有数据对象',newHotspots)
+  console.log('所有数据对象', newHotspots)
   newHotspots.forEach((item: any) => {
     const nameArr = item.title.split('&')
     if (nameArr[1] == 'show') {
@@ -121,7 +122,11 @@ const getAllHotspot = () => {
         localStorage.setItem('currentUnit', JSON.stringify(currentUnit.value))
         if (route.query.name == '尾厅') {
           pointInfo.value = route.query.pano ? route.query.pano.toString() : '&firstView=pano:42,qua:0.009218044457158925,0.8470543054294898,-0.01469850441003682,0.5312231071060547&qs=1'
+        } else {
+          pointInfo.value = route.query.pano ? route.query.pano.toString() : ''
         }
+
+
       }
     })
   })
@@ -267,12 +272,21 @@ const Toast = (text: string, type?: string) => {
 
 // 内嵌小游戏界面打开
 const openGame = (index: any) => {
-  router.push({
-    path: '/game',
-    query: {
-      code: index
-    }
-  })
+  // 触发子页面的savePano方法,记录当前点位
+  const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
+  console.log('跳转前保存点位', iframe.contentWindow)
+  //@ts-ignore
+  iframe.contentWindow.savePano()
+  setTimeout(() => {
+    router.push({
+      path: '/game',
+      query: {
+        code: index
+      }
+    })
+  }, 500)
+
+
 }
 
 const isShowLogon = ref(false)
@@ -391,10 +405,16 @@ watch(() => store.customThemeId, () => {
     isReady.value = true
     changeXuLeiReady.value = true
   }, 200)
-
-
 })
 
+// watch(isReady, (newVal) => {
+//   if (newVal) {
+//     setTimeout(() => {// 回到跳转前的点位
+//       isBackFromGame()
+//     }, 500)
+//   }
+// })
+
 // 首次进入且没有登录
 const isFirstEnterScene = ref(false)
 
@@ -404,6 +424,21 @@ const changeFirstEnterScene = () => {
 }
 
 
+// 判断是否游戏/小界面跳转回来的
+// const isBackFromGame = () => {
+//   // 判断是否存有跳转前的点位信息
+//   if (localStorage.getItem('currentPano')) {
+//     setTimeout(() => {
+//       // 触发子页面的initCameraByPano方法,回到跳转前的点位
+//       const iframe = document.getElementById('sceneiframe') as HTMLIFrameElement
+//       //@ts-ignore
+//       iframe.contentWindow.initCameraByPano(JSON.parse(localStorage.getItem('currentPano')!))
+
+//     }, 1000)
+//   }
+// }
+
+
 
 
 onMounted(() => {
@@ -556,7 +591,7 @@ onMounted(() => {
       openGame(parseInt(point) - 1)
     } else if (v === 'zhaopianqiang') {
       router.replace('wall')
-    } else if(v === 'jiangpinduihuan'){
+    } else if (v === 'jiangpinduihuan') {
       window.openPricePageFu()
     } else {
       const unit = store.hotspots.find((item: any) => {
@@ -570,6 +605,9 @@ onMounted(() => {
     }
   }
 
+
+
+
 })
 const changePassFu = () => {
   if (!browser.mobile) {
@@ -595,24 +633,24 @@ const changePassFu = () => {
     <div class="first-box" v-show="isFirstEnterScene">
       <div class="box-content">
         <div class="text">完成<bottom @click="() => {
-          router.push({
-            path: 'homePageMo',
-            query: {
-              src: '/game/index.html#/sign-up'
-            }
-          })
-          changeFirstEnterScene()
-        }">注册</bottom>或<bottom @click="() => { goLogin(); changeFirstEnterScene() }">登陆</bottom>
+      router.push({
+        path: 'homePageMo',
+        query: {
+          src: '/game/index.html#/sign-up'
+        }
+      })
+      changeFirstEnterScene()
+    }">注册</bottom>或<bottom @click="() => { goLogin(); changeFirstEnterScene() }">登陆</bottom>
           后，体验互动游戏，可以获得积分。<br v-show="browser.mobile" />积分可以在
           <bottom @click="() => {
-            router.push({
-              path: 'homePageMo',
-              query: {
-                src: '/game/index.html#/shop-for-visitor'
-              }
-            })
-            changeFirstEnterScene()
-          }">商城</bottom>中兑换奖品。
+      router.push({
+        path: 'homePageMo',
+        query: {
+          src: '/game/index.html#/shop-for-visitor'
+        }
+      })
+      changeFirstEnterScene()
+    }">商城</bottom>中兑换奖品。
         </div>
         <div class="i-know" @click="changeFirstEnterScene()">我知道了</div>
       </div>
@@ -636,8 +674,8 @@ const changePassFu = () => {
       <div class="hots-box-left">
         <div class="left-item" :style="{ background: currentHotsUnit.unit == item.unit ? '#66141885' : '' }"
           v-for="(item, index) in store.hotspots" :key="index" @click="() => { currentHotsUnit = item }">{{
-            item.unit
-          }}</div>
+      item.unit
+    }}</div>
       </div>
       <div class="hots-box-right">
         <img v-show="!browser.mobile" @click="clostHotListFu()" class="close-icon" src="@/assets/images/close-icon.png"
@@ -666,7 +704,7 @@ const changePassFu = () => {
         <!-- 已登录状态 -->
         <div>
           <div class="title" :style="{ marginTop: !isLogin ? '5px' : '' }">{{
-            isLogin ? '积分' : "未登录" }}</div>
+      isLogin ? '积分' : "未登录" }}</div>
           <div class="scroll-wrap" v-show="isLogin">
             <div class="scroll-item" :title="String(userScore)">
               {{ userScore }}
@@ -678,13 +716,13 @@ const changePassFu = () => {
           <div @click="logout()">退出登录</div>
           <div @click="changePassFu()">修改密码</div>
           <div @click="() => {
-            router.push({
-              path: 'homePageMo',
-              query: {
-                src: '/game/index.html#/shop-view?no-redirect=1'
-              }
-            })
-          }">奖品兑换</div>
+      router.push({
+        path: 'homePageMo',
+        query: {
+          src: '/game/index.html#/shop-view?no-redirect=1'
+        }
+      })
+    }">奖品兑换</div>
         </div>
       </div>
       <!-- 形象切换listBox -->
@@ -692,7 +730,7 @@ const changePassFu = () => {
         <img @click="xingxiangListShow = false" class="close-icon" src="@/assets/images/close-icon.png" alt="">
         <div class="item" v-for="(item, index) in store.dataAll.themeList" :key="index"
           @click="() => { store.customThemeId = item.id; xingxiangListShow = false }">{{
-            item.unit }}
+      item.unit }}
         </div>
       </div>
 
@@ -701,7 +739,7 @@ const changePassFu = () => {
           <img @click="xingxiangListShow = false" class="close-icon" src="@/assets/images/close-icon.png" alt="">
           <div class="item" v-for="(item, index) in store.dataAll.themeList" :key="index"
             @click="() => { store.customThemeId = item.id }">{{
-              item.unit }}
+      item.unit }}
           </div>
         </div>
         <!-- 形象切换序列帧 -->
@@ -715,7 +753,8 @@ const changePassFu = () => {
     <!-- 游戏列表弹窗 -->
     <div class="game-list-box" v-show="isShowGameList && !browser.mobile">
       <div class="game-list">
-        <div class="game-list-item" v-for="(item, index) in store.dataAll.gameList" :key="index" @click="openGame(index)">
+        <div class="game-list-item" v-for="(item, index) in store.dataAll.gameList" :key="index"
+          @click="openGame(index)">
           <img :src="`${baseResourceUrl}/game/${browser.mobile ? 'mobile/' : 'pc/'}${item.id}.png`" alt="">
           <div v-show="!browser.mobile">{{ item.name }}</div>
         </div>
@@ -910,7 +949,7 @@ const changePassFu = () => {
           height: 20px;
           margin: 0 5px;
           font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
-          background: #bc121b4b ;
+          background: #bc121b4b;
           border: 1.2px #b3312abe solid;
           box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
 
@@ -1336,6 +1375,7 @@ const changePassFu = () => {
           height: 60%;
           margin-bottom: 10px;
           border-radius: 15px;
+          object-fit: contain;
 
           @media screen and (max-width: 700px),
           (orientation: portrait) {