Creating a virtual tour in VR using paths – WebVR tutorial

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.

Demo | Source

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.

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.

We can use the drawPath function to visualise the path.

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.

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.

Leave a Reply

Send Lesson #1
Join over 100s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP