Three.jsで動画をテクスチャに指定する

[2015.05.21 追記]
どうやら最新版（r72）ではvideo要素をそのままテクスチャとして使う方法があるようです。
サンプルもありました。

ざっくりとその記述だけ抜き出すと、こんな感じで非常に手軽に利用できます。

videoTexture

video = document.getElementById( 'video' );

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

下の記事はその前に書いたもので、比較的低レイヤーでのやり方です。

---

Three.jsのサンプルにあったものを抜粋。
基本的なフローは

1. video要素を生成（あるいは取得）
2. videoをキャプチャするcanvas要素を生成（あるいは取得）
3. canvas要素をtextureに指定
4. 生成したtextureを元にマテリアルを生成
5. loop updateの中でcanvasを更新し、さらにtextureオブジェクトのneedsUpdateをtrueに指定

という手順で、あとは勝手にThree.jsが更新してくれる。

videotexture.js

//video要素とそれをキャプチャするcanvas要素を生成
var video = document.createElement('video');
video.src = "some.mp4";
video.load();
video.play();

var videoImage = document.createElement('canvas');
videoImage.width = 480;
videoImage.height = 200;

var videoImageContext = videoImage.getContext('2d');
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);

//生成したcanvasをtextureとしてTHREE.Textureオブジェクトを生成
var videoTexture = new THREE.Texture(videoImage);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

//生成したvideo textureをmapに指定し、overdrawをtureにしてマテリアルを生成
var movieMaterial = new THREE.MeshBasicMaterial({map: videoTexture, overdraw: true, side:THREE.DoubleSide});
var movieGeometry = new THREE.PlaneGeometry(10, 10, 4, 4);
var movieScreen = new THREE.Mesh(movieGeometry, movieMaterial);
movieScreen.rotation.y = THREE.Math.degToRad(90);

scene.add(movieScreen);

//loop updateの中で実行
if (video.readyState === video.HAVE_ENOUGH_DATA) {
    videoImageContext.drawImage(video, 0, 0);
    if (videoTexture) {
        videoTexture.needsUpdate = true;
    }
}