requestAnimationFrame

RAF는 애니메이션을 위한 기능이 아님
다음 함수 호출하는 것 (in a recursive manner)
재귀재귀재귀

// Animations
function tick() {
    // Update Objects
    mesh.rotation.y += 0.01;

    // Renderer
    renderer.render(scene, camera);

    requestAnimationFrame(tick);
}

tick();

문제점 : 유저마다 FPS 다름..

RAF는 최대 60번을 목표로 하는데, 유저 컴 성능에 따라 FPS가 다르기 때문. 솔루션은 아래와 같음

방법 1. JS의 Date.now()을 기준으로

cf) since 1970 Jan 1st

왜 쓰나?
the cube will rotate at the same speed regardless of FPS!! 왜냐면 시간이 기준이라서 유저 컴퓨터 성능이랑 노상관

// Time
let time = Date.now();

// Animations
function tick() {
   // Time
   const currentTime = Date.now();
   const deltaTime = currentTime - time;
   time = currentTime;

   console.log(deltaTime);
   // Update Objects
   mesh.rotation.y += 0.001 * deltaTime;

   // Renderer
   renderer.render(scene, camera);

   requestAnimationFrame(tick);
}

tick();

방법 2. 3JS의 Clock

// Clock
const clock = new THREE.Clock();

getElapsedTime()

• 밀리sec가 아니라 sec
• 0 부터 시작
  1 rotation per sec 원하면!

function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update Objects
    mesh.rotation.y = elapsedTime * Math.PI * 2;
}

전체 코드 (mesh 사인 코싸인)

// Animations
function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update Objects
    mesh.position.y = Math.sin(elapsedTime);
    mesh.position.x = Math.cos(elapsedTime);

사인만

사인 코사인 다 줬을 때

전체 코드 (카메라 시점)

// Clock
const clock = new THREE.Clock();

// Animations
function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update Objects
    camera.position.y = Math.sin(elapsedTime);
    camera.position.x = Math.cos(elapsedTime);
    camera.lookAt(mesh.position);

    // Renderer
    renderer.render(scene, camera);

    requestAnimationFrame(tick);
}

tick();