LoginSignup
73

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-01-10

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
73