[3d] performance improve (#3131)

src/extensions/core/load3d/Load3d.ts

@@ -38,6 +38,7 @@ class Load3d {
 
   STATUS_MOUSE_ON_NODE: boolean
   STATUS_MOUSE_ON_SCENE: boolean
+  INITIAL_RENDER_DONE: boolean = false
 
   constructor(
     container: Element | HTMLElement,
@@ -132,6 +133,33 @@ class Load3d {
 
     this.handleResize()
     this.startAnimation()
+
+    setTimeout(() => {
+      this.forceRender()
+    }, 100)
+  }
+
+  forceRender(): void {
+    const delta = this.clock.getDelta()
+    this.viewHelperManager.update(delta)
+    this.controlsManager.update()
+
+    this.renderer.clear()
+    this.sceneManager.renderBackground()
+    this.renderer.render(
+      this.sceneManager.scene,
+      this.cameraManager.activeCamera
+    )
+
+    if (this.viewHelperManager.viewHelper.render) {
+      this.viewHelperManager.viewHelper.render(this.renderer)
+    }
+
+    if (this.previewManager.showPreview) {
+      this.previewManager.updatePreviewRender()
+    }
+
+    this.INITIAL_RENDER_DONE = true
   }
 
   private getActiveCamera(): THREE.Camera {
@@ -150,6 +178,10 @@ class Load3d {
     const animate = () => {
       this.animationFrameId = requestAnimationFrame(animate)
 
+      if (!this.isActive()) {
+        return
+      }
+
       if (this.previewManager.showPreview) {
         this.previewManager.updatePreviewRender()
       }
@@ -182,15 +214,16 @@ class Load3d {
   }
 
   isActive(): boolean {
-    return this.STATUS_MOUSE_ON_NODE || this.STATUS_MOUSE_ON_SCENE
+    return (
+      this.STATUS_MOUSE_ON_NODE ||
+      this.STATUS_MOUSE_ON_SCENE ||
+      !this.INITIAL_RENDER_DONE
+    )
   }
 
   setBackgroundColor(color: string): void {
     this.sceneManager.setBackgroundColor(color)
-    this.renderer.render(
-      this.sceneManager.scene,
-      this.cameraManager.activeCamera
-    )
+    this.forceRender()
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
@@ -201,6 +234,8 @@ class Load3d {
         this.sceneManager.backgroundTexture
       )
     }
+
+    this.forceRender()
   }
 
   removeBackgroundImage(): void {
@@ -212,10 +247,13 @@ class Load3d {
     ) {
       this.previewManager.updateBackgroundTexture(null)
     }
+
+    this.forceRender()
   }
 
   toggleGrid(showGrid: boolean): void {
     this.sceneManager.toggleGrid(showGrid)
+    this.forceRender()
   }
 
   toggleCamera(cameraType?: 'perspective' | 'orthographic'): void {
@@ -225,6 +263,7 @@ class Load3d {
     this.viewHelperManager.recreateViewHelper()
 
     this.handleResize()
+    this.forceRender()
   }
 
   getCurrentCameraType(): 'perspective' | 'orthographic' {
@@ -237,6 +276,8 @@ class Load3d {
     if (this.previewManager.showPreview) {
       this.previewManager.syncWithMainCamera()
     }
+
+    this.forceRender()
   }
 
   getCameraState(): CameraState {
@@ -245,23 +286,17 @@ class Load3d {
 
   setFOV(fov: number): void {
     this.cameraManager.setFOV(fov)
-    this.renderer.render(
-      this.sceneManager.scene,
-      this.cameraManager.activeCamera
-    )
+    this.forceRender()
   }
 
   setEdgeThreshold(threshold: number): void {
     this.modelManager.setEdgeThreshold(threshold)
+    this.forceRender()
   }
 
   setMaterialMode(mode: MaterialMode): void {
     this.modelManager.setMaterialMode(mode)
-
-    this.renderer.render(
-      this.sceneManager.scene,
-      this.cameraManager.activeCamera
-    )
+    this.forceRender()
   }
 
   async loadModel(url: string, originalFileName?: string): Promise<void> {
@@ -272,31 +307,32 @@ class Load3d {
     await this.loaderManager.loadModel(url, originalFileName)
 
     this.handleResize()
+    this.forceRender()
   }
 
   clearModel(): void {
     this.modelManager.clearModel()
+    this.forceRender()
   }
 
   setUpDirection(direction: UpDirection): void {
     this.modelManager.setUpDirection(direction)
-
-    this.renderer.render(
-      this.sceneManager.scene,
-      this.cameraManager.activeCamera
-    )
+    this.forceRender()
   }
 
   setLightIntensity(intensity: number): void {
     this.lightingManager.setLightIntensity(intensity)
+    this.forceRender()
   }
 
   togglePreview(showPreview: boolean): void {
     this.previewManager.togglePreview(showPreview)
+    this.forceRender()
   }
 
   setTargetSize(width: number, height: number): void {
     this.previewManager.setTargetSize(width, height)
+    this.forceRender()
   }
 
   addEventListener(event: string, callback: (data?: any) => void): void {
@@ -309,6 +345,7 @@ class Load3d {
 
   refreshViewport(): void {
     this.handleResize()
+    this.forceRender()
   }
 
   handleResize(): void {
@@ -328,6 +365,7 @@ class Load3d {
     this.renderer.setSize(width, height)
 
     this.previewManager.handleResize()
+    this.forceRender()
   }
 
   captureScene(width: number, height: number): Promise<CaptureResult> {

src/extensions/core/load3d/Load3dAnimation.ts

@@ -38,6 +38,10 @@ class Load3dAnimation extends Load3d {
     const animate = () => {
       this.animationFrameId = requestAnimationFrame(animate)
 
+      if (!this.isActive()) {
+        return
+      }
+
       if (this.previewManager.showPreview) {
         this.previewManager.updatePreviewRender()
       }