feat: XR测试

packages/qjkankan-view/.env.testdev

@@ -1,13 +1,13 @@
 VUE_APP_STATIC_DIR=showviewer
-# VUE_APP_CDN=https://ossxiaoan.4dage.com
-VUE_APP_CDN=https://4dkk.4dage.com
-VUE_APP_PROXY_URL_ROOT='https://www.4dkankan.com'
-VUE_APP_RESOURCE_URL='https://www.4dkankan.com/panorama/'
-VUE_APP_PROXY_URL='https://www.4dkankan.com/qjkankan/'
+VUE_APP_CDN=https://ossxiaoan.4dage.com
+# VUE_APP_CDN=https://4dkk.4dage.com
+VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
+VUE_APP_RESOURCE_URL='https://test.4dkankan.com/panorama/'
+VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=
 
 # 接口请求地址
-VUE_APP_APIS_URL=https://www.4dkankan.com/
+VUE_APP_APIS_URL=https://test.4dkankan.com/
 VUE_APP_DEBBUG_FLAG=0516-03
 VUE_APP_DEBBUG_NOTIFY=0
 VUE_APP_DEBBUG_V4=1

packages/qjkankan-view/src/components/UIGather/mobile/control.pano.vue

@@ -1,21 +1,9 @@
 <template>
   <ul class="btn-list">
     <!--菜单-->
-    <li @click="onIsShowList"
-      v-if="
-        !(
-          metadata.catalogRoot &&
-          metadata.catalogRoot.length == 1 &&
-          scenes.length == 1 &&
-          secondaryList.length == 1
-        )
-      ">
-      <img :src="
-          require(`@/assets/images/icon2/${
-            isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'
-          }`)
-        " alt="" />
-      <span>{{ $t('menu.tour') }}</span>
+    <li @click="onIsShowList" v-if="!(metadata.catalogRoot && metadata.catalogRoot.length == 1 && scenes.length == 1 && secondaryList.length == 1)">
+      <img :src="require(`@/assets/images/icon2/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)" alt="" />
+      <span>{{ $t("menu.tour") }}</span>
     </li>
     <!-- 自定义链接 -->
     <li @click="onLink" v-if="customLink && customLink.isShow">
@@ -34,39 +22,21 @@
     <!-- 简介 -->
     <li @click="onIntroduce" v-if="metadata.work.description">
       <img :src="require(`@/assets/images/icon2/text@2x.png`)" alt="" />
-      <span>{{ $t('menu.introduce') }}</span>
+      <span>{{ $t("menu.introduce") }}</span>
     </li>
 
     <!-- 背景音乐 -->
-    <li @click="onIsBGM" v-if="isHasNormalBGM" style="display: none;">
-      <img
-        :src="
-          require(`@/assets/images/icon/${
-            isPlayNormalBGM && isCurrentPlaying
-              ? 'music@2x.png'
-              : 'music_disabled@2x.png'
-          }`)
-        "
-        alt=""
-      />
+    <li @click="onIsBGM" v-if="isHasNormalBGM" style="display: none">
+      <img :src="require(`@/assets/images/icon/${isPlayNormalBGM && isCurrentPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
     </li>
 
     <!-- 解说音频 -->
-    <li @click="onIsCommentary" v-if="isHasExplanationBGM" style="display: none;">
-      <img
-        :src="
-          require(`@/assets/images/icon/${
-            isPlayExplanationBGM && isCurrentPlaying
-              ? 'commentary@2x.png'
-              : 'commentary_disabled@2x.png'
-          }`)
-        "
-        alt=""
-      />
+    <li @click="onIsCommentary" v-if="isHasExplanationBGM" style="display: none">
+      <img :src="require(`@/assets/images/icon/${isPlayExplanationBGM && isCurrentPlaying ? 'commentary@2x.png' : 'commentary_disabled@2x.png'}`)" alt="" />
     </li>
     <li @click="onShowMore">
       <img :src="require(`@/assets/images/icon2/more@2x.png`)" alt="" />
-      <span>{{ $t('menu.more') }}</span>
+      <span>{{ $t("menu.more") }}</span>
     </li>
   </ul>
 
@@ -80,61 +50,28 @@
     <div class="tools-more" @click="showMore = false" v-if="showMore">
       <div class="list">
         <div @click="onIsAutoRotate">
-          <img
-            :src="
-              require(`@/assets/images/icon2/${
-                isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
-              }`)
-            "
-            alt=""
-          />
-          <span>{{ $t('menu.autoRotate') }}</span>
+          <img :src="require(`@/assets/images/icon2/${isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'}`)" alt="" />
+          <span>{{ $t("menu.autoRotate") }}</span>
         </div>
         <div @click="onVR">
           <img :src="require(`@/assets/images/icon2/vr@2x.png`)" alt="" />
-          <span>{{ $t('menu.vr') }}</span>
+          <span>{{ $t("menu.vr") }}</span>
         </div>
       </div>
     </div>
     <div class="tools-right">
       <div @click="onIsBGM" v-if="isHasNormalBGM" v-show="ready">
-        <img
-          :src="
-            require(`@/assets/images/icon2/${
-              isPlayNormalBGM && isCurrentPlaying
-                ? 'music@2x.png'
-                : 'music_disabled@2x.png'
-            }`)
-          "
-          alt=""
-        />
+        <img :src="require(`@/assets/images/icon2/${isPlayNormalBGM && isCurrentPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
       </div>
       <div @click="onIsCommentary" v-if="isHasExplanationBGM" v-show="ready">
