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 ボーンの追加

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

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

記事を読む

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 UVのマテリアル複数 エクスポート

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

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

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

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

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

Blender インストール 3Dを作るのに、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 ↑