Three.jsでテクスチャの画像をローカルにある画像に変更する

Three.js（r74）でテクスチャの画像を、ローカルにある画像に変更できるようにしたかったので、そのときに調べたことをまとめる。

１．HTMLでファイル選択できるボタンを追加する。<INPUT> タグのtypeに 「file」を指定すると、ファイル選択できるボタンが表示される。ここではidをfileとする。

２．javascript側で、タイプに「change」を指定してリスナー登録すると、ファイルを選択したときに呼ばれる関数を指定できる。ここではtextureSwitchという関数を呼ぶ。

var filechange = document.getElementById( 'file' );
filechange.addEventListener( 'change', textureSwitch, false );

３．イベントが発生したときにテクスチャを入れ替える処理を記述。
FileReaderでURI形式でファイルを読み込み、読みこんだ結果（event.target.result）を作成したimgエレメントのsrc属性に指定する。そのあとにimgエレメントでテクスチャを作成し、オブジェクトのマテリアルを更新する。

function textureSwitch( event ){
   // 要素内イベントのキャンセル
   event.preventDefault();
  
   // 1つ目のファイルを読み込む
   var file = event.target.files[0];

   // FileReader オブジェクトの作成
   var reader = new FileReader();

   reader.onload = function( event ) {
      // 「img」でエレメントオブジェクト作成
      var img = document.createElement( 'img' );

      img.src = event.target.result;

      // テクスチャの更新（meshは作成済みのオブジェクト）
      mesh.material.map = new THREE.Texture( img );
      mesh.material.map.needsUpdate = true;
   };
    // データURLとしてファイルを読み込む
    reader.readAsDataURL( file );
}

以上で、ボタンを押して画像を選択するとオブジェクトの画像が入れ替わる。

• サンプルの表示