Graphics Reference
In-Depth Information
sintel_trailer-480p.mp4" type='video/mp4'>
<source src="../assets/video/
sintel_trailer-480p.webm" type='video/
webm'>
<source src="../assets/video/
sintel_trailer-480p.ogv" type='video/ogg'>
</video>
With this piece of HTML, we'll load the video and play it looped once it
is loaded using the autoplay and loop properties. As we've set dis-
play:none , this video element won't show up on the page.
2. Now that we've got a video playing, we can get a reference to this element
and use it to create a texture:
var video = document.getElementById(
'video' );
videoTexture = new THREE.Texture( video );
videoTexture.minFilter =
THREE.LinearFilter;
videoTexture.magFilter =
THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
videoTexture.generateMipmaps = false;
The minFilter , magFilter , format , and generateMipmaps properties
used here provide the best result and performance when using a video as a
texture.
3. At this point, we've got a texture that we can use like any other texture:
var cubeGeometry = new
THREE.BoxGeometry(1,9,20);
var cubeMaterial = new
THREE.MeshBasicMaterial({map:videoTexture});
Search WWH ::




Custom Search