Blender Three.js ガラスその２（環境マップ）

公開日： 2016/11/01 : brender, Three.js, WebGL

three.js 環境マッピング

前回Cyclesレンダーを試してみました。

Cyclesレンダーはノードを使用しているので、ガラスの質感をjsonでは書き出せないっぽいので、Three.js の方でやっていこうと思います。

あと環境マップの画像を作る方法をやろうと思います。
それは、Cyclesレンダーだとレンダーに時間がかかるので、Blenderレンダーでやってこうと思います。

Blender Three.js 環境マップ（キューブマップ）の画像を作る

Blenderで背景となるお城の部屋みたいなものを作ってみました。

この部屋をthree.jsで環境マップ（キューブマップ）表示にしようと思います。
結果的にこのような６枚の画像が必要です。

では、カメラを部屋の真ん中に置いて、撮影していきます。

キューブマップカメラの設定

フロントとなる方向に視点を置きます。

この部屋では階段が見えるところをフロントとするので、Ctr + テンキー3 を押します。
Shift + Cでカーソルを真ん中にして、Shift + A で部屋の真ん中にカメラを設置します。

カメラの位置を G → Zで少し上にして、レンダーの寸法の解像度を1024×1024にします。（でなくても、とにかく正方形に）

カメラのレンズの焦点距離を16くらいにします。

キューブマップ frontの画像を保存

レンダリングして画像を別名保存します。

これが前（front）の画像です。

以下、カメラを回転させてこの作業を、上（up）・下（down）・左（left）・右（right）・後（back）と繰り返します。

テンキー7で上からの視点はこんな感じです。

キューブマップ leftの画像を保存

r → z → 90 → Enterで左に90度回転させます。
レンダリングして画像を別名保存します。
これがleftの画像になります。(frontから見て左)

キューブマップ rightの画像を保存

Ctr + Z でカメラをfrontに戻して、
r → z → -90 → Enter で右に90度回転させます。
レンダリングして画像を別名保存します。
これがrightの画像になります。(frontから見て右)

キューブマップ backの画像を保存

Ctr + Z でカメラをfrontに戻して、
r → z → 180 → Enter で180度回転させます。
レンダリングして画像を別名保存します。
これがbackの画像になります。(frontから見て後ろ)

キューブマップ upの画像を保存

テンキー3で横からの視点にします。

Ctr + Z でカメラをfrontに戻して、
r → y → -90 → Enter で上に90度回転させます。
レンダリングして画像を別名保存します。
これがupの画像になります。(frontから見て上)

キューブマップ downの画像を保存

Ctr + Z でカメラをfrontに戻して、
r → y → 90 → Enter で下に90度回転させます。
レンダリングして画像を別名保存します。
これがdownの画像になります。(frontから見て下)

キューブマップの画像

6枚の画像が出来ました。

Blender Three.js 背景の環境マップ（キューブマップ）を表示する

ガラスの靴をjson形式で、エクスポートしておきます。（glass.json）

エクスポートについては以下記事の最後の方を参考に。
（参考記事：Blender Three.js エキスポートその１）

環境マップの画像をloadする順番はこのようになります。

表示のスクリプトは以下の様な感じです。

//環境マッピング
scene.background = new THREE.CubeTextureLoader()
 .load( [ 
 'gazou_right.png',
 'gazou_left.png',
 'gazou_up.png',
 'gazou_down.png',
 'gazou_front.png',
 'gazou_back.png' ] );

//キューブマテリアルを設定する
cube_material = new THREE.MeshBasicMaterial( {
		    color: 0xffffff,
            envMap: scene.background , //環境マッピング
    		refractionRatio: 0.7, //屈折率
			reflectivity: 1, //反射率
            opacity: 0.6, //不透明度
            transparent: true
} );
//Blenderのオブジェクトを読み込む
loader = new THREE.JSONLoader();
loader.load( 'glass.json', function ( geometry, materials ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得
    mesh = new THREE.Mesh( geometry,  cube_material );//ここでキューブマテリアルを設定する
    mesh.position.set( 0,0,0);
    mesh.scale.set( 50, 50, 50 );
    scene.add( mesh );
} );