A-Frame Rainfall effect component

Last update: Dec 19, 2021

Related tags

Overview

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

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

How to install

$ npm install aframe-rain

How to build

$ npm install
$ npm run all

How to load

require('aframe');
require('aframe-rain');

fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

Oct 28, 2022

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Nov 15, 2022

Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

Dec 27, 2022

:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects 🎉 Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

Sep 25, 2022

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Nov 30, 2022

👓 Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

Dec 23, 2022

Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Jan 4, 2023

Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Dec 21, 2022

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Dec 18, 2022

Comments

Screen goes black in VR mode

When there is rain in the scene and on pressing VR button screen goes black

Example link: https://languid-temperature.glitch.me

Warning in the console: [.WebGL-0xc4d95c00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to draw with all attributes having non-zero divisors

I think there is a problem in the GLSL code of the vertexShader

opened by lazychip 0
Blank white page with A-Frame 0.5.0 on Mac/Firefox
I am using A-Frame 0.5.0 on latest Firefox/Mac. Adding rain to the scene element gives a blank white page:

TypeError: invalid arguments aframe-v0.5.0.js:17127:31

The line of the error

function Uint16BufferAttribute( array, itemSize ) { BufferAttribute.call( this, new Uint16Array( array ), itemSize ); }
opened by crcdng 1
using aframe-rain in safari results in a blank white page

When i try to add the rain parameter to my scene, on safari (desktop and iOS) the page & assets load, but there is just white displayed. I can see the VR button in the lower right, but clicking it does not cause any assets to appear.

opened by webrender 3