#Introduction

Do you know that we can view the Virtual Reality on Web? As the normally you can experiences Virtual Reality technology with Oculus Rift , HTC Vive Pro, Sony PlayStation VR, or Samsung Odyssey/Windows Mixed Reality.The technologies growth very fast. Many big company like Facebook and Google introduce new technology every years.In this article I will share you with my experience which I have been worked with WebVR.Lucky Facebook released new framework that build on top React which call React 360 in May 2017 for easy create WebVR.Today I would like to guided you through my sample project with React as the frontend, React360 use for WebVR, Django with GraphQl as the backend and Apollo GraphQL.

#React 360

React 360 is a framework for the creation of 3D and VR user interfaces. Built on top of React – a library designed to simplify the creation of complex UI – React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web.

#React
React is JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications

#Django
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.

#GraphQl
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

#Apollo GraphQL

Build a universal GraphQL API on top of your existing REST APIs, so you can ship new application features fast without waiting on backend changes.

#Sample project

In this project I would to build an property website that you can view the property in Virtual environment.

Here is the sample flow of my property website project :

Front-end : You can view the list all properties which you can see in this picture below :

Screen Shot 2018-09-06 at 9.14.25 PM.png

- WebVR : To view the property detail in Virtual environment.

Screen Shot 2018-09-06 at 9.12.05 PM.png

- Backend : Provide the query data as API.

Screen Shot 2018-09-06 at 9.15.48 PM.png