three-base 1.0.73 → 1.0.75

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,10 +75,6 @@ export default class ThreeBase extends EventDispatcher {
             for (let c of canvas)
                 c.remove();
             div.append(this.renderer.domElement);
-            // 监听容器的尺寸的改变
-            elementResizeEvent(div, () => {
-                this.resize(div.clientWidth, div.clientHeight);
-            });
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 this.renderer.forceContextRestore();
@@ -87,14 +82,14 @@ export default class ThreeBase extends EventDispatcher {
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 this.renderer.domElement.style.opacity = "1";
             }
-            this.resize(div.clientWidth, div.clientHeight);
+            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();
@@ -229,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";
     }
     // 渲染场景
@@ -241,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,11 +92,6 @@ export default class ThreeBase extends EventDispatcher {
             for (let c of canvas) c.remove();
             div.append(this.renderer.domElement);
 
-            // 监听容器的尺寸的改变
-            elementResizeEvent(div, () => {
-                this.resize(div.clientWidth, div.clientHeight);
-            });
-
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 this.renderer.forceContextRestore();
@@ -105,7 +100,7 @@ export default class ThreeBase extends EventDispatcher {
                 this.renderer.domElement.style.opacity = "1";
             }
 
-            this.resize(div.clientWidth, div.clientHeight);
+            this.setsize(div.clientWidth, div.clientHeight);
 
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -114,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();
@@ -273,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";
     }
 
@@ -289,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/lib/threeUtils.js

@@ -46,10 +46,8 @@ class ThreeUtils extends EventDispatcher {
         this._keepZoomDoms = this._keepZoomDoms.filter(l => this.inDocument(l.dom));
         //2.设置dom的缩放值样式
         this._keepZoomDoms.map((item, i) => {
-            let parentRact = window.getComputedStyle(item.dom.parentNode);
-            let width = parseInt(parentRact.width);
-            let height = parseInt(parentRact.height);
-            let scale = Math.min(width / item.width, height / item.height);
+            let parentDom = item.dom.parentNode;
+            let scale = Math.min(parentDom.clientWidth / item.width, parentDom.clientHeight / item.height);
             Object.assign(item.dom.style, {
                 position: "absolute",
                 top: "50%",
@@ -70,6 +68,7 @@ class ThreeUtils extends EventDispatcher {
             // 把配置加入到列表中
             this._keepZoomDoms.push({ dom, width, height });
             dom.dataset.a = "这个元素缩放比例由 threeUtils.keepZoom 方法设置";
+            this._computerDomZoom();
         }
     }
     workList = [];

package/lib/threeUtils.ts

@@ -63,10 +63,8 @@ class ThreeUtils extends EventDispatcher {
 
         //2.设置dom的缩放值样式
         this._keepZoomDoms.map((item, i) => {
-            let parentRact = window.getComputedStyle(item.dom.parentNode as Element);
-            let width = parseInt(parentRact.width);
-            let height = parseInt(parentRact.height);
-            let scale = Math.min(width / item.width, height / item.height);
+            let parentDom = item.dom.parentNode as HTMLDivElement;
+            let scale = Math.min(parentDom.clientWidth / item.width, parentDom.clientHeight / item.height);
             Object.assign(item.dom.style, {
                 position: "absolute",
                 top: "50%",
@@ -91,6 +89,8 @@ class ThreeUtils extends EventDispatcher {
             this._keepZoomDoms.push({ dom, width, height });
 
             dom.dataset.a = "这个元素缩放比例由 threeUtils.keepZoom 方法设置";
+
+            this._computerDomZoom();
         }
     }
 

package/package.json

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