three-base 1.0.70 → 1.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/ThreeBase.d.ts +2 -2
  2. package/lib/ThreeBase.js +6 -10
  3. package/lib/ThreeBase.ts +9 -12
  4. package/package.json +1 -1
package/lib/ThreeBase.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BufferGeometry, EventDispatcher, Object3D, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
1
+ import { BufferGeometry, Camera, EventDispatcher, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
2
2
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
3
3
  import ThreeMouse from "./ThreeMouse";
4
4
  import Transition from "./Transition";
@@ -10,7 +10,7 @@ export default class ThreeBase extends EventDispatcher {
10
10
  tempVector3: Vector3;
11
11
  size: Vector2;
12
12
  renderer: WebGLRenderer;
13
- camera: PerspectiveCamera;
13
+ camera: Camera;
14
14
  scene: Scene;
15
15
  threeMouse: ThreeMouse;
16
16
  controls: OrbitControls;
package/lib/ThreeBase.js CHANGED
@@ -78,10 +78,7 @@ export default class ThreeBase extends EventDispatcher {
78
78
  div.append(this.renderer.domElement);
79
79
  // 监听容器的尺寸的改变
80
80
  elementResizeEvent(div, () => {
81
- let rect = window.getComputedStyle(div);
82
- let width = parseInt(rect.width);
83
- let height = parseInt(rect.height);
84
- this.resize(width, height);
81
+ this.resize(div.clientWidth, div.clientHeight);
85
82
  });
86
83
  // 如果上下文被销毁了, 就恢复上下文
87
84
  if (this.isRendererContextLost) {
@@ -90,10 +87,7 @@ export default class ThreeBase extends EventDispatcher {
90
87
  await new Promise(resolve => requestAnimationFrame(resolve));
91
88
  this.renderer.domElement.style.opacity = "1";
92
89
  }
93
- let rect = window.getComputedStyle(div);
94
- let width = parseInt(rect.width);
95
- let height = parseInt(rect.height);
96
- this.resize(width, height);
90
+ this.resize(div.clientWidth, div.clientHeight);
97
91
  // 开启时时渲染
98
92
  threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
99
93
  threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
@@ -101,8 +95,10 @@ export default class ThreeBase extends EventDispatcher {
101
95
  }
102
96
  // 修改尺寸
103
97
  resize(width, height) {
104
- this.camera.aspect = width / height;
105
- this.camera.updateProjectionMatrix();
98
+ if (this.camera instanceof PerspectiveCamera) {
99
+ this.camera.aspect = width / height;
100
+ this.camera.updateProjectionMatrix();
101
+ }
106
102
  this.renderer.setPixelRatio(window.devicePixelRatio);
107
103
  this.renderer.setSize(width, height);
108
104
  this.size.set(width, height);
package/lib/ThreeBase.ts CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  import elementResizeEvent from "element-resize-event";
9
9
  import { round } from "lodash";
10
- import { AxesHelper, BufferGeometry, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
10
+ import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
11
11
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
12
12
  import { generateUUID } from "three/src/math/MathUtils";
13
13
  import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -59,7 +59,7 @@ export default class ThreeBase extends EventDispatcher {
59
59
  })();
60
60
 
61
61
  //透视相机
62
- camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
62
+ camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
63
63
 
64
64
  // 场景对象
65
65
  scene = new Scene();
@@ -94,10 +94,7 @@ export default class ThreeBase extends EventDispatcher {
94
94
 
95
95
  // 监听容器的尺寸的改变
96
96
  elementResizeEvent(div, () => {
97
- let rect = window.getComputedStyle(div);
98
- let width = parseInt(rect.width);
99
- let height = parseInt(rect.height);
100
- this.resize(width, height);
97
+ this.resize(div.clientWidth, div.clientHeight);
101
98
  });
102
99
 
103
100
  // 如果上下文被销毁了, 就恢复上下文
@@ -108,10 +105,7 @@ export default class ThreeBase extends EventDispatcher {
108
105
  this.renderer.domElement.style.opacity = "1";
109
106
  }
110
107
 
111
- let rect = window.getComputedStyle(div);
112
- let width = parseInt(rect.width);
113
- let height = parseInt(rect.height);
114
- this.resize(width, height);
108
+ this.resize(div.clientWidth, div.clientHeight);
115
109
 
116
110
  // 开启时时渲染
117
111
  threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -121,8 +115,11 @@ export default class ThreeBase extends EventDispatcher {
121
115
 
122
116
  // 修改尺寸
123
117
  resize(width: number, height: number) {
124
- this.camera.aspect = width / height;
125
- this.camera.updateProjectionMatrix();
118
+ if (this.camera instanceof PerspectiveCamera) {
119
+ this.camera.aspect = width / height;
120
+ this.camera.updateProjectionMatrix();
121
+ }
122
+
126
123
  this.renderer.setPixelRatio(window.devicePixelRatio);
127
124
  this.renderer.setSize(width, height);
128
125
  this.size.set(width, height);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "three-base",
3
- "version": "1.0.70",
3
+ "version": "1.0.73",
4
4
  "description": "three 3d three-base",
5
5
  "repository": {
6
6
  "type": "git",