360 Virtual Reality Photos Tutorial
This is part of #DaysInVR series. Learn more
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.
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
Creating the scene
The scene is made up of a geometry and material. For our purposes, we’re using a
var scene = new THREE.Scene();
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.
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/ window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
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.
var controls = new THREE.VRControls(camera);
controls.standing = true;
camera.position.y = controls.userHeight;
var effect = new THREE.VREffect(renderer);
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.
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.