Simple Three.js VR 360 Video Tutorial Using Video Texture

I’m sure by now you’ve come across a ton of 360 and VR content online and are curious about how the actual player was built. I’m delighted to tell you that by using three.js it is actually pretty easy – and I’m going to show you how to accomplish it today!

If you’d like to follow along, checkout the repository below to get started.

I’ve created a starter branch which as all of the resources and boilerplate required to complete the tutorial. Let’s use that branch.

Now that we have the repository cloned and the correct branch checked out, let’s install the dependencies and start the server.

If everything went well then you should be able to reach the URL below in your browser.

http://localhost:8080/examples/video-texture-360/

The first step is to create our video element in javascript. Note that we do not need to insert this into the DOM for it to work.

The code above will create the video element, set its dimensions to the width and height of the user’s browser, loop indefinitely, and autoplay instantly. Note that I also muted the video. Most browsers by now will not autoplay a video unless it is muted to respect the user on the page. If you want a video to autoplay, always ask yourself if it makes sense. If so, mute it first or else most people will not experience it autoplay.

The next step is to wrap our equirectangular video onto a sphere and immediately invert the sphere so the video plays on the inside of it, giving us a panorama effect.

Here’s where three.js really helps us out, enter VideoTexture. How’s it work? It’s actually pretty simple. The VideoTexture will fetch the current frame of the video element using the drawImage method which is called on a , it will then drop that dataURL onto a canvas element and wrap it onto the sphere mesh we are about to create. Here is a link which shows you how to do this yourself.

The last step to get this working is to create our sphere mesh out of the geometry above.

If you refresh your browser you’ll have a working 360 video with controls and everything, how cool is that? I’m sure you notice a couple small bugs out of the box so let’s fit that.

First and foremost, our video is not centered. It would be nice if that guy was directly in the middle. I won’t get into the mechanics behind this, but any equirectangular video or photo needs to be rotated to the -pi / 2 position. Add this anywhere after the mesh is defined:

For example, I added it just before my call to scene.add(mesh).

And that’s it! There is a lot you can do with the VideoTexture class beyond creating simple panoramas, but this will help get the ball rolling to take this to the next level.

1 Response

  1. Kassem

    Thanks for the great and easy-to-follow tutorial.
    However when I try the page on Firefox 57 for android, the video only shows black screen.
    After checking the console on my laptop using Firefox WebIDE, the error messages displayed are:

    THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.
    three.min.js:145:194

    Error: WebGL warning: texImage2D: GetAsSourceSurface or GetDataSurface failed after blit failed for TexUnpackImage.
    three.min.js:135:268

    Is that a known bug or is there maybe an easy fix for this.

Leave a Reply