Virtual tour in WebVR tutorial using Hotspots

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to use raycasting in WebVR to select objects. Today, we’ll use similar principles to create virtual tour in webvr

Demo | Source

Virtual tour in WebVR using hotspots

In this tutorial, we’ll use RaycasterClock and SphereGeometry to create a hotspots and virtual tour in VR. Once you select the hotspot, based on the time you set, you can navigate to a different panorama.

Adding panoramas in VR

We’ll add one panorama to our default scene and set = true; so that we can update the texture later.

Adding raycaster in VR

We’ll use raycaster that move along with the camera as our cursor for selecting the hotspot.

We also need to add the following in the animate function so that the raycaster updates with camera movement.

Adding hotspots in WebVR

To add hotspots, we’ll use SphereGeometry and then use Raycaster to select the hotspots.

Once our raycaster intersects with the hotspot, we’ll start a scaling animation so that we know it’s being interacted with. A clock is also started, so that, once it hits 2 seconds, we’ll load our new texture. Then the new texture is applied to the sphere material.

The position of the hotspot is randomly changed for this demo. And a new texture is randomly selected each time you try to navigate through the hotspot.

Its your turn

Try adding more panos and textures, and add more hotspots. Create your own virtual tour in WebVR. Don’t forget to share your comments below.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1