three.jsによる３次元グラフィックス
ローカル環境でテクスチャマッピング（DataURL形式データの利用）

three.jsで作成した３次元グラフィックスをローカル環境で実行させる場合、テクスチャ用の画像ファイルを読み込む際にクロスドメイン関連のセキュリティエラーが発生します。 この問題を回避するためには「Google Chrome起動オプション」を設定する必要があります。しかしながら、一般ユーザのローカル環境でテクスチャ画像を用いた３次元グラフィックスを実行させたい場合、重大な制約が生じてしまうことになります。

この問題の本質はウェブブラウザによって外部データの読み込みに制限が加えられている点にあるので、画像データの取得をブラウザの機能を利用せずにJavaScriptだけで実現することができれば回避することができます。その一番簡単なDadaURL形式の画像を利用することです。手順は次のとおりです。

(1) DataURL形式の画像データ（文字列）の準備

JavaScriptプログラムソース上にDataURL形式の画像データを表す文字列を格納する変数を準備します。

var UV_Grid_Sm = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB～～～～～";

(2) HTMLのimg要素（Imageクラス）の準備

Imageクラスを用いてHTMLのimg要素を生成後、srcプロパティに上記画像データを与えます。

	//img要素の生成
	var img = new Image();         
	img.src = UV_Grid_Sm;  //DataURL

この段階で(1)で指定した画像データのimg要素が仕上がります。

(3) three.jsのテクスチャオブジェクト（Textureクラス）の生成

　Textureクラスの第一引数はHTMLのimg要素も対応しているので、直接テクスチャオブジェクトを生成することができます。

	//テクスチャオブジェクトの生成
	var texture = new THREE.Texture( img );
	texture.needsUpdate = true;

後は、このテクスチャオブジェクトを用いて各種マッピングに利用するだけです。なお、本手法は、three.jsに限らずHTML5を用いた様々なプログラムで有効です。

【留意】画像データの外部リソース化の検討！

DataURL形式の文字列（画像データ）は非常に長いので、JavaScriptプログラムソースに直接記述すると不便です（ファイルサイズも大きくなります）。そのため、DataURL形式の文字列のみを宣言した外部ファイルをあらかじめ用意しておいて、script要素によるファイル読み込みを行うことをお勧めします。

<script src="UV_Grid_Sm.js"></script>

【注意】HTML要素を用いた読み込みでは回避できません！

上記のようにDataURLを用いずに、

	var img = new Image();
	img.src = "UV_Grid_Sm.jpg";  //JPGデータ

と画像データファイルを直接読み込んだり、HTML文書内で

<pre class="brush: javascript;">

とimg要素で読み込んだ画像データをJavaScriptプログラムソース内で

	var img = document.getElementById("UV_Grid_Sm");

と取得しても、読み込み自体は問題ありませんが、テクスチャオブジェクトの生成段階（canvas2Dコンテキスト内での処理）でエラー発生することになります。

サンプルプログラム

「サンプルプログラム」をダウンロード後、ローカル環境で実行してみてください。テクスチャマッピングが下図の通りできていることが確認できると思います。