Virtual Reality Image Gallery With Lighting Effects Tutorial

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

Yesterday, we learnt how to create raining effect in VR on top of photos or videos along with sound.

VR Image Gallery

In this tutorial, we’ll see how to create VR image gallery with lighting effects which you can customize.

For this to work, we have to add two items to our VR scene. We have to add our photos and we have add our lighting.

Adding photos in VR

We’re going to use BoxGeometry and MeshLambertMaterial to create our scene. We have used MeshLambertMaterial in our last tutorial to create a rainy VR scene. This type of material will reflect light. We’ll use this property to create some cool light effects later.

Adding light to our scene

Next, we have to add light to our scene. If you ran the project without adding any light to the scene, you’ll notice nothing can be seen. This is because, MeshLambertMaterial will only be visible with light. Try changing the material to MeshBasicMaterial and you can see the images without adding any light. But you can’t add any light effects either, because it doesn’t react to light.

We’re using PointLight to illuminate our scene. PointLight will emit light in all directions. As you can see from the code, we’re adding 3 PointLights with different colors to our scene.

For adding some color changing effects, we’re going to change the intensity of some lights along with time.

The above code has to be added to your animate() function. When it is run, light1 and light2 intensity will be changing along a sine curve. The combined effect of all the lights gives us the cool effect we see in the demo. You can try changing the values and see what effects you can come up with.

Its your turn

Try adding your own pictures or pull images from Twitter and Instagram and make a VR image gallery. Add effects of your own with lights. Share your creation in the comments below.