Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IdeaSpaceVR/aframe-particle-system-component
Particle systems for A-Frame.
https://github.com/IdeaSpaceVR/aframe-particle-system-component
aframe vr webvr
Last synced: 13 days ago
JSON representation
Particle systems for A-Frame.
- Host: GitHub
- URL: https://github.com/IdeaSpaceVR/aframe-particle-system-component
- Owner: IdeaSpaceVR
- License: mit
- Created: 2016-05-29T03:58:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T17:54:41.000Z (over 1 year ago)
- Last Synced: 2024-09-21T09:11:50.620Z (about 2 months ago)
- Topics: aframe, vr, webvr
- Language: JavaScript
- Homepage: https://ideaspacevr.github.io/aframe-particle-system-component/
- Size: 1.79 MB
- Stars: 230
- Watchers: 14
- Forks: 69
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aframe-particle-system-component
Particle system component for [A-Frame](https://aframe.io).
### Examples
- [Stars](https://ideaspacevr.github.io/aframe-particle-system-component/examples/stars/)
- [Dust](https://ideaspacevr.github.io/aframe-particle-system-component/examples/dust/)
- [Rain](https://ideaspacevr.github.io/aframe-particle-system-component/examples/rain/)
- [Snow](https://ideaspacevr.github.io/aframe-particle-system-component/examples/snow/)
- [Colors](https://ideaspacevr.github.io/aframe-particle-system-component/examples/colors/)
### Properties
This component exposes only a subset of the [ShaderParticleEngine API](http://squarefeet.github.io/ShaderParticleEngine/docs/api/).
| Property | Description | Default Value |
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------|
| preset | Preset configuration. Possible values are: `default`, `dust`, `snow`, `rain`. | `default` |
| maxAge | The particle's maximum age in seconds. | `6` |
| positionSpread | Describes this emitter's position variance on a per-particle basis. | `0 0 0` |
| type | The default distribution this emitter should use to control its particle's spawn position and force behaviour. Possible values are `1` (box), `2` (sphere), `3` (disc) | 1 (box) |
| rotationAxis | Describes this emitter's axis of rotation. Possible values are `x`, `y` and `z`. | `x` |
| rotationAngle | The angle of rotation, given in radians. `Dust` preset is `3.14`. | `0` |
| rotationAngleSpread | The amount of variance in the angle of rotation per-particle, given in radians. | `0` |
| accelerationValue | Describes this emitter's base acceleration. | `0, -10, 0` |
| accelerationSpread | Describes this emitter's acceleration variance on a per-particle basis. | `10 0 10` |
| velocityValue | Describes this emitter's base velocity. | `0 25 0` |
| velocitySpread | Describes this emitter's acceleration variance on a per-particle basis. | `10 7.5 10` |
| dragValue | Number between 0 and 1 describing drag applied to all particles. | `0` |
| dragSpread | Number describing drag variance on a per-particle basis. | `0` |
| dragRandomise | WHen a particle is re-spawned, whether it's drag should be re-randomised or not. Can incur a performance hit. | `false` |
| color | Describes a particle's color. This property is a "value-over-lifetime" property, meaning an array of values can be given to describe specific value changes over a particle's lifetime. | `#0000FF,#FF0000` |
| size | Describes a particle's size. Either a single number, or an array of values can be given to describe specific value changes over a particle's lifetime. | `1` |
| sizeSpread | Per-particle variation in size. Either a single number, or an array of values can be given to describe specific value changes over a particle's lifetime. | 0 |
| direction | The direction of the emitter. If value is `1`, emitter will start at beginning of particle's lifecycle. If value is `-1`, emitter will start at end of particle's lifecycle and work it's way backwards. | `1` |
| duration | The duration in seconds that this emitter should live for. If not specified, the emitter will emit particles indefinitely. | `null` |
| enabled | When `true` the emitter will emit particles, when `false` it will not. This value can be changed dynamically during a scene. While particles are emitting, they will disappear immediately when set to `false`. | `true` |
| particleCount | The total number of particles this emitter will hold. NOTE: this is not the number of particles emitted in a second, or anything like that. The number of particles emitted per-second is calculated by particleCount / maxAge (approximately!) | `1000` |
| texture | The texture used by this emitter. | `./images/star2.png` |
| randomise | When a particle is re-spawned, whether it's position should be re-randomised or not. Can incur a performance hit. | `false` |
| opacity | Either a single number to describe the opacity of a particle, or an array of values can be given to describe specific value changes over a particle's lifetime. | `1` |
| opacitySpread | Per-particle variation in opacity. Either a single number, or an array of values can be given to describe specific value changes over a particle's lifetime. | 0 |
| blending | The blending mode of the particles. Possible values are `0` (no blending), `1` (normal), `2` (additive), `3` (subtractive), `4` (multiply) | `2` |
| maxParticleCount | | `250000` |
### Usage
```html
```
```html
```
```html
```
```html
```
### Functions
#### startParticles
Enables the emitters. Useful to start the animations when `enabled` is set to `false`.
#### stopParticles
Disables the emitters.
### Usage
```javascript
this.el.components['particle-system'].startParticles();
this.el.components['particle-system'].stopParticles();
```
### Browser Installation
Install and use by directly including the [browser files](dist).
```html
A-Frame Particle System Component Example
```
### npm
https://www.npmjs.com/package/aframe-particle-system-component
```
npm install aframe-particle-system-component
```
### Local Development
```
npm install
npm run dev
```
To rebuild:
```
npm run dist
```
### Credits
Based on the [ShaderParticleEngine by Squarefeet](https://github.com/squarefeet/ShaderParticleEngine).