three-base 2.0.75 → 2.0.77

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 (82) hide show
  1. package/ApngTexture.d.ts +13 -13
  2. package/ApngTexture.js +61 -61
  3. package/ApngTextureManage.d.ts +18 -18
  4. package/ApngTextureManage.js +87 -87
  5. package/EventMesh.d.ts +18 -18
  6. package/EventMesh.js +59 -59
  7. package/ExtrudeMesh.d.ts +111 -111
  8. package/ExtrudeMesh.js +363 -363
  9. package/FPScontrol.d.ts +45 -45
  10. package/FPScontrol.js +171 -171
  11. package/Fire/Fire.d.ts +28 -28
  12. package/Fire/Fire.js +79 -79
  13. package/Fire/FireGromtry.d.ts +9 -9
  14. package/Fire/FireGromtry.js +40 -40
  15. package/Fire/FireMaterial.d.ts +28 -28
  16. package/Fire/FireMaterial.js +32 -32
  17. package/InstancedMeshBase.d.ts +32 -32
  18. package/InstancedMeshBase.js +229 -236
  19. package/InstancedMeshBase.ts +12 -22
  20. package/KeyFrameAnimation.d.ts +25 -25
  21. package/KeyFrameAnimation.js +78 -78
  22. package/MeshBase.d.ts +34 -34
  23. package/MeshBase.js +187 -187
  24. package/Mirror.d.ts +25 -25
  25. package/Mirror.js +139 -139
  26. package/PlaneModal1/PlaneModal1.d.ts +31 -31
  27. package/PlaneModal1/PlaneModal1.js +105 -105
  28. package/PlaneModal1/index.d.ts +1 -1
  29. package/PlaneModal1/index.js +1 -1
  30. package/PlaneText.d.ts +44 -44
  31. package/PlaneText.js +30 -30
  32. package/PlaneWithHtml.d.ts +11 -11
  33. package/PlaneWithHtml.js +68 -68
  34. package/PointLight/PointLight.d.ts +13 -13
  35. package/PointLight/PointLight.js +64 -64
  36. package/PointLight/index.d.ts +1 -1
  37. package/PointLight/index.js +1 -1
  38. package/Sky/Sky.d.ts +13 -13
  39. package/Sky/Sky.js +28 -28
  40. package/Sky/index.d.ts +1 -1
  41. package/Sky/index.js +1 -1
  42. package/SpriteModal1/SpriteModal1.d.ts +30 -30
  43. package/SpriteModal1/SpriteModal1.js +110 -110
  44. package/SpriteModal1/index.d.ts +1 -1
  45. package/SpriteModal1/index.js +1 -1
  46. package/SpriteText.d.ts +45 -45
  47. package/SpriteText.js +163 -163
  48. package/SpriteText2.d.ts +47 -47
  49. package/SpriteText2.js +198 -198
  50. package/SpriteWithHtml.d.ts +7 -7
  51. package/SpriteWithHtml.js +49 -49
  52. package/Text3D/Text3D.d.ts +20 -20
  53. package/Text3D/Text3D.js +62 -62
  54. package/Text3D/fontController.d.ts +59 -59
  55. package/Text3D/fontController.js +200 -200
  56. package/Text3D/index.d.ts +1 -1
  57. package/Text3D/index.js +1 -1
  58. package/ThreeBase.d.ts +92 -92
  59. package/ThreeBase.js +619 -619
  60. package/ThreeMouse.d.ts +39 -39
  61. package/ThreeMouse.js +359 -359
  62. package/Transition.d.ts +40 -40
  63. package/Transition.js +207 -207
  64. package/index.d.ts +1 -1
  65. package/index.js +2 -2
  66. package/keyContorls.d.ts +25 -25
  67. package/keyContorls.js +98 -98
  68. package/package.json +1 -1
  69. package/pass/FullScreenQuad.d.ts +7 -7
  70. package/pass/FullScreenQuad.js +25 -25
  71. package/pass/glow_pass.d.ts +2 -2
  72. package/pass/glow_pass.js +236 -236
  73. package/pass/stroke_pass.d.ts +2 -2
  74. package/pass/stroke_pass.js +202 -202
  75. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  76. package/shaders/FXAAShaderMaterial.js +21 -21
  77. package/shaders.d.ts +17 -17
  78. package/shaders.js +99 -99
  79. package/threeLoader.d.ts +26 -26
  80. package/threeLoader.js +189 -189
  81. package/threeUtils.d.ts +47 -47
  82. package/threeUtils.js +266 -266
