An A-Frame WebXR component that surrounds the user with a cloud of particles. As the user moves, particles from behind the user respawn in front (so you don't have to fill the whole space with particles).
This provides visual feedback on the user's motion, which is useful when flying or moving in unearthly spaces.
Can also be used to add atmosphere - pink fairy lights for a paradise, black ash for a hellscape.
The performance cost is modest, unless you use tens of thousands of particles.
live example scene - use WASD + mouse to look around
Used in Elfland Glider
<script src="https://unpkg.com/aframe-dust-component@^1.1.0/aframe-dust-component.js"></script>
<a-dust></a-dust>Leave the position at 0 0 0, and place the dust as a direct child of the scene.
You should explicitly set a camera (or a "vehicle" that contains the camera)
in some init function:
let cameraEl = sceneEl.querySelector('[camera]');
let dustEl = sceneEl.querySelector('a-dust');
// delays setup until there's some slack time (for Safari or Edge, you'll need to polyfill requestIdleCallback)
requestIdleCallback( () => {
dustEl.components.dust.setCamera(cameraEl);
});<script src="https://unpkg.com/aframe-dust-component@^1.1.0/aframe-dust-component.js"></script>
<a-dust num-points="24576" dispersion="200" color="black" point-size="4"></a-dust>let cameraEl = sceneEl.querySelector('[camera]');
let dustEl = sceneEl.querySelector('a-dust');
// delays setup until there's some slack time (for Safari or Edge, you'll need to polyfill requestIdleCallback)
requestIdleCallback( () => {
dustEl.components.dust.setCamera(cameraEl);
});CSS color of particles; default gray
The number of particles; default 128
How close the particles will stay to the user, in meters; default 100
The size of particles, in pixels; default 1