Blender Three.js ガラス その2(環境マップ)

公開日: : brender, Three.js, WebGL

three.js 環境マッピング

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

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

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

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

Blenderで背景となるお城の部屋みたいなものを作ってみました。
blender three.js 環境マッピング
この部屋をthree.jsで環境マップ(キューブマップ )表示にしようと思います。
結果的にこのような6枚の画像が必要です。
Blender Three.js 環境マッピング テクスチャ
では、カメラを部屋の真ん中に置いて、撮影していきます。

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

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

この部屋では階段が見えるところをフロントとするので、Ctr + テンキー3 を押します。
Shift + Cでカーソルを真ん中にして、Shift + A で部屋の真ん中にカメラを設置します。
blender three.js 環境マッピング
カメラの位置を G → Zで少し上にして、レンダーの寸法の解像度を1024×1024にします。(でなくても、とにかく正方形に)
blender three.js カメラ中心
カメラのレンズの焦点距離を16くらいにします。
blender three.js 環境マッピング

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

レンダリングして画像を別名保存します。
blender 環境マッピング 画像保存
これが前(front)の画像です。

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

テンキー7で上からの視点はこんな感じです。
blender three.js 環境マッピング

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

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

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

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

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

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

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

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

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

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

キューブマップの画像

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

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

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

エクスポートについては以下記事の最後の方を参考に。
(参考記事:Blender Three.js エキスポート その1)

環境マップの画像をloadする順番はこのようになります。
Blender Three.js 環境マッピング テクスチャ
表示のスクリプトは以下の様な感じです。

//環境マッピング
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 ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得
    mesh = new THREE.Mesh( geometry,  cube_material );//ここでキューブマテリアルを設定する
    mesh.position.set( 0,0,0);
    mesh.scale.set( 50, 50, 50 );
    scene.add( mesh );
} );

気を付けること

  • 画像は同じ階層におくこと。
  • new THREE.CubeTextureLoader() がエラーでなんでだろうと結構悩みました。ただThree.jsのバージョンが古かったみたいで、最新バージョンを設置したら大丈夫でした。

Blender Three.js ガラス
DEMO を見る
デモではパーティクルでキラキラも入れました。
作り方は星と一緒です。
参考記事:Blender Three.js 地球 その3

Blender Three.js 環境マップ(キューブマップ)Cyclesレンダー

やっぱりCycleレンダーのデモも作ってみました。
Blender Three.js ガラス
Cycleレンダーで背景を環境テクスチャで表示して、あとはBlenderレンダーとまったく同じでやり方でやりました。
DEMO を見る
オブジェクトを置いてない状態なら、そこまでレンダーも遅くなかったです。

関連記事

blender three.js 地球

Blender Three.js 地球 その3(ベイクと星)

今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの

記事を読む

Blender と Three.js UVのマテリアル複数 エクスポート

Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)

Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる

Blender Three.js エキスポート その1(3DのテキストのアニメーションやってみるⅠ)

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

Blender と Three.js で3Dのテキストのアニメーションやってみる その2

Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)

今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり

記事を読む

blender 環境テクスチャ

Blender Three.js ガラス その1(Cyclesレンダー)

Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

Blender Three.js 海 物理演算

Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

Blender ボーンの追加

Blender Three.js エクスポート その4( モーフアニメーション)

前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ

記事を読む

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

brender Three.js WebGL

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

Wordpress 自作フォーム
WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