feat: music

scene/src/views/gui/components/tourList.vue

@@ -54,10 +54,9 @@ export default {
             if (event.target.getAttribute("data-v")) {
               // 这里的 obj 就是当前点击图片所对应的信息
               let data = JSON.parse(event.target.getAttribute("data-v"));
-              // console.error(data);
               let { panoId, quaternion } = data.heroLocations[0];
               // player.model.heroLocations里的那些item
-              player.flyToPano({ pano: player.model.panos.get(panoId), quaternion });
+              player.flyToPano({ pano: player.model.panos.get(panoId), quaternion: new THREE.Quaternion(quaternion._x, quaternion._y, quaternion._z, quaternion._w) });
             }
           },
         },

scene/src/views/gui/menu.vue

@@ -142,7 +142,7 @@
     <!-- 小地图控制按钮 -->
     <div class="minimap-controls" :class="{ open: !miniMapStatus }" @click="toggleMiniMap"></div>
     <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <div v-show="openType != 'immersive'" class="new-btn">
+      <div v-show="openType != 'immersive'" class="left-btn">
         <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
           <img class="normal" :src="i.normalIcon" alt="" />
           <img class="active" :src="i.activeIcon" alt="" />
@@ -150,6 +150,15 @@
         </div>
       </div>
     </transition>
+    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+      <div v-show="openType != 'immersive'" class="right-btn">
+        <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons" @click.stop="hanlderButtons(i, i.type)">
+          <img class="normal" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
+          <img class="active" :src="i.activeIcon" alt="" @click="switchBGM(true)" />
+          <div class="tip-box">{{ i.name }}</div>
+        </div>
+      </div>
+    </transition>
     <div class="kanzhan-btns">
       <transition name="preScene">
         <div v-show="openType == 'immersive'" @click="goScene('prev')" class="button-item">
@@ -161,7 +170,7 @@
           <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.png')" alt="" />
         </div>
       </transition>
-      <transition name="nextScene" >
+      <transition name="nextScene">
         <div v-show="openType == 'immersive'" class="button-item" @click="goScene('next')">
           <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.png')" alt="" />
         </div>
@@ -247,6 +256,14 @@ export default {
           type: "immersive",
         },
       ],
+      rightButtons: [
+        {
+          normalIcon: require("@/assets/img/musicAc.png"),
+          activeIcon: require("@/assets/img/music.png"),
+          name: "音乐",
+          type: "music",
+        },
+      ],
     };
   },
   watch: {},
@@ -316,7 +333,6 @@ export default {
           break;
         case "route":
           this.isRoute = !this.isRoute;
-          console.error(this.isRoute);
           player.emit("changeArrowShow", this.isRoute);
           break;
         case "fullScreen":
@@ -616,7 +632,7 @@ export default {
   }
 }
 
-.new-btn {
+.left-btn {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -675,6 +691,65 @@ export default {
     }
   }
 }
+.right-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: absolute;
+  right: 44px;
+  bottom: 40px;
+  .button-item {
+    width: @iconW;
+    height: @iconW;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: @icomarginRight;
+    cursor: pointer;
+    position: relative;
+    .tip-box {
+      display: none;
+      position: absolute;
+      top: -38px;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      height: 29px;
+      color: #fff;
+      text-align: center;
+      line-height: 29px;
+      background: rgba(55, 54, 53, 0.6);
+      border: 1px solid #fff;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      padding: 0 8px;
+    }
+    .active {
+      display: none;
+    }
+    &:hover {
+      // .normal {
+      //   display: none;
+      // }
+      // .active {
+      //   display: block;
+      // }
+      .tip-box {
+        display: block;
+      }
+    }
+    &.active {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
+  }
+}
 .kanzhan-btns {
   display: flex;
   align-items: center;