Virtual Reality Image Gallery With Lighting Effects Tutorial


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

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
150$ for all 3 courses (SAVE 70%)

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.

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

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Get instant access for $39

Leave a Reply

Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link
Own the course that helped 6000+ developers find VR jobs.
GET FREE LESSON

Get your Free Lesson now. 

We shall send you an email with the link to the best starter lesson in 5 minutes
close-link