Book Image

Three.js Cookbook

By : Jos Dirksen
Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Table of Contents (15 chapters)
Three.js Cookbook
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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...