aframe-dust-component

    1.0.5 • Public • Published

    aframe-dust-component

    An A-Frame WebVR 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.

    sample screenshot

    live example scene - use WASD + mouse to look around

    Used in Elfland Glider

    Basic Usage

    <script src="https://unpkg.com/aframe-dust-component@^1.0.4/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);
    });
     

    Advanced Usage

    <script src="https://unpkg.com/aframe-dust-component@^1.0.4/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);
    });
     

    Properties

    color

    CSS color of particles; default gray

    num-points

    The number of particles; default 128

    dispersion

    How close the particles will stay to the user, in meters; default 100

    point-size

    The size of particles, in pixels; default 1

    Install

    npm i aframe-dust-component

    DownloadsWeekly Downloads

    4

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    1.39 MB

    Total Files

    20

    Last publish

    Collaborators

    • dougreeder