<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>
  