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
Get your Free Lesson now.
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.
|
1 2 3 4 5 6 7 8 |
var loader = new THREE.TextureLoader(); var texture = new THREE.TextureLoader().load('/common/pano.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, controls.userHeight, -1); scene.add(mesh); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var bubbleGeometry = new THREE.SphereGeometry(3, 60, 60); texture.mapping = THREE.EquirectangularRefractionMapping; var material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: texture, refractionRatio: 0.95 } ); for ( var i = 0; i < 1500; i ++ ) { var mesh = new THREE.Mesh( bubbleGeometry, material1 ); mesh.position.x = Math.random() * 50 - 15; mesh.position.y = Math.random() * 50 - 15; mesh.position.z = Math.random() * 1000 - 500; mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 5 + 1; scene.add(mesh); spheres.push(mesh); } |
To move the bubbles in 3d space, we have to add the following code to the animate function.
|
1 2 3 4 5 6 7 8 |
var timer = 0.0001 * Date.now(); for ( var i = 0, len = spheres.length; i < len; i ++ ) { var sphere = spheres[i]; sphere.position.x = 500 * Math.cos( timer + i ); sphere.position.y = 500 * Math.sin( timer + i * 1.1 ); } |
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
Get your Free Lesson now.
Leave a Reply