From 26eb3eff4d8727b588fe5f4c5e1fe303ef23c3aa Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Wed, 28 Jan 2026 05:11:54 -0500
Subject: [PATCH] fix: add ResizeObserver to fix Preview3D initial render
 stretch (#8351)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

When Preview3D node was added to canvas, the Three.js scene would
stretch outside the node bounds until mouse hover. This happened because
the container size was not stable during initialization.

Add ResizeObserver to Load3d class to automatically refresh viewport
when container size changes, ensuring correct render dimensions.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8351-fix-add-ResizeObserver-to-fix-Preview3D-initial-render-stretch-2f66d73d3650810cbd1fc64dde9ddc17)
by [Unito](https://www.unito.io)
---
 src/extensions/core/load3d/Load3d.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 60690e4f8..00cc62280 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/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