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.
| 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 |
To apply Rain effect in a scene, add rain attribute in <a-scene> like <a-scene rain>.
<head>
<script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.min.js"></script>
<script src="https://rawgit.com/takahirox/aframe-rain/master/build/aframe-rain.min.js"></script>
</head>
<body>
<a-scene rain>
<a-entity position="0 0 10">
<a-camera></a-camera>
</a-entity>
<a-entity geometry="primitive:sphere"></a-entity>
<a-sky color="#222"></a-sky>
<a-entity light="type:directional;color:#666" position="-10 -10 -10"></a-entity>
</a-scene>
</body>$ npm install aframe-rain
$ npm install
$ npm run all
require('aframe');
require('aframe-rain');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent