{"id":16579534,"url":"https://github.com/mkkellogg/photons2","last_synced_at":"2025-10-29T05:31:26.195Z","repository":{"id":193379702,"uuid":"682825964","full_name":"mkkellogg/Photons2","owner":"mkkellogg","description":"Particle System for Three.js","archived":false,"fork":false,"pushed_at":"2024-03-09T10:02:00.000Z","size":45434,"stargazers_count":16,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-03-20T03:48:42.596Z","etag":null,"topics":["particle-system","particles","threejs","webgl"],"latest_commit_sha":null,"homepage":"","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/mkkellogg.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}},"created_at":"2023-08-25T01:13:59.000Z","updated_at":"2024-03-13T12:40:34.000Z","dependencies_parsed_at":"2023-09-27T07:33:25.705Z","dependency_job_id":null,"html_url":"https://github.com/mkkellogg/Photons2","commit_stats":{"total_commits":114,"total_committers":1,"mean_commits":114.0,"dds":0.0,"last_synced_commit":"79d1da4c26d36dda309b218b784256f39ff635fe"},"previous_names":["mkkellogg/photons2"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FPhotons2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FPhotons2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FPhotons2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FPhotons2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkkellogg","download_url":"https://codeload.github.com/mkkellogg/Photons2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219858328,"owners_count":16556046,"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":["particle-system","particles","threejs","webgl"],"created_at":"2024-10-11T22:18:19.059Z","updated_at":"2025-10-29T05:31:17.616Z","avatar_url":"https://github.com/mkkellogg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Photons 2 - JavaScript Particle System for Three.js\n\n![screenshot](./demo/assets/images/example.gif)\n \nBasic particle system for the Three.js 3D graphics library implemented in JavaScript. This is a sequel/complete rewrite of Photons (https://github.com/mkkellogg/Photons), my original particle system for Three.js.\n\n**This is very much a work in progress!**\n\nThis implementation exposes typical physical attributes for each particle: \n\n  - Position\n  - Velocity\n  - Acceleration\n  - Rotation\n  - Rotational speed\n  - Rotational acceleration\n        \nThis implementation also exposes display attributes:\n\n  - Color\n  - Size\n  - Opacity \n  - Texture\n\nAn \"Initializer\" can be assigned to each of the attributes mentioned above in order to initialize a particle to a desired state when it is created. \n\nAn \"Operator\" can be assigned to each attribute to vary its value over the lifetime of the particle.\n\nThe current implementation also supports the concept of a texture atlas (spritesheet) so particle textures can be animated.\n\nThe repository includes demo pages in the `/demo` folder and the core of the relevant demo code is in folders under `demo/js/scene`.\n\n**Demo:** The particle system can be seen in action [here](http://projects.markkellogg.org/threejs/demo_particle_system.php).\n\n\n# Installation\n\nTo install all necessary node modules:\n\n`npm install`\n\nTo run the demo locally:\n\n`npm run demo`\n\n\n# Sample code\n\nTo set up a particle system:\n\n```javascript\nimport * as Photons from './lib/photons.module.js';\nimport * as THREE from 'three';\n\n// Create atlas, in this case it only contains a single image\nconst texturePath = 'assets/textures/ember.png';\nconst embersTexture = new THREE.TextureLoader().load(texturePath);\nconst embersAtlas = new Photons.Atlas(embersTexture, texturePath);\nembersAtlas.addFrameSet(1, 0.0, 0.0, 1.0, 1.0);\n\n// Create the renderer and pass to the particle system during construction. The particle system will perform\n// additional initialization on the renderer.\nconst embersRenderer = new Photons.AnimatedSpriteRenderer(true, embersAtlas, true, THREE.AdditiveBlending);\n\n// Create the base parent object for the particle system\nconst embersRoot = new THREE.Object3D();\n\n// Create and initialize the particle system\nconst embersParticleSystem = new Photons.ParticleSystem(embersRoot, embersRenderer, this.renderer);\nembersParticleSystem.setSimulateInWorldSpace(true);\nembersParticleSystem.init(150);\n\n// Set the emitter properties\nembersParticleSystem.setEmitter(new Photons.ConstantParticleEmitter(6));\n\n// Set up particle initializers\nconst sizeInitializerGenerator = new Photons.RandomGenerator(THREE.Vector2,\n    new THREE.Vector2(0.0, 0.0),\n    new THREE.Vector2(0.15, 0.15),\n    0.0, 0.0, false);\nembersParticleSystem.addParticleStateInitializer(new Photons.LifetimeInitializer(3.0, 1.0, 0.0, 0.0, false));\nembersParticleSystem.addParticleStateInitializer(new Photons.SizeInitializer(sizeInitializerGenerator));\nembersParticleSystem.addParticleStateInitializer(new Photons.BoxPositionInitializer(\n    new THREE.Vector3(0.05, 0.0, 0.05),\n    new THREE.Vector3(-0.025, 0.0, -0.025)));\nembersParticleSystem.addParticleStateInitializer(new Photons.RandomVelocityInitializer(\n    new THREE.Vector3(0.4, 0.5, 0.4),\n    new THREE.Vector3(-0.2, 0.8, -0.2),\n    0.6, 0.8));\n\n// Set up particle operators\nconst embersOpacityOperator = embersParticleSystem.addParticleStateOperator(new Photons.OpacityInterpolatorOperator());\nembersOpacityOperator.addElements([\n    [0.0, 0.0],\n    [0.7, 0.25],\n    [0.9, 0.75],\n    [0.0, 1.0]\n]);\n\nconst embersColorOperator = embersParticleSystem.addParticleStateOperator(new Photons.ColorInterpolatorOperator(true));\nembersColorOperator.addElementsFromParameters([\n    [[1.0, 0.7, 0.0], 0.0],\n    [[1.0, 0.6, 0.0], 0.5],\n    [[1.0, 0.4, 0.0], 1.0]\n]);\n\nconst acceleratorOperatorGenerator = new Photons.SphereRandomGenerator(Math.PI * 2.0, 0.0, Math.PI,\n    -Math.PI / 2, 20.0, -8,\n    1.0, 1.0, 1.0,\n    0.0, 0.0, 0.0);\n\nembersParticleSystem.addParticleStateOperator(new Photons.AccelerationOperator(acceleratorOperatorGenerator));\n\n// Start particle system\nembersParticleSystem.start();\n\nreturn embersParticleSystem;\n```\n\nTo update and render a particle system (called every frame):\n\n```javascript\nembersParticleSystem.update();\nembersParticleSystem.render(threeRenderer, threeCamera);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkkellogg%2Fphotons2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkkellogg%2Fphotons2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkkellogg%2Fphotons2/lists"}