Materials and Textures - Three.js - page 175

Here, we set the map property of the material to the video texture. So, any
THREE.Mesh object we create that uses this material will show the video.
4. To finish the recipe, create THREE.Mesh object and add it to the scene:
var cube = new THREE.Mesh(cubeGeometry,
cubeMaterial);
scene.add(cube);
5. Three.js normally caches textures as they usually don't change that often. In
this recipe, though, the texture changes continuously. To inform Three.js that
the texture has changed, we need to add the following to the render loop:
function render() {
...
videoTexture.needsUpdate = true;
...
}
You can use this approach with any video that can be played in the browser.
How it works...
WebGL, which is used by Three.js to render the scenes, has native support to use
video elements as input for the textures. Three.js just passes the video element to
WebGL and doesn't need to do any preprocessing. In the WebGL code, the current
image shown by the video is converted to a texture. Whenever we set videoTex-
ture.needsUpdate to true , the texture is updated in WebGL.
There's more…
One thing to remember when working with the video element is that the different
browsers have varying support for video formats. A good up-to-date overview of
what format is supported by which browser can be found on Wikipedia at ht-
tp://en.wikipedia.org/wiki/HTML5_video#Browser_support .