360 Virtual Reality Videos Tutorial – Days in VR – Day 2

This is part of #DaysInVR series. View VR Projects

Yesterday, we learnt how to display and view 360 photos in virtual reality. If you haven’t seen that, be sure to check that out.

WebVR app for 360 videos

Demo | Source

Today we’re going to create a virtual reality player for 360 video. 360 videos are getting popular these days and a lot of them are available on YouTube and Facebook.

I’m using Three.js for this tutorial. The process is almost same as yesterday’s vr photos tutorial.

Setting up with Three.js

We’ll be creating a scene using Threejs and we’ll keep a camera inside it.

Let’s start by creating a SphereGeometry and MeshBasicMaterial.

We’ll be wrapping our 360 video on this sphere. Of course, this will only work if the video has equirectangular projection.

Here, we’re creating a video element and starting to load the video.

However, we’re only playing the video when a button is clicked. This is because, video element can only start playing after a user gesture in mobile browsers.

We create a texture with the video and then use it to create our material.

VRControls and VREffect

VRControls is responsible for giving the positional data to the camera. This is why you can look around when you’re in VR mode on your mobile. VREffect will create the stereo rendering necessary for VR when entering VR mode. It uses WebVR api for this. You can check the respective files to understand how this is achieved.

Entering VR mode

To enter VR mode, you can use a local server such as SimpleHTTPServer in Python2. Once the local server is started, ngrok can be used see the page on mobile.

Its your turn

Create your own 360 VR player and put a link to the project in the comments below.

Follow me


Building Viewport to help developers to build VR apps easily.
Follow me

Latest posts by Rison (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *