🎨 为模型加载显示加载中

components.d.ts

@@ -8,10 +8,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AButton: typeof import('ant-design-vue/es')['Button']
-    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
-    AEmpty: typeof import('ant-design-vue/es')['Empty']
-    ASpin: typeof import('ant-design-vue/es')['Spin']
     Box1: typeof import('./src/components/small/Box1.vue')['default']
     Box2: typeof import('./src/components/small/Box2.vue')['default']
     CommonCatalog: typeof import('./src/components/content/CommonCatalog.vue')['default']

src/components/3d/Viewer.vue

@@ -1,5 +1,6 @@
 <template>
   <div :id="id" class="container">
+    <SimpleLoading v-if="loading" />
 
 
   </div>
@@ -10,7 +11,8 @@ import { RandomUtils } from '@imengyu/imengyu-utils';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { nextTick, onBeforeUnmount, onMounted } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import SimpleLoading from '../small/SimpleLoading.vue';
 
 const id = RandomUtils.genNonDuplicateIDHEX(12);
 let renderer : THREE.WebGLRenderer|undefined;
@@ -83,8 +85,11 @@ function init() {
   }, 200);
 }
 
+const loading = ref(false);
+
 function loadPath(path: string) {
   console.log('load model', path);
+  loading.value = true;
   return new Promise<void>((resolve, reject) => {
     if (!scene) {
       reject('scene not init');
@@ -128,6 +133,8 @@ function loadPath(path: string) {
 
       resolve();
     }, undefined, reject);
+  }).finally(() => {
+    loading.value = false;
   });
 }
 
@@ -144,4 +151,19 @@ onBeforeUnmount(() => {
 onMounted(() => {
   nextTick(init);
 });
-</script>
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  :deep(.simple-loading) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>