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

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

blender 球 テクスチャ

Blender 地球 テクスチャ

Blenderで地球を作ってみようと思います。
最終的にはエクスポートして、またthee.jsで表示してみようと思います。

地球のテクスチャですが、NASAのサイトからダウンロード出来ます。

NASAのサイト(外部):地球のテクスチャ

ここのサイトの雲のあるJPEG画像をダウンロードしておきます。(land_ocean_ice_cloud_2048.jpg)

UV球へのテクスチャの貼り方ですが、以下の2つの方法をやってみます。

Blender 地球 テクスチャ 貼り方1

1つ目の貼り方は、テクスチャのマッピングの球型を生成で貼ってみます。

まず、Blenderを開いて、Xキーで立方体を削除。
Shift + Aキーでメッシュ→UV球を追加します。

編集モードでシェーディングの面のスムーズボタンを押します。

マテリアルを新規作成します。
地球 テクスチャ
テクスチャを新規作成します。
NASAのサイトからダウンロードしてきた画像を選択します。

マッピングのところを生成と球を選択。
blender 地球 テクスチャ
ワールドのAOにチェックしてちょっと明るくしてレンダーしてみます。

この貼り方の場合は、three.jsで表示する時は、ベイクが必要になります。

three.jsで表示する時は、テクスチャはUVマップで貼らないといけないので。
(参考記事:Blender Three.js エクスポート その3

ベイクについては後にして、もう一つのテクスチャの貼り方をやっておきます。

Blender 地球 テクスチャ 貼り方2

球のUVマップを先に作ってから貼る方法です。

このやり方は以下のサイトが参考になります。
むしろこちらのサイトを見ながらやった方がいいでしょう。

参考サイト(外部):惑星地図など球用のUV作成

一応ここでもざっくり書いておきます。

先程と同じようにUV球を作ります。
編集モードでシェーディング → 面のスムーズボタンを押します。
blender 地球 UV
右クリックで頂点を選択し、Xキーで削除します。
Alt + 右クリック で削除した次の頂点を選択します。
Eキー→Zキーで頂点を押し出して、Sキーで縮小、なるべく小さい穴にしておきます。
blender 地球 UV
下の頂点も同じように小さな穴にしたら、Alt + 右クリック で、Y軸にそって選択し、Ctr + E でシームを付けます。
blender 地球 UV
3Dビュー・エディターの右上部分の三角を左にスライドさせて、ウィンドウを分割します。
エディタータイプをUVエディターにします。
blender 地球 UV
オブジェクトを選択して、Uキー→球状投影。
UVエディターにUVマップが出てきます。
blender 地球 UVマップ
球状投影のオブジェクトで揃えるを選択。
blender 地球 UV オブジェクトで揃える
新規でマテリアルを作って、新規でテクスチャを作って、地球のテクスチャを選択します。
マッピングをUV、フラットにします。
blender 地球 UVマップ
レンダーしてみます。
blender 地球 UVマップ
最後に編集モードで、頂点の穴を閉じます。
頂点の穴を選択して、Wキー → 結合 → 中心に で結合します。

この貼り方の場合はもうエクスポートしても、three.jsでテクスチャが表示すると思うのでやってみます。

Blender Three.js 地球 エクスポート

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

エクスポートの設定では、Face Materials にチェックを入れてエクスポートします。

光すぎだったので、マテリアルのスペキュラーは0にしました。

シーンとレンダラの設定はこんな感じです。

//シーンの作成
var scene = new THREE.Scene();
	
//シーンの大きさ
var scene_w  = document.body.clientWidth-8;//横
var scene_h = document.body.clientHeight-8;//縦

//レンダラの初期化
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize( scene_w, scene_h );
renderer.setClearColor(0x000000, 1);//背景色
document.body.appendChild(renderer.domElement);//最後に生成した要素を追加

シーンは全面表示したいので、ウィンドウサイズからスライドバーの幅8を引いたものになっています。
blender three.js 地球
DEMO を見る

関連記事

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

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

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

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

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

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

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

記事を読む

blender 地球

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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 ↑