[3d] bug fix and add loading for background image change (#3888)

src/components/load3d/Load3DScene.vue

@@ -52,6 +52,9 @@ const eventConfig = {
   showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
   backgroundImageChange: (value: string) =>
     emit('backgroundImageChange', value),
+  backgroundImageLoadingStart: () =>
+    loadingOverlayRef.value?.startLoading(t('load3d.loadingBackgroundImage')),
+  backgroundImageLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
   upDirectionChange: (value: string) => emit('upDirectionChange', value),
   edgeThresholdChange: (value: number) => emit('edgeThresholdChange', value),
   modelLoadingStart: () =>
@@ -75,7 +78,7 @@ const eventConfig = {
 
 watchEffect(async () => {
   if (load3d.value) {
-    const rawLoad3d = toRaw(load3d.value)
+    const rawLoad3d = toRaw(load3d.value) as Load3d
 
     rawLoad3d.setBackgroundColor(props.backgroundColor)
     rawLoad3d.toggleGrid(props.showGrid)
@@ -84,15 +87,25 @@ watchEffect(async () => {
     rawLoad3d.toggleCamera(props.cameraType)
     rawLoad3d.togglePreview(props.showPreview)
     await rawLoad3d.setBackgroundImage(props.backgroundImage)
-    rawLoad3d.setUpDirection(props.upDirection)
   }
 })
 
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    if (load3d.value) {
+      const rawLoad3d = toRaw(load3d.value) as Load3d
+
+      rawLoad3d.setUpDirection(newValue)
+    }
+  }
+)
+
 watch(
   () => props.materialMode,
   (newValue) => {
     if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value)
+      const rawLoad3d = toRaw(load3d.value) as Load3d
 
       rawLoad3d.setMaterialMode(newValue)
     }
@@ -102,10 +115,9 @@ watch(
 watch(
   () => props.edgeThreshold,
   (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value)
+    if (load3d.value && newValue) {
+      const rawLoad3d = toRaw(load3d.value) as Load3d
 
-      // @ts-expect-error fixme ts strict error
       rawLoad3d.setEdgeThreshold(newValue)
     }
   }

src/extensions/core/load3d/SceneManager.ts

@@ -82,6 +82,8 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
+    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
+
     if (uploadPath === '') {
       this.removeBackgroundImage()
       return
@@ -123,7 +125,9 @@ export class SceneManager implements SceneManagerInterface {
       )
 
       this.eventManager.emitEvent('backgroundImageChange', uploadPath)
+      this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
     } catch (error) {
+      this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
       console.error('Error loading background image:', error)
     }
   }
@@ -139,6 +143,7 @@ export class SceneManager implements SceneManagerInterface {
       this.backgroundTexture.dispose()
       this.backgroundTexture = null
     }
+    this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
   }
 
   updateBackgroundSize(