VR Interface in WebVR tutorial

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create bubble effect in VR. Today we’ll see how to create a VR interface in WebVR.

Demo | Source

In this tutorial, we’ll see how to create a VR interface in WebVR. We’ll be using PlaneGeometry and Raycaster to create the VR interface menu.

VR Interface in WebVR

We’ll use PlaneGeometry to create the menu interface in VR. We’ll load the file names for thumbnail and panorama from a JSON file.

We’ll use Reticulum for creating our gaze based interface.

Once we initialize it, we’ll create the pano items for the menu. Each pano in the list is added. The thumbnail is loaded as the texture of the plane. The url of the panorama is added in userData object. When the user gazes at the thumbnail for the set duration, the pano is fetched and loaded.

Its your turn

Add more panoramas to the list and create a horizontal menu. Don’t forget to share what you made in the comments.

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