いるかのボックス: Three.jsでキューブマップを使う

Three.js（r79）でオブジェクトの表面にまわりの景色を反射させたい場合、キューブマップを使うとできる。キューブマップは、各面に周囲画像を割り当てた立法体でオブジェクトを囲む空間をつくり、オブジェクトの表面に周囲画像を写すことで、周囲の景色の反射を擬似的に再現する。

実際にThree.jsでキューブマップを使うまでの手順としては、まずキューブマップ画像を用意して、Three.jeでコーディングをする。

キューブマップ画像の作成

キューブマップでは周囲360度を画像で囲むことになるので、360度の画像（Equirectangular）を使うと境界のない自然な周囲景色を作れる。Equirectangular形式の画像は、Ricohのthetaなど360度の写真が撮れるカメラがあれば簡単に作成できるが、残念ながら僕はそういうカメラを持っていないので、今回は1台のKodak SP360で360度パノラマ写真を撮るで作成したEquirectangular形式の画像を使う。

キューブマップでは立法体の各面に画像を割り当てるので、キューブマップ画像というのは立法体の各面に対応する6つの正方形画像から成る。この画像を作成するのにUnityのAssetであるPanorama To Cubemapを使用する。以下はPanorma To Cubemapでキューブマップ画像を作成する手順。

１．Unityでプロジェクトを開いて、UnityのAsset StoreからPanorama To Cubemapをダウンロードする。追加されると、Assetsに表示される。

２．プロジェクトのAssetsにEquirectangular形式の画像を追加する。Assetsにドラッグ＆ドロップで追加できる。

３．メニューの［Windows］＞［Panorama To Cubemap］をクリックして、Panorama To Cubemapのウィンドウを開く。

４．Selectを押して、Assetsに追加したEquirectangular形式の画像を選択し、Convertを押す。

５．変換された画像はAssetsのoutput_imagesに保存される。

Three.jsでのコーディング

Three.jsのコーディングでは以下の2つのことを行う。

・THREE.CubeTextureLoaderで、作成した6つのキューブマップ画像を読み込み（left、right、up、down、front、backの順）、THREE.Sceneのbackgroundプロパティに設定する。

・マテリアル作成時に、envMapにTHREE.Sceneのbackgroundプロパティを設定する。

// シーンの作成
var scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
 .setPath( 'panorama/' )
 .load( [ 'Panorama_left.png', 'Panorama_right.png', 'Panorama_up.png', 'Panorama_down.png', 'Panorama_front.png', 'Panorama_back.png' ] );

// 球体ジオメトリの作成
var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
// マテリアルの作成
// envMap(環境マップ)にscene.backgroundを指定する
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
// 球体オブジェクトの作成
var mesh = new THREE.Mesh( geometry, material );
// 球体オブジェクトをシーンに追加
scene.add( mesh );