-
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
164 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"vfx-composer-r3f": minor | ||
--- | ||
|
||
**Breaking Change:** `<Emitter>` received a big overhaul and now supports `rate` and `limit` props, next to the `setup` callback prop that was already there. Together with the helper components from Timeline Composer, this should now allow for all typical particle emission workloads. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,77 @@ | ||
# vfx-composer-r3f | ||
|
||
...needs a README :-) | ||
## 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters