{"id":18744591,"url":"https://github.com/dougreeder/aframe-dust-component","last_synced_at":"2026-02-11T10:33:02.782Z","repository":{"id":57174173,"uuid":"142589764","full_name":"DougReeder/aframe-dust-component","owner":"DougReeder","description":"A cloud of particles surrounding the user for visual motion indication, or atmosphere. For A-Frame WebVR.","archived":false,"fork":false,"pushed_at":"2024-08-07T00:06:43.000Z","size":584,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T16:13:21.121Z","etag":null,"topics":["a-frame","pointcloud","webvr","webvr-aframe"],"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/DougReeder.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-07-27T14:48:52.000Z","updated_at":"2024-08-07T00:06:46.000Z","dependencies_parsed_at":"2022-08-24T13:31:04.981Z","dependency_job_id":null,"html_url":"https://github.com/DougReeder/aframe-dust-component","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"17f77d9e5fa4fa97a659e0d4f40cc2e3a0150560"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-dust-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-dust-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-dust-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-dust-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DougReeder","download_url":"https://codeload.github.com/DougReeder/aframe-dust-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636192,"owners_count":21137396,"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":["a-frame","pointcloud","webvr","webvr-aframe"],"created_at":"2024-11-07T16:15:22.656Z","updated_at":"2026-02-11T10:33:02.775Z","avatar_url":"https://github.com/DougReeder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"aframe-dust-component\n===\n\nAn [A-Frame](https://aframe.io/) [WebXR](https://immersiveweb.dev/) component that surrounds the user\nwith a cloud of particles.\nAs the user moves, particles from behind the user respawn in front\n(so you don't have to fill the whole space with particles).\n\nThis provides visual feedback on the user's motion, which is useful when flying or\nmoving in unearthly spaces.\n\nCan also be used to add atmosphere - pink fairy lights for a paradise,\nblack ash for a hellscape.\n\nThe performance cost is modest, unless you use tens of thousands of particles.\n\n![sample screenshot](sample.png)\n\n[live example scene](https://dougreeder.github.io/aframe-dust-component/example.html) - use WASD + mouse to look around\n\nUsed in [Elfland Glider](https://dougreeder.github.io/elfland-glider/)\n\nBasic Usage\n---\n```html\n\u003cscript src=\"https://unpkg.com/aframe-dust-component@^1.1.0/aframe-dust-component.js\"\u003e\u003c/script\u003e\n\n\u003ca-dust\u003e\u003c/a-dust\u003e\n```\nLeave the position at 0 0 0, and place the dust as a direct child of the scene.\n\nYou should explicitly set a camera (or a \"vehicle\" that contains the camera)\nin some `init` function:\n```javascript\nlet cameraEl = sceneEl.querySelector('[camera]');\nlet dustEl = sceneEl.querySelector('a-dust');\n\n// delays setup until there's some slack time (for Safari or Edge, you'll need to polyfill requestIdleCallback)\nrequestIdleCallback( () =\u003e {\n\tdustEl.components.dust.setCamera(cameraEl);\n});\n\n```\n\n\nAdvanced Usage\n---\n```html\n\u003cscript src=\"https://unpkg.com/aframe-dust-component@^1.1.0/aframe-dust-component.js\"\u003e\u003c/script\u003e\n\n\u003ca-dust num-points=\"24576\" dispersion=\"200\" color=\"black\" point-size=\"4\"\u003e\u003c/a-dust\u003e\n```\n\n```javascript\nlet cameraEl = sceneEl.querySelector('[camera]');\nlet dustEl = sceneEl.querySelector('a-dust');\n\n// delays setup until there's some slack time (for Safari or Edge, you'll need to polyfill requestIdleCallback)\nrequestIdleCallback( () =\u003e {\n\tdustEl.components.dust.setCamera(cameraEl);\n});\n\n```\n\nProperties\n---\n\n### color\nCSS color of particles; default **gray**\n\n### num-points\nThe number of particles; default **128**\n\n### dispersion\nHow close the particles will stay to the user, in meters; default **100**\n\n### point-size\nThe size of particles, in pixels; default **1**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-dust-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdougreeder%2Faframe-dust-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-dust-component/lists"}