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 地球

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

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

記事を読む

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

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

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-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ファイル を表示したり

記事を読む

three.js 環境マッピング

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

brender Three.js WebGL

Message

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

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

→もっと見る

    • 202110
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