Blender Three.js 地球その３（ベイクと星）

公開日： 2016/10/20 : brender, Three.js, WebGL

blender three.js 地球

今回はベイクを試してみようと思います。

あと、参考サイトの英語の動画解説では、blenderのワールドで星も出していますが、私のblenderには星の設定がなく（バージョン？）、設定があったとしてもうまくエクスポート出来ないような気がしてならないので、星の表示はjsの方でやろうと思います。

Blender ベイク

地球を作ったblenderはこんな感じで、地球のUV球、雲のUV球、大気圏の青色のUV球と３つが出来ています。

地球のUV球のテクスチャをベイクしてみます。

3Dビュー・エディターの右上部分の三角を左にスライドさせて、ウィンドウを分割します。
エディタータイプをUVエディターにします。

地球のUV球を選択した状態で、編集モードのワイヤーフレームにします。
新規UVエディターの方は画像→新規画像を作っておきます。

名前をbake_tex01としました。

3Dビュー・エディターの方でUキーを押して、スマートUV投影を選択します。

そうするとUVマップが右側に出ます。

レンダータブのベイクのボタンを押します。
そうすると、テクスチャ画像が作られます。
F13を押してこの画像を保存します。

あとは、現状制作してあるマテリアルとテクスチャを削除して、ベイクしたテクスチャを貼りなおす、という作業になります。

Blender Three.js 星を作る

星はThree.jsのパーティクルでもやってみたのですが、パーティクルは四角型しかないので、丸画像で透過させてもこのように地球と重なった時に四角ということが分かってしまう結果に。

なので、blenderで球の小さい星を１つエクスポートして、それを散りばめて表示することにしました。
5000個くらいは表示してもそんなに重くありませんでした。

Blenderで、Shift ＋ Aキーでメッシュ→UV球を作ります。

左のツールシェフ内のセグメントとリングの設定を16くらいに。

Sキーで縮小します。値を入力して0.01倍くらいにします。

マテリアルを新規作成します。

これを名前を star.json でエクスポートします。

表示のスクリプトは以下の様な感じで。

//Blenderのオブジェクトを読み込む(星)
loader = new THREE.JSONLoader();
loader.load( 'star.json', function ( geometry, materials ) { //第１引数はジオメトリー、第２引数はマテリアルが自動的に取得）
	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 );
    }

} );