@newkrok/three-particles 2.2.0 → 2.3.0
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.
- package/README.md +50 -0
- package/dist/bundle-report.json +1 -1
- package/dist/js/effects/three-particles/three-particles-curves.d.ts +71 -0
- package/dist/js/effects/three-particles/three-particles-curves.d.ts.map +1 -1
- package/dist/js/effects/three-particles/three-particles-curves.js +25 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts +90 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts.map +1 -1
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts +62 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts.map +1 -1
- package/dist/js/effects/three-particles/three-particles-modifiers.js +76 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts +123 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts.map +1 -1
- package/dist/js/effects/three-particles/three-particles-utils.js +123 -0
- package/dist/js/effects/three-particles/three-particles.d.ts +166 -0
- package/dist/js/effects/three-particles/three-particles.d.ts.map +1 -1
- package/dist/js/effects/three-particles/three-particles.js +202 -8
- package/dist/js/effects/three-particles/types.d.ts +119 -0
- package/dist/js/effects/three-particles/types.d.ts.map +1 -1
- package/dist/three-particles.min.js +1 -1
- package/package.json +20 -20
|
@@ -1,26 +1,149 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
2
|
import { EmitFrom } from './three-particles-enums.js';
|
|
3
3
|
import { Constant, LifetimeCurve, Point3D, RandomBetweenTwoConstants } from './types.js';
|
|
4
|
+
/**
|
|
5
|
+
* Calculates random position and velocity for particles emitted from a sphere.
|
|
6
|
+
*
|
|
7
|
+
* Supports emission from the entire volume or just the shell of the sphere.
|
|
8
|
+
* Uses spherical coordinates for uniform distribution across the surface.
|
|
9
|
+
*
|
|
10
|
+
* @param position - Output vector for the particle's starting position
|
|
11
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
12
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
13
|
+
* @param speed - Speed multiplier for the velocity
|
|
14
|
+
* @param params - Sphere configuration
|
|
15
|
+
* @param params.radius - Radius of the sphere
|
|
16
|
+
* @param params.radiusThickness - Controls emission from volume (1.0) vs shell (0.0)
|
|
17
|
+
* @param params.arc - Arc angle in degrees (360 = full sphere, 180 = hemisphere)
|
|
18
|
+
*
|
|
19
|
+
* @remarks
|
|
20
|
+
* - `radiusThickness = 1.0`: Emit from entire volume
|
|
21
|
+
* - `radiusThickness = 0.0`: Emit only from surface shell
|
|
22
|
+
* - Particles are emitted radially outward from the center
|
|
23
|
+
*
|
|
24
|
+
* @see {@link Sphere} - Configuration type for sphere shape
|
|
25
|
+
*/
|
|
4
26
|
export declare const calculateRandomPositionAndVelocityOnSphere: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
5
27
|
radius: number;
|
|
6
28
|
radiusThickness: number;
|
|
7
29
|
arc: number;
|
|
8
30
|
}) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Calculates random position and velocity for particles emitted from a cone.
|
|
33
|
+
*
|
|
34
|
+
* Useful for directional particle effects like fire, smoke plumes, fountains,
|
|
35
|
+
* or spray effects. The cone emits particles in a spreading pattern.
|
|
36
|
+
*
|
|
37
|
+
* @param position - Output vector for the particle's starting position
|
|
38
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
39
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
40
|
+
* @param speed - Speed multiplier for the velocity
|
|
41
|
+
* @param params - Cone configuration
|
|
42
|
+
* @param params.radius - Base radius of the cone
|
|
43
|
+
* @param params.radiusThickness - Controls emission from volume (1.0) vs shell (0.0)
|
|
44
|
+
* @param params.arc - Arc angle in degrees (360 = full cone, 180 = half cone)
|
|
45
|
+
* @param params.angle - Cone opening angle in degrees (default: 90)
|
|
46
|
+
* Smaller values create tighter cones
|
|
47
|
+
*
|
|
48
|
+
* @remarks
|
|
49
|
+
* - The cone emits from its base (circular area) outward
|
|
50
|
+
* - Particles travel in a conical spread pattern
|
|
51
|
+
* - `angle = 0`: Straight line (no spread)
|
|
52
|
+
* - `angle = 90`: Wide cone
|
|
53
|
+
* - Common for fire (10-30°), smoke (30-60°), explosions (60-90°)
|
|
54
|
+
*
|
|
55
|
+
* @see {@link Cone} - Configuration type for cone shape
|
|
56
|
+
*/
|
|
9
57
|
export declare const calculateRandomPositionAndVelocityOnCone: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, angle, }: {
|
|
10
58
|
radius: number;
|
|
11
59
|
radiusThickness: number;
|
|
12
60
|
arc: number;
|
|
13
61
|
angle?: number;
|
|
14
62
|
}) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Calculates random position and velocity for particles emitted from a box.
|
|
65
|
+
*
|
|
66
|
+
* Supports three emission modes: volume, shell (surface), and edges.
|
|
67
|
+
* Useful for area-based effects like dust clouds, rain, or geometric patterns.
|
|
68
|
+
*
|
|
69
|
+
* @param position - Output vector for the particle's starting position
|
|
70
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
71
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
72
|
+
* @param speed - Speed multiplier for the velocity
|
|
73
|
+
* @param params - Box configuration
|
|
74
|
+
* @param params.scale - Size of the box on each axis (width, height, depth)
|
|
75
|
+
* @param params.emitFrom - Emission mode:
|
|
76
|
+
* - `VOLUME`: Random positions throughout the entire box volume
|
|
77
|
+
* - `SHELL`: Random positions on the 6 faces (surface)
|
|
78
|
+
* - `EDGE`: Random positions along the 12 edges
|
|
79
|
+
*
|
|
80
|
+
* @remarks
|
|
81
|
+
* - All particles emit with velocity along the +Z axis (forward)
|
|
82
|
+
* - Box is centered at the origin before rotation
|
|
83
|
+
* - VOLUME mode: Best for rain, snow, or volumetric clouds
|
|
84
|
+
* - SHELL mode: Best for hollow effects or surface particles
|
|
85
|
+
* - EDGE mode: Best for wireframe effects or particle outlines
|
|
86
|
+
*
|
|
87
|
+
* @see {@link Box} - Configuration type for box shape
|
|
88
|
+
* @see {@link EmitFrom} - Emission mode enum
|
|
89
|
+
*/
|
|
15
90
|
export declare const calculateRandomPositionAndVelocityOnBox: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { scale, emitFrom }: {
|
|
16
91
|
scale: Point3D;
|
|
17
92
|
emitFrom: EmitFrom;
|
|
18
93
|
}) => void;
|
|
94
|
+
/**
|
|
95
|
+
* Calculates random position and velocity for particles emitted from a circle.
|
|
96
|
+
*
|
|
97
|
+
* Emits particles from a circular area or ring. Useful for ground impacts,
|
|
98
|
+
* radial effects, magic circles, or any circular planar emission.
|
|
99
|
+
*
|
|
100
|
+
* @param position - Output vector for the particle's starting position
|
|
101
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
102
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
103
|
+
* @param speed - Speed multiplier for the velocity
|
|
104
|
+
* @param params - Circle configuration
|
|
105
|
+
* @param params.radius - Radius of the circle
|
|
106
|
+
* @param params.radiusThickness - Controls emission from area (1.0) vs edge (0.0)
|
|
107
|
+
* @param params.arc - Arc angle in degrees (360 = full circle, 180 = semicircle)
|
|
108
|
+
*
|
|
109
|
+
* @remarks
|
|
110
|
+
* - Circle lies in the XY plane by default (Z = 0)
|
|
111
|
+
* - Particles emit along the +Z axis (perpendicular to circle)
|
|
112
|
+
* - `radiusThickness = 1.0`: Filled circle (disc)
|
|
113
|
+
* - `radiusThickness = 0.0`: Ring (circle edge only)
|
|
114
|
+
* - Good for ground impact effects, teleport circles, or radial bursts
|
|
115
|
+
*
|
|
116
|
+
* @see {@link Circle} - Configuration type for circle shape
|
|
117
|
+
*/
|
|
19
118
|
export declare const calculateRandomPositionAndVelocityOnCircle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
20
119
|
radius: number;
|
|
21
120
|
radiusThickness: number;
|
|
22
121
|
arc: number;
|
|
23
122
|
}) => void;
|
|
123
|
+
/**
|
|
124
|
+
* Calculates random position and velocity for particles emitted from a rectangle.
|
|
125
|
+
*
|
|
126
|
+
* Emits particles from a rectangular planar area. Useful for rain on a surface,
|
|
127
|
+
* screen-space effects, or any planar emission pattern.
|
|
128
|
+
*
|
|
129
|
+
* @param position - Output vector for the particle's starting position
|
|
130
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
131
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
132
|
+
* @param speed - Speed multiplier for the velocity
|
|
133
|
+
* @param params - Rectangle configuration
|
|
134
|
+
* @param params.rotation - Local rotation of the rectangle (degrees) before
|
|
135
|
+
* applying quaternion
|
|
136
|
+
* @param params.scale - Size of the rectangle (width and height)
|
|
137
|
+
*
|
|
138
|
+
* @remarks
|
|
139
|
+
* - Rectangle lies in the XY plane by default
|
|
140
|
+
* - Particles emit along the +Z axis (perpendicular to rectangle)
|
|
141
|
+
* - The rotation parameter allows tilting the rectangle before the main
|
|
142
|
+
* quaternion rotation is applied
|
|
143
|
+
* - Good for rain effects, screen particles, or planar area emissions
|
|
144
|
+
*
|
|
145
|
+
* @see {@link Rectangle} - Configuration type for rectangle shape
|
|
146
|
+
*/
|
|
24
147
|
export declare const calculateRandomPositionAndVelocityOnRectangle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { rotation, scale }: {
|
|
25
148
|
rotation: Point3D;
|
|
26
149
|
scale: Point3D;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"three-particles-utils.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,4BAA4B,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0CAA0C,GACrD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,mCAIG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SAiC5D,CAAC;AAEF,eAAO,MAAM,wCAAwC,GACnD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,0CAKG;IACD,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,SAgCF,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAClD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,qBAAqB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,SA0C5D,CAAC;AAEF,eAAO,MAAM,0CAA0C,GACrD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,mCAIG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SA2B5D,CAAC;AAEF,eAAO,MAAM,6CAA6C,GACxD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,qBAAqB;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,SAiB3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,QAAO,KAAK,CAAC,aAAa,GAAG,IA8BrE,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,QAAQ,GAAG,yBAAyB,GAAG,aAAa,KAC1D,KAAK,IAAI,aAEX,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,kBAAkB,MAAM,EACxB,eAAe,aAAa,uCAc7B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,kBAAkB,MAAM,EACxB,OAAO,QAAQ,GAAG,yBAAyB,GAAG,aAAa,EAC3D,OAAM,MAAU,KACf,MAiBF,CAAC"}
|
|
1
|
+
{"version":3,"file":"three-particles-utils.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,4BAA4B,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,0CAA0C,GACrD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,mCAIG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SAiC5D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,wCAAwC,GACnD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,0CAKG;IACD,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,SAgCF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,uCAAuC,GAClD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,qBAAqB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,SA0C5D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,0CAA0C,GACrD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,mCAIG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SA2B5D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,6CAA6C,GACxD,UAAU,KAAK,CAAC,OAAO,EACvB,YAAY,KAAK,CAAC,UAAU,EAC5B,UAAU,KAAK,CAAC,OAAO,EACvB,OAAO,MAAM,EACb,qBAAqB;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,SAiB3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,QAAO,KAAK,CAAC,aAAa,GAAG,IA8BrE,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,QAAQ,GAAG,yBAAyB,GAAG,aAAa,KAC1D,KAAK,IAAI,aAEX,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,kBAAkB,MAAM,EACxB,eAAe,aAAa,uCAc7B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,kBAAkB,MAAM,EACxB,OAAO,QAAQ,GAAG,yBAAyB,GAAG,aAAa,EAC3D,OAAM,MAAU,KACf,MAiBF,CAAC"}
|
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
2
|
import { createBezierCurveFunction } from './three-particles-bezier.js';
|
|
3
|
+
/**
|
|
4
|
+
* Calculates random position and velocity for particles emitted from a sphere.
|
|
5
|
+
*
|
|
6
|
+
* Supports emission from the entire volume or just the shell of the sphere.
|
|
7
|
+
* Uses spherical coordinates for uniform distribution across the surface.
|
|
8
|
+
*
|
|
9
|
+
* @param position - Output vector for the particle's starting position
|
|
10
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
11
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
12
|
+
* @param speed - Speed multiplier for the velocity
|
|
13
|
+
* @param params - Sphere configuration
|
|
14
|
+
* @param params.radius - Radius of the sphere
|
|
15
|
+
* @param params.radiusThickness - Controls emission from volume (1.0) vs shell (0.0)
|
|
16
|
+
* @param params.arc - Arc angle in degrees (360 = full sphere, 180 = hemisphere)
|
|
17
|
+
*
|
|
18
|
+
* @remarks
|
|
19
|
+
* - `radiusThickness = 1.0`: Emit from entire volume
|
|
20
|
+
* - `radiusThickness = 0.0`: Emit only from surface shell
|
|
21
|
+
* - Particles are emitted radially outward from the center
|
|
22
|
+
*
|
|
23
|
+
* @see {@link Sphere} - Configuration type for sphere shape
|
|
24
|
+
*/
|
|
3
25
|
export const calculateRandomPositionAndVelocityOnSphere = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
4
26
|
const u = Math.random() * (arc / 360);
|
|
5
27
|
const v = Math.random();
|
|
@@ -25,6 +47,32 @@ export const calculateRandomPositionAndVelocityOnSphere = (position, quaternion,
|
|
|
25
47
|
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, position.z * speedMultiplierByPosition * speed);
|
|
26
48
|
velocity.applyQuaternion(quaternion);
|
|
27
49
|
};
|
|
50
|
+
/**
|
|
51
|
+
* Calculates random position and velocity for particles emitted from a cone.
|
|
52
|
+
*
|
|
53
|
+
* Useful for directional particle effects like fire, smoke plumes, fountains,
|
|
54
|
+
* or spray effects. The cone emits particles in a spreading pattern.
|
|
55
|
+
*
|
|
56
|
+
* @param position - Output vector for the particle's starting position
|
|
57
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
58
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
59
|
+
* @param speed - Speed multiplier for the velocity
|
|
60
|
+
* @param params - Cone configuration
|
|
61
|
+
* @param params.radius - Base radius of the cone
|
|
62
|
+
* @param params.radiusThickness - Controls emission from volume (1.0) vs shell (0.0)
|
|
63
|
+
* @param params.arc - Arc angle in degrees (360 = full cone, 180 = half cone)
|
|
64
|
+
* @param params.angle - Cone opening angle in degrees (default: 90)
|
|
65
|
+
* Smaller values create tighter cones
|
|
66
|
+
*
|
|
67
|
+
* @remarks
|
|
68
|
+
* - The cone emits from its base (circular area) outward
|
|
69
|
+
* - Particles travel in a conical spread pattern
|
|
70
|
+
* - `angle = 0`: Straight line (no spread)
|
|
71
|
+
* - `angle = 90`: Wide cone
|
|
72
|
+
* - Common for fire (10-30°), smoke (30-60°), explosions (60-90°)
|
|
73
|
+
*
|
|
74
|
+
* @see {@link Cone} - Configuration type for cone shape
|
|
75
|
+
*/
|
|
28
76
|
export const calculateRandomPositionAndVelocityOnCone = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, angle = 90, }) => {
|
|
29
77
|
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
30
78
|
const randomizedDistanceRatio = Math.random();
|
|
@@ -46,6 +94,33 @@ export const calculateRandomPositionAndVelocityOnCone = (position, quaternion, v
|
|
|
46
94
|
velocity.set(position.x * sinNormalizedAngle * speedMultiplierByPosition * speed, position.y * sinNormalizedAngle * speedMultiplierByPosition * speed, Math.cos(normalizedAngle) * speed);
|
|
47
95
|
velocity.applyQuaternion(quaternion);
|
|
48
96
|
};
|
|
97
|
+
/**
|
|
98
|
+
* Calculates random position and velocity for particles emitted from a box.
|
|
99
|
+
*
|
|
100
|
+
* Supports three emission modes: volume, shell (surface), and edges.
|
|
101
|
+
* Useful for area-based effects like dust clouds, rain, or geometric patterns.
|
|
102
|
+
*
|
|
103
|
+
* @param position - Output vector for the particle's starting position
|
|
104
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
105
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
106
|
+
* @param speed - Speed multiplier for the velocity
|
|
107
|
+
* @param params - Box configuration
|
|
108
|
+
* @param params.scale - Size of the box on each axis (width, height, depth)
|
|
109
|
+
* @param params.emitFrom - Emission mode:
|
|
110
|
+
* - `VOLUME`: Random positions throughout the entire box volume
|
|
111
|
+
* - `SHELL`: Random positions on the 6 faces (surface)
|
|
112
|
+
* - `EDGE`: Random positions along the 12 edges
|
|
113
|
+
*
|
|
114
|
+
* @remarks
|
|
115
|
+
* - All particles emit with velocity along the +Z axis (forward)
|
|
116
|
+
* - Box is centered at the origin before rotation
|
|
117
|
+
* - VOLUME mode: Best for rain, snow, or volumetric clouds
|
|
118
|
+
* - SHELL mode: Best for hollow effects or surface particles
|
|
119
|
+
* - EDGE mode: Best for wireframe effects or particle outlines
|
|
120
|
+
*
|
|
121
|
+
* @see {@link Box} - Configuration type for box shape
|
|
122
|
+
* @see {@link EmitFrom} - Emission mode enum
|
|
123
|
+
*/
|
|
49
124
|
export const calculateRandomPositionAndVelocityOnBox = (position, quaternion, velocity, speed, { scale, emitFrom }) => {
|
|
50
125
|
const _scale = scale;
|
|
51
126
|
switch (emitFrom) {
|
|
@@ -84,6 +159,30 @@ export const calculateRandomPositionAndVelocityOnBox = (position, quaternion, ve
|
|
|
84
159
|
velocity.set(0, 0, speed);
|
|
85
160
|
velocity.applyQuaternion(quaternion);
|
|
86
161
|
};
|
|
162
|
+
/**
|
|
163
|
+
* Calculates random position and velocity for particles emitted from a circle.
|
|
164
|
+
*
|
|
165
|
+
* Emits particles from a circular area or ring. Useful for ground impacts,
|
|
166
|
+
* radial effects, magic circles, or any circular planar emission.
|
|
167
|
+
*
|
|
168
|
+
* @param position - Output vector for the particle's starting position
|
|
169
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
170
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
171
|
+
* @param speed - Speed multiplier for the velocity
|
|
172
|
+
* @param params - Circle configuration
|
|
173
|
+
* @param params.radius - Radius of the circle
|
|
174
|
+
* @param params.radiusThickness - Controls emission from area (1.0) vs edge (0.0)
|
|
175
|
+
* @param params.arc - Arc angle in degrees (360 = full circle, 180 = semicircle)
|
|
176
|
+
*
|
|
177
|
+
* @remarks
|
|
178
|
+
* - Circle lies in the XY plane by default (Z = 0)
|
|
179
|
+
* - Particles emit along the +Z axis (perpendicular to circle)
|
|
180
|
+
* - `radiusThickness = 1.0`: Filled circle (disc)
|
|
181
|
+
* - `radiusThickness = 0.0`: Ring (circle edge only)
|
|
182
|
+
* - Good for ground impact effects, teleport circles, or radial bursts
|
|
183
|
+
*
|
|
184
|
+
* @see {@link Circle} - Configuration type for circle shape
|
|
185
|
+
*/
|
|
87
186
|
export const calculateRandomPositionAndVelocityOnCircle = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
88
187
|
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
89
188
|
const randomizedDistanceRatio = Math.random();
|
|
@@ -103,6 +202,30 @@ export const calculateRandomPositionAndVelocityOnCircle = (position, quaternion,
|
|
|
103
202
|
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, 0);
|
|
104
203
|
velocity.applyQuaternion(quaternion);
|
|
105
204
|
};
|
|
205
|
+
/**
|
|
206
|
+
* Calculates random position and velocity for particles emitted from a rectangle.
|
|
207
|
+
*
|
|
208
|
+
* Emits particles from a rectangular planar area. Useful for rain on a surface,
|
|
209
|
+
* screen-space effects, or any planar emission pattern.
|
|
210
|
+
*
|
|
211
|
+
* @param position - Output vector for the particle's starting position
|
|
212
|
+
* @param quaternion - Rotation to apply to the emission shape
|
|
213
|
+
* @param velocity - Output vector for the particle's initial velocity
|
|
214
|
+
* @param speed - Speed multiplier for the velocity
|
|
215
|
+
* @param params - Rectangle configuration
|
|
216
|
+
* @param params.rotation - Local rotation of the rectangle (degrees) before
|
|
217
|
+
* applying quaternion
|
|
218
|
+
* @param params.scale - Size of the rectangle (width and height)
|
|
219
|
+
*
|
|
220
|
+
* @remarks
|
|
221
|
+
* - Rectangle lies in the XY plane by default
|
|
222
|
+
* - Particles emit along the +Z axis (perpendicular to rectangle)
|
|
223
|
+
* - The rotation parameter allows tilting the rectangle before the main
|
|
224
|
+
* quaternion rotation is applied
|
|
225
|
+
* - Good for rain effects, screen particles, or planar area emissions
|
|
226
|
+
*
|
|
227
|
+
* @see {@link Rectangle} - Configuration type for rectangle shape
|
|
228
|
+
*/
|
|
106
229
|
export const calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, velocity, speed, { rotation, scale }) => {
|
|
107
230
|
const _scale = scale;
|
|
108
231
|
const _rotation = rotation;
|
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
import { CycleData, ParticleSystem, ParticleSystemConfig } from './types.js';
|
|
2
2
|
export * from './types.js';
|
|
3
|
+
/**
|
|
4
|
+
* Mapping of blending mode string identifiers to Three.js blending constants.
|
|
5
|
+
*
|
|
6
|
+
* Used for converting serialized particle system configurations (e.g., from JSON)
|
|
7
|
+
* to actual Three.js blending mode constants.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```typescript
|
|
11
|
+
* import { blendingMap } from '@newkrok/three-particles';
|
|
12
|
+
*
|
|
13
|
+
* // Convert string to Three.js constant
|
|
14
|
+
* const blending = blendingMap['THREE.AdditiveBlending'];
|
|
15
|
+
* // blending === THREE.AdditiveBlending
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
3
18
|
export declare const blendingMap: {
|
|
4
19
|
'THREE.NoBlending': 0;
|
|
5
20
|
'THREE.NormalBlending': 1;
|
|
@@ -7,7 +22,158 @@ export declare const blendingMap: {
|
|
|
7
22
|
'THREE.SubtractiveBlending': 3;
|
|
8
23
|
'THREE.MultiplyBlending': 4;
|
|
9
24
|
};
|
|
25
|
+
/**
|
|
26
|
+
* Returns a deep copy of the default particle system configuration.
|
|
27
|
+
*
|
|
28
|
+
* This is useful when you want to start with default settings and modify specific properties
|
|
29
|
+
* without affecting the internal default configuration object.
|
|
30
|
+
*
|
|
31
|
+
* @returns A new object containing all default particle system settings
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```typescript
|
|
35
|
+
* import { getDefaultParticleSystemConfig, createParticleSystem } from '@newkrok/three-particles';
|
|
36
|
+
*
|
|
37
|
+
* // Get default config and modify it
|
|
38
|
+
* const config = getDefaultParticleSystemConfig();
|
|
39
|
+
* config.emission.rateOverTime = 100;
|
|
40
|
+
* config.startColor.min = { r: 1, g: 0, b: 0 };
|
|
41
|
+
*
|
|
42
|
+
* const { instance } = createParticleSystem(config);
|
|
43
|
+
* scene.add(instance);
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
10
46
|
export declare const getDefaultParticleSystemConfig: () => any;
|
|
47
|
+
/**
|
|
48
|
+
* Creates a new particle system with the specified configuration.
|
|
49
|
+
*
|
|
50
|
+
* This is the primary function for instantiating particle effects. It handles the complete
|
|
51
|
+
* setup of a particle system including geometry creation, material configuration, shader setup,
|
|
52
|
+
* and initialization of all particle properties.
|
|
53
|
+
*
|
|
54
|
+
* @param config - Configuration object for the particle system. If not provided, uses default settings.
|
|
55
|
+
* See {@link ParticleSystemConfig} for all available options.
|
|
56
|
+
* @param externalNow - Optional custom timestamp in milliseconds. If not provided, uses `Date.now()`.
|
|
57
|
+
* Useful for synchronized particle systems or testing.
|
|
58
|
+
*
|
|
59
|
+
* @returns A {@link ParticleSystem} object containing:
|
|
60
|
+
* - `instance`: The THREE.Object3D that should be added to your scene
|
|
61
|
+
* - `resumeEmitter()`: Function to resume particle emission
|
|
62
|
+
* - `pauseEmitter()`: Function to pause particle emission
|
|
63
|
+
* - `dispose()`: Function to clean up resources and remove the particle system
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```typescript
|
|
67
|
+
* import { createParticleSystem, updateParticleSystems } from '@newkrok/three-particles';
|
|
68
|
+
*
|
|
69
|
+
* // Create a basic particle system with default settings
|
|
70
|
+
* const { instance, dispose } = createParticleSystem();
|
|
71
|
+
* scene.add(instance);
|
|
72
|
+
*
|
|
73
|
+
* // Create a custom fire effect
|
|
74
|
+
* const fireEffect = createParticleSystem({
|
|
75
|
+
* duration: 2.0,
|
|
76
|
+
* looping: true,
|
|
77
|
+
* startLifetime: { min: 0.5, max: 1.5 },
|
|
78
|
+
* startSpeed: { min: 2, max: 4 },
|
|
79
|
+
* startSize: { min: 0.5, max: 1.5 },
|
|
80
|
+
* startColor: {
|
|
81
|
+
* min: { r: 1.0, g: 0.3, b: 0.0 },
|
|
82
|
+
* max: { r: 1.0, g: 0.8, b: 0.0 }
|
|
83
|
+
* },
|
|
84
|
+
* emission: { rateOverTime: 50 },
|
|
85
|
+
* shape: {
|
|
86
|
+
* shape: Shape.CONE,
|
|
87
|
+
* cone: { angle: 10, radius: 0.2 }
|
|
88
|
+
* }
|
|
89
|
+
* });
|
|
90
|
+
* scene.add(fireEffect.instance);
|
|
91
|
+
*
|
|
92
|
+
* // In your animation loop
|
|
93
|
+
* function animate(time) {
|
|
94
|
+
* updateParticleSystems({ now: time, delta: deltaTime, elapsed: elapsedTime });
|
|
95
|
+
* renderer.render(scene, camera);
|
|
96
|
+
* }
|
|
97
|
+
*
|
|
98
|
+
* // Clean up when done
|
|
99
|
+
* fireEffect.dispose();
|
|
100
|
+
* ```
|
|
101
|
+
*
|
|
102
|
+
* @see {@link updateParticleSystems} - Required function to call in your animation loop
|
|
103
|
+
* @see {@link ParticleSystemConfig} - Complete configuration options
|
|
104
|
+
*/
|
|
11
105
|
export declare const createParticleSystem: (config?: ParticleSystemConfig, externalNow?: number) => ParticleSystem;
|
|
106
|
+
/**
|
|
107
|
+
* Updates all active particle systems created with {@link createParticleSystem}.
|
|
108
|
+
*
|
|
109
|
+
* This function must be called once per frame in your animation loop to animate all particles.
|
|
110
|
+
* It handles particle emission, movement, lifetime tracking, modifier application, and cleanup
|
|
111
|
+
* of expired particle systems.
|
|
112
|
+
*
|
|
113
|
+
* @param cycleData - Object containing timing information for the current frame:
|
|
114
|
+
* - `now`: Current timestamp in milliseconds (typically from `performance.now()` or `Date.now()`)
|
|
115
|
+
* - `delta`: Time elapsed since the last frame in seconds
|
|
116
|
+
* - `elapsed`: Total time elapsed since the animation started in seconds
|
|
117
|
+
*
|
|
118
|
+
* @example
|
|
119
|
+
* ```typescript
|
|
120
|
+
* import { createParticleSystem, updateParticleSystems } from '@newkrok/three-particles';
|
|
121
|
+
*
|
|
122
|
+
* const { instance } = createParticleSystem({
|
|
123
|
+
* // your config
|
|
124
|
+
* });
|
|
125
|
+
* scene.add(instance);
|
|
126
|
+
*
|
|
127
|
+
* // Animation loop
|
|
128
|
+
* let lastTime = 0;
|
|
129
|
+
* let elapsedTime = 0;
|
|
130
|
+
*
|
|
131
|
+
* function animate(currentTime) {
|
|
132
|
+
* requestAnimationFrame(animate);
|
|
133
|
+
*
|
|
134
|
+
* const delta = (currentTime - lastTime) / 1000; // Convert to seconds
|
|
135
|
+
* elapsedTime += delta;
|
|
136
|
+
* lastTime = currentTime;
|
|
137
|
+
*
|
|
138
|
+
* // Update all particle systems
|
|
139
|
+
* updateParticleSystems({
|
|
140
|
+
* now: currentTime,
|
|
141
|
+
* delta: delta,
|
|
142
|
+
* elapsed: elapsedTime
|
|
143
|
+
* });
|
|
144
|
+
*
|
|
145
|
+
* renderer.render(scene, camera);
|
|
146
|
+
* }
|
|
147
|
+
*
|
|
148
|
+
* animate(0);
|
|
149
|
+
* ```
|
|
150
|
+
*
|
|
151
|
+
* @example
|
|
152
|
+
* ```typescript
|
|
153
|
+
* // Using Three.js Clock for timing
|
|
154
|
+
* import * as THREE from 'three';
|
|
155
|
+
* import { updateParticleSystems } from '@newkrok/three-particles';
|
|
156
|
+
*
|
|
157
|
+
* const clock = new THREE.Clock();
|
|
158
|
+
*
|
|
159
|
+
* function animate() {
|
|
160
|
+
* requestAnimationFrame(animate);
|
|
161
|
+
*
|
|
162
|
+
* const delta = clock.getDelta();
|
|
163
|
+
* const elapsed = clock.getElapsedTime();
|
|
164
|
+
*
|
|
165
|
+
* updateParticleSystems({
|
|
166
|
+
* now: performance.now(),
|
|
167
|
+
* delta: delta,
|
|
168
|
+
* elapsed: elapsed
|
|
169
|
+
* });
|
|
170
|
+
*
|
|
171
|
+
* renderer.render(scene, camera);
|
|
172
|
+
* }
|
|
173
|
+
* ```
|
|
174
|
+
*
|
|
175
|
+
* @see {@link createParticleSystem} - Creates particle systems to be updated
|
|
176
|
+
* @see {@link CycleData} - Timing data structure
|
|
177
|
+
*/
|
|
12
178
|
export declare const updateParticleSystems: ({ now, delta, elapsed }: CycleData) => void;
|
|
13
179
|
//# sourceMappingURL=three-particles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"three-particles.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles.ts"],"names":[],"mappings":"AA2BA,OAAO,EAEL,SAAS,EAIT,cAAc,EACd,oBAAoB,EAKrB,MAAM,YAAY,CAAC;AAEpB,cAAc,YAAY,CAAC;AAK3B,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF,eAAO,MAAM,8BAA8B,WACiB,CAAC;
|
|
1
|
+
{"version":3,"file":"three-particles.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles.ts"],"names":[],"mappings":"AA2BA,OAAO,EAEL,SAAS,EAIT,cAAc,EACd,oBAAoB,EAKrB,MAAM,YAAY,CAAC;AAEpB,cAAc,YAAY,CAAC;AAK3B;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,8BAA8B,WACiB,CAAC;AA2Q7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAQ,oBAAqD,EAC7D,cAAc,MAAM,KACnB,cAwkBF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,eAAO,MAAM,qBAAqB,GAAI,yBAAyB,SAAS,SAmPvE,CAAC"}
|