360 Virtual Reality Photos Tutorial

WebVR app to view 360 photos

Let’s start this series by building a simple VR project that shows 360 photos in WebVR. You’ll be able to view 360 photos and photospheres that you have in VR.

I’m going to use Three.js to build this. I’ll try to explain the items the best as I can, but if you have some questions or if I made a mistake, please leave a comment below.

OK, there are few basic principles in Three.js that we need to know for creating our application.

Threejs

Three.js is a Javascript library that makes WebGl easier. For Threejs to display something, it needs the following items.

1. Scene
2. Camera
3. Renderer

Scene contains everything that can be seen, camera determines what is being shown and the renderer defines how it is shown in the browser. We’ll be using WebGLRenderer and

Creating the scene

The scene is made up of a geometry and material. For our purposes, we’re using a SphereGeometry and MeshBasicMaterial.

So basically, we’re going to wrap our 360 photo on the sphere.

Setting up the camera

We’re going to place the camera inside the sphere. When the person moves the head, the camera moves along with it.

WebVR Polyfill

I’ve included webvr-polyfill in this project. This will add WebVR api to browsers which currently doesn’t have native support for WebVR. It is the javascript implementation of the WebVR api.

VRControls and VREffect

If you see the source code, you can see that I’m using VRControls and VREffect. VRControls will work to give positional data to the camera. VREffect provides the stereo rendering necessary for VR.

The effect of this is visible after you have entered VR mode on a mobile. When you view VR photos on a desktop browser, and there is not HMD connected, then it’ll go fullscreen and you can view the project using your mouse to move around the image.

Entering VR

You have to use a static server to run the project.

If you have Python 2, then use SimpleHTTPServer. You can start the server by running the command python -m SimpleHTTPServer inside the folder. The site will be available at http://localhost:8000. To see the page on mobile, use a service such as ngrok.

Once you click the Enter VR button, we use vrDisplay.requestPresent to enter VR mode. If you are viewing from a mobile, you can use Google Cardboard to view the image.

This is part of #DaysInVR series. Learn more