73
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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;
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
73
Help us understand the problem. What are the problem?