Added THREE.VideoTexture.

examples/webgl_materials_video.html

@@ -105,11 +105,10 @@
 
 				video = document.getElementById( 'video' );
 
-				texture = new THREE.Texture( video );
+				texture = new THREE.VideoTexture( video );
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.format = THREE.RGBFormat;
-				texture.generateMipmaps = false;
 
 				//
 
@@ -252,12 +251,6 @@
 
 				camera.lookAt( scene.position );
 
-				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
-
-					if ( texture ) texture.needsUpdate = true;
-
-				}
-
 				for ( i = 0; i < cube_count; i ++ ) {
 
 					material = materials[ i ];

examples/webgl_video_panorama_equirectangular.html

@@ -37,8 +37,6 @@
 
 			var camera, scene, renderer;
 
-			var videoTexture;
-
 			var texture_placeholder,
 			isUserInteracting = false,
 			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
@@ -63,19 +61,16 @@
 				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
 				geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
 
-				video = document.createElement('video');
+				var video = document.createElement( 'video' );
 				video.width = 640;
 				video.height = 360;
 				video.autoplay = true;
 				video.loop = true; 
-
-				video.crossOrigin='anonymous'
 				video.src = "textures/pano.webm";
 
-				videoTexture = new THREE.Texture( video );
-				videoTexture.generateMipmaps = false;
+				var texture = new THREE.VideoTexture( video );
 
-				var material   = new THREE.MeshBasicMaterial( { map : videoTexture } );
+				var material   = new THREE.MeshBasicMaterial( { map : texture } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				
@@ -172,18 +167,6 @@
 
 			function update() {
 
-
-				if( video.readyState === video.HAVE_ENOUGH_DATA ){
-				  videoTexture.needsUpdate = true;
-				}
-
-
-			        //if ( isUserInteracting === false ) {
-
-				//	lon += 0.5;
-
-				//}
-
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 				phi = THREE.Math.degToRad( 90 - lat );
 				theta = THREE.Math.degToRad( lon );

src/textures/VideoTexture.js

@@ -0,0 +1,29 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.VideoTexture = function ( video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
+
+	THREE.Texture.call( this, video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
+
+	this.generateMipmaps = false;
+
+	var scope = this;
+
+	var update = function () {
+
+		requestAnimationFrame( update );
+
+		if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
+
+			scope.needsUpdate = true;
+
+		}
+
+	};
+
+	update();
+
+};
+
+THREE.VideoTexture.prototype = Object.create( THREE.Texture.prototype );

utils/build/includes/canvas.json

@@ -48,6 +48,7 @@
 	"src/materials/SpriteCanvasMaterial.js",
 	"src/textures/Texture.js",
 	"src/textures/DataTexture.js",
+	"src/textures/VideoTexture.js",
 	"src/objects/Group.js",
 	"src/objects/Line.js",
 	"src/objects/Mesh.js",

utils/build/includes/common.json

@@ -68,6 +68,7 @@
 	"src/textures/CubeTexture.js",
 	"src/textures/CompressedTexture.js",
 	"src/textures/DataTexture.js",
+	"src/textures/VideoTexture.js",
 	"src/objects/Group.js",
 	"src/objects/PointCloud.js",
 	"src/objects/Line.js",

utils/build/includes/webgl.json

@@ -59,6 +59,7 @@
 	"src/textures/CubeTexture.js",
 	"src/textures/CompressedTexture.js",
 	"src/textures/DataTexture.js",
+	"src/textures/VideoTexture.js",
 	"src/objects/PointCloud.js",
 	"src/objects/Group.js",
 	"src/objects/Line.js",