Raining Experience in VR Tutorial Using Three.js and WebVR
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Get your Free Lesson now.
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
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.
|
1 2 3 4 5 6 |
var material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide }); var light = new THREE.AmbientLight( 0x848484 ); scene.add( light ); |
Adding Rainfall in WebVR
I’m using the excellent ShaderParticleEngine to generate the raindrops.
There are two main parts in SPE.
SPE.GroupSPE.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
var particleGroup = new SPE.Group({ texture: { value: rainTexture }, fog: true }); var emitter = new SPE.Emitter({ maxAge: { value: 5 }, position: { value: new THREE.Vector3(0, 5, 0), spread: new THREE.Vector3(9, 0, 9) }, acceleration: { value: new THREE.Vector3(0, -5, 0), }, velocity: { value: new THREE.Vector3(0, -5, 0), spread: new THREE.Vector3(0.5, -0.01, 0.2) }, color: { value: [ new THREE.Color(0x5196d8)] }, opacity: { value: [0.8, 0.8] }, rotation: { value: [-1, -10] }, size: { value: [0.05, - 0.01], spread: [0.05, 0.1] }, activeMultiplier: 0.5, particleCount: 30000 }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var audioListener = new THREE.AudioListener(); camera.add(audioListener); var sound = new THREE.Audio(audioListener); var audioLoader = new THREE.AudioLoader(); audioLoader.load('rain.mp3', function(buffer) { sound.setBuffer(buffer); sound.setLoop(true); sound.setVolume(0.5); sound.play(); }); |
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?
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Download Source Code
Get your Free Lesson now.
Leave a Reply