-        <img
-          :src="
-            require(`@/assets/images/icon2/${
-              isPlayExplanationBGM && isCurrentPlaying
-                ? 'commentary@2x.png'
-                : 'commentary_disabled@2x.png'
-            }`)
-          "
-          alt=""
-        />
+        <img :src="require(`@/assets/images/icon2/${isPlayExplanationBGM && isCurrentPlaying ? 'commentary@2x.png' : 'commentary_disabled@2x.png'}`)" alt="" />
       </div>
     </div>
   </teleport>
 </template>
 
 <script setup>
-import {
-  ref,
-  unref,
-  watch,
-  computed,
-  onMounted,
-  watchEffect,
-  nextTick,
-} from "vue";
+import { ref, unref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 import introduce from "./control/text";
@@ -153,9 +90,7 @@ const scenes = computed(() => store.getters["scene/list"]);
 
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 
-const isShowScenesList = computed(
-  () => store.getters["functions/isShowScenesList"]
-);
+const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
@@ -179,21 +114,15 @@ const showLink = computed(() => store.getters["functions/showLink"]);
 
 //BMG音乐
 const isHasNormalBGM = computed(() => store.getters["audio/isHasNormalBGM"]);
-const isCurrentPlaying = computed(
-  () => store.getters["audio/isCurrentPlaying"]
-);
+const isCurrentPlaying = computed(() => store.getters["audio/isCurrentPlaying"]);
 const isHasV3BGM = computed(() => store.getters["audio/isHasV3BGM"]);
 const isHasV4BGM = computed(() => store.getters["audio/isHasV4BGM"]);
-const isHasExplanationBGM = computed(
-  () => store.getters["audio/isHasExplanationBGM"]
-);
+const isHasExplanationBGM = computed(() => store.getters["audio/isHasExplanationBGM"]);
 //BMG playing音乐
 const isPlayNormalBGM = computed(() => store.getters["audio/isPlayNormalBGM"]);
 const isPlayV3BGM = computed(() => store.getters["audio/isPlayV3BGM"]);
 const isPlayV4BGM = computed(() => store.getters["audio/isPlayV4BGM"]);
-const isPlayExplanationBGM = computed(
-  () => store.getters["audio/isPlayExplanationBGM"]
-);
+const isPlayExplanationBGM = computed(() => store.getters["audio/isPlayExplanationBGM"]);
 
 const isFullscreen = ref(false);
 
@@ -241,14 +170,23 @@ const onIsCommentary = () => {
     store.dispatch("audio/playBGM", 3);
   } else {
     if (unref(isCurrentPlaying)) {
-      store.dispatch("audio/pauseBGM",3);
+      store.dispatch("audio/pauseBGM", 3);
     } else {
       store.dispatch("audio/playBGM", 3);
     }
   }
 };
+
+const enterVR = async () => {
+  if ("xr" in navigator) {
+    const session = await navigator.xr.requestSession("immersive-vr");
+  } else {
+  }
+};
+
 const onVR = (data) => {
   useApp().then((app) => {
+    enterVR();
     console.log(app.krpanoDom.get("webvr"));
     app.krpanoDom.call("webvr.enterVR()");
   });
@@ -266,23 +204,17 @@ const onIsShowList = (data) => {
 };
 
 const onShowMore = () => {
-  showMore.value = true
+  showMore.value = true;
 };
 
 onMounted(() => {
-  let events = [
-    "fullscreenchange",
-    "webkitfullscreenchange",
-    "mozfullscreenchange",
-    "MSFullscreenChange",
-  ];
+  let events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
   events.forEach((item, index) => {
     window.addEventListener(item, () => {
       isFullscreen.value = !isFullscreen.value;
     });
   });
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -322,42 +254,42 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    img{
+    img {
       width: 24px;
       height: 24px;
       object-fit: contain;
     }
-    span{
-      color:#fff;
-      font-size:12px;
-      text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
+    span {
+      color: #fff;
+      font-size: 12px;
+      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
       margin-top: 6px;
     }
   }
 }
-.tools-share{
+.tools-share {
   position: absolute;
   right: 15px;
   top: 16px;
   z-index: 999;
-  img{
+  img {
     width: 24px;
     height: 24px;
     object-fit: contain;
   }
 }
-.tools-more{
+.tools-more {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.4);
+  background: rgba(0, 0, 0, 0.4);
   z-index: 999;
-  .list{
+  .list {
     height: 6rem;
-    background: rgba(27,27,28,0.8);
-    box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.1), inset 0px 1px 0px 0px #000000;
+    background: rgba(27, 27, 28, 0.8);
+    box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 0px 0px #000000;
     position: absolute;
     left: 0;
     bottom: 0;
@@ -365,21 +297,21 @@ onMounted(() => {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     display: flex;
-    >div{
+    > div {
       display: flex;
       align-items: center;
       flex-direction: column;
       margin-top: 10px;
       margin-left: 26px;
-      img{
+      img {
         width: 24px;
         height: 24px;
         object-fit: contain;
       }
-      span{
-        color:#fff;
-        font-size:12px;
-        text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
+      span {
+        color: #fff;
+        font-size: 12px;
+        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
         margin-top: 6px;
       }
     }
@@ -387,14 +319,14 @@ onMounted(() => {
 }
 .tools-right {
   position: absolute;
-  right:25PX;
+  right: 25px;
   top: 40%;
   z-index: 999;
   pointer-events: none;
-  div{
+  div {
     margin-top: 25px;
   }
-  img{
+  img {
     width: 24px;
     height: 24px;
     object-fit: contain;