Snowing in Virtual Reality – Using three.js and WebVR

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.

Snowing Effect in WebVR

Demo | Source

Like the other projects in this series, I’m using Three.js and WebVR to create this project.

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.

Then we add it to our scene.

In the animate function, we’re adding rotation to our Points so that the snowflakes are moving.

We’re also adding a slight color change to our snowflakes so it adds to the effect.

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. You can check the full source for reference.

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