three-base 1.0.70 → 1.0.73

package/lib/ThreeBase.d.ts

@@ -1,4 +1,4 @@
-import { BufferGeometry, EventDispatcher, Object3D, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { BufferGeometry, Camera, EventDispatcher, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
@@ -10,7 +10,7 @@ export default class ThreeBase extends EventDispatcher {
     tempVector3: Vector3;
     size: Vector2;
     renderer: WebGLRenderer;
-    camera: PerspectiveCamera;
+    camera: Camera;
     scene: Scene;
     threeMouse: ThreeMouse;
     controls: OrbitControls;

package/lib/ThreeBase.js

@@ -78,10 +78,7 @@ export default class ThreeBase extends EventDispatcher {
             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);
+                this.resize(div.clientWidth, div.clientHeight);
             });
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
@@ -90,10 +87,7 @@ 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.resize(div.clientWidth, div.clientHeight);
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
             threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
@@ -101,8 +95,10 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 修改尺寸
     resize(width, height) {
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
+        if (this.camera instanceof PerspectiveCamera) {
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+        }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         this.size.set(width, height);

package/lib/ThreeBase.ts

@@ -7,7 +7,7 @@
 
 import elementResizeEvent from "element-resize-event";
 import { round } from "lodash";
-import { AxesHelper, BufferGeometry, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -59,7 +59,7 @@ export default class ThreeBase extends EventDispatcher {
     })();
 
     //透视相机
-    camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
+    camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
 
     // 场景对象
     scene = new Scene();
@@ -94,10 +94,7 @@ export default class ThreeBase extends EventDispatcher {
 
             // 监听容器的尺寸的改变
             elementResizeEvent(div, () => {
-                let rect = window.getComputedStyle(div);
-                let width = parseInt(rect.width);
-                let height = parseInt(rect.height);
-                this.resize(width, height);
+                this.resize(div.clientWidth, div.clientHeight);
             });
 
             // 如果上下文被销毁了,  就恢复上下文
@@ -108,10 +105,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.resize(div.clientWidth, div.clientHeight);
 
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -121,8 +115,11 @@ export default class ThreeBase extends EventDispatcher {
 
     // 修改尺寸
     resize(width: number, height: number) {
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
+        if (this.camera instanceof PerspectiveCamera) {
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+        }
+
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         this.size.set(width, height);

package/package.json

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