[backport cloud/1.38] fix: add ResizeObserver to fix Preview3D initial render stretch (#8424)

Backport of #8351 to `cloud/1.38`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8424-backport-cloud-1-38-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f76d73d365081a9974fe055b2a5894d)
by [Unito](https://www.unito.io)

Co-authored-by: Terry Jia <terryjia88@gmail.com>

src/extensions/core/load3d/Load3d.ts

@@ -55,6 +55,7 @@ class Load3d {
   private rightMouseMoved: boolean = false
   private readonly dragThreshold: number = 5
   private contextMenuAbortController: AbortController | null = null
+  private resizeObserver: ResizeObserver | null = null
 
   constructor(container: Element | HTMLElement, options: Load3DOptions = {}) {
     this.clock = new THREE.Clock()
@@ -145,6 +146,7 @@ class Load3d {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
+    this.initResizeObserver(container)
 
     this.handleResize()
     this.startAnimation()
@@ -154,6 +156,14 @@ class Load3d {
     }, 100)
   }
 
+  private initResizeObserver(container: Element | HTMLElement): void {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize()
+      this.forceRender()
+    })
+    this.resizeObserver.observe(container)
+  }
+
   /**
    * Initialize context menu on the Three.js canvas
    * Detects right-click vs right-drag to show menu only on click
@@ -809,6 +819,11 @@ class Load3d {
   }
 
   public remove(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
     if (this.contextMenuAbortController) {
       this.contextMenuAbortController.abort()
       this.contextMenuAbortController = null