Creating a virtual tour in VR using paths – WebVR tutorial
In this tutorial, we’ll create a custom walk through of a house by moving our camera along a Path.
Adding object in VR
We’ll first add the object that we have to the scene. Adding objects is something that we have seen in car showcase in VR tutorial also. Here, we’ll be using OBJLoader and MTLLoader to add our object from Walk About Worlds.
This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to use use lines in WebVR to create a hyperspeed travel effect in VR. Today we’ll see how to create virtual tour in VR with a model created using Walkabout Worlds.
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 20 21 22 23 24 |
var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('/projects/day25/'); mtlLoader.setTexturePath('/projects/day25/'); mtlLoader.setMaterialOptions({ side: THREE.DoubleSide, wrap: THREE.ClampToEdgeWrapping }); mtlLoader.load('test1.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('/projects/day25/'); objLoader.load('test1.obj', function(object) { object.position.y = 1; object.position.z = 2; object.position.x = -5; object.name = 'house'; scene.add(object); animate(object); }); }); |
Virtual Tour in VR
We’ll define a path to move around the house. Then move the camera along that path. That way, the user can sit down and still view the entire house. Using Path we define the path for the camera to move.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var path = new THREE.Path([ new THREE.Vector3(), new THREE.Vector3(0, controls.userHeight, 2), new THREE.Vector3(-5, controls.userHeight, 2), new THREE.Vector3(-5, 0.3, 4), new THREE.Vector3(-7, 0.3, 4), new THREE.Vector3(-7, -1, 4), new THREE.Vector3(-9, -1, 4), new THREE.Vector3(-7, -1, 4), new THREE.Vector3(-7, 0.3, 4), new THREE.Vector3(-5, 0.3, 4), new THREE.Vector3(-5, 3.5, -2), new THREE.Vector3(-9, 3.5, -2), new THREE.Vector3(-9, 4.5, -2), new THREE.Vector3(-9, 3.5, -2), new THREE.Vector3(-5, 3.5, -2), new THREE.Vector3(-5, controls.userHeight, 2), new THREE.Vector3(0, controls.userHeight, 2), ]); |
We can use the drawPath function to visualise the path.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function drawPath() { var point; var vertices = path.getSpacedPoints(10); // Change 2D points to 3D points for (var i = 0; i < vertices.length; i++) { point = vertices[i] vertices[i] = new THREE.Vector3(point.x, -15, point.y); } var lineGeometry = new THREE.Geometry(); lineGeometry.vertices = vertices; var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff }); var line = new THREE.Line(lineGeometry, lineMaterial) scene.add(line); } |
The move function is responsible for setting the position of the camera. It should be called from animate function. Once the position reached end of the path, we reverse the direction.
|
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 27 28 29 30 |
var direction = 'forward'; function move() { // get the point at position var point = path.getPointAt(position); if (direction === 'forward') { // add up to position for movement position += 0.0005; if (!point) { direction = 'backward'; position -=0.001; point = path.getPointAt(position); } } else { position -= 0.0005; if (!point) { direction = 'forward'; position += 0.001; point = path.getPointAt(position); } } if (point) { camera.position.x = point.x; camera.position.z = point.y; } } |
The final result can be viewed here.
Its your turn
Let us know what you think. Don’t forget to share your experiences 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
Get your Free Lesson now.
Leave a Reply