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.

Getting ready

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

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.