Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takahirox/aframe-rain
A-Frame Rainfall effect component
https://github.com/takahirox/aframe-rain
Last synced: about 1 month ago
JSON representation
A-Frame Rainfall effect component
- Host: GitHub
- URL: https://github.com/takahirox/aframe-rain
- Owner: takahirox
- License: mit
- Created: 2017-02-06T06:14:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-23T19:52:45.000Z (almost 8 years ago)
- Last Synced: 2024-04-23T20:16:00.039Z (8 months ago)
- Language: JavaScript
- Homepage: https://cdn.rawgit.com/takahirox/aframe-rain/v1.0.2/index.html
- Size: 94.7 KB
- Stars: 41
- Watchers: 4
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-web-effect - aframe-rain - aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing technique with good performance. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)
- awesome-web-effect - aframe-rain - aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing technique with good performance. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)
README
# A-Frame Rain component
aframe-rain is Rainfall effect component for A-Frame which displays a lot of
rain drop/splash objects by using instancing technique with good performance.
Closer rain drop height is shorter and further rain drop is more transparent,
implemented similar to Fog effect technique.
## Demo
[Demo](https://cdn.rawgit.com/takahirox/aframe-rain/v1.0.2/index.html)
## Properties
### aframe-rain
| Properties | type | Default Value | Description |
| ------------- | ------- | ------------- | ----------- |
| color | color | '#ddf' | Rain drop/splash color |
| count | int | 5000 | The number of drops/splashes |
| depthDensity | number | 0.05 | Depth density which affects rain drop height/opacity. The name is from Fog density |
| dropHeight | number | 1.0 | Rain drop height |
| dropRadius | number | 0.005 | Rain drop radius |
| height | number | 30.0 | How high rain drops fall from |
| opacity | number | 0.4 | Rain drop/splash opacity |
| splash | boolean | true | If displays rain splash on ground |
| splashBounce | number | 4.0 | Rain splash bound strongness |
| splashGravity | number | 9.8 * 4.0 | Rain splash gravity |
| vector | vec3 | '0, -40.0 0' | Rain drop vector. y must be < 0.0 |
| width | number | 30.0 | Area where rain drop/sphash effect |
## Browser
### How to use
To apply Rain effect in a scene, add `rain` attribute in `` like ``.
```html
```
## NPM
### How to install
```
$ npm install aframe-rain
```
### How to build
```
$ npm install
$ npm run all
```
### How to load
```
require('aframe');
require('aframe-rain');
```