@newkrok/three-particles 1.0.3 → 2.0.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 +28 -12
- package/dist/bundle-report.json +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/js/effects/three-particles/index.d.ts +7 -0
- package/dist/js/effects/three-particles/index.d.ts.map +1 -0
- package/dist/js/effects/three-particles/index.js +6 -0
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts +3 -0
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts.map +1 -0
- package/{src → dist}/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.js +66 -67
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts +3 -0
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts.map +1 -0
- package/{src → dist}/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.js +32 -33
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts +5 -0
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-bezier.js +62 -0
- package/dist/js/effects/three-particles/three-particles-curves.d.ts +37 -0
- package/dist/js/effects/three-particles/three-particles-curves.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-curves.js +37 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts +25 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-enums.js +1 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts +11 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.js +93 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts +31 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-utils.js +145 -0
- package/dist/js/effects/three-particles/three-particles.d.ts +13 -0
- package/dist/js/effects/three-particles/three-particles.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles.js +642 -0
- package/dist/js/effects/three-particles/types.d.ts +1037 -0
- package/dist/js/effects/three-particles/types.d.ts.map +1 -0
- package/dist/js/effects/three-particles/types.js +1 -0
- package/dist/three-particles.min.js +1 -0
- package/package.json +87 -37
- package/src/js/effects/three-particles/three-particles-bezier.js +0 -36
- package/src/js/effects/three-particles/three-particles-curves.js +0 -75
- package/src/js/effects/three-particles/three-particles-enums.js +0 -23
- package/src/js/effects/three-particles/three-particles-modifiers.js +0 -133
- package/src/js/effects/three-particles/three-particles-utils.js +0 -212
- package/src/js/effects/three-particles.d.ts +0 -138
- package/src/js/effects/three-particles.js +0 -931
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { EmitFrom } from './three-particles-enums.js';
|
|
3
|
+
import { Constant, LifetimeCurve, Point3D, RandomBetweenTwoConstants } from './types.js';
|
|
4
|
+
export declare const calculateRandomPositionAndVelocityOnSphere: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
5
|
+
radius: number;
|
|
6
|
+
radiusThickness: number;
|
|
7
|
+
arc: number;
|
|
8
|
+
}) => void;
|
|
9
|
+
export declare const calculateRandomPositionAndVelocityOnCone: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, angle, }: {
|
|
10
|
+
radius: number;
|
|
11
|
+
radiusThickness: number;
|
|
12
|
+
arc: number;
|
|
13
|
+
angle?: number;
|
|
14
|
+
}) => void;
|
|
15
|
+
export declare const calculateRandomPositionAndVelocityOnBox: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { scale, emitFrom }: {
|
|
16
|
+
scale: Point3D;
|
|
17
|
+
emitFrom: EmitFrom;
|
|
18
|
+
}) => void;
|
|
19
|
+
export declare const calculateRandomPositionAndVelocityOnCircle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { radius, radiusThickness, arc, }: {
|
|
20
|
+
radius: number;
|
|
21
|
+
radiusThickness: number;
|
|
22
|
+
arc: number;
|
|
23
|
+
}) => void;
|
|
24
|
+
export declare const calculateRandomPositionAndVelocityOnRectangle: (position: THREE.Vector3, quaternion: THREE.Quaternion, velocity: THREE.Vector3, speed: number, { rotation, scale }: {
|
|
25
|
+
rotation: Point3D;
|
|
26
|
+
scale: Point3D;
|
|
27
|
+
}) => void;
|
|
28
|
+
export declare const isLifeTimeCurve: (value: Constant | RandomBetweenTwoConstants | LifetimeCurve) => value is LifetimeCurve;
|
|
29
|
+
export declare const getCurveFunctionFromConfig: (particleSystemId: number, lifeTimeCurve: LifetimeCurve) => import("./types.js").CurveFunction;
|
|
30
|
+
export declare const calculateValue: (particleSystemId: number, value: Constant | RandomBetweenTwoConstants | LifetimeCurve, time?: number) => number;
|
|
31
|
+
//# sourceMappingURL=three-particles-utils.d.ts.map
|
|
@@ -0,0 +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,aAC3C,KAAK,CAAC,OAAO,cACX,KAAK,CAAC,UAAU,YAClB,KAAK,CAAC,OAAO,SAChB,MAAM,qCAKV;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SAiC5D,CAAC;AAEF,eAAO,MAAM,wCAAwC,aACzC,KAAK,CAAC,OAAO,cACX,KAAK,CAAC,UAAU,YAClB,KAAK,CAAC,OAAO,SAChB,MAAM,4CAMV;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,aACxC,KAAK,CAAC,OAAO,cACX,KAAK,CAAC,UAAU,YAClB,KAAK,CAAC,OAAO,SAChB,MAAM,uBACQ;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,SA0C5D,CAAC;AAEF,eAAO,MAAM,0CAA0C,aAC3C,KAAK,CAAC,OAAO,cACX,KAAK,CAAC,UAAU,YAClB,KAAK,CAAC,OAAO,SAChB,MAAM,qCAKV;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,SA2B5D,CAAC;AAEF,eAAO,MAAM,6CAA6C,aAC9C,KAAK,CAAC,OAAO,cACX,KAAK,CAAC,UAAU,YAClB,KAAK,CAAC,OAAO,SAChB,MAAM,uBACQ;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,SAiB3D,CAAC;AAEF,eAAO,MAAM,eAAe,UACnB,QAAQ,GAAG,yBAAyB,GAAG,aAAa,KAC1D,KAAK,IAAI,aAEX,CAAC;AAEF,eAAO,MAAM,0BAA0B,qBACnB,MAAM,iBACT,aAAa,uCAc7B,CAAC;AAEF,eAAO,MAAM,cAAc,qBACP,MAAM,SACjB,QAAQ,GAAG,yBAAyB,GAAG,aAAa,SACrD,MAAM,KACX,MAiBF,CAAC"}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { createBezierCurveFunction } from './three-particles-bezier.js';
|
|
3
|
+
export const calculateRandomPositionAndVelocityOnSphere = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
4
|
+
const u = Math.random() * (arc / 360);
|
|
5
|
+
const v = Math.random();
|
|
6
|
+
const randomizedDistanceRatio = Math.random();
|
|
7
|
+
const theta = 2 * Math.PI * u;
|
|
8
|
+
const phi = Math.acos(2 * v - 1);
|
|
9
|
+
const sinPhi = Math.sin(phi);
|
|
10
|
+
const xDirection = sinPhi * Math.cos(theta);
|
|
11
|
+
const yDirection = sinPhi * Math.sin(theta);
|
|
12
|
+
const zDirection = Math.cos(phi);
|
|
13
|
+
const normalizedThickness = 1 - radiusThickness;
|
|
14
|
+
position.x =
|
|
15
|
+
radius * normalizedThickness * xDirection +
|
|
16
|
+
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
17
|
+
position.y =
|
|
18
|
+
radius * normalizedThickness * yDirection +
|
|
19
|
+
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
20
|
+
position.z =
|
|
21
|
+
radius * normalizedThickness * zDirection +
|
|
22
|
+
radius * radiusThickness * randomizedDistanceRatio * zDirection;
|
|
23
|
+
position.applyQuaternion(quaternion);
|
|
24
|
+
const speedMultiplierByPosition = 1 / position.length();
|
|
25
|
+
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, position.z * speedMultiplierByPosition * speed);
|
|
26
|
+
velocity.applyQuaternion(quaternion);
|
|
27
|
+
};
|
|
28
|
+
export const calculateRandomPositionAndVelocityOnCone = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, angle = 90, }) => {
|
|
29
|
+
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
30
|
+
const randomizedDistanceRatio = Math.random();
|
|
31
|
+
const xDirection = Math.cos(theta);
|
|
32
|
+
const yDirection = Math.sin(theta);
|
|
33
|
+
const normalizedThickness = 1 - radiusThickness;
|
|
34
|
+
position.x =
|
|
35
|
+
radius * normalizedThickness * xDirection +
|
|
36
|
+
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
37
|
+
position.y =
|
|
38
|
+
radius * normalizedThickness * yDirection +
|
|
39
|
+
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
40
|
+
position.z = 0;
|
|
41
|
+
position.applyQuaternion(quaternion);
|
|
42
|
+
const positionLength = position.length();
|
|
43
|
+
const normalizedAngle = Math.abs((positionLength / radius) * THREE.MathUtils.degToRad(angle));
|
|
44
|
+
const sinNormalizedAngle = Math.sin(normalizedAngle);
|
|
45
|
+
const speedMultiplierByPosition = 1 / positionLength;
|
|
46
|
+
velocity.set(position.x * sinNormalizedAngle * speedMultiplierByPosition * speed, position.y * sinNormalizedAngle * speedMultiplierByPosition * speed, Math.cos(normalizedAngle) * speed);
|
|
47
|
+
velocity.applyQuaternion(quaternion);
|
|
48
|
+
};
|
|
49
|
+
export const calculateRandomPositionAndVelocityOnBox = (position, quaternion, velocity, speed, { scale, emitFrom }) => {
|
|
50
|
+
const _scale = scale;
|
|
51
|
+
switch (emitFrom) {
|
|
52
|
+
case "VOLUME" /* EmitFrom.VOLUME */:
|
|
53
|
+
position.x = Math.random() * _scale.x - _scale.x / 2;
|
|
54
|
+
position.y = Math.random() * _scale.y - _scale.y / 2;
|
|
55
|
+
position.z = Math.random() * _scale.z - _scale.z / 2;
|
|
56
|
+
break;
|
|
57
|
+
case "SHELL" /* EmitFrom.SHELL */:
|
|
58
|
+
const side = Math.floor(Math.random() * 6);
|
|
59
|
+
const perpendicularAxis = side % 3;
|
|
60
|
+
const shellResult = [];
|
|
61
|
+
shellResult[perpendicularAxis] = side > 2 ? 1 : 0;
|
|
62
|
+
shellResult[(perpendicularAxis + 1) % 3] = Math.random();
|
|
63
|
+
shellResult[(perpendicularAxis + 2) % 3] = Math.random();
|
|
64
|
+
position.x = shellResult[0] * _scale.x - _scale.x / 2;
|
|
65
|
+
position.y = shellResult[1] * _scale.y - _scale.y / 2;
|
|
66
|
+
position.z = shellResult[2] * _scale.z - _scale.z / 2;
|
|
67
|
+
break;
|
|
68
|
+
case "EDGE" /* EmitFrom.EDGE */:
|
|
69
|
+
const side2 = Math.floor(Math.random() * 6);
|
|
70
|
+
const perpendicularAxis2 = side2 % 3;
|
|
71
|
+
const edge = Math.floor(Math.random() * 4);
|
|
72
|
+
const edgeResult = [];
|
|
73
|
+
edgeResult[perpendicularAxis2] = side2 > 2 ? 1 : 0;
|
|
74
|
+
edgeResult[(perpendicularAxis2 + 1) % 3] =
|
|
75
|
+
edge < 2 ? Math.random() : edge - 2;
|
|
76
|
+
edgeResult[(perpendicularAxis2 + 2) % 3] =
|
|
77
|
+
edge < 2 ? edge : Math.random();
|
|
78
|
+
position.x = edgeResult[0] * _scale.x - _scale.x / 2;
|
|
79
|
+
position.y = edgeResult[1] * _scale.y - _scale.y / 2;
|
|
80
|
+
position.z = edgeResult[2] * _scale.z - _scale.z / 2;
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
position.applyQuaternion(quaternion);
|
|
84
|
+
velocity.set(0, 0, speed);
|
|
85
|
+
velocity.applyQuaternion(quaternion);
|
|
86
|
+
};
|
|
87
|
+
export const calculateRandomPositionAndVelocityOnCircle = (position, quaternion, velocity, speed, { radius, radiusThickness, arc, }) => {
|
|
88
|
+
const theta = 2 * Math.PI * Math.random() * (arc / 360);
|
|
89
|
+
const randomizedDistanceRatio = Math.random();
|
|
90
|
+
const xDirection = Math.cos(theta);
|
|
91
|
+
const yDirection = Math.sin(theta);
|
|
92
|
+
const normalizedThickness = 1 - radiusThickness;
|
|
93
|
+
position.x =
|
|
94
|
+
radius * normalizedThickness * xDirection +
|
|
95
|
+
radius * radiusThickness * randomizedDistanceRatio * xDirection;
|
|
96
|
+
position.y =
|
|
97
|
+
radius * normalizedThickness * yDirection +
|
|
98
|
+
radius * radiusThickness * randomizedDistanceRatio * yDirection;
|
|
99
|
+
position.z = 0;
|
|
100
|
+
position.applyQuaternion(quaternion);
|
|
101
|
+
const positionLength = position.length();
|
|
102
|
+
const speedMultiplierByPosition = 1 / positionLength;
|
|
103
|
+
velocity.set(position.x * speedMultiplierByPosition * speed, position.y * speedMultiplierByPosition * speed, 0);
|
|
104
|
+
velocity.applyQuaternion(quaternion);
|
|
105
|
+
};
|
|
106
|
+
export const calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, velocity, speed, { rotation, scale }) => {
|
|
107
|
+
const _scale = scale;
|
|
108
|
+
const _rotation = rotation;
|
|
109
|
+
const xOffset = Math.random() * _scale.x - _scale.x / 2;
|
|
110
|
+
const yOffset = Math.random() * _scale.y - _scale.y / 2;
|
|
111
|
+
const rotationX = THREE.MathUtils.degToRad(_rotation.x);
|
|
112
|
+
const rotationY = THREE.MathUtils.degToRad(_rotation.y);
|
|
113
|
+
position.x = xOffset * Math.cos(rotationY);
|
|
114
|
+
position.y = yOffset * Math.cos(rotationX);
|
|
115
|
+
position.z = xOffset * Math.sin(rotationY) - yOffset * Math.sin(rotationX);
|
|
116
|
+
position.applyQuaternion(quaternion);
|
|
117
|
+
velocity.set(0, 0, speed);
|
|
118
|
+
velocity.applyQuaternion(quaternion);
|
|
119
|
+
};
|
|
120
|
+
export const isLifeTimeCurve = (value) => {
|
|
121
|
+
return typeof value !== 'number' && 'type' in value;
|
|
122
|
+
};
|
|
123
|
+
export const getCurveFunctionFromConfig = (particleSystemId, lifeTimeCurve) => {
|
|
124
|
+
if (lifeTimeCurve.type === "BEZIER" /* LifeTimeCurve.BEZIER */) {
|
|
125
|
+
return createBezierCurveFunction(particleSystemId, lifeTimeCurve.bezierPoints); // Bézier curve
|
|
126
|
+
}
|
|
127
|
+
if (lifeTimeCurve.type === "EASING" /* LifeTimeCurve.EASING */) {
|
|
128
|
+
return lifeTimeCurve.curveFunction; // Easing curve
|
|
129
|
+
}
|
|
130
|
+
throw new Error(`Unsupported value type: ${lifeTimeCurve}`);
|
|
131
|
+
};
|
|
132
|
+
export const calculateValue = (particleSystemId, value, time = 0) => {
|
|
133
|
+
if (typeof value === 'number') {
|
|
134
|
+
return value; // Constant value
|
|
135
|
+
}
|
|
136
|
+
if ('min' in value && 'max' in value) {
|
|
137
|
+
if (value.min === value.max) {
|
|
138
|
+
return value.min ?? 0; // Constant value
|
|
139
|
+
}
|
|
140
|
+
return THREE.MathUtils.randFloat(value.min ?? 0, value.max ?? 1); // Random range
|
|
141
|
+
}
|
|
142
|
+
const lifeTimeCurve = value;
|
|
143
|
+
return (getCurveFunctionFromConfig(particleSystemId, lifeTimeCurve)(time) *
|
|
144
|
+
(lifeTimeCurve.scale ?? 1));
|
|
145
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CycleData, ParticleSystem, ParticleSystemConfig } from './types.js';
|
|
2
|
+
export * from './types.js';
|
|
3
|
+
export declare const blendingMap: {
|
|
4
|
+
'THREE.NoBlending': 0;
|
|
5
|
+
'THREE.NormalBlending': 1;
|
|
6
|
+
'THREE.AdditiveBlending': 2;
|
|
7
|
+
'THREE.SubtractiveBlending': 3;
|
|
8
|
+
'THREE.MultiplyBlending': 4;
|
|
9
|
+
};
|
|
10
|
+
export declare const getDefaultParticleSystemConfig: () => any;
|
|
11
|
+
export declare const createParticleSystem: (config?: ParticleSystemConfig, externalNow?: number) => ParticleSystem;
|
|
12
|
+
export declare const updateParticleSystems: ({ now, delta, elapsed }: CycleData) => void;
|
|
13
|
+
//# sourceMappingURL=three-particles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"three-particles.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles.ts"],"names":[],"mappings":"AA0BA,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;AAwP7D,eAAO,MAAM,oBAAoB,YACvB,oBAAoB,gBACd,MAAM,KACnB,cAkjBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,4BAA6B,SAAS,SAmPvE,CAAC"}
|