Using HTML video as a texture

Modern browsers have great support for playing video without requiring any plugins. With Three.js, we can even use this video as the input for our textures. In this recipe, we'll show you the steps you need to take to output a video on a side of a cube.

Getting ready

For this recipe, we need a video to play, of course. We used the trailer for the Blender-made movie Sintel (http://www.sintel.org/), which is freely available. To view the result of this recipe, open 04.04-use-html-video-as-texture.html in your browser.

When you run this example, you can see that the video is being played at the side of a cube and keeps updating even when the cube is rotating.

How to do it...

To accomplish this effect, we need to define an HTML video element as the source for a texture. To do this, perform the following steps:

1. The first thing we need is a way to play the video. For this, we add the following HTML element to the body element of the page:

   <video id="video" autoplay loop...