RICOH THETAで撮影した360°画像をthree.jsで全天球処理したついでにFileAPIのDrag&Drop対応してみた

dragdrop.js

//イベント伝搬をキャンセル
function cancelEvent(e) {
  e.preventDefault();
  e.stopPropagation();
}

//ファイルがドロップされたら動くコード
function handllerDroppedFile(e) {
  
  //
  //ここにthree.jsのテクスチャを変えるコードを書きます。
  //
  
  //デフォルトのイベントキャンセルしないと
  //ブラウザでイメージが表示されてしまう
  cancelEvent(e);
}

//画面全体
var droppable = document.getElementById('container');
//イベントハンドラ
droppable.addEventListener('dradenter', cancelEvent);
droppable.addEventListener('dragover', cancelEvent);
droppable.addEventListener('drop', handllerDroppedFile);

hack.js

function handllerDroppedFile(e) {
  //単一ファイルの想定
  var file = e.dataTransfer.files[0];
  //dummy imgタグwww
  var img = document.createElement("img");
  var fileReader = new FileReader();
  fileReader.onload = function(e) {
    //一度、dummy imgのsrcにセットしてから
    //再利用します。
    //いきなりこうやるとsame origin error
    //material.map = new THREE.Texture(e.target.result);
    img.src = e.target.result;
    material.map = new THREE.Texture(img);
    material.map.needsUpdate = true;
  };
  //imageをdataURIで取得
  fileReader.readAsDataURL(file);
  //デフォルトのイベントキャンセルしないと
  //ブラウザでイメージが表示されてしまう
  cancelEvent(e);
}