Need help with aframe-particle-system-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

IdeaSpaceVR
182 Stars 63 Forks MIT License 101 Commits 18 Opened issues

Description

Particle systems for A-Frame.

Services available

!
?

Need anything else?

Contributors list

aframe-particle-system-component

Particle system component for A-Frame.

Particle System

Examples

Properties

This component exposes only a subset of the ShaderParticleEngine 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. |
1
| | 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. |
1
| | 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


Functions

startParticles

Enables the emitters. Useful to start the animations when

enabled
is set to
false
.

stopParticles

Disables the emitters.

Usage

this.el.components['particle-system'].startParticles();
this.el.components['particle-system'].stopParticles();

Browser Installation

Install and use by directly including the browser files.

<meta charset="utf-8">
<title>A-Frame Particle System Component Example</title>
<meta name="description" content="Hello, World!">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>


<a-scene>
  <!-- Particle system uses 'default' preset, setting custom colors. -->
  <a-entity position="0 2.25 -15" particle-system="color: #EF0000,#44CC00"></a-entity>

  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-sky color="#000000"></a-sky>
</a-scene>

npm

https://www.npmjs.com/package/aframe-particle-system-component

npm install aframe-particle-system-component

Local Development

npm install
npm run dev

Credits

Based on the ShaderParticleEngine by Squarefeet.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.