JS memo

お洒落にJavaScript。

2019年6月9日10:29

three.jsで複数要素を指定して星空を描写してみた。

メインビジュアル

three.jsで複数要素を指定して星空を描写してみた。

three.jsの複数要素を描けるTHREE.Geometryを使って7万個の星空を描写してみました。

目次

  1. 完成した作品
  2. three.jsとは
  3. 作成手順
  4. まとめ

完成した作品

まずは今回目標とする星空をご覧ください。

three.jsで作った星空

three.jsについて

three.jsとはWebGLを使ってブラウザ上に3Dを簡単に描くことができるJavaScriptのライブラリーです。

詳細についてはthree.jsでカラフルな球体を作成をご覧ください。

作成手順

1. sceneをセットする

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x0000FF, 0.0008 );

const camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 700, 3000 );
camera.position.z = 1800;

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

scene、camera、rendererをセットします。

sceneの詳しい説明についてはこちらの記事をご覧ください。

sceneにはTHREE.FogExp2を使って後ろの物体ほどぼやかします。

FogExp2(色, 濃さ);

FogExp2を設定しないと奥行きのでない白黒の景色になってしまいます。

FogExp2なしの場合

cameraは座標(0, 0, 1800)に設置し、そこから700(z:1100)〜2800(z:-1200)を見えるようにしておきます。

cameraの設置位置

最後にrendererでWebGLを設定しておきます。

2. geometryをセットする

座標(-1000, -1000, -1000)〜座標(1000, 1000, 1000)中に1万個の星を散りばめて行きます。

const geometry = new THREE.Geometry();

for( let i = 0; i < 10000; i ++ ){
  let vertex = new THREE.Vector3();
  vertex.x = Math.random()*2000-1000;
  vertex.y = Math.random()*2000-1000;
  vertex.z = Math.random()*2000-1000;
  geometry.vertices.push( vertex );
}

THREE.Geometryは同じ要素を大量に描写する時にまとめて書くことができ、高速化できます。今回は大量に四角を描写したいので、THREE.Geometryを利用します。

THREE.Vector3はそれぞれの要素の座標を設定することができます。Math.random()*2000-1000はランダムで-1000〜1000の数字を選んでくれます。

最後に要素の座標の配列geometry.verticesにそれぞれ格納します。

3. materialをセットする

先ほど設定したgeometryに異なるサイズの四角を設定して量産していきます。

function particle(size){
  const material = new THREE.PointsMaterial( { size: size });
  const particles = new THREE.Points( geometry, material );
  particles.rotation.x = Math.random()*10;
  particles.rotation.y = Math.random()*10;
  particles.rotation.z = Math.random()*10;
  scene.add( particles );
}

for( let k=1; k<8; k++ ) particle(k);

THREE.PointsMaterialでサイズを指定します。

particles.rotationでそれぞれ座標を設定して散らばるようにします。 先ほどcameraの見える範囲を-1000〜1000より少し多めにしたのはこの散りばめる作業で枠内からはみ出る四角が出てくるためです。

最後にsceneに加えてmaterialの設定は完了です。

サイズ1〜7(1万個×7)の四角を量産してきます。

まとめ

three.jsで星空を作成してみました。
FogExp2で奥行きを出すこと、THREE.Geometryで大量の要素を描写することができれば簡単にこのような星空を描写することができます。