https://github.com/dougreeder/aframe-dust-component

A cloud of particles surrounding the user for visual motion indication, or atmosphere. For A-Frame WebVR.
https://github.com/dougreeder/aframe-dust-component

a-frame pointcloud webvr webvr-aframe

Last synced: about 2 months ago
JSON representation

A cloud of particles surrounding the user for visual motion indication, or atmosphere. For A-Frame WebVR.

• Host: GitHub
• URL: https://github.com/dougreeder/aframe-dust-component
• Owner: DougReeder
• License: mit
• Created: 2018-07-27T14:48:52.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-07T00:06:43.000Z (5 months ago)
• Last Synced: 2024-10-07T16:37:00.372Z (3 months ago)
• Topics: a-frame, pointcloud, webvr, webvr-aframe
• Language: JavaScript
• Homepage:
• Size: 570 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
aframe-dust-component

===

An [A-Frame](https://aframe.io/) [WebXR](https://immersiveweb.dev/) 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](sample.png)

[live example scene](https://dougreeder.github.io/aframe-dust-component/example.html) - use WASD + mouse to look around

Used in [Elfland Glider](https://dougreeder.github.io/elfland-glider/)

Basic Usage

---

```html

```

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:

```javascript

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

---

```html

```

```javascript

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**