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 로, 생성된 오브젝트가 들어갑니다.
이 constructor 은, 인수에 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의 묘미를 즐겨보자.
그럼 또~