three-base 1.0.71 → 1.0.74

package/lib/ThreeBase.d.ts

@@ -16,7 +16,7 @@ export default class ThreeBase extends EventDispatcher {
     controls: OrbitControls;
     isRendererContextLost: boolean;
     setContainer(div: HTMLDivElement | null): Promise<void>;
-    resize(width: number, height: number): void;
+    setsize(width: number, height: number): void;
     controlsPosition: Transition;
     controlsCenter: Transition;
     init(): void;

package/lib/ThreeBase.js

@@ -4,7 +4,6 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-16 14:31:32
  */
-import elementResizeEvent from "element-resize-event";
 import { round } from "lodash";
 import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
@@ -76,13 +75,6 @@ export default class ThreeBase extends EventDispatcher {
             for (let c of canvas)
                 c.remove();
             div.append(this.renderer.domElement);
-            // 监听容器的尺寸的改变
-            elementResizeEvent(div, () => {
-                let rect = window.getComputedStyle(div);
-                let width = parseInt(rect.width);
-                let height = parseInt(rect.height);
-                this.resize(width, height);
-            });
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 this.renderer.forceContextRestore();
@@ -90,17 +82,14 @@ export default class ThreeBase extends EventDispatcher {
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 this.renderer.domElement.style.opacity = "1";
             }
-            let rect = window.getComputedStyle(div);
-            let width = parseInt(rect.width);
-            let height = parseInt(rect.height);
-            this.resize(width, height);
+            this.setsize(div.clientWidth, div.clientHeight);
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
             threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
         }
     }
     // 修改尺寸
-    resize(width, height) {
+    setsize(width, height) {
         if (this.camera instanceof PerspectiveCamera) {
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
@@ -235,7 +224,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.forceContextLoss();
         // 标记上下文被销毁了
         this.isRendererContextLost = true;
-        this.resize(100, 100);
+        this.setsize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
     // 渲染场景
@@ -247,6 +236,11 @@ export default class ThreeBase extends EventDispatcher {
             this.stopRender();
             return;
         }
+        //判断尺寸发生改变时重置尺寸
+        const parentNode = this.renderer.domElement.parentNode;
+        if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
+            this.setsize(parentNode.clientWidth, parentNode.clientHeight);
+        }
         // 分发鼠标事件
         this.threeMouse.dispatchEvent();
         // 在不自动渲染时, needRender=false 就跳过渲染

package/lib/ThreeBase.ts

@@ -92,14 +92,6 @@ export default class ThreeBase extends EventDispatcher {
             for (let c of canvas) c.remove();
             div.append(this.renderer.domElement);
 
-            // 监听容器的尺寸的改变
-            elementResizeEvent(div, () => {
-                let rect = window.getComputedStyle(div);
-                let width = parseInt(rect.width);
-                let height = parseInt(rect.height);
-                this.resize(width, height);
-            });
-
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 this.renderer.forceContextRestore();
@@ -108,10 +100,7 @@ export default class ThreeBase extends EventDispatcher {
                 this.renderer.domElement.style.opacity = "1";
             }
 
-            let rect = window.getComputedStyle(div);
-            let width = parseInt(rect.width);
-            let height = parseInt(rect.height);
-            this.resize(width, height);
+            this.setsize(div.clientWidth, div.clientHeight);
 
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -120,7 +109,7 @@ export default class ThreeBase extends EventDispatcher {
     }
 
     // 修改尺寸
-    resize(width: number, height: number) {
+    setsize(width: number, height: number) {
         if (this.camera instanceof PerspectiveCamera) {
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
@@ -279,7 +268,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.forceContextLoss();
         // 标记上下文被销毁了
         this.isRendererContextLost = true;
-        this.resize(100, 100);
+        this.setsize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
 
@@ -295,6 +284,12 @@ export default class ThreeBase extends EventDispatcher {
             return;
         }
 
+        //判断尺寸发生改变时重置尺寸
+        const parentNode = this.renderer.domElement.parentNode as HTMLDivElement;
+        if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
+            this.setsize(parentNode.clientWidth, parentNode.clientHeight);
+        }
+
         // 分发鼠标事件
         this.threeMouse.dispatchEvent();
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.71",
+    "version": "1.0.74",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",