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});