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

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

blender three.js 地球

今回はベイクを試してみようと思います。

あと、参考サイトの英語の動画解説では、blenderのワールドで星も出していますが、私のblenderには星の設定がなく(バージョン?)、設定があったとしてもうまくエクスポート出来ないような気がしてならないので、星の表示はjsの方でやろうと思います。

Blender ベイク

地球を作ったblenderはこんな感じで、地球のUV球、雲のUV球、大気圏の青色のUV球と3つが出来ています。

地球のUV球のテクスチャをベイクしてみます。

3Dビュー・エディターの右上部分の三角を左にスライドさせて、ウィンドウを分割します。
エディタータイプをUVエディターにします。
blender ベイク
地球のUV球を選択した状態で、編集モードのワイヤーフレームにします。
新規UVエディターの方は画像→新規画像を作っておきます。
blender ベイク
名前をbake_tex01としました。

3Dビュー・エディターの方でUキーを押して、スマートUV投影を選択します。
blender 地球 ベイク
そうするとUVマップが右側に出ます。
blender 地球 ベイク
レンダータブのベイクのボタンを押します。
そうすると、テクスチャ画像が作られます。
F13を押してこの画像を保存します。

あとは、現状制作してあるマテリアルとテクスチャを削除して、ベイクしたテクスチャを貼りなおす、という作業になります。

Blender Three.js 星を作る

星はThree.jsのパーティクルでもやってみたのですが、パーティクルは四角型しかないので、丸画像で透過させてもこのように地球と重なった時に四角ということが分かってしまう結果に。
three.js パーティクル
なので、blenderで球の小さい星を1つエクスポートして、それを散りばめて表示することにしました。
5000個くらいは表示してもそんなに重くありませんでした。

Blenderで、Shift + Aキーでメッシュ→UV球を作ります。

左のツールシェフ内のセグメントとリングの設定を16くらいに。
blender 星
Sキーで縮小します。値を入力して0.01倍くらいにします。

マテリアルを新規作成します。
blender 星
これを名前を star.json でエクスポートします。
blender three.js 宇宙
表示のスクリプトは以下の様な感じで。

//Blenderのオブジェクトを読み込む(星)
loader = new THREE.JSONLoader();
loader.load( 'star.json', function ( geometry, materials ) { //第1引数はジオメトリー、第2引数はマテリアルが自動的に取得)
	var faceMaterial = new THREE.MeshFaceMaterial( materials );

	// 星の位置の設定
    for (var i = 0; i < 5000; i++) {
      var px = Math.random() * 5000 - 500,
          py = Math.random() * 5000 - 500,
          pz = Math.random() * 5000 - 500;
		mesh_star = new THREE.Mesh( geometry2, faceMaterial2 );
		mesh_star.position.set( px, py, pz);
	    mesh_star.scale.set( 100, 100, 100 );
	    scene.add( mesh_star );
    }

} );

Blender Three.js 地球 デモ

地球のUV球をベイクした方のデモ

blender three.js 地球
DEMO を見る
ベイクしたテクスチャを貼って、雲は透過してるので、ベイクせず、貼り方2のUVマップをやってからテクスチャを付けました。

ベイクすると確かに街の明かりなど表示してますが、裏面に至っては、雲だけしか見えません。

ベイクの利点としては、当たり前ですが表示に軽さになります。

地球のUV球をベイクしてない方のデモ

blender three.js 地球
ベイクなしの方は表示は遅く、街の明かりの表現は出来ていませんが、自転させても陰影がないので、こちらのがいいかなと思います。
DEMO を見る
デモは、雲の読み込みが遅いので、雲が表示しない場合はブラウザの更新ボタンを押してください。
てか、雲の解像度はもっと落とした方がいいです。

いろいろなやり方でもっといい地球になる可能性はあると思いますが、blenderの地球の記事はこれで終わります。

関連記事

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

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

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

記事を読む

three.js 環境マッピング

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

前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ

記事を読む

blender 球 テクスチャ

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

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

記事を読む

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

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

blender 地球

Blender Three.js 地球 その2(ノード)

前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

brender Three.js WebGL

Message

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

マウスドラッグ
マウスドラッグ で ボール投げたい

アイキャッチ画像がマウスドラッグを描いたつもりが、子供の好きなあのボー

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

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

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

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

画像加工 cropbox.js
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来

画像の拡大・縮小 タッチイベント
画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して

→もっと見る

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