tres-vfx 0.0.3 → 0.0.5
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 +68 -68
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -27,16 +27,16 @@ npm install three @react-three/fiber react
|
|
|
27
27
|
## Quick Start
|
|
28
28
|
|
|
29
29
|
```tsx
|
|
30
|
-
import { Canvas } from '@react-three/fiber'
|
|
31
|
-
import { VFXParticles, Appearance, EmitterShape } from 'r3f-vfx'
|
|
32
|
-
import * as THREE from 'three/webgpu'
|
|
30
|
+
import { Canvas } from '@react-three/fiber'
|
|
31
|
+
import { VFXParticles, Appearance, EmitterShape } from 'r3f-vfx'
|
|
32
|
+
import * as THREE from 'three/webgpu'
|
|
33
33
|
|
|
34
34
|
function App() {
|
|
35
35
|
return (
|
|
36
36
|
<Canvas>
|
|
37
37
|
<VFXParticles debug />
|
|
38
38
|
</Canvas>
|
|
39
|
-
)
|
|
39
|
+
)
|
|
40
40
|
}
|
|
41
41
|
```
|
|
42
42
|
|
|
@@ -114,8 +114,8 @@ The main particle system component.
|
|
|
114
114
|
|
|
115
115
|
```ts
|
|
116
116
|
interface StretchConfig {
|
|
117
|
-
factor: number
|
|
118
|
-
maxStretch: number
|
|
117
|
+
factor: number // Stretch multiplier
|
|
118
|
+
maxStretch: number // Maximum stretch amount
|
|
119
119
|
}
|
|
120
120
|
```
|
|
121
121
|
|
|
@@ -127,9 +127,9 @@ interface StretchConfig {
|
|
|
127
127
|
|
|
128
128
|
```ts
|
|
129
129
|
interface TurbulenceConfig {
|
|
130
|
-
intensity: number
|
|
131
|
-
frequency: number
|
|
132
|
-
speed: number
|
|
130
|
+
intensity: number // Turbulence strength
|
|
131
|
+
frequency: number // Noise scale
|
|
132
|
+
speed: number // Animation speed
|
|
133
133
|
}
|
|
134
134
|
```
|
|
135
135
|
|
|
@@ -142,11 +142,11 @@ interface TurbulenceConfig {
|
|
|
142
142
|
|
|
143
143
|
```ts
|
|
144
144
|
interface AttractorConfig {
|
|
145
|
-
position: [x, y, z]
|
|
146
|
-
strength: number
|
|
147
|
-
radius?: number
|
|
148
|
-
type?: 'point' | 'vortex'
|
|
149
|
-
axis?: [x, y, z]
|
|
145
|
+
position: [x, y, z]
|
|
146
|
+
strength: number // Positive = attract, negative = repel
|
|
147
|
+
radius?: number // 0 = infinite range
|
|
148
|
+
type?: 'point' | 'vortex'
|
|
149
|
+
axis?: [x, y, z] // Vortex rotation axis
|
|
150
150
|
}
|
|
151
151
|
```
|
|
152
152
|
|
|
@@ -158,11 +158,11 @@ interface AttractorConfig {
|
|
|
158
158
|
|
|
159
159
|
```ts
|
|
160
160
|
interface CollisionConfig {
|
|
161
|
-
plane: { y: number }
|
|
162
|
-
bounce?: number
|
|
163
|
-
friction?: number
|
|
164
|
-
die?: boolean
|
|
165
|
-
sizeBasedGravity?: number
|
|
161
|
+
plane: { y: number } // Plane Y position
|
|
162
|
+
bounce?: number // Bounce factor (0-1)
|
|
163
|
+
friction?: number // Horizontal friction
|
|
164
|
+
die?: boolean // Kill on collision
|
|
165
|
+
sizeBasedGravity?: number // Gravity multiplier by size
|
|
166
166
|
}
|
|
167
167
|
```
|
|
168
168
|
|
|
@@ -180,10 +180,10 @@ All curves use Bezier spline format:
|
|
|
180
180
|
```ts
|
|
181
181
|
interface CurveData {
|
|
182
182
|
points: Array<{
|
|
183
|
-
pos: [x, y]
|
|
184
|
-
handleIn?: [x, y]
|
|
185
|
-
handleOut?: [x, y]
|
|
186
|
-
}
|
|
183
|
+
pos: [x, y] // Position (x: 0-1 progress, y: value)
|
|
184
|
+
handleIn?: [x, y] // Bezier handle in (offset)
|
|
185
|
+
handleOut?: [x, y] // Bezier handle out (offset)
|
|
186
|
+
}>
|
|
187
187
|
}
|
|
188
188
|
```
|
|
189
189
|
|
|
@@ -205,21 +205,21 @@ interface CurveData {
|
|
|
205
205
|
| `alphaTestNode` | `NodeFunction` | Alpha test/discard |
|
|
206
206
|
|
|
207
207
|
```ts
|
|
208
|
-
type NodeFunction = (data: ParticleData, defaultColor?: Node) => Node
|
|
208
|
+
type NodeFunction = (data: ParticleData, defaultColor?: Node) => Node
|
|
209
209
|
|
|
210
210
|
interface ParticleData {
|
|
211
|
-
progress: Node
|
|
212
|
-
lifetime: Node
|
|
213
|
-
position: Node
|
|
214
|
-
velocity: Node
|
|
215
|
-
size: Node
|
|
216
|
-
rotation: Node
|
|
217
|
-
colorStart: Node
|
|
218
|
-
colorEnd: Node
|
|
219
|
-
color: Node
|
|
220
|
-
intensifiedColor: Node
|
|
221
|
-
shapeMask: Node
|
|
222
|
-
index: Node
|
|
211
|
+
progress: Node // 0 → 1 over lifetime
|
|
212
|
+
lifetime: Node // 1 → 0 over lifetime
|
|
213
|
+
position: Node // vec3 world position
|
|
214
|
+
velocity: Node // vec3 velocity
|
|
215
|
+
size: Node // float size
|
|
216
|
+
rotation: Node // vec3 rotation
|
|
217
|
+
colorStart: Node // vec3 start color
|
|
218
|
+
colorEnd: Node // vec3 end color
|
|
219
|
+
color: Node // vec3 interpolated color
|
|
220
|
+
intensifiedColor: Node // color × intensity
|
|
221
|
+
shapeMask: Node // float alpha mask
|
|
222
|
+
index: Node // particle index
|
|
223
223
|
}
|
|
224
224
|
```
|
|
225
225
|
|
|
@@ -232,8 +232,8 @@ interface ParticleData {
|
|
|
232
232
|
|
|
233
233
|
```ts
|
|
234
234
|
interface FlipbookConfig {
|
|
235
|
-
rows: number
|
|
236
|
-
columns: number
|
|
235
|
+
rows: number
|
|
236
|
+
columns: number
|
|
237
237
|
}
|
|
238
238
|
```
|
|
239
239
|
|
|
@@ -276,13 +276,13 @@ Decoupled emitter component that links to a VFXParticles system.
|
|
|
276
276
|
|
|
277
277
|
```ts
|
|
278
278
|
interface VFXEmitterAPI {
|
|
279
|
-
emit(): boolean
|
|
280
|
-
burst(count?: number): boolean
|
|
281
|
-
start(): void
|
|
282
|
-
stop(): void
|
|
283
|
-
isEmitting: boolean
|
|
284
|
-
getParticleSystem(): ParticleAPI
|
|
285
|
-
group: THREE.Group
|
|
279
|
+
emit(): boolean // Emit at current position
|
|
280
|
+
burst(count?: number): boolean // Burst emit
|
|
281
|
+
start(): void // Start auto-emission
|
|
282
|
+
stop(): void // Stop auto-emission
|
|
283
|
+
isEmitting: boolean // Current state
|
|
284
|
+
getParticleSystem(): ParticleAPI
|
|
285
|
+
group: THREE.Group // The group element
|
|
286
286
|
}
|
|
287
287
|
```
|
|
288
288
|
|
|
@@ -292,13 +292,13 @@ Programmatic emitter control.
|
|
|
292
292
|
|
|
293
293
|
```tsx
|
|
294
294
|
function MyComponent() {
|
|
295
|
-
const { emit, burst, start, stop } = useVFXEmitter('sparks')
|
|
295
|
+
const { emit, burst, start, stop } = useVFXEmitter('sparks')
|
|
296
296
|
|
|
297
297
|
const handleClick = () => {
|
|
298
|
-
burst([0, 1, 0], 100, { colorStart: ['#ff0000'] })
|
|
299
|
-
}
|
|
298
|
+
burst([0, 1, 0], 100, { colorStart: ['#ff0000'] })
|
|
299
|
+
}
|
|
300
300
|
|
|
301
|
-
return <mesh onClick={handleClick}>...</mesh
|
|
301
|
+
return <mesh onClick={handleClick}>...</mesh>
|
|
302
302
|
}
|
|
303
303
|
```
|
|
304
304
|
|
|
@@ -310,18 +310,18 @@ interface UseVFXEmitterResult {
|
|
|
310
310
|
position?: [x, y, z],
|
|
311
311
|
count?: number,
|
|
312
312
|
overrides?: SpawnOverrides
|
|
313
|
-
): boolean
|
|
313
|
+
): boolean
|
|
314
314
|
burst(
|
|
315
315
|
position?: [x, y, z],
|
|
316
316
|
count?: number,
|
|
317
317
|
overrides?: SpawnOverrides
|
|
318
|
-
): boolean
|
|
319
|
-
start(): boolean
|
|
320
|
-
stop(): boolean
|
|
321
|
-
clear(): boolean
|
|
322
|
-
isEmitting(): boolean
|
|
323
|
-
getUniforms(): Record<string, { value: unknown }
|
|
324
|
-
getParticles(): ParticleAPI
|
|
318
|
+
): boolean
|
|
319
|
+
start(): boolean
|
|
320
|
+
stop(): boolean
|
|
321
|
+
clear(): boolean
|
|
322
|
+
isEmitting(): boolean
|
|
323
|
+
getUniforms(): Record<string, { value: unknown }>
|
|
324
|
+
getParticles(): ParticleAPI
|
|
325
325
|
}
|
|
326
326
|
```
|
|
327
327
|
|
|
@@ -330,17 +330,17 @@ interface UseVFXEmitterResult {
|
|
|
330
330
|
Zustand store for managing particle systems.
|
|
331
331
|
|
|
332
332
|
```ts
|
|
333
|
-
const store = useVFXStore()
|
|
333
|
+
const store = useVFXStore()
|
|
334
334
|
|
|
335
335
|
// Access registered particle systems
|
|
336
|
-
const sparks = store.getParticles('sparks')
|
|
337
|
-
sparks?.spawn(0, 0, 0, 50)
|
|
336
|
+
const sparks = store.getParticles('sparks')
|
|
337
|
+
sparks?.spawn(0, 0, 0, 50)
|
|
338
338
|
|
|
339
339
|
// Store methods
|
|
340
|
-
store.emit('sparks', { x: 0, y: 0, z: 0, count: 20 })
|
|
341
|
-
store.start('sparks')
|
|
342
|
-
store.stop('sparks')
|
|
343
|
-
store.clear('sparks')
|
|
340
|
+
store.emit('sparks', { x: 0, y: 0, z: 0, count: 20 })
|
|
341
|
+
store.start('sparks')
|
|
342
|
+
store.stop('sparks')
|
|
343
|
+
store.clear('sparks')
|
|
344
344
|
```
|
|
345
345
|
|
|
346
346
|
## Examples
|
|
@@ -388,9 +388,9 @@ store.clear('sparks');
|
|
|
388
388
|
### 3D Geometry Particles
|
|
389
389
|
|
|
390
390
|
```tsx
|
|
391
|
-
import { BoxGeometry } from 'three/webgpu'
|
|
391
|
+
import { BoxGeometry } from 'three/webgpu'
|
|
392
392
|
|
|
393
|
-
|
|
393
|
+
;<VFXParticles
|
|
394
394
|
geometry={new BoxGeometry(1, 1, 1)}
|
|
395
395
|
maxParticles={500}
|
|
396
396
|
size={[0.1, 0.2]}
|
|
@@ -404,7 +404,7 @@ import { BoxGeometry } from 'three/webgpu';
|
|
|
404
404
|
]}
|
|
405
405
|
shadow={true}
|
|
406
406
|
lighting={Lighting.STANDARD}
|
|
407
|
-
|
|
407
|
+
/>
|
|
408
408
|
```
|
|
409
409
|
|
|
410
410
|
### Turbulent Smoke
|
|
@@ -464,7 +464,7 @@ import type {
|
|
|
464
464
|
TurbulenceConfig,
|
|
465
465
|
CollisionConfig,
|
|
466
466
|
AttractorConfig,
|
|
467
|
-
} from 'r3f-vfx'
|
|
467
|
+
} from 'r3f-vfx'
|
|
468
468
|
```
|
|
469
469
|
|
|
470
470
|
## License
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tres-vfx",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"prepublishOnly": "bun run typecheck && bun run build && bun run copy-readme"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"core-vfx": "0.0.
|
|
27
|
+
"core-vfx": "0.0.5"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"tsup": "8.5.1",
|