{"id":13491490,"url":"https://github.com/IdeaSpaceVR/aframe-particle-system-component","last_synced_at":"2025-03-28T08:33:16.422Z","repository":{"id":8843230,"uuid":"59925410","full_name":"IdeaSpaceVR/aframe-particle-system-component","owner":"IdeaSpaceVR","description":"Particle systems for A-Frame.","archived":false,"fork":false,"pushed_at":"2023-03-13T17:54:41.000Z","size":1879,"stargazers_count":234,"open_issues_count":27,"forks_count":69,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-21T11:13:03.982Z","etag":null,"topics":["aframe","vr","webvr"],"latest_commit_sha":null,"homepage":"https://ideaspacevr.github.io/aframe-particle-system-component/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IdeaSpaceVR.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-05-29T03:58:16.000Z","updated_at":"2025-02-26T04:58:07.000Z","dependencies_parsed_at":"2024-06-18T14:00:55.830Z","dependency_job_id":"c115d68a-0039-48b6-afb9-63dc5b0955c9","html_url":"https://github.com/IdeaSpaceVR/aframe-particle-system-component","commit_stats":{"total_commits":88,"total_committers":15,"mean_commits":5.866666666666666,"dds":0.5909090909090908,"last_synced_commit":"a7c3d3bd01fa48a9b359bfda43a7e076165e530d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IdeaSpaceVR%2Faframe-particle-system-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IdeaSpaceVR%2Faframe-particle-system-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IdeaSpaceVR%2Faframe-particle-system-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IdeaSpaceVR%2Faframe-particle-system-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IdeaSpaceVR","download_url":"https://codeload.github.com/IdeaSpaceVR/aframe-particle-system-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245996750,"owners_count":20707310,"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":["aframe","vr","webvr"],"created_at":"2024-07-31T19:00:57.460Z","updated_at":"2025-03-28T08:33:15.981Z","avatar_url":"https://github.com/IdeaSpaceVR.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# aframe-particle-system-component\n\nParticle system component for [A-Frame](https://aframe.io).\n\n![Particle System](https://cloud.githubusercontent.com/assets/674727/24214966/6d43ef14-0ef4-11e7-973f-c561b81d175f.gif)\n\n### Examples\n\n- [Stars](https://ideaspacevr.github.io/aframe-particle-system-component/examples/stars/)\n- [Dust](https://ideaspacevr.github.io/aframe-particle-system-component/examples/dust/)\n- [Rain](https://ideaspacevr.github.io/aframe-particle-system-component/examples/rain/)\n- [Snow](https://ideaspacevr.github.io/aframe-particle-system-component/examples/snow/)\n- [Colors](https://ideaspacevr.github.io/aframe-particle-system-component/examples/colors/)\n\n### Properties\n\nThis component exposes only a subset of the [ShaderParticleEngine API](http://squarefeet.github.io/ShaderParticleEngine/docs/api/).\n\n| Property           | Description                                                                                                                                                                                                                                     | Default Value        |\n|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------|\n| preset              | Preset configuration. Possible values are: `default`, `dust`, `snow`, `rain`.                                                                                                                                                                   | `default`            |\n| maxAge              | The particle's maximum age in seconds.                                                                                                                                                                                                          | `6`                  |\n| positionSpread      | Describes this emitter's position variance on a per-particle basis.                                                                                                                                                                             | `0 0 0`              |\n| 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)              |\n| rotationAxis        | Describes this emitter's axis of rotation. Possible values are `x`, `y` and `z`.                                                                                                                                                                | `x`                  |\n| rotationAngle       | The angle of rotation, given in radians. `Dust` preset is `3.14`.                                                                                                                                                                               | `0`                  |\n| rotationAngleSpread | The amount of variance in the angle of rotation per-particle, given in radians.                                                                                                                                                                 | `0`                  |\n| accelerationValue   | Describes this emitter's base acceleration.                                                                                                                                                                                                     | `0, -10, 0`          |\n| accelerationSpread  | Describes this emitter's acceleration variance on a per-particle basis.                                                                                                                                                                         | `10 0 10`            |\n| velocityValue       | Describes this emitter's base velocity.                                                                                                                                                                                                         | `0 25 0`             |\n| velocitySpread      | Describes this emitter's acceleration variance on a per-particle basis.                                                                                                                                                                         | `10 7.5 10`          |\n| dragValue           | Number between 0 and 1 describing drag applied to all particles.                                                                                                                                                                                | `0`                  |\n| dragSpread          | Number describing drag variance on a per-particle basis.                                                                                                                                                                                        | `0`                  |\n| dragRandomise       | WHen a particle is re-spawned, whether it's drag should be re-randomised or not. Can incur a performance hit.                                                                                                                                   | `false`              |\n| 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`    |\n| 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`                  |\n| 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 |\n| 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`                  |\n| duration            | The duration in seconds that this emitter should live for. If not specified, the emitter will emit particles indefinitely.                                                                                                                      | `null`               |\n| 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`               |\n| 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`               |\n| texture             | The texture used by this emitter.                                                                                                                                                                                                               | `./images/star2.png` |\n| randomise           | When a particle is re-spawned, whether it's position should be re-randomised or not. Can incur a performance hit.                                                                                                                               | `false`              |\n| 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`                  |\n| 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 |\n| blending            | The blending mode of the particles. Possible values are `0` (no blending), `1` (normal), `2` (additive), `3` (subtractive), `4` (multiply)                                                                                                      | `2`                  |\n| maxParticleCount    |                                                                                                                                                                                                                                                 | `250000`             |\n\n### Usage\n\n```html\n\u003ca-entity position=\"0 2.25 -15\" particle-system=\"preset: dust\"\u003e\u003c/a-entity\u003e\n```\n\n```html\n\u003ca-entity position=\"0 2.25 -15\" particle-system=\"preset: snow\"\u003e\u003c/a-entity\u003e\n```\n\n```html\n\u003ca-entity position=\"0 2.25 -15\" particle-system=\"preset: rain\"\u003e\u003c/a-entity\u003e\n```\n\n```html\n\u003ca-entity position=\"0 2.25 -15\" particle-system=\"preset: dust; texture: ./images/star2.png; color: #0000FF,#00FF00,#FF0000\"\u003e\u003c/a-entity\u003e\n```\n\n### Functions\n\n#### startParticles\nEnables the emitters. Useful to start the animations when `enabled` is set to `false`.\n\n#### stopParticles\nDisables the emitters.\n\n### Usage\n```javascript\nthis.el.components['particle-system'].startParticles();\nthis.el.components['particle-system'].stopParticles();\n```\n\n### Browser Installation\n\nInstall and use by directly including the [browser files](dist).\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eA-Frame Particle System Component Example\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"Hello, World!\"\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.2.0/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ca-scene\u003e\n      \u003c!-- Particle system uses 'default' preset, setting custom colors. --\u003e\n      \u003ca-entity position=\"0 2.25 -15\" particle-system=\"color: #EF0000,#44CC00\"\u003e\u003c/a-entity\u003e\n\n      \u003ca-sphere position=\"0 1.25 -1\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n      \u003ca-box position=\"-1 0.5 1\" rotation=\"0 45 0\" width=\"1\" height=\"1\" depth=\"1\"  color=\"#4CC3D9\"\u003e\u003c/a-box\u003e\n      \u003ca-cylinder position=\"1 0.75 1\" radius=\"0.5\" height=\"1.5\" color=\"#FFC65D\"\u003e\u003c/a-cylinder\u003e\n      \u003ca-plane rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"\u003e\u003c/a-plane\u003e\n\n      \u003ca-sky color=\"#000000\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### npm\n\nhttps://www.npmjs.com/package/aframe-particle-system-component\n\n```\nnpm install aframe-particle-system-component\n```\n\n### Local Development\n\n```\nnpm install\nnpm run dev\n```\n\nTo rebuild:\n\n```\nnpm run dist\n```\n\n### Credits\n\nBased on the [ShaderParticleEngine by Squarefeet](https://github.com/squarefeet/ShaderParticleEngine).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIdeaSpaceVR%2Faframe-particle-system-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIdeaSpaceVR%2Faframe-particle-system-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIdeaSpaceVR%2Faframe-particle-system-component/lists"}