Lensflare in VR Tutorial – Add lensflare to your 360 photos or 360 videos
Lensflare in VR
Creating lensflare is simpler than you think. We’ll be creating a VR scene with a 360 photo and positioning our lensflare where we want.
This is part of #DaysInVR series. View All VR Projects. Yesterday we saw how to create fireplace in WebVR by adding 360 photos, objects and shaders in WebVR. Today we’ll learn how to add lensflare in VR scene.
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.
Adding 360 photo in VR
On day 1 of 30 VR projects in 30 days, we saw how to add 360 photos in vr. We’ll use the same technique to add 360 photos into our scene. You can also add a 360 video to VR.
|
1 2 3 4 5 |
var texture = new THREE.TextureLoader().load('/common/pano.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); |
Adding Lensflare in VR
To add lensflare to your scene, we’ll be using the native THREE.LensFlare to create our lensflare.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var textureLoader = new THREE.TextureLoader(); var textureFlare0 = textureLoader.load( "lensflare0.png" ); var textureFlare2 = textureLoader.load( "lensflare2.png" ); var textureFlare3 = textureLoader.load( "lensflare3.png" ); function addLight( h, s, l, x, y, z ) { var light = new THREE.PointLight( 0xffffff, 1.5, 2000 ); light.color.setHSL( h, s, l ); light.position.set( x, y, z ); scene.add( light ); var flareColor = new THREE.Color( 0xffffff ); flareColor.setHSL( h, s, l + 0.5 ); var lensFlare = new THREE.LensFlare( textureFlare0, 700, 0.0, THREE.AdditiveBlending, flareColor ); lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending ); lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending ); lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending ); lensFlare.add( textureFlare3, 60, 0.6, THREE.AdditiveBlending ); lensFlare.add( textureFlare3, 70, 0.7, THREE.AdditiveBlending ); lensFlare.add( textureFlare3, 120, 0.9, THREE.AdditiveBlending ); lensFlare.add( textureFlare3, 70, 1.0, THREE.AdditiveBlending ); lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position.copy( light.position ); scene.add( lensFlare ); } |
Now we can position our light anywhere we want by using its x, y, z coordinates. After figuring out where you want the lensflare to go up, use the addLight function to add the lensflare.
|
1 2 3 |
addLight( 0.995, 0.5, 0.9, 15, 5, 14 ); |
If you look around the scene now, you’ll be able to see lensflare in VR.
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