[ #4.5 ] 마우스 따라 움직이는 Perspective Camera

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

 PerspectiveCamera를 사용해서 Canvas위 마우스 위치에 따라 움직이는 카메라를 만들어보자!

👇 기본 ThreeJS의 틀, 기본 애니메이션 적용 방법은 아래 게시글을 참고하세용

[ #1 ] ThreeJS의 기본 틀

 

[ #3 ] Animation 적용 (feat. RequestAnimationFrame)

 

2가지 버전을 만들어 볼 것이당

1. 상하좌우로 움직이는 카메라
2. 물체를 중심으로 둥글게 상하좌우 움직이는 카메라

 

 

🍀 기초 설정

우리에겐 마우스 좌표의 값이 필요하다! 

 (마우스 좌표 값으로 카메라의 애니메이션을 지정해야 하니깐..!)

그리고 이왕이면, 마우스의 좌표의 값을 이쁘게 다듬어서 쓸 예정이다!
ex. x좌표의 값 -0.5 ~ 0.5 (총 1의 크기)
      y좌표의 값 -0.5 ~ 0.5 (총 1의 크기) 

// 1. 먼저 cursor의 객체를 만들어 준다! x와 y값을 key로 갖도록!
const cursor = {
  x: 0,
  y: 0,
};

// 2. mousemove의 이벤트리스너를 추가!
// 3. event.clientX, evnet.clientY를 통해 마우스의 x, y좌표값을 가져오기
// 4. 현재 Canvas의 width 및 height로 나누어준 후 (0~1의 값을 갖게 됨)
// 5. 0.5 빼기! (우리가 원했던 -0.5 ~ 0.5의 값을 얻게 되었다 얏호!)
addEventListener("mousemove", (event) => {
  cursor.x = event.clientX / sizes.width - 0.5;
  cursor.y = event.clientY / sizes.height - 0.5;
});
// 만약 fullSize의 Canvas라면 sizes.width 대신 window.innerWidth를
// sizes.height 대신 window.innerHeight를 사용하면 됩니다!

 

 

🍀 상하좌우 움직이는 카메라

const tick = () => {
  camera.position.x = cursor.x * 10;
  // camera의 x좌표 값을 cursor.x를 통해 설정
  // '* 10'을 통해 이동할 범위를 조절 가능
  camera.position.y = -cursor.y * 10;
  // camera의 y좌표 값을 cursor.y를 통해 설정
  // '* 10'을 통해 이동할 범위를 조절 가능
  // cursor.y는 화면 위가 마이너스(-)이므로 y축과는 반대! 따라서 앞에 (-)를 추가
  
  camera.lookAt(mesh.position);
  // 카메라의 위치 변경 후, lookAt을 작성해야 물체를 정상적으로 바라보게 구현할 수 있음
  
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

 

 

🍀 물체를 중심으로 둥글게 움직이는 카메라

const tick = () => {
  camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3;
  // 카메라의 x좌표를 sin(cursor.x)를 사용해 설정
  camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3;
  // 이와 동시에 z좌표를 cos(cursor.x)를 사용해 거리를 일정하게 유지
  // Math.sin/cos(cursor.x * Math.PI * 2) * 3에서
  // 2의 자리에는 돌리고 싶은 정도의 수를 기입! (90도씩 몇번 돌리고 싶은지)
  // 3의 자리에는 z축의 기본값을 위한 설정의 수를 기입! 
  
  camera.position.y = -cursor.y * 2;
  // y는 cursor.y 그대로의 값을 넣어줌
  
  
  camera.lookAt(mesh.position);
  
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};