Snowing in Virtual Reality – Using three.js and WebVR
Snowing Effect in WebVR
Like the other projects in this series, I’m using Three.js and WebVR to create this project.
This is part of #DaysInVR series. View All VR Projects
Yesterday, we learnt how to create a movie theatre in VR to show any video.
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.
If you haven’t seen the demo yet, check that out first. We’ll be setting up snow effect for 360 images. The process is same even for 360 videos.
Adding 360 Photo
We’re adding two items to our scene. One if for the 360 photo, and the other is our effect. Basically, we’re layering our snow effect on top of the 360 photo.
The process for adding 360 photo is same as in the previous tutorial. If you have any trouble in that, check out how to view 360 photo in VR.
Once its done, you should be able to view 360 images in VR. You can also try it with 360 videos.
How to add snow effect in VR
Next, we have to add our snow effect. We’re using a separate Geometry and Material for the effect. And for our snowflakes, we’re using PointsMaterial with our custom texture to create our effect.
We’re loading our textures and then mapping it to our material.
|
1 2 3 4 5 |
var snowSprite1 = textureLoader.load('snowflake1.png'); sprite = snowSprite1 materials[i] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } ); |
Then we add it to our scene.
|
1 2 3 |
scene.add( particles ); |
In the animate function, we’re adding rotation to our Points so that the snowflakes are moving.
|
1 2 3 4 5 6 7 8 |
for (i = 0; i < scene.children.length; i ++) { var object = scene.children[i]; if (object instanceof THREE.Points) { object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) ); } } |
We’re also adding a slight color change to our snowflakes so it adds to the effect.
|
1 2 3 4 5 6 7 |
for (var i = 0; i < materials.length; i ++) { color = parameters[i][0]; h = (360 * (color[0] + time) % 360) / 360; materials[i].color.setHSL( h, color[1], color[2] ); } |
Now, once you run the project again, you’ll be able to see the 360 photo along with the snowing effect.
You can try to customize the effect by changing the values. You’ll be able to see how it affects the movement of the snowflakes.
Its your turn
Make your version of snowing with a 360 photo and share them in the comments below.
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