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.

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
Add Me To VIP
Join 1000s of VR Developers

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

Send Lesson #1
We've launched a WebVR Course with 25+ projects with source code! Check it out.
Get The Course