mky-vent-5/src/views/vent/monitorManager/gateMonitor/detail.vue

<template>
  <div style="width: 100%; height: calc(100vh - 200px); display: flex; justify-content: center; align-items: center">
    <a-spin :spinning="loading" />
    <div id="fengmen3D" v-show="!loading"> </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import UseThree from '/@/hooks/core/useThree';
  import * as THREE from 'three';
  import gsap from 'gsap';

  const loading = ref(false);
  let model;

  onMounted(() => {
    model = new UseThree('#fengmen3D');
    // model.setEnvMap('test');
    //   model.setCustomMaterial = setCustomMaterial
    loading.value = true;
    model.setModel('9f-processed').then(() => {
      // 模型加载成功
      loading.value = false;
    });
  });

  onUnmounted(() => {
    if (model) {
      model.deleteModal();
    }
  });
</script>
<style scoped lang="scss"></style>