Shark Attack in VR – Using objects and shaders in WebVR tutorial
In this tutorial, we’ll see how to create shark attack in WebVR using objects and shaders in WebVR. We’ll use OBJLoader and MTLLoader to load the shark object. We’ll be using the shark object from tf3dm website.
Loading objects in WebVR
We have used objects in our fireplace in webvr tutorial. However, in this tutorial, the objects are in different format. So we’ll be using OBJLoader and MTLLoader.
This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create virtual tour in VR. Today we’ll see how to create shark attack in VR.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('/projects/day26/'); mtlLoader.setTexturePath('/projects/day26/'); mtlLoader.load('Shark.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('/projects/day26/'); objLoader.load('Shark.obj', function(object) { shark = object; object.position.y = -1.5; object.position.z = -100; object.add(sound); scene.add(object); animate(); }); }); |
We need to add the following code to animate function so that the shark object keeps moving. It’ll change the position of the shark object.
|
1 2 3 4 5 6 7 |
shark.position.z += 0.1; if (shark.position.z > 0 && shark.position.z < 15 || shark.position.z > -15) { shark.position.z = Math.floor(Math.random() * -100) + -50 ; shark.position.x = Math.floor(Math.random() * -100) + -50 ; } |
Using shaders to create water
We’ll use WaterShader to create the water where our shark will move around in.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var loader = new THREE.TextureLoader(); var waterNormals = loader.load( '/projects/day23/waternormals.jpg' ); waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; waterNormals.repeat.set(160, 160); var water = new THREE.Water( renderer, camera, scene, { textureWidth: 512, textureHeight: 512, waterNormals: waterNormals, alpha: 1.0, sunDirection: light.position.clone().normalize(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 50.0 }); var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, water.material); plane.add(water); plane.receiveShadow = true; plane.rotation.x = -0.5 * Math.PI; scene.add(plane); |
Adding positional audio in WebVR
We’ll also add the jaws soundtrack to our scene. We’ll position the sound to be coming from the shark itself.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Create an AudioListener and add it to the camera var listener = new THREE.AudioListener(); camera.add( listener ); //Create the PositionalAudio object (passing in the listener) var sound = new THREE.PositionalAudio( listener ); //Load a sound and set it as the PositionalAudio object's buffer var audioLoader = new THREE.AudioLoader(); audioLoader.load('jaws_x.wav', function( buffer ) { sound.setBuffer( buffer ); sound.setRefDistance( 30 ); sound.setLoop(true); }); |
Its your turn
Make this demo better. Adding a realistic swimming motion for the shark. Add more randomness to the position of the shark. Let us know what you come up with in the comments.
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