https://github.com/wass08/wawa-vfx
A simple and versatile VFX engine for Threejs & React Three Fiber
https://github.com/wass08/wawa-vfx
r3f react react-three react-three-fiber threejs vfx
Last synced: about 1 month ago
JSON representation
A simple and versatile VFX engine for Threejs & React Three Fiber
- Host: GitHub
- URL: https://github.com/wass08/wawa-vfx
- Owner: wass08
- Created: 2025-03-18T05:32:36.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-04T06:02:30.000Z (about 1 month ago)
- Last Synced: 2025-04-04T06:30:40.154Z (about 1 month ago)
- Topics: r3f, react, react-three, react-three-fiber, threejs, vfx
- Language: TypeScript
- Homepage: https://wawa-vfx.wawasensei.dev
- Size: 5.19 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wawa VFX
A simple and easy-to-use library for creating visual effects with Three.js and React Three Fiber.
[Live demo](https://wawa-vfx.wawasensei.dev/) - [Fireworks demo](https://fireworks.wawasensei.dev/) - [Wizard Game demo](https://wizard.wawasensei.dev/)
> This powerful VFX particle system was developed as part of the comprehensive **VFX & Advanced Rendering Chapter** in my [React Three Fiber: The Ultimate Guide to 3D Web Development](https://lessons.wawasensei.dev/courses/react-three-fiber/) course.
>
> In the course, we break down every aspect of this system, explaining the mathematics, optimization techniques, and design patterns that make it work.
https://github.com/user-attachments/assets/4c00c0e1-ae4f-4501-a648-0811c7a4ca7d
## Install
```bash
npm install wawa-vfx
```
or
```bash
yarn add wawa-vfx
```
## Usage
Wawa VFX makes it easy to create particle effects in your React Three Fiber projects. The library uses a two-component system:
- `VFXParticles`: Defines the particle system and its rendering properties
- `VFXEmitter`: Controls how and when particles are emitted into the scene
### Basic Example
```jsx
import { VFXEmitter, VFXParticles } from "wawa-vfx";
const MyEffect = () => {
return (
<>
{/* Step 1: Define your particle system */}
{/* Step 2: Define your emitter */}
>
);
};
```
### Key Features
- **Easy to Use**: Create complex particle effects with minimal code
- **Flexible Customization**: Extensive settings for fine-tuning visual effects
- **Performance Optimized**: Uses instanced rendering for efficient particle systems
- **Integrated with React Three Fiber**: Works seamlessly with your existing project
### VFXParticles Properties
| Property | Type | Description |
| ---------- | ------------- | ------------------------------------------------ |
| `name` | string | Unique identifier for this particle system |
| `settings` | object | Configuration options for particles |
| `alphaMap` | THREE.Texture | Optional texture for particle alpha/transparency |
| `geometry` | ReactElement | Optional custom geometry for particles |
### VFXEmitter Properties
| Property | Type | Description |
| ---------- | ------- | ------------------------------------------- |
| `emitter` | string | Name of the target particle system |
| `settings` | object | Configuration options for emission behavior |
| `debug` | boolean | Show controls to adjust the settings |
## Advanced Usage
Check out the `examples` directory for more complex implementations and techniques.