{"id":27063768,"url":"https://github.com/wass08/wawa-vfx","last_synced_at":"2025-04-05T16:20:59.311Z","repository":{"id":286067509,"uuid":"950404746","full_name":"wass08/wawa-vfx","owner":"wass08","description":"A simple and versatile VFX engine for Threejs \u0026 React Three Fiber","archived":false,"fork":false,"pushed_at":"2025-04-04T06:02:30.000Z","size":5443,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T06:30:40.154Z","etag":null,"topics":["r3f","react","react-three","react-three-fiber","threejs","vfx"],"latest_commit_sha":null,"homepage":"https://wawa-vfx.wawasensei.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wass08.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-18T05:32:36.000Z","updated_at":"2025-04-04T06:02:33.000Z","dependencies_parsed_at":"2025-04-04T06:30:51.449Z","dependency_job_id":"800d96f2-e2d6-44b3-b33f-dbfaab31ff21","html_url":"https://github.com/wass08/wawa-vfx","commit_stats":null,"previous_names":["wass08/wawa-vfx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wass08%2Fwawa-vfx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wass08%2Fwawa-vfx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wass08%2Fwawa-vfx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wass08%2Fwawa-vfx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wass08","download_url":"https://codeload.github.com/wass08/wawa-vfx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247362554,"owners_count":20926798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["r3f","react","react-three","react-three-fiber","threejs","vfx"],"created_at":"2025-04-05T16:20:58.812Z","updated_at":"2025-04-05T16:20:59.287Z","avatar_url":"https://github.com/wass08.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wawa VFX\n\nA simple and easy-to-use library for creating visual effects with Three.js and React Three Fiber.\n\n[Live demo](https://wawa-vfx.wawasensei.dev/) - [Fireworks demo](https://fireworks.wawasensei.dev/) - [Wizard Game demo](https://wizard.wawasensei.dev/)\n\n\u003e This powerful VFX particle system was developed as part of the comprehensive **VFX \u0026 Advanced Rendering Chapter** in my [React Three Fiber: The Ultimate Guide to 3D Web Development](https://lessons.wawasensei.dev/courses/react-three-fiber/) course.\n\u003e\n\u003e In the course, we break down every aspect of this system, explaining the mathematics, optimization techniques, and design patterns that make it work.\n\nhttps://github.com/user-attachments/assets/4c00c0e1-ae4f-4501-a648-0811c7a4ca7d\n\n## Install\n\n```bash\nnpm install wawa-vfx\n```\n\nor\n\n```bash\nyarn add wawa-vfx\n```\n\n## Usage\n\nWawa VFX makes it easy to create particle effects in your React Three Fiber projects. The library uses a two-component system:\n\n- `VFXParticles`: Defines the particle system and its rendering properties\n- `VFXEmitter`: Controls how and when particles are emitted into the scene\n\n### Basic Example\n\n```jsx\nimport { VFXEmitter, VFXParticles } from \"wawa-vfx\";\n\nconst MyEffect = () =\u003e {\n  return (\n    \u003c\u003e\n      {/* Step 1: Define your particle system */}\n      \u003cVFXParticles\n        name=\"particles\" // A unique identifier for this particle system\n        settings={{\n          nbParticles: 100000, // Maximum number of particles to allocate\n          gravity: [0, -9.8, 0], // Apply gravity (x, y, z)\n          fadeSize: [0, 0], // Size fade in/out settings\n          fadeOpacity: [0, 0], // Opacity fade in/out settings\n          renderMode: \"billboard\", // \"billboard\" or \"mesh\"\n          intensity: 3, // Brightness multiplier\n        }}\n      /\u003e\n\n      {/* Step 2: Define your emitter */}\n      \u003cVFXEmitter\n        debug // Show debug visualization\n        emitter=\"particles\" // Target the particle system by name\n        settings={{\n          loop: true, // Continuously emit particles (only if `spawnMode` is 'time')\n          duration: 1, // Emission cycle duration in seconds\n          nbParticles: 100, // Number of particles to emit per cycle\n          spawnMode: \"time\", // Emission mode: 'time' or 'burst'\n          delay: 0, // Time delay before starting emission\n\n          // Particle lifetime range [min, max]\n          particlesLifetime: [0.1, 1],\n\n          // Position range (min/max)\n          startPositionMin: [-0.1, -0.1, -0.1],\n          startPositionMax: [0.1, 0.1, 0.1],\n\n          // Rotation range (min/max)\n          startRotationMin: [0, 0, 0],\n          startRotationMax: [0, 0, 0],\n          // Rotation speed range (min/max)\n          rotationSpeedMin: [0, 0, 0],\n          rotationSpeedMax: [0, 0, 0],\n\n          // Direction range (min/max)\n          directionMin: [-1, 0, -1],\n          directionMax: [1, 1, 1],\n\n          // Particle size range [min, max]\n          size: [0.01, 0.25],\n\n          // Particle speed range [min, max]\n          speed: [1, 12],\n\n          // Color at start - an array of strings for random selection\n          colorStart: [\"white\", \"skyblue\"],\n\n          // Color at end - an array of strings for random selection\n          colorEnd: [\"white\", \"pink\"],\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n### Key Features\n\n- **Easy to Use**: Create complex particle effects with minimal code\n- **Flexible Customization**: Extensive settings for fine-tuning visual effects\n- **Performance Optimized**: Uses instanced rendering for efficient particle systems\n- **Integrated with React Three Fiber**: Works seamlessly with your existing project\n\n### VFXParticles Properties\n\n| Property   | Type          | Description                                      |\n| ---------- | ------------- | ------------------------------------------------ |\n| `name`     | string        | Unique identifier for this particle system       |\n| `settings` | object        | Configuration options for particles              |\n| `alphaMap` | THREE.Texture | Optional texture for particle alpha/transparency |\n| `geometry` | ReactElement  | Optional custom geometry for particles           |\n\n### VFXEmitter Properties\n\n| Property   | Type    | Description                                 |\n| ---------- | ------- | ------------------------------------------- |\n| `emitter`  | string  | Name of the target particle system          |\n| `settings` | object  | Configuration options for emission behavior |\n| `debug`    | boolean | Show controls to adjust the settings        |\n\n## Advanced Usage\n\nCheck out the `examples` directory for more complex implementations and techniques.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwass08%2Fwawa-vfx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwass08%2Fwawa-vfx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwass08%2Fwawa-vfx/lists"}