@newkrok/three-particles 2.6.3 → 2.6.4
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/dist/index.d.ts +1782 -7
- package/dist/index.js +1578 -6
- package/dist/index.js.map +1 -0
- package/dist/three-particles.min.js +1 -2
- package/dist/three-particles.min.js.map +1 -0
- package/package.json +5 -7
- package/dist/bundle-report.json +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/js/effects/three-particles/index.d.ts +0 -7
- package/dist/js/effects/three-particles/index.d.ts.map +0 -1
- package/dist/js/effects/three-particles/index.js +0 -6
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts +0 -3
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts.map +0 -1
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.js +0 -71
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts +0 -3
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts.map +0 -1
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.js +0 -37
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts +0 -5
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles-bezier.js +0 -62
- package/dist/js/effects/three-particles/three-particles-curves.d.ts +0 -108
- package/dist/js/effects/three-particles/three-particles-curves.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles-curves.js +0 -62
- package/dist/js/effects/three-particles/three-particles-enums.d.ts +0 -115
- package/dist/js/effects/three-particles/three-particles-enums.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles-enums.js +0 -1
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts +0 -73
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles-modifiers.js +0 -168
- package/dist/js/effects/three-particles/three-particles-utils.d.ts +0 -159
- package/dist/js/effects/three-particles/three-particles-utils.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles-utils.js +0 -302
- package/dist/js/effects/three-particles/three-particles.d.ts +0 -107
- package/dist/js/effects/three-particles/three-particles.d.ts.map +0 -1
- package/dist/js/effects/three-particles/three-particles.js +0 -972
- package/dist/js/effects/three-particles/types.d.ts +0 -1223
- package/dist/js/effects/three-particles/types.d.ts.map +0 -1
- package/dist/js/effects/three-particles/types.js +0 -1
- package/dist/three-particles.min.js.LICENSE.txt +0 -6
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
import * as THREE from 'three';
|
|
2
|
-
import { EmitFrom } from './three-particles-enums.js';
|
|
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
|
-
*/
|
|
26
|
-
export declare const calculateRandomPositionAndVelocityOnSphere: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
27
|
-
radius: number;
|
|
28
|
-
radiusThickness: number;
|
|
29
|
-
arc: number;
|
|
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
|
-
*/
|
|
57
|
-
export declare const calculateRandomPositionAndVelocityOnCone: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, angle, }: {
|
|
58
|
-
radius: number;
|
|
59
|
-
radiusThickness: number;
|
|
60
|
-
arc: number;
|
|
61
|
-
angle?: number;
|
|
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
|
-
*/
|
|
90
|
-
export declare const calculateRandomPositionAndVelocityOnBox: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { scale, emitFrom }: {
|
|
91
|
-
scale: Point3D;
|
|
92
|
-
emitFrom: EmitFrom;
|
|
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
|
-
*/
|
|
118
|
-
export declare const calculateRandomPositionAndVelocityOnCircle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
119
|
-
radius: number;
|
|
120
|
-
radiusThickness: number;
|
|
121
|
-
arc: number;
|
|
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
|
-
*/
|
|
147
|
-
export declare const calculateRandomPositionAndVelocityOnRectangle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { rotation, scale }: {
|
|
148
|
-
rotation: Point3D;
|
|
149
|
-
scale: Point3D;
|
|
150
|
-
}) => void;
|
|
151
|
-
/**
|
|
152
|
-
* Creates a default white circle texture using CanvasTexture.
|
|
153
|
-
* @returns {THREE.CanvasTexture | null} The generated texture or null if context fails.
|
|
154
|
-
*/
|
|
155
|
-
export declare const createDefaultParticleTexture: () => THREE.CanvasTexture | null;
|
|
156
|
-
export declare const isLifeTimeCurve: (value: Constant | RandomBetweenTwoConstants | LifetimeCurve) => value is LifetimeCurve;
|
|
157
|
-
export declare const getCurveFunctionFromConfig: (particleSystemId: number, lifetimeCurve: LifetimeCurve) => import("./types.js").CurveFunction;
|
|
158
|
-
export declare const calculateValue: (particleSystemId: number, value: Constant | RandomBetweenTwoConstants | LifetimeCurve, time?: number) => number;
|
|
159
|
-
//# sourceMappingURL=three-particles-utils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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,302 +0,0 @@
|
|
|
1
|
-
import * as THREE from 'three';
|
|
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
|
-
*/
|
|
25
|
-
export const calculateRandomPositionAndVelocityOnSphere = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
26
|
-
const u = Math.random() * (arc / 360);
|
|
27
|
-
const v = Math.random();
|
|
28
|
-
const randomizedDistanceRatio = Math.random();
|
|
29
|
-
const theta = 2 * Math.PI * u;
|
|
30
|
-
const phi = Math.acos(2 * v - 1);
|
|
31
|
-
const sinPhi = Math.sin(phi);
|
|
32
|
-
const xDirection = sinPhi * Math.cos(theta);
|
|
33
|
-
const yDirection = sinPhi * Math.sin(theta);
|
|
34
|
-
const zDirection = Math.cos(phi);
|
|
35
|
-
const normalizedThickness = 1 - radiusThickness;
|
|
36
|
-
position.x =
|
|
37
|
-
radius * normalizedThickness * xDirection +
|
|
38
|
-
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
39
|
-
position.y =
|
|
40
|
-
radius * normalizedThickness * yDirection +
|
|
41
|
-
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
42
|
-
position.z =
|
|
43
|
-
radius * normalizedThickness * zDirection +
|
|
44
|
-
radius * radiusThickness * randomizedDistanceRatio * zDirection;
|
|
45
|
-
position.applyQuaternion(quaternion);
|
|
46
|
-
const speedMultiplierByPosition = 1 / position.length();
|
|
47
|
-
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, position.z * speedMultiplierByPosition * speed);
|
|
48
|
-
velocity.applyQuaternion(quaternion);
|
|
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
|
-
*/
|
|
76
|
-
export const calculateRandomPositionAndVelocityOnCone = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, angle = 90, }) => {
|
|
77
|
-
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
78
|
-
const randomizedDistanceRatio = Math.random();
|
|
79
|
-
const xDirection = Math.cos(theta);
|
|
80
|
-
const yDirection = Math.sin(theta);
|
|
81
|
-
const normalizedThickness = 1 - radiusThickness;
|
|
82
|
-
position.x =
|
|
83
|
-
radius * normalizedThickness * xDirection +
|
|
84
|
-
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
85
|
-
position.y =
|
|
86
|
-
radius * normalizedThickness * yDirection +
|
|
87
|
-
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
88
|
-
position.z = 0;
|
|
89
|
-
position.applyQuaternion(quaternion);
|
|
90
|
-
const positionLength = position.length();
|
|
91
|
-
const normalizedAngle = Math.abs((positionLength / radius) * THREE.MathUtils.degToRad(angle));
|
|
92
|
-
const sinNormalizedAngle = Math.sin(normalizedAngle);
|
|
93
|
-
const speedMultiplierByPosition = 1 / positionLength;
|
|
94
|
-
velocity.set(position.x * sinNormalizedAngle * speedMultiplierByPosition * speed, position.y * sinNormalizedAngle * speedMultiplierByPosition * speed, Math.cos(normalizedAngle) * speed);
|
|
95
|
-
velocity.applyQuaternion(quaternion);
|
|
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
|
-
*/
|
|
124
|
-
export const calculateRandomPositionAndVelocityOnBox = (position, quaternion, velocity, speed, { scale, emitFrom }) => {
|
|
125
|
-
const _scale = scale;
|
|
126
|
-
switch (emitFrom) {
|
|
127
|
-
case "VOLUME" /* EmitFrom.VOLUME */:
|
|
128
|
-
position.x = Math.random() * _scale.x - _scale.x / 2;
|
|
129
|
-
position.y = Math.random() * _scale.y - _scale.y / 2;
|
|
130
|
-
position.z = Math.random() * _scale.z - _scale.z / 2;
|
|
131
|
-
break;
|
|
132
|
-
case "SHELL" /* EmitFrom.SHELL */:
|
|
133
|
-
const side = Math.floor(Math.random() * 6);
|
|
134
|
-
const perpendicularAxis = side % 3;
|
|
135
|
-
const shellResult = [];
|
|
136
|
-
shellResult[perpendicularAxis] = side > 2 ? 1 : 0;
|
|
137
|
-
shellResult[(perpendicularAxis + 1) % 3] = Math.random();
|
|
138
|
-
shellResult[(perpendicularAxis + 2) % 3] = Math.random();
|
|
139
|
-
position.x = shellResult[0] * _scale.x - _scale.x / 2;
|
|
140
|
-
position.y = shellResult[1] * _scale.y - _scale.y / 2;
|
|
141
|
-
position.z = shellResult[2] * _scale.z - _scale.z / 2;
|
|
142
|
-
break;
|
|
143
|
-
case "EDGE" /* EmitFrom.EDGE */:
|
|
144
|
-
const side2 = Math.floor(Math.random() * 6);
|
|
145
|
-
const perpendicularAxis2 = side2 % 3;
|
|
146
|
-
const edge = Math.floor(Math.random() * 4);
|
|
147
|
-
const edgeResult = [];
|
|
148
|
-
edgeResult[perpendicularAxis2] = side2 > 2 ? 1 : 0;
|
|
149
|
-
edgeResult[(perpendicularAxis2 + 1) % 3] =
|
|
150
|
-
edge < 2 ? Math.random() : edge - 2;
|
|
151
|
-
edgeResult[(perpendicularAxis2 + 2) % 3] =
|
|
152
|
-
edge < 2 ? edge : Math.random();
|
|
153
|
-
position.x = edgeResult[0] * _scale.x - _scale.x / 2;
|
|
154
|
-
position.y = edgeResult[1] * _scale.y - _scale.y / 2;
|
|
155
|
-
position.z = edgeResult[2] * _scale.z - _scale.z / 2;
|
|
156
|
-
break;
|
|
157
|
-
}
|
|
158
|
-
position.applyQuaternion(quaternion);
|
|
159
|
-
velocity.set(0, 0, speed);
|
|
160
|
-
velocity.applyQuaternion(quaternion);
|
|
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
|
-
*/
|
|
186
|
-
export const calculateRandomPositionAndVelocityOnCircle = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
187
|
-
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
188
|
-
const randomizedDistanceRatio = Math.random();
|
|
189
|
-
const xDirection = Math.cos(theta);
|
|
190
|
-
const yDirection = Math.sin(theta);
|
|
191
|
-
const normalizedThickness = 1 - radiusThickness;
|
|
192
|
-
position.x =
|
|
193
|
-
radius * normalizedThickness * xDirection +
|
|
194
|
-
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
195
|
-
position.y =
|
|
196
|
-
radius * normalizedThickness * yDirection +
|
|
197
|
-
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
198
|
-
position.z = 0;
|
|
199
|
-
position.applyQuaternion(quaternion);
|
|
200
|
-
const positionLength = position.length();
|
|
201
|
-
const speedMultiplierByPosition = 1 / positionLength;
|
|
202
|
-
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, 0);
|
|
203
|
-
velocity.applyQuaternion(quaternion);
|
|
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
|
-
*/
|
|
229
|
-
export const calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, velocity, speed, { rotation, scale }) => {
|
|
230
|
-
const _scale = scale;
|
|
231
|
-
const _rotation = rotation;
|
|
232
|
-
const xOffset = Math.random() * _scale.x - _scale.x / 2;
|
|
233
|
-
const yOffset = Math.random() * _scale.y - _scale.y / 2;
|
|
234
|
-
const rotationX = THREE.MathUtils.degToRad(_rotation.x);
|
|
235
|
-
const rotationY = THREE.MathUtils.degToRad(_rotation.y);
|
|
236
|
-
position.x = xOffset * Math.cos(rotationY);
|
|
237
|
-
position.y = yOffset * Math.cos(rotationX);
|
|
238
|
-
position.z = xOffset * Math.sin(rotationY) - yOffset * Math.sin(rotationX);
|
|
239
|
-
position.applyQuaternion(quaternion);
|
|
240
|
-
velocity.set(0, 0, speed);
|
|
241
|
-
velocity.applyQuaternion(quaternion);
|
|
242
|
-
};
|
|
243
|
-
/**
|
|
244
|
-
* Creates a default white circle texture using CanvasTexture.
|
|
245
|
-
* @returns {THREE.CanvasTexture | null} The generated texture or null if context fails.
|
|
246
|
-
*/
|
|
247
|
-
export const createDefaultParticleTexture = () => {
|
|
248
|
-
try {
|
|
249
|
-
const canvas = document.createElement('canvas');
|
|
250
|
-
const size = 64;
|
|
251
|
-
canvas.width = size;
|
|
252
|
-
canvas.height = size;
|
|
253
|
-
const context = canvas.getContext('2d');
|
|
254
|
-
if (context) {
|
|
255
|
-
const centerX = size / 2;
|
|
256
|
-
const centerY = size / 2;
|
|
257
|
-
const radius = size / 2 - 2; // Small padding
|
|
258
|
-
context.beginPath();
|
|
259
|
-
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
|
|
260
|
-
context.fillStyle = 'white';
|
|
261
|
-
context.fill();
|
|
262
|
-
const texture = new THREE.CanvasTexture(canvas);
|
|
263
|
-
texture.needsUpdate = true;
|
|
264
|
-
return texture;
|
|
265
|
-
}
|
|
266
|
-
else {
|
|
267
|
-
console.warn('Could not get 2D context to generate default particle texture.');
|
|
268
|
-
return null;
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
catch (error) {
|
|
272
|
-
// Handle potential errors (e.g., document not available in non-browser env)
|
|
273
|
-
console.warn('Error creating default particle texture:', error);
|
|
274
|
-
return null;
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
export const isLifeTimeCurve = (value) => {
|
|
278
|
-
return typeof value !== 'number' && 'type' in value;
|
|
279
|
-
};
|
|
280
|
-
export const getCurveFunctionFromConfig = (particleSystemId, lifetimeCurve) => {
|
|
281
|
-
if (lifetimeCurve.type === "BEZIER" /* LifeTimeCurve.BEZIER */) {
|
|
282
|
-
return createBezierCurveFunction(particleSystemId, lifetimeCurve.bezierPoints); // Bézier curve
|
|
283
|
-
}
|
|
284
|
-
if (lifetimeCurve.type === "EASING" /* LifeTimeCurve.EASING */) {
|
|
285
|
-
return lifetimeCurve.curveFunction; // Easing curve
|
|
286
|
-
}
|
|
287
|
-
throw new Error(`Unsupported value type: ${lifetimeCurve}`);
|
|
288
|
-
};
|
|
289
|
-
export const calculateValue = (particleSystemId, value, time = 0) => {
|
|
290
|
-
if (typeof value === 'number') {
|
|
291
|
-
return value; // Constant value
|
|
292
|
-
}
|
|
293
|
-
if ('min' in value && 'max' in value) {
|
|
294
|
-
if (value.min === value.max) {
|
|
295
|
-
return value.min ?? 0; // Constant value
|
|
296
|
-
}
|
|
297
|
-
return THREE.MathUtils.randFloat(value.min ?? 0, value.max ?? 1); // Random range
|
|
298
|
-
}
|
|
299
|
-
const lifetimeCurve = value;
|
|
300
|
-
return (getCurveFunctionFromConfig(particleSystemId, lifetimeCurve)(time) *
|
|
301
|
-
(lifetimeCurve.scale ?? 1));
|
|
302
|
-
};
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { CycleData, ParticleSystem, ParticleSystemConfig } from './types.js';
|
|
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
|
-
*/
|
|
18
|
-
export declare const blendingMap: {
|
|
19
|
-
'THREE.NoBlending': 0;
|
|
20
|
-
'THREE.NormalBlending': 1;
|
|
21
|
-
'THREE.AdditiveBlending': 2;
|
|
22
|
-
'THREE.SubtractiveBlending': 3;
|
|
23
|
-
'THREE.MultiplyBlending': 4;
|
|
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
|
-
*/
|
|
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
|
-
*/
|
|
105
|
-
export declare const createParticleSystem: (config?: ParticleSystemConfig, externalNow?: number) => ParticleSystem;
|
|
106
|
-
export declare const updateParticleSystems: (cycleData: CycleData) => void;
|
|
107
|
-
//# sourceMappingURL=three-particles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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;AAkB3B;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,8BAA8B,WACiB,CAAC;AAyQ7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAQ,oBAAqD,EAC7D,cAAc,MAAM,KACnB,cAqoBF,CAAC;AA0WF,eAAO,MAAM,qBAAqB,GAAI,WAAW,SAAS,SAIzD,CAAC"}
|