mky-vent-base/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 '../../../../utils/threejs/useThree';

  const loading = ref(false);
  let model;

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

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