package/FPScontrol.d.ts CHANGED
@@ -1,45 +1,45 @@
1
- import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
2
- import { Capsule } from "three/examples/jsm/math/Capsule";
3
- import { Octree } from "three/examples/jsm/math/Octree";
4
- /**
5
- * 第一人称控制器
6
- *
7
- * @export
8
- * @class FPScontrol
9
- * @extends {EventDispatcher}
10
- */
11
- export default class FPScontrol extends EventDispatcher {
12
- canvas: HTMLCanvasElement;
13
- constructor(camera: Camera, canvas: HTMLCanvasElement);
14
- enable: boolean;
15
- GRAVITY: number;
16
- STEPS_PER_FRAME: number;
17
- speed: number;
18
- camera: Camera;
19
- worldOctree: Octree;
20
- playerCollider: Capsule;
21
- clock: Clock;
22
- playerVelocity: Vector3;
23
- playerDirection: Vector3;
24
- playerOnFloor: boolean;
25
- mouseTime: number;
26
- isMousedown: boolean;
27
- keyStates: {
28
- [key: string]: boolean;
29
- };
30
- init(canvas: HTMLCanvasElement): void;
31
- keydown: (event: KeyboardEvent) => void;
32
- keyup: (event: KeyboardEvent) => void;
33
- mousedown: () => void;
34
- mouseup: () => void;
35
- mousemove: (event: MouseEvent) => void;
36
- fromGraphNode(object3d: Object3D): void;
37
- getForwardVector: () => Vector3;
38
- getSideVector: () => Vector3;
39
- controls: (deltaTime: number) => void;
40
- updatePlayer: (deltaTime: number) => void;
41
- playerCollisions(): void;
42
- teleportPlayerIfOob: () => void;
43
- update(): void;
44
- disposer(): void;
45
- }
1
+ import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
2
+ import { Capsule } from "three/examples/jsm/math/Capsule";
3
+ import { Octree } from "three/examples/jsm/math/Octree";
4
+ /**
5
+ * 第一人称控制器
6
+ *
7
+ * @export
8
+ * @class FPScontrol
9
+ * @extends {EventDispatcher}
10
+ */
11
+ export default class FPScontrol extends EventDispatcher {
12
+ canvas: HTMLCanvasElement;
13
+ constructor(camera: Camera, canvas: HTMLCanvasElement);
14
+ enable: boolean;
15
+ GRAVITY: number;
16
+ STEPS_PER_FRAME: number;
17
+ speed: number;
18
+ camera: Camera;
19
+ worldOctree: Octree;
20
+ playerCollider: Capsule;
21
+ clock: Clock;
22
+ playerVelocity: Vector3;
23
+ playerDirection: Vector3;
24
+ playerOnFloor: boolean;
25
+ mouseTime: number;
26
+ isMousedown: boolean;
27
+ keyStates: {
28
+ [key: string]: boolean;
29
+ };
30
+ init(canvas: HTMLCanvasElement): void;
31
+ keydown: (event: KeyboardEvent) => void;
32
+ keyup: (event: KeyboardEvent) => void;
33
+ mousedown: () => void;
34
+ mouseup: () => void;
35
+ mousemove: (event: MouseEvent) => void;
36
+ fromGraphNode(object3d: Object3D): void;
37
+ getForwardVector: () => Vector3;
38
+ getSideVector: () => Vector3;
39
+ controls: (deltaTime: number) => void;
40
+ updatePlayer: (deltaTime: number) => void;
41
+ playerCollisions(): void;
42
+ teleportPlayerIfOob: () => void;
43
+ update(): void;
44
+ disposer(): void;
45
+ }
package/FPScontrol.js CHANGED
@@ -1,171 +1,171 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2022-05-04 23:01:36
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2022-06-06 13:32:08
6
- */
7
- import { Clock, EventDispatcher, Vector3 } from "three";
8
- import { Capsule } from "three/examples/jsm/math/Capsule";
9
- import { Octree } from "three/examples/jsm/math/Octree";
10
- import { clamp, degToRad } from "three/src/math/MathUtils";
11
- /**
12
- * 第一人称控制器
13
- *
14
- * @export
15
- * @class FPScontrol
16
- * @extends {EventDispatcher}
17
- */
18
- export default class FPScontrol extends EventDispatcher {
19
- canvas;
20
- constructor(camera, canvas) {
21
- super();
22
- // 相机对象
23
- this.camera = camera;
24
- this.camera.rotation.order = 'YXZ';
25
- this.canvas = canvas;
26
- this.init(canvas);
27
- }
28
- // 是否启用
29
- enable = false;
30
- GRAVITY = 30; // 重力
31
- STEPS_PER_FRAME = 5; // 每帧碰撞计算的次数
32
- speed = 1; // 速度
33
- camera;
34
- // 世界八叉树对象
35
- worldOctree = new Octree();
36
- // 用户自己的碰撞体积
37
- playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
38
- // 时钟对象
39
- clock = new Clock();
40
- playerVelocity = new Vector3();
41
- playerDirection = new Vector3();
42
- playerOnFloor = false;
43
- mouseTime = 0;
44
- isMousedown = false;
45
- keyStates = {};
46
- init(canvas) {
47
- this.playerCollider.end.set(0, 1, 0);
48
- document.addEventListener('keydown', this.keydown);
49
- document.addEventListener('keyup', this.keyup);
50
- canvas.addEventListener('pointerdown', this.mousedown);
51
- document.addEventListener('pointerup', this.mouseup);
52
- document.body.addEventListener('pointermove', this.mousemove);
53
- this.enable = true;
54
- }
55
- keydown = (event) => {
56
- this.keyStates[event.code] = true;
57
- };
58
- keyup = (event) => {
59
- this.keyStates[event.code] = false;
60
- };
61
- mousedown = () => {
62
- this.isMousedown = true;
63
- this.mouseTime = performance.now();
64
- };
65
- mouseup = () => {
66
- this.isMousedown = false;
67
- };
68
- mousemove = (event) => {
69
- if (this.enable && this.isMousedown) {
70
- this.camera.rotation.y -= event.movementX / 500;
71
- this.camera.rotation.x -= event.movementY / 500;
72
- }
73
- };
74
- // 设置 八叉树 节点
75
- fromGraphNode(object3d) {
76
- this.worldOctree.fromGraphNode(object3d);
77
- }
78
- // 获取前进的向量
79
- getForwardVector = () => {
80
- this.camera.getWorldDirection(this.playerDirection);
81
- this.playerDirection.y = 0;
82
- this.playerDirection.normalize();
83
- return this.playerDirection;
84
- };
85
- // 获取 后退的向量
86
- getSideVector = () => {
87
- this.camera.getWorldDirection(this.playerDirection);
88
- this.playerDirection.y = 0;
89
- this.playerDirection.normalize();
90
- this.playerDirection.cross(this.camera.up);
91
- return this.playerDirection;
92
- };
93
- // 玩家移动控制器
94
- controls = (deltaTime) => {
95
- const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8) * this.speed;
96
- if (this.keyStates['KeyW']) {
97
- this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
98
- }
99
- if (this.keyStates['KeyS']) {
100
- this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
101
- }
102
- if (this.keyStates['KeyA']) {
103
- this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
104
- }
105
- if (this.keyStates['KeyD']) {
106
- this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
107
- }
108
- if (this.playerOnFloor) {
109
- if (this.keyStates['Space']) {
110
- this.playerVelocity.y = 15;
111
- }
112
- }
113
- };
114
- // 更新玩家的位置
115
- updatePlayer = (deltaTime) => {
116
- let damping = Math.exp(-4 * deltaTime) - 1;
117
- if (!this.playerOnFloor) {
118
- this.playerVelocity.y -= this.GRAVITY * deltaTime;
119
- damping *= 0.1;
120
- }
121
- this.playerVelocity.addScaledVector(this.playerVelocity, damping);
122
- const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
123
- this.playerCollider.translate(deltaPosition);
124
- this.playerCollisions();
125
- this.camera.position.copy(this.playerCollider.end);
126
- this.camera.position.y += 1;
127
- this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
128
- };
129
- // 玩家的碰撞检测
130
- playerCollisions() {
131
- const result = this.worldOctree.capsuleIntersect(this.playerCollider);
132
- this.playerOnFloor = false;
133
- if (result) {
134
- this.playerOnFloor = result.normal.y > 0;
135
- if (!this.playerOnFloor) {
136
- this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
137
- }
138
- this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
139
- }
140
- }
141
- // 更新控制器的位置
142
- teleportPlayerIfOob = () => {
143
- if (this.camera.position.y <= -10) {
144
- this.playerCollider.start.set(0, 0.35, 0);
145
- this.playerCollider.end.set(0, 1, 10);
146
- this.playerCollider.radius = 0.35;
147
- this.camera.position.copy(this.playerCollider.end);
148
- // this.camera.position.set(0, 3, 0);
149
- }
150
- };
151
- // 更新
152
- update() {
153
- if (this.enable) {
154
- const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
155
- for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
156
- this.controls(deltaTime);
157
- this.updatePlayer(deltaTime);
158
- this.teleportPlayerIfOob();
159
- }
160
- }
161
- }
162
- // 销毁事件
163
- disposer() {
164
- this.enable = false;
165
- document.removeEventListener('keydown', this.keydown);
166
- document.removeEventListener('keyup', this.keyup);
167
- this.canvas.removeEventListener('pointerdown', this.mousedown);
168
- document.removeEventListener('pointerup', this.mouseup);
169
- document.body.removeEventListener('pointermove', this.mousemove);
170
- }
171
- }
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2022-05-04 23:01:36
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2022-06-06 13:32:08
6
+ */
7
+ import { Clock, EventDispatcher, Vector3 } from "three";
8
+ import { Capsule } from "three/examples/jsm/math/Capsule";
9
+ import { Octree } from "three/examples/jsm/math/Octree";
10
+ import { clamp, degToRad } from "three/src/math/MathUtils";
11
+ /**
12
+ * 第一人称控制器
13
+ *
14
+ * @export
15
+ * @class FPScontrol
16
+ * @extends {EventDispatcher}
17
+ */
18
+ export default class FPScontrol extends EventDispatcher {
19
+ canvas;
20
+ constructor(camera, canvas) {
21
+ super();
22
+ // 相机对象
23
+ this.camera = camera;
24
+ this.camera.rotation.order = 'YXZ';
25
+ this.canvas = canvas;
26
+ this.init(canvas);
27
+ }
28
+ // 是否启用
29
+ enable = false;
30
+ GRAVITY = 30; // 重力
31
+ STEPS_PER_FRAME = 5; // 每帧碰撞计算的次数
32
+ speed = 1; // 速度
33
+ camera;
34
+ // 世界八叉树对象
35
+ worldOctree = new Octree();
36
+ // 用户自己的碰撞体积
37
+ playerCollider = new Capsule(new Vector3(0, 0.35, 0), new Vector3(0, 1, 0), 0.35);
38
+ // 时钟对象
39
+ clock = new Clock();
40
+ playerVelocity = new Vector3();
41
+ playerDirection = new Vector3();
42
+ playerOnFloor = false;
43
+ mouseTime = 0;
44
+ isMousedown = false;
45
+ keyStates = {};
46
+ init(canvas) {
47
+ this.playerCollider.end.set(0, 1, 0);
48
+ document.addEventListener('keydown', this.keydown);
49
+ document.addEventListener('keyup', this.keyup);
50
+ canvas.addEventListener('pointerdown', this.mousedown);
51
+ document.addEventListener('pointerup', this.mouseup);
52
+ document.body.addEventListener('pointermove', this.mousemove);
53
+ this.enable = true;
54
+ }
55
+ keydown = (event) => {
56
+ this.keyStates[event.code] = true;
57
+ };
58
+ keyup = (event) => {
59
+ this.keyStates[event.code] = false;
60
+ };
61
+ mousedown = () => {
62
+ this.isMousedown = true;
63
+ this.mouseTime = performance.now();
64
+ };
65
+ mouseup = () => {
66
+ this.isMousedown = false;
67
+ };
68
+ mousemove = (event) => {
69
+ if (this.enable && this.isMousedown) {
70
+ this.camera.rotation.y -= event.movementX / 500;
71
+ this.camera.rotation.x -= event.movementY / 500;
72
+ }
73
+ };
74
+ // 设置 八叉树 节点
75
+ fromGraphNode(object3d) {
76
+ this.worldOctree.fromGraphNode(object3d);
77
+ }
78
+ // 获取前进的向量
79
+ getForwardVector = () => {
80
+ this.camera.getWorldDirection(this.playerDirection);
81
+ this.playerDirection.y = 0;
82
+ this.playerDirection.normalize();
83
+ return this.playerDirection;
84
+ };
85
+ // 获取 后退的向量
86
+ getSideVector = () => {
87
+ this.camera.getWorldDirection(this.playerDirection);
88
+ this.playerDirection.y = 0;
89
+ this.playerDirection.normalize();
90
+ this.playerDirection.cross(this.camera.up);
91
+ return this.playerDirection;
92
+ };
93
+ // 玩家移动控制器
94
+ controls = (deltaTime) => {
95
+ const speedDelta = deltaTime * (this.playerOnFloor ? 25 : 8) * this.speed;
96
+ if (this.keyStates['KeyW']) {
97
+ this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
98
+ }
99
+ if (this.keyStates['KeyS']) {
100
+ this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
101
+ }
102
+ if (this.keyStates['KeyA']) {
103
+ this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
104
+ }
105
+ if (this.keyStates['KeyD']) {
106
+ this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
107
+ }
108
+ if (this.playerOnFloor) {
109
+ if (this.keyStates['Space']) {
110
+ this.playerVelocity.y = 15;
111
+ }
112
+ }
113
+ };
114
+ // 更新玩家的位置
115
+ updatePlayer = (deltaTime) => {
116
+ let damping = Math.exp(-4 * deltaTime) - 1;
117
+ if (!this.playerOnFloor) {
118
+ this.playerVelocity.y -= this.GRAVITY * deltaTime;
119
+ damping *= 0.1;
120
+ }
121
+ this.playerVelocity.addScaledVector(this.playerVelocity, damping);
122
+ const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
123
+ this.playerCollider.translate(deltaPosition);
124
+ this.playerCollisions();
125
+ this.camera.position.copy(this.playerCollider.end);
126
+ this.camera.position.y += 1;
127
+ this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
128
+ };
129
+ // 玩家的碰撞检测
130
+ playerCollisions() {
131
+ const result = this.worldOctree.capsuleIntersect(this.playerCollider);
132
+ this.playerOnFloor = false;
133
+ if (result) {
134
+ this.playerOnFloor = result.normal.y > 0;
135
+ if (!this.playerOnFloor) {
136
+ this.playerVelocity.addScaledVector(result.normal, -result.normal.dot(this.playerVelocity));
137
+ }
138
+ this.playerCollider.translate(result.normal.multiplyScalar(result.depth));
139
+ }
140
+ }
141
+ // 更新控制器的位置
142
+ teleportPlayerIfOob = () => {
143
+ if (this.camera.position.y <= -10) {
144
+ this.playerCollider.start.set(0, 0.35, 0);
145
+ this.playerCollider.end.set(0, 1, 10);
146
+ this.playerCollider.radius = 0.35;
147
+ this.camera.position.copy(this.playerCollider.end);
148
+ // this.camera.position.set(0, 3, 0);
149
+ }
150
+ };
151
+ // 更新
152
+ update() {
153
+ if (this.enable) {
154
+ const deltaTime = Math.min(0.05, this.clock.getDelta()) / this.STEPS_PER_FRAME;
155
+ for (let i = 0; i < this.STEPS_PER_FRAME; i++) {
156
+ this.controls(deltaTime);
157
+ this.updatePlayer(deltaTime);
158
+ this.teleportPlayerIfOob();
159
+ }
160
+ }
161
+ }
162
+ // 销毁事件
163
+ disposer() {
164
+ this.enable = false;
165
+ document.removeEventListener('keydown', this.keydown);
166
+ document.removeEventListener('keyup', this.keyup);
167
+ this.canvas.removeEventListener('pointerdown', this.mousedown);
168
+ document.removeEventListener('pointerup', this.mouseup);
169
+ document.body.removeEventListener('pointermove', this.mousemove);
170
+ }
171
+ }
package/Fire/Fire.d.ts CHANGED
@@ -1,28 +1,28 @@
1
- import { BufferGeometry, Camera, Clock, Group, Material, NormalBufferAttributes, Object3DEventMap, Points, Scene, Vector2, WebGLRenderer } from "three";
2
- import FireGromtry from "./FireGromtry";
3
- import FireMaterial from "./FireMaterial";
4
- export default class Fire extends Points {
5
- constructor();
6
- geometry: FireGromtry;
7
- material: FireMaterial;
8
- fireColor: string;
9
- fireScale: number;
10
- fireRadius: number;
11
- fireHeight: number;
12
- particleCount: number;
13
- isPerspectiveCamera: boolean;
14
- size: Vector2;
15
- cacheProps: {
16
- fireColor: string;
17
- fireScale: number;
18
- fireRadius: number;
19
- fireHeight: number;
20
- particleCount: number;
21
- width: number;
22
- height: number;
23
- isPerspectiveCamera: boolean;
24
- };
25
- updataFrame: number;
26
- clock: Clock;
27
- onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry<NormalBufferAttributes>, material: Material, group: Group<Object3DEventMap>): void;
28
- }
1
+ import { BufferGeometry, Camera, Clock, Group, Material, NormalBufferAttributes, Object3DEventMap, Points, Scene, Vector2, WebGLRenderer } from "three";
2
+ import FireGromtry from "./FireGromtry";
3
+ import FireMaterial from "./FireMaterial";
4
+ export default class Fire extends Points {
5
+ constructor();
6
+ geometry: FireGromtry;
7
+ material: FireMaterial;
8
+ fireColor: string;
9
+ fireScale: number;
10
+ fireRadius: number;
11
+ fireHeight: number;
12
+ particleCount: number;
13
+ isPerspectiveCamera: boolean;
14
+ size: Vector2;
15
+ cacheProps: {
16
+ fireColor: string;
17
+ fireScale: number;
18
+ fireRadius: number;
19
+ fireHeight: number;
20
+ particleCount: number;
21
+ width: number;
22
+ height: number;
23
+ isPerspectiveCamera: boolean;
24
+ };
25
+ updataFrame: number;
26
+ clock: Clock;
27
+ onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry<NormalBufferAttributes>, material: Material, group: Group<Object3DEventMap>): void;
28
+ }
package/Fire/Fire.js CHANGED
@@ -1,79 +1,79 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2024-06-17 02:15:58
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2024-06-18 20:34:38
6
- */
7
- import { Clock, Color, Points, Vector2 } from "three";
8
- import FireGromtry from "./FireGromtry";
9
- import FireMaterial from "./FireMaterial";
10
- import { degToRad } from "three/src/math/MathUtils";
11
- // 粒子火焰效果
12
- export default class Fire extends Points {
13
- constructor() {
14
- super();
15
- }
16
- geometry = new FireGromtry(0, 0, 0);
17
- material = new FireMaterial();
18
- // 火焰的颜色
19
- fireColor = "#ff2200";
20
- // 火焰的整体缩放值
21
- fireScale = 1;
22
- // 火焰的燃烧半径
23
- fireRadius = 0.5;
24
- // 火焰的高度
25
- fireHeight = 3;
26
- // 火焰的粒子数量
27
- particleCount = 500;
28
- // 是否是透视相机
29
- isPerspectiveCamera = true;
30
- //渲染器的尺寸
31
- size = new Vector2();
32
- // 缓存的参数
33
- cacheProps = {
34
- fireColor: "#ff2200",
35
- fireScale: 0,
36
- fireRadius: 0.5,
37
- fireHeight: 3,
38
- particleCount: 500,
39
- width: 0,
40
- height: 0,
41
- isPerspectiveCamera: true
42
- };
43
- // 当前渲染的帧数
44
- updataFrame = 0;
45
- // 时钟对象
46
- clock = new Clock();
47
- onBeforeRender(renderer, scene, camera, geometry, material, group) {
48
- const delta = this.clock.getDelta();
49
- renderer.getSize(this.size);
50
- if (this.cacheProps.fireColor !== this.fireColor ||
51
- this.cacheProps.fireScale !== this.fireScale ||
52
- this.cacheProps.fireRadius !== this.fireRadius ||
53
- this.cacheProps.fireHeight !== this.fireHeight ||
54
- this.cacheProps.particleCount !== this.particleCount ||
55
- this.cacheProps.isPerspectiveCamera !== this.isPerspectiveCamera ||
56
- this.cacheProps.width !== this.size.x ||
57
- this.cacheProps.height !== this.size.y) {
58
- this.cacheProps.fireColor = this.fireColor;
59
- this.cacheProps.fireScale = this.fireScale;
60
- this.cacheProps.fireRadius = this.fireRadius;
61
- this.cacheProps.fireHeight = this.fireHeight;
62
- this.cacheProps.particleCount = this.particleCount;
63
- this.cacheProps.isPerspectiveCamera = this.isPerspectiveCamera;
64
- this.cacheProps.width = this.size.x;
65
- this.cacheProps.height = this.size.y;
66
- this.geometry = new FireGromtry(this.fireRadius * this.fireScale, this.fireHeight * this.fireScale, this.particleCount);
67
- this.material.uniforms.color.value = new Color(this.fireColor);
68
- this.material.uniforms.size.value = this.fireScale * 0.4;
69
- if (camera.isPerspectiveCamera) {
70
- this.material.uniforms.heightOfNearPlane.value = Math.abs(this.size.y / (2 * Math.tan(degToRad(camera.fov * 0.5))));
71
- }
72
- else {
73
- this.material.uniforms.heightOfNearPlane.value = 0;
74
- }
75
- }
76
- this.isPerspectiveCamera = camera.isPerspectiveCamera;
77
- this.material.uniforms.time.value = (this.material.uniforms.time.value + delta) % 1;
78
- }
79
- }
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2024-06-17 02:15:58
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2024-06-18 20:34:38
6
+ */
7
+ import { Clock, Color, Points, Vector2 } from "three";
8
+ import FireGromtry from "./FireGromtry";
9
+ import FireMaterial from "./FireMaterial";
10
+ import { degToRad } from "three/src/math/MathUtils";
11
+ // 粒子火焰效果
12
+ export default class Fire extends Points {
13
+ constructor() {
14
+ super();
15
+ }
16
+ geometry = new FireGromtry(0, 0, 0);
17
+ material = new FireMaterial();
18
+ // 火焰的颜色
19
+ fireColor = "#ff2200";
20
+ // 火焰的整体缩放值
21
+ fireScale = 1;
22
+ // 火焰的燃烧半径
23
+ fireRadius = 0.5;
24
+ // 火焰的高度
25
+ fireHeight = 3;
26
+ // 火焰的粒子数量
27
+ particleCount = 500;
28
+ // 是否是透视相机
29
+ isPerspectiveCamera = true;
30
+ //渲染器的尺寸
31
+ size = new Vector2();
32
+ // 缓存的参数
33
+ cacheProps = {
34
+ fireColor: "#ff2200",
35
+ fireScale: 0,
36
+ fireRadius: 0.5,
37
+ fireHeight: 3,
38
+ particleCount: 500,
39
+ width: 0,
40
+ height: 0,
41
+ isPerspectiveCamera: true
42
+ };
43
+ // 当前渲染的帧数
44
+ updataFrame = 0;
45
+ // 时钟对象
46
+ clock = new Clock();
47
+ onBeforeRender(renderer, scene, camera, geometry, material, group) {
48
+ const delta = this.clock.getDelta();
49
+ renderer.getSize(this.size);
50
+ if (this.cacheProps.fireColor !== this.fireColor ||
51
+ this.cacheProps.fireScale !== this.fireScale ||
52
+ this.cacheProps.fireRadius !== this.fireRadius ||
53
+ this.cacheProps.fireHeight !== this.fireHeight ||
54
+ this.cacheProps.particleCount !== this.particleCount ||
55
+ this.cacheProps.isPerspectiveCamera !== this.isPerspectiveCamera ||
56
+ this.cacheProps.width !== this.size.x ||
57
+ this.cacheProps.height !== this.size.y) {
58
+ this.cacheProps.fireColor = this.fireColor;
59
+ this.cacheProps.fireScale = this.fireScale;
60
+ this.cacheProps.fireRadius = this.fireRadius;
61
+ this.cacheProps.fireHeight = this.fireHeight;
62
+ this.cacheProps.particleCount = this.particleCount;
63
+ this.cacheProps.isPerspectiveCamera = this.isPerspectiveCamera;
64
+ this.cacheProps.width = this.size.x;
65
+ this.cacheProps.height = this.size.y;
66
+ this.geometry = new FireGromtry(this.fireRadius * this.fireScale, this.fireHeight * this.fireScale, this.particleCount);
67
+ this.material.uniforms.color.value = new Color(this.fireColor);
68
+ this.material.uniforms.size.value = this.fireScale * 0.4;
69
+ if (camera.isPerspectiveCamera) {
70
+ this.material.uniforms.heightOfNearPlane.value = Math.abs(this.size.y / (2 * Math.tan(degToRad(camera.fov * 0.5))));
71
+ }
72
+ else {
73
+ this.material.uniforms.heightOfNearPlane.value = 0;
74
+ }
75
+ }
76
+ this.isPerspectiveCamera = camera.isPerspectiveCamera;
77
+ this.material.uniforms.time.value = (this.material.uniforms.time.value + delta) % 1;
78
+ }
79
+ }