Three.js day 4 となりました。

昨日は、3D オブジェクトを動かしました。
本日は、カメラを動かす準備をします。

#1. 完成版

#2. 参考文献
ICS MEDIA
初めてのThree.js
CodeGrid

#3. 分解してみる

❶.
現状では、カメラが移動すると、その物体を追い続けることができず、見失ってしまいます。
カメラが、物体を注視し続けるためには、どうしたらよいでしょうか？

これには、camera.lookAt()を使います。

###camera.lookAt メソッドとは？
このメソッドで、どの位置からでも、指定された座標に強制的に追い続けます。

camera.lookAt(new THREE.Vector3(0,0,0))

camera.lookAt() の引数には、THREE.Vector3にて、生成されたオブジェクトが入ります。
このコンストラクタは、引数に3つの数字を取り、

(0,0,0)  ->  {x:0, y:0, z:0}

と変換されたインスタンスを作ります。

デモ　がICS MEDIA からありましたので、ぜひ一度ご覧ください。

###星空を作ろう！

カメラの動きをわかりやすくするために、星空を作ります。
前回までの復習です。

index.html

starNight();

function starNight(){

const star = new THREE.Points(geometry, material);
scene.add(star);
}

THREE.Pointクラスで、3D空間内に大量のParticle を作ることができます。
詳しくは、公式DOC や、ICS MEDIA をご参照ください。

では、上のコードに、geometry と material を書いていきましょう。

index.html

starNight();

function starNight(){

  const geometry = new THREE.Geometry();

  for (let i=0; i<1000; i++){

    const star = new THREE.Vector3();
    star.x = THREE.Math.randFloatSpread( 3000 );
    star.y = THREE.Math.randFloatSpread( 3000 );
    star.z = THREE.Math.randFloatSpread( 3000 );

    geometry.vertices.push(star)
  }


  const material = new THREE.PointsMaterial({ 
      size : 10,
      color: 0xffffff
  });

  const star = new THREE.Points(geometry, material);
  scene.add(star);
}

geometry は、まず、空のgeometryを作り、loop 文を使います。
geometry.vertices.push(new THREE.Vector3()) は、自前でgeometry を作る時によく、使う構文です。

vertices とは、多面体を構成する頂点のことです。つまり、上の構文は、
geometryの頂点に、座標を設定しますよという意味になります。

material には、PointsMaterial を設定しました。
こちらも、公式の素晴らしい説明をご参照ください。

綺麗な星空ができました。
これで、カメラを動かした時に、わかりやすくなります。

それでは、明日、目的であるカメラを動かして、3Dの醍醐味を堪能しましょう。
それでは、また〜