Improve bg color image logic (#4095)

src/extensions/core/load3d/SceneManager.ts

@@ -13,6 +13,10 @@ export class SceneManager implements SceneManagerInterface {
   backgroundMesh: THREE.Mesh | null = null
   backgroundTexture: THREE.Texture | null = null
 
+  backgroundColorMaterial: THREE.MeshBasicMaterial | null = null
+  currentBackgroundType: 'color' | 'image' = 'color'
+  currentBackgroundColor: string = '#282828'
+
   private eventManager: EventManagerInterface
   private renderer: THREE.WebGLRenderer
 
@@ -40,17 +44,28 @@ export class SceneManager implements SceneManagerInterface {
     this.backgroundScene = new THREE.Scene()
     this.backgroundCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1)
 
+    this.initBackgroundScene()
+  }
+
+  private initBackgroundScene(): void {
     const planeGeometry = new THREE.PlaneGeometry(2, 2)
-    const planeMaterial = new THREE.MeshBasicMaterial({
-      transparent: true,
+
+    this.backgroundColorMaterial = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(this.currentBackgroundColor),
+      transparent: false,
       depthWrite: false,
       depthTest: false,
       side: THREE.DoubleSide
     })
 
-    this.backgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+    this.backgroundMesh = new THREE.Mesh(
+      planeGeometry,
+      this.backgroundColorMaterial
+    )
     this.backgroundMesh.position.set(0, 0, 0)
     this.backgroundScene.add(this.backgroundMesh)
+
+    this.renderer.setClearColor(0x000000, 0)
   }
 
   init(): void {}
@@ -60,9 +75,15 @@ export class SceneManager implements SceneManagerInterface {
       this.backgroundTexture.dispose()
     }
 
+    if (this.backgroundColorMaterial) {
+      this.backgroundColorMaterial.dispose()
+    }
+
     if (this.backgroundMesh) {
       this.backgroundMesh.geometry.dispose()
-      ;(this.backgroundMesh.material as THREE.Material).dispose()
+      if (this.backgroundMesh.material instanceof THREE.Material) {
+        this.backgroundMesh.material.dispose()
+      }
     }
 
     this.scene.clear()
@@ -77,18 +98,39 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   setBackgroundColor(color: string): void {
-    this.renderer.setClearColor(new THREE.Color(color))
+    this.currentBackgroundColor = color
+    this.currentBackgroundType = 'color'
+
+    if (!this.backgroundMesh || !this.backgroundColorMaterial) {
+      this.initBackgroundScene()
+    }
+
+    this.backgroundColorMaterial!.color.set(color)
+    this.backgroundColorMaterial!.map = null
+    this.backgroundColorMaterial!.transparent = false
+    this.backgroundColorMaterial!.needsUpdate = true
+
+    if (this.backgroundMesh) {
+      this.backgroundMesh.material = this.backgroundColorMaterial!
+    }
+
+    if (this.backgroundTexture) {
+      this.backgroundTexture.dispose()
+      this.backgroundTexture = null
+    }
+
     this.eventManager.emitEvent('backgroundColorChange', color)
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
-    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
-
     if (uploadPath === '') {
-      this.removeBackgroundImage()
+      this.setBackgroundColor(this.currentBackgroundColor)
+
       return
     }
 
+    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
+
     let imageUrl = Load3dUtils.getResourceURL(
       ...Load3dUtils.splitFilePath(uploadPath)
     )
@@ -110,12 +152,31 @@ export class SceneManager implements SceneManagerInterface {
       texture.colorSpace = THREE.SRGBColorSpace
 
       this.backgroundTexture = texture
+      this.currentBackgroundType = 'image'
 
-      const material = this.backgroundMesh?.material as THREE.MeshBasicMaterial
-      material.map = texture
-      material.needsUpdate = true
+      if (!this.backgroundMesh) {
+        this.initBackgroundScene()
+      }
 
-      this.backgroundMesh?.position.set(0, 0, 0)
+      const imageMaterial = new THREE.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        depthWrite: false,
+        depthTest: false,
+        side: THREE.DoubleSide
+      })
+
+      if (this.backgroundMesh) {
+        if (
+          this.backgroundMesh.material !== this.backgroundColorMaterial &&
+          this.backgroundMesh.material instanceof THREE.Material
+        ) {
+          this.backgroundMesh.material.dispose()
+        }
+
+        this.backgroundMesh.material = imageMaterial
+        this.backgroundMesh.position.set(0, 0, 0)
+      }
 
       this.updateBackgroundSize(
         this.backgroundTexture,
@@ -129,20 +190,12 @@ export class SceneManager implements SceneManagerInterface {
     } catch (error) {
       this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
       console.error('Error loading background image:', error)
+      this.setBackgroundColor(this.currentBackgroundColor)
     }
   }
 
   removeBackgroundImage(): void {
-    if (this.backgroundMesh) {
-      const material = this.backgroundMesh.material as THREE.MeshBasicMaterial
-      material.map = null
-      material.needsUpdate = true
-    }
-
-    if (this.backgroundTexture) {
-      this.backgroundTexture.dispose()
-      this.backgroundTexture = null
-    }
+    this.setBackgroundColor(this.currentBackgroundColor)
     this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
   }
 
@@ -172,7 +225,11 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   handleResize(width: number, height: number): void {
-    if (this.backgroundTexture && this.backgroundMesh) {
+    if (
+      this.backgroundTexture &&
+      this.backgroundMesh &&
+      this.currentBackgroundType === 'image'
+    ) {
       this.updateBackgroundSize(
         this.backgroundTexture,
         this.backgroundMesh,
@@ -183,18 +240,25 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   renderBackground(): void {
-    if (this.backgroundMesh && this.backgroundTexture) {
-      const material = this.backgroundMesh.material as THREE.MeshBasicMaterial
-      if (material.map) {
-        const currentToneMapping = this.renderer.toneMapping
-        const currentExposure = this.renderer.toneMappingExposure
+    if (this.backgroundMesh) {
+      const currentToneMapping = this.renderer.toneMapping
+      const currentExposure = this.renderer.toneMappingExposure
 
-        this.renderer.toneMapping = THREE.NoToneMapping
-        this.renderer.render(this.backgroundScene, this.backgroundCamera)
+      this.renderer.toneMapping = THREE.NoToneMapping
+      this.renderer.render(this.backgroundScene, this.backgroundCamera)
 
-        this.renderer.toneMapping = currentToneMapping
-        this.renderer.toneMappingExposure = currentExposure
-      }
+      this.renderer.toneMapping = currentToneMapping
+      this.renderer.toneMappingExposure = currentExposure
+    }
+  }
+
+  getCurrentBackgroundInfo(): { type: 'color' | 'image'; value: string } {
+    return {
+      type: this.currentBackgroundType,
+      value:
+        this.currentBackgroundType === 'color'
+          ? this.currentBackgroundColor
+          : ''
     }
   }
 
@@ -210,8 +274,6 @@ export class SceneManager implements SceneManagerInterface {
           new THREE.Color()
         )
         const originalClearAlpha = this.renderer.getClearAlpha()
-        const originalToneMapping = this.renderer.toneMapping
-        const originalExposure = this.renderer.toneMappingExposure
         const originalOutputColorSpace = this.renderer.outputColorSpace
 
         this.renderer.setSize(width, height)
@@ -237,7 +299,11 @@ export class SceneManager implements SceneManagerInterface {
           orthographicCamera.updateProjectionMatrix()
         }
 
-        if (this.backgroundTexture && this.backgroundMesh) {
+        if (
+          this.backgroundTexture &&
+          this.backgroundMesh &&
+          this.currentBackgroundType === 'image'
+        ) {
           this.updateBackgroundSize(
             this.backgroundTexture,
             this.backgroundMesh,
@@ -252,19 +318,7 @@ export class SceneManager implements SceneManagerInterface {
         >()
 
         this.renderer.clear()
-
-        if (this.backgroundMesh && this.backgroundTexture) {
-          const material = this.backgroundMesh
-            .material as THREE.MeshBasicMaterial
-
-          if (material.map) {
-            this.renderer.toneMapping = THREE.NoToneMapping
-            this.renderer.render(this.backgroundScene, this.backgroundCamera)
-            this.renderer.toneMapping = originalToneMapping
-            this.renderer.toneMappingExposure = originalExposure
-          }
-        }
-
+        this.renderBackground()
         this.renderer.render(this.scene, this.getActiveCamera())
         const sceneData = this.renderer.domElement.toDataURL('image/png')