yangshi_cloudExbition/src/pages/scene/scene.vue

<template>
  <div class="scene-body">
    <iframe
      ref="ifr"
      :src="`scene.html?m=1079${firstView[viewId]}`"
      allowfullscreen="true"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  props: ["tourStatus"],
  data(){
    return {
      firstView: {
        xuting:
          "&firstView=pano:0,qua:-0.001489144851378805,0.8167267402741333,0.002107772549575186,0.5770188587943806",
        e:
          "&firstView=pano:30,qua:0.028523630856794317, 0.953183703881663, -0.09519870492067249, 0.2855948602103702",
      },
      viewId:this.$route.params.type
    }
  },
  mounted() {
    let ifrWindow = this.$refs.ifr.contentWindow
    this.$bus.$on('ifrMessage',(data)=>{
      if (data.events=='flyToPano') {
          let { x, y, z, w } = data.data.quaternion
          ifrWindow.player.flyToPano({
            pano: ifrWindow.player.model.panos.index[data.data.id],
            quaternion: new ifrWindow.THREE.Quaternion(x, y, z, w),
          });
      }

      if (data.events=='toggleTour') {
        console.log(ifrWindow[data.data]);
        ifrWindow[data.data]()
      }
    })
  },
  watch: {
    theme(newVal) {
      if (newVal == "xuting") {
        this.$refs.ifr.contentWindow.postMessage(
          {
            source: "changeExhition",
            data: {
              quat: [
                -0.001489144851378805,
                0.8167267402741333,
                0.002107772549575186,
                0.5770188587943806,
              ],
              index: 0,
            },
          },
          "*"
        );
      }

      if (newVal == "e") {
        this.$refs.ifr.contentWindow.postMessage(
          {
            source: "changeExhition",
            data: {
              quat: [
                0.028523630856794317,
                0.953183703881663,
                -0.09519870492067249,
                0.2855948602103702,
              ],
              index: 30,
            },
          },
          "*"
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.scene-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  > iframe {
    width: 100%;
    height: 100%;
  }
}
</style>