LoginSignup
3

More than 3 years have passed since last update.

Three.js で遊び倒す - カメラを動かそう Part.1 -

Last updated at Posted at 2019-03-24

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

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

1. 完成版

スクリーンショット 2019-03-24 11.25.07.png

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 を設定しました。
こちらも、公式 の素晴らしい説明をご参照ください。

スクリーンショット 2019-03-24 11.25.07.png

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3