Raining Experience in VR Tutorial Using Three.js and WebVR

This is part of #DaysInVR series. View All VR Projects

Yesterday, we learnt how to create a snow effect in VR on top of photos or videos.

Rainfall in WebVR

Demo | Source

In this tutorial, we’ll see how to create raining effect in VR complete with sound. I’m using Three.js and WebVR api to create this project.

Add 360 Photo

We’re going to use MeshLambertMaterial instead of MeshBasicMaterial to add our 360 photo. This is because MeshLambertMaterial because this material reacts to light in the scene.

That way we can control the intensity of the image displayed. In the demo, I used this effect to make the environment a little darker suitable for raining weather.

Adding Rainfall in WebVR

I’m using the excellent ShaderParticleEngine to generate the raindrops.

There are two main parts in SPE.

  1. SPE.Group
  2. SPE.Emitter

SPE.Group is used to create a particle group. SPE.Emitter is used to create the emitter. Emitter is then added to the particle group. Any number of emitters can be added to a group. All the emitters will then share the same attribute buffers for rendering.

You can try changing the parameters and see how it affects the rain effect.

Adding sound effects in Three.js

We can use Web Audio API to add the rain sound effects in our VR project.

This is simple with inbuilt Three.js functions.

For VR mode to be enabled, you’ll have to add VRControls, VR Effects and webvr-ui. If you have any trouble setting that up, check the day 1 tutorial.

Its your turn

Did you follow the tutorial and made it yourself? If you have any trouble, refer to the full source. And don’t forget to subscribe so that you won’t miss any updates.


Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1