Hotspots in WebVR – Create virtual tours in VR tutorial

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 hotspots in webvr

Demo | Source

Hotspots in WebVR

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 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.

Get all updates
We respect your privacy.

Follow me

Rison

Building Viewport to help developers to build VR apps easily.
Follow me

Latest posts by Rison (see all)

Leave a Reply