ZhangXianQiang
2024-04-28 d387848d15a40fb16c8a6eefb007d5f7411c5dbc
src/views/screen/components/screen-map-three/index.vue
@@ -1,13 +1,51 @@
<template>
  <div>
    123
  <div class="map-container">
    <canvas class="world" ref="worldContainer"></canvas>
  </div>
</template>
<script>
import Experience from './experience/index';
let world = null;
export default {
  name: 'ScreenMapThree'
  name: 'ScreenMapThree',
  props: {
    loadEnd: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    loadEnd: {
      handler(newVal) {
        if (newVal) {
          world = new Experience(this.$refs.worldContainer);
        }
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    world.destroy();
    world = null;
  },
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  .world {
    width: 100%;
    height: 100%;
  }
}
</style>