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 を見る

関連記事

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

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

blender 地球

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

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

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

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

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

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

記事を読む

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 ↑