# vfx-composer-r3f

> React-Three-Fiber bindings for VFX Composer.

Latest version **0.4.0** (published 2022-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install vfx-composer-r3f
pnpm add vfx-composer-r3f
yarn add vfx-composer-r3f
bun add vfx-composer-r3f
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2022-10-12 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 49.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hendrik Mans |
| Maintainers | hendrik.mans |

## Links

- npm: https://www.npmjs.com/package/vfx-composer-r3f
- npm.io page: https://npm.io/package/vfx-composer-r3f

## Dependencies (8)

- [miniplex](https://npm.io/package/miniplex.md) 1.0.0
- [vfx-composer](https://npm.io/package/vfx-composer.md) ^0.4.0
- [shader-composer](https://npm.io/package/shader-composer.md) ^0.4.5
- [@hmans/use-const](https://npm.io/package/@hmans/use-const.md) ^0.0.1
- [@hmans/use-version](https://npm.io/package/@hmans/use-version.md) ^0.0.2
- [@hmans/use-rerender](https://npm.io/package/@hmans/use-rerender.md) ^0.0.2
- [shader-composer-r3f](https://npm.io/package/shader-composer-r3f.md) ^0.4.5
- [material-composer-r3f](https://npm.io/package/material-composer-r3f.md) ^0.2.5

## Recent versions

- 0.4.0 (latest) — 2022-10-12
- 0.0.0-canary-20221130162026 (canary) — 2022-11-30
- 0.0.0-canary-20221129151046 — 2022-11-29
- 0.0.0-canary-20221129141308 — 2022-11-29
- 0.3.0 — 2022-09-28
- 0.2.7 — 2022-09-26
- 0.2.6 — 2022-09-25
- 0.2.5 — 2022-09-24
- 0.2.4 — 2022-09-14
- 0.2.3 — 2022-09-06
- 0.2.2 — 2022-09-02
- 0.2.1 — 2022-09-02
- 0.2.0 — 2022-08-31
- 0.2.0-next.4 — 2022-08-30
- 0.2.0-next.3 — 2022-08-21
- … 1 more at https://npm.io/package/vfx-composer-r3f/versions

## README

# vfx-composer-r3f

## Emitters

This library provides an `<Emitter>` component that, attached to an instance of `<Particles>`, will trigger particles to be emitted. It can be configured to do this at a specific rate, and optionally to a specific number of total particles emitted. It can also accept a callback function that will be invoked once per emitted particle, and can be used to configure the particle's initial state.

The default configuration will emit 10 particles per second, with no limit:

```jsx
<Emitter />
```

You can configure it to emit particles at a specific `rate` (in particles per second):

```jsx
<Emitter rate={20} />
```

You can `limit` the total number of particles emitted (the default being `Infinity`):

```jsx
<Emitter limit={100} />
```

You can obviously combine the two:

```jsx
<Emitter rate={20} limit={100} />
```

You can set `rate` to `Infinity` to immediately emit all particles at once:

```jsx
<Emitter rate={Infinity} limit={1000} />
```

> **Warning**
>
> You can not set both `limit` and `rate` to `Infinity`. This will result in an error.

### Pairing Emitters with Timeline Composer

You can use the very useful timeline animation components from [Timeline Composer] to give emitters a lifetime, delay the start of emission, or even configure repeated bursts:

```jsx
<Repeat seconds={2} times={5}>
  <Lifetime seconds={1}>
    <Emitter rate={50} />
  </Lifetime>
</Repeat>
```

### Configuring Particles

_TODO_

### Emitters are Scene Objects!

Emitters created through `<Emitter>` are actual scene objects in your Three.js scene, meaning that you can animate them just like you would animate any other scene object, or parent them to other objects, and so on. Newly spawned particles will inherit the emitter's position, rotation, and scale.

### Multiple Emitters

Nothing is stopping you from having more than one emitter! If you have multiple emitters, thay can even have completely different configurations (including different setup callbacks.)

All particles spawned will be part of the `<Particles>` instance the emitters use, so plan their particles capacity accordingly.

### Connecting Emitters to Particles Meshes

By default, `<Emitter>` will use React Context to find the nearest `<Particles>` component in the tree, and emit particles from that. This is convenient, but it can be a bit limiting. You may explicitly connect an emitter to a specific particles mesh through the `particles` prop:

```jsx
<Emitter particles={particlesRef} />
```

Now the emitter may live outside of the Particles mesh it is connected to, and will still emit particles from it.

[timeline composer]: https://github.com/hmans/timeline-composer

---
_Source: https://npm.io/package/vfx-composer-r3f · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._