Learn how to view 360 Videos in VR – Tutorial

This is part of #DaysInVR series. View VR Project. 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. Today we’ll learn how to display 360 videos in VR. By the end of the tutorial, you’ll be able to take any 360 video and play it in the browser.

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.

Get all updates
We respect your privacy.

Follow me


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

Latest posts by Rison (see all)

Start the discussion at RealityPipe Community