{"id":13456484,"url":"https://github.com/creativelifeform/three-nebula","last_synced_at":"2025-05-15T12:00:56.658Z","repository":{"id":37334628,"uuid":"157932493","full_name":"creativelifeform/three-nebula","owner":"creativelifeform","description":"WebGL based particle system engine for three.js","archived":false,"fork":false,"pushed_at":"2023-03-06T15:32:02.000Z","size":16980,"stargazers_count":1025,"open_issues_count":50,"forks_count":83,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-14T19:58:57.759Z","etag":null,"topics":["javascript","particles","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://three-nebula.org/","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/creativelifeform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-11-16T23:27:56.000Z","updated_at":"2025-04-11T17:32:25.000Z","dependencies_parsed_at":"2023-07-18T15:30:46.585Z","dependency_job_id":null,"html_url":"https://github.com/creativelifeform/three-nebula","commit_stats":{"total_commits":372,"total_committers":9,"mean_commits":"41.333333333333336","dds":"0.18817204301075274","last_synced_commit":"b22cd14272b5b64c83b05a3c6ee68f9e924e46f4"},"previous_names":["rohan-deshpande/three-proton"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativelifeform%2Fthree-nebula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativelifeform%2Fthree-nebula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativelifeform%2Fthree-nebula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativelifeform%2Fthree-nebula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creativelifeform","download_url":"https://codeload.github.com/creativelifeform/three-nebula/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"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":["javascript","particles","threejs","webgl"],"created_at":"2024-07-31T08:01:22.858Z","updated_at":"2025-05-15T12:00:56.346Z","avatar_url":"https://github.com/creativelifeform.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries"],"sub_categories":["JavaScript"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://three-nebula.org/\"\u003e\n    \u003cimg alt=\"react-router\" src=\"https://three-nebula.org/favicon/nebula-logo-favicon-master.svg\" width=\"100\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;three-nebula\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;WebGL based 3D particle system engine for \u003ca href=\"https://threejs.org\"\u003ethree\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/creativelifeform/three-nebula/actions?query=workflow%3Aci\"\u003e\u003cimg src=\"https://github.com/creativelifeform/three-nebula/workflows/ci/badge.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/creativelifeform/three-nebula?branch=master\u0026kill_cache=1\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/creativelifeform/three-nebula/badge.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://threejs.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/three-v0.122.0-%230C7BB8\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://spectrum.chat/nebula\"\u003e\u003cimg src=\"https://img.shields.io/badge/spectrum-chat-%237816F9\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n[CHANGELOG](https://github.com/creativelifeform/three-nebula/blob/master/CHANGELOG.md)\n\n**Three Nebula** is a WebGL based 3D particle engine that has been designed to work alongside [`three.js`](https://github.com/mrdoob/three.js). Check out the [website](https://three-nebula.org/), [examples](https://three-nebula.org/examples), the [quickstart sandbox](https://codesandbox.io/s/three-nebula-quickstart-kz6uv) and [API reference documentation](https://three-nebula-docs.netlify.com/) for more.\n\n## Features\n\n- Perfect compatibility with [`three@0.122.0`](https://github.com/mrdoob/three.js)\n- The ability to instantiate `three-nebula` particle systems from JSON objects\n- The ability to create particle systems from sprites as well as 3D meshes\n- Many kinds of particle behaviours and initializers\n\n## Installation\n\n### npm\n\n```\nnpm i --save three-nebula\n```\n\n### script\n\n```\n\u003cscript type='text/javascript' src='node_modules/three-nebula/build/three-nebula.js'\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Module\n\n```javascript\nimport System, {\n  Emitter,\n  Rate,\n  Span,\n  Position,\n  Mass,\n  Radius,\n  Life,\n  Velocity,\n  PointZone,\n  Vector3D,\n  Alpha,\n  Scale,\n  Color,\n} from 'three-nebula';\nimport * as THREE from 'three';\n\nconst system = new System();\nconst emitter = new Emitter();\nconst renderer = new SpriteRenderer(threeScene, THREE);\n\n// Set emitter rate (particles per second) as well as the particle initializers and behaviours\nemitter\n  .setRate(new Rate(new Span(4, 16), new Span(0.01)))\n  .setInitializers([\n    new Position(new PointZone(0, 0)),\n    new Mass(1),\n    new Radius(6, 12),\n    new Life(3),\n    new RadialVelocity(45, new Vector3D(0, 1, 0), 180),\n  ])\n  .setBehaviours([\n    new Alpha(1, 0),\n    new Scale(0.1, 1.3),\n    new Color(new THREE.Color(), new THREE.Color()),\n  ]);\n\n// add the emitter and a renderer to your particle system\nsystem\n  .addEmitter(emitter)\n  .addRenderer(renderer)\n  .emit({ onStart, onUpdate, onEnd });\n```\n\nYou can also instantiate your system from a JSON object\n\n```javascript\nimport System from 'three-nebula';\n\nconst json = {\n  preParticles: 500,\n  integrationType: 'euler',\n  emitters: [\n    {\n      rate: {\n        particlesMin: 5,\n        particlesMax: 7,\n        perSecondMin: 0.01,\n        perSecondMax: 0.02,\n      },\n      position: {\n        x: 70,\n        y: 0,\n      },\n      initializers: [\n        {\n          type: 'Mass',\n          properties: {\n            min: 1,\n            max: 1,\n          },\n        },\n        {\n          type: 'Life',\n          properties: {\n            min: 2,\n            max: 2,\n          },\n        },\n        {\n          type: 'BodySprite',\n          properties: {\n            texture: './img/dot.png',\n          },\n        },\n        {\n          type: 'Radius',\n          properties: {\n            width: 80,\n            height: 80,\n          },\n        },\n      ],\n      behaviours: [\n        {\n          type: 'Alpha',\n          properties: {\n            alphaA: 1,\n            alphaB: 0,\n          },\n        },\n        {\n          type: 'Color',\n          properties: {\n            colorA: '#4F1500',\n            colorB: '#0029FF',\n          },\n        },\n        {\n          type: 'Scale',\n          properties: {\n            scaleA: 1,\n            scaleB: 0.5,\n          },\n        },\n        {\n          type: 'Force',\n          properties: {\n            fx: 0,\n            fy: 0,\n            fz: -20,\n          },\n        },\n      ],\n    },\n    {\n      rate: {\n        particlesMin: 5,\n        particlesMax: 7,\n        perSecondMin: 0.01,\n        perSecondMax: 0.02,\n      },\n      position: {\n        x: -70,\n        y: 0,\n      },\n      initializers: [\n        {\n          type: 'Mass',\n          properties: {\n            min: 1,\n            max: 1,\n          },\n        },\n        {\n          type: 'Life',\n          properties: {\n            min: 2,\n            max: 2,\n          },\n        },\n        {\n          type: 'BodySprite',\n          properties: {\n            texture: './img/dot.png',\n          },\n        },\n        {\n          type: 'Radius',\n          properties: {\n            width: 80,\n            height: 80,\n          },\n        },\n      ],\n      behaviours: [\n        {\n          type: 'Alpha',\n          properties: {\n            alphaA: 1,\n            alphaB: 0,\n          },\n        },\n        {\n          type: 'Color',\n          properties: {\n            colorA: '#004CFE',\n            colorB: '#6600FF',\n          },\n        },\n        {\n          type: 'Scale',\n          properties: {\n            scaleA: 1,\n            scaleB: 0.5,\n          },\n        },\n        {\n          type: 'Force',\n          properties: {\n            fx: 0,\n            fy: 0,\n            fz: -20,\n          },\n        },\n      ],\n    },\n  ],\n};\n\nnew System.fromJSONAsync(json, THREE).then(system =\u003e {\n  console.log(system);\n});\n```\n\n### Script Tag\n\nIf you are adding `three-nebula` to your project in the script tag, the only difference to the above example is how you access the classes you need. You can do that like so\n\n```javascript\nconst { System, Emitter, Rate, Span } = window.Nebula;\nconst system = new System();\n```\n\n## Development\n\n### Sandbox\n\nThe sandbox located in `./sandbox` contains a kind of plain JavaScript bootstrapping framework for testing and experimenting with library changes. The experiments in here are not permanent and will get updated/added/removed from time to time.\n\nBecause of the visual and graphical nature of the library it is sometimes very helpful to have simple barebones examples that allow you to dig into the root cause of an issue or try new things out.\n\nThe sandbox can easily be run via\n\n```\nnpm run sandbox\n```\n\nThis will serve the sandbox at `http://localhost:5000` and you can checkout the various experiments in the browser. It will also auto rebuild the library code and push the rebuilt bundle to the sandbox so all you need to do in order to see your changes is to refresh the browser.\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativelifeform%2Fthree-nebula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativelifeform%2Fthree-nebula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativelifeform%2Fthree-nebula/lists"}