Bubble effect in VR – Using environment maps in WebVR 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 shark attack in VR using objects. Today, we’ll see how to create bubble effect in VR using environment maps.

In this tutorial, we’ll add a 360 photo into our scene and the use environment mapping to create the bubble effect.

Adding 360 photos in WebVR

To add 360 photos to our scene, we’ll use SphereGeometry with MeshBasicMaterial with the photo as a texture. We’ll then place the camera inside the sphere. This allows us to look around freely.

Using environment maps in WebVR

The bubbles are created using SphereGeometry and a material with the environment map that we need. We’ll also setup the texture mapping to EquirectangularRefractionMapping. We’ll set the environment map using the envMap property of the material.

To move the bubbles in 3d space, we have to add the following code to the animate function.

This will change the position of the bubbles in x and y directions.

Its your turn

Add bubble effect to your 360 photo. Set the environment map and see what you can come up with.

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