Learn Three.js - Third Edition

Using the output from a video as a texture

If you read the preceding section on rendering to a canvas, you may have thought about rendering video to canvas and using that as input for a texture. That's one way to do it, but Three.js already has direct support to use the HTML5 video element (through WebGL). Check out 24-video-texture.html. Refer to the following screenshot for a still image of this example:

Using video as input for a texture is easily, just like using the canvas element. First we need a video element to play the video:

    <video         id="video"         style="display: none; position: absolute; left: 15px; top: 75px;" src="../../../assets/movies/Big_Buck_Bunny_small.ogv" ...