WebVR is a set of APIs that lets the websites render content to VR headsets, such as the HTC Vive, Oculus Rift, Google Cardboard or OSVR in a web browser. The term “WebVR” came into existence in late 2014. The Mozilla team was the first one to coin the term. They proved that WebVR and Firefox are apt to deliver a low-friction VR experience. Installing-free VR experience built on an open web stack was made accessible then. They further moved on to create easy VR authoring sites. This made creating VR on the web an easy task. Thus a framework for building VR experiences- A frame was decided upon. It was built on Three.js (3D JavaScript for engines and libraries). On March 1, 2016, when Mozilla along with the collaboration of Google Chrome, announced the launch of version 1.0, WebVR AP
This is a prototype project to explore world of VR in web using A-Frame.
A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js. A-Frame is a web framework for building virtual reality (VR) experiences. Originally from Mozilla, A-Frame was developed to be an easy but powerful way to develop VR content. As an independent open source project, A-Frame has grown to be one of the largest and most welcoming VR communities.
On Desktop: Open the url in Chrome browser. After Entering in VR Experience , use arrow keys arrow keys to navigate in the virtual store Focus the Cursor to enable actions (play music , buy items , watch movie in theatre To lock the focus on any object, press ESC key.
On VR Headset: Expreince the immersive VR experience with VR Cardboard or a VR headset Navigate in store with joystick and use your head position to focus on any object.
How to use code:
- Download the repo and open project from any Server (XAMPP or Chrome DEV server).
- Open the url of project in mobile browser
- Place the mobile in VR handset
- Use Joystick to control the movement and headset for view
- Ray Caster has also been added so when in VR mode, a cursor would appear , Gaze the cursor for 500ms on an element and then click event would be triggered.
Experience VR-DEMO Shopping App here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent