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

Three.js（r74）で動画をオブジェクトのテクスチャにしたので、そのときの手順をまとめる。大まかな流れとしては、HTML5のvideoエレメントを作成し、THREE.VideoTextureでテクスチャを作成する。詳細は以下の通り。

１．videoエレメントの作成

// videoエレメント作成
var video = document.createElement( 'video' );
// テクスチャにする動画の指定
video.src = '../movie/sunflower.mp4';
// 動画をループ再生
video.loop = true;
// 動画のロード＆再生
video.load();
video.play();

２．videoテクスチャの作成

// 動画テクスチャ作成
var texture = new THREE.VideoTexture( video );
// 1テクセルが1ピクセルより大きな範囲をカバーするときのテクスチャサンプリング方法の指定
texture.magFilter = THREE.LinearFilter;
// 1テクセルが1ピクセルより小さな範囲をカバーするときのテクスチャサンプリング方法の指定
texture.minFilter = THREE.LinearFilter;
// 動画テクスチャフォーマットの指定
texture.format = THREE.RGBFormat;

３．オブジェクトの作成
作成したvideoテクスチャでマテリアルを作成し、オブジェクトを作成する。

// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture, specularMap: 0xcccccc } );
// ジオメトリの作成
var geometry = new THREE.BoxGeometry( 3, 3, 3 );

// オブジェクトの作成
var cube = new THREE.Mesh( geometry, material );

以上にその他シーンやカメラを作成するコードなどを追加すると、以下のように立方体に動画が表示される。

•  サンプルの表示