Virtual tour in WebVR tutorial using Hotspots

Virtual tour in WebVR using hotspots

In this tutorial, we’ll use Raycaster, Clock 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.

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

Adding panoramas in VR

We’ll add one panorama to our default scene and set material.map.needsUpdate = 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.