ドラッグ＆ドロップでThree.jsのテクスチャ画像を入れ替える

ローカルにある画像ファイルをドラッグ＆ドロップしてThree.js（r74）のテクスチャ画像を入れ替えてみたので、そのときの方法をまとめる。

１．ブラウザにファイルをドロップしたときの処理は、javascript側でタイプに「drop」を指定してリスナー登録するすることで指定できる。ただし、これに加えて「dragenter」と「dragover」のイベントが発生したときにキャンセルしておく必要がある。ここではファイルをドロップしたときにtextureSwitchという関数を実行する。
 

document.addEventListener(　'dragenter', function(event) { event.preventDefault(); }, false);
document.addEventListener(　'dragover', function(event) { event.preventDefault(); }, false);
document.addEventListener( 'drop', textureSwitch, false );

 

２．イベントが発生したときにテクスチャを入れ替える処理を記述。
<INPUT>タグを使用してファイルを読み込む場合とほとんど同じだが、赤字の箇所だけ違う。
 

function textureSwitch( event ){
// 要素内イベントのキャンセル
event.preventDefault();
// 1つ目のファイルのみ読み込む
// <INPUT>タグを使用してファイルを読み込むときは  var file = event.target.files[0];
var file = event.dataTransfer.files[0];

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

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

img.src = event.target.result;

// テクスチャの更新
cube.material.map = new THREE.Texture( img );
cube.material.map.needsUpdate = true;
      
};
// データURLとしてファイルを読み込む
reader.readAsDataURL( file );
}

 

以上で、ブラウザに画像をドラッグ＆ドロップするとオブジェクトのテクスチャ画像が入れ替わる。

 

• サンプルの表示