Three.jsでマテリアルを動かす

Three.js（r79）でオブジェクトのマテリアルを動かしてみる。具体的には、平面オブジェクトのマテリアルとして画像を読み込み、その画像を左方向に移動させる。

以下のようにマテリアルを変化させる。

　↓↓↓

以下は、THREE.ShaderMaterialとプログラマブルシェーダであるGLSLでマテリアルを移動させる手順。

１．GLSLのコーディング（頂点シェーダ）

今回は頂点シェーダを変更する必要はないが、この場合でも頂点シェーダーの記述は必要。

※座標変換をしているだけで、頂点位置が変化しているわけではない。

２．GLSLのコーディング（フラグメントシェーダ）

フラグメントシェーダで画像が左に移動する動きを記述する。画像のどの位置の色情報を参照するかUV座標で指定するが、そのUV座標を左にずらしていくことで、画像を左に移動させる。

３．オブジェクトの作成

GLSLを利用するためにTHREE.ShaderMaterialでマテリアルを作成する。

// ジオメトリの作成
var geometry = new THREE.PlaneGeometry( 4, 3);

// テクスチャの作成
var texture = new THREE.TextureLoader().load( '../image/persimmon.jpg' );

// マテリアルの作成
// uniforms: シェーダーに渡す変数を指定
// vertexShader: 頂点シェーダーを指定
// fragmentShader: フラグメントシェーダーを指定
var material = new THREE.ShaderMaterial( {
  uniforms: {
   delta: { type: 'f', value: 0.0 },
   texture:   { type: 't', value: texture }
  },
  vertexShader:   document.getElementById( 'vshader' ).textContent,
  fragmentShader: document.getElementById( 'fshader' ).textContent
 });

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

４．マテリアルを移動させる

setIntervalでマテリアルの移動速度を調整。

// 画像の横サイズ
var imgWidth = 1024;
setInterval( function(){
 if( plane.material.uniforms.delta.value > imgWidth ) {
  plane.material.uniforms.delta.value = 0.0;
 }
 plane.material.uniforms.delta.value += 1.0;
}, 100 );

後は、シーンやカメラなど、通常Three.jsで必要なものを追加するだけ。

• サンプルの表示