BlenderでThreejsで表示できる地球を(極力シンプルな工程で)作る

Blenderで地球を作る方法は色々あるのですが、今のところ出来る限りで一番簡単そうな方法をメモで残します。


# 前提
- Blender：ver 3.2.1 (windows)
- 用途：エクスポートしてthreejs環境で使用する


# 基本的な手順

- UV球を作る
- テクスチャを取得する
- テクスチャを貼る




# 詳細手順

## UV球を作る

### Blenderの起動

Blenderを起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/62fc8c18-d2dc-6aaf-31f1-f2ba4996c03c.png)


### 初期オブジェクトの削除
まずは最初に用意されている立方体メッシュを削除します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/2fa8fd7b-a42a-1f6b-8e1c-2f2d650c9cfc.png)


### UV球の追加

コマンド[Shift + A] → [UV Sphere]で、UV球を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/28cfeaf0-53d4-ddb6-042c-c6931c8e5548.png)

UV球が追加されました。
左下に見えている 「> Add UV Sphere」をクリックして(必要なら)設定を変更します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/561bf6df-dc29-c505-8683-ae74dc8b787f.png)


今回は、Segments：64, Rings：32に変更。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/e5f46efa-9eda-e525-e3bb-afb9dd7f3a6b.png)


この状態でもしも球体が、滑らかな球体ではなく多面体の様に見えている場合、[右クリック]→[Shade Smooth]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/be436dc9-0ff7-e42f-ebc0-239846b5b22e.png)


## テクスチャを取得

地面・雲等別々のテクスチャを重ねて貼りつけて、それぞれに個別の設定や効果を適用することでよりリアルさを増すというのがよく取られる手法だが、容量と手間がかかり難易度も上がるので、今回はシンプルに「雲付き地面テクスチャ」を適用する方法をとることにしました。

↓のNASAの地球観測データを配布するサイトから、テクスチャを取得することが可能。
https://earthobservatory.nasa.gov/features/BlueMarble/BlueMarble_2002.php


今回はリンク先から、以下のJPEG形式のファイルを使用。
(ダウンロードして適当なフォルダに入れておく。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/331fbf95-a795-02d5-30db-b0f30e74c919.png)

## テクスチャの適用

球を左の画面か右のツリーで選択して、マテリアル編集画面を開く(マテリアル編集ボタンが出てこない場合は、ヘッダ部分にある編集画面をModeling等に切り替える。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/921ad49f-4363-5d84-3c27-4f253d451ee1.png)

newを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/97a2d0d2-1881-65eb-484e-7286b6c0731e.png)

newした直後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/b8485ef1-49ad-0174-b4a1-9fcd460f1a2d.png)

編集欄の中にあるBase Colorをクリックし、Image Textureを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/cb2e25d4-462d-2f5d-1fbb-344f01eda22f.png)



テクスチャ設定画面が出現するので、Openを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/d62bc4c6-8c20-5d55-e0c7-9f648808c7ee.png)

ファイル選択画面が出てくるので、先ほどダウンロードした画像ファイルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/35e037e9-abee-b705-f82e-830a2b7dbe8f.png)

選択後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/dc8b978e-cee5-65cc-63ef-b83e9ecd3dfe.png)


表示モードを切り替えるとテクスチャが張られた地球が出来ている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/fc49399e-253e-e8b2-9de5-877ab0c52789.png)

後は、エクスポートでglTFなどに出力すれば、three.jsなどで表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664470/6c70d88e-477d-85b6-bacb-cad21459d4d0.png)


## 補足
ネットのいろいろな記事を見た情報だと、この工程だとthreeで上手く表示できず、追加で設定を変える工程が必要そうという記載もありましたが、今回は特に問題ありませんでした。

初期設定が違うのか、Blender or three.jsのバージョンが違うかなどの理由だと推測しています。