Benutzer-Werkzeuge

Webseiten-Werkzeuge


three-js-video-als-textur

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

three-js-video-als-textur [2014/11/21 11:00] (aktuell)
admin angelegt
Zeile 1: Zeile 1:
 +====== Three.js: Video als Textur ======
  
 +<code javascript>​
 +
 +/*other important code*/
 +
 +
 + ///////////​
 + // VIDEO //
 + ///////////​
 +
 + // create the video element
 + video = document.createElement( '​video'​ );
 + // video.id = '​video';​
 + // video.type = ' video/ogg; codecs="​theora,​ vorbis"​ ';
 + video.src = "​videos/​sintel.ogv";​
 + video.load();​ // must call after setting/​changing source
 + video.play();​
 +
 + // alternative method -- 
 + // create DIV in HTML:
 + // <video id="​myVideo"​ autoplay style="​display:​none">​
 + //​ <​source src="​videos/​sintel.ogv"​ type='​video/​ogg;​ codecs="​theora,​ vorbis"'>​
 + // </​video>​
 + // and set JS variable:
 + // video = document.getElementById( '​myVideo'​ );
 +
 + videoImage = document.createElement( '​canvas'​ );
 + videoImage.width = 480;
 + videoImage.height = 204;
 +
 + videoImageContext = videoImage.getContext( '​2d'​ );
 + // background color if no video present
 + videoImageContext.fillStyle = '#​000000';​
 + videoImageContext.fillRect( 0, 0, videoImage.width,​ videoImage.height );
 +
 + videoTexture = new THREE.Texture( videoImage );
 + videoTexture.minFilter = THREE.LinearFilter;​
 + videoTexture.magFilter = THREE.LinearFilter;​
 +
 + var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture,​ overdraw: true, side:​THREE.DoubleSide } );
 + // the geometry on which the movie will be displayed;
 + // movie image will be scaled to fit these dimensions.
 + var movieGeometry = new THREE.PlaneGeometry( 240, 100, 4, 4 );
 + var movieScreen = new THREE.Mesh( movieGeometry,​ movieMaterial );
 + movieScreen.position.set(0,​50,​0);​
 + scene.add(movieScreen);​
 +
 +/*other important code*/
 +
 +</​code>​
 +
 +[.] http://​stemkoski.github.io/​Three.js/​Video.html
three-js-video-als-textur.txt · Zuletzt geändert: 2014/11/21 11:00 von admin