Three.Clock

Three.Clock

THREE.Clock은 Three.js에서 시간을 다루는 클래스로, 애니메이션을 부드럽게 만들 때 사용합니다.

주요 기능

• 경과 시간(deltaTime) 계산
  → 이전 프레임과 현재 프레임 사이의 시간 차이를 구할 수 있음
• 게임 루프에서 부드러운 애니메이션 구현
  → 프레임 속도(FPS)가 변해도 일관된 움직임 유지 가능
• 타이머 역할
  → 특정 이벤트를 일정 시간 후 실행할 때 사용 가능

---

기본 사용법

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';

const clock = new THREE.Clock(); // 시계 생성

function animate() {
    requestAnimationFrame(animate);
    
    const delta = clock.getDelta(); // 이전 프레임 이후 경과 시간(초 단위)
    console.log(`프레임 간 시간 차이: ${delta}초`);

    // 여기에 애니메이션 로직 추가
}

animate();

clock.getDelta()는 이전 프레임과 현재 프레임 사이의 시간 차이를 반환합니다. 실행되는데 걸리는 시간 , 실행 간격 시간이라고 볼 수도 있습니다.
이를 이용하면, FPS가 변해도 애니메이션 속도가 일정하게 유지됩니다! 

---

애니메이션 속도 조절하기

Three.Clock을 사용하면, 프레임 속도(FPS)에 따라 애니메이션이 빨라지거나 느려지는 문제를 해결할 수 있어요!

const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta(); // 지난 프레임 이후 경과 시간 (초)
    
    cube.rotation.x += 1 * delta; // 시간에 비례하여 회전
    cube.rotation.y += 2 * delta;

    renderer.render(scene, camera);
}
animate();

FPS가 높아져도(예: 144Hz 모니터), 애니메이션이 일정한 속도로 움직입니다!

---

clock.getElapsedTime() – 경과 시간 측정

getElapsedTime()을 사용하면, 시계를 시작한 이후 총 경과 시간을 알 수 있어요.

const clock = new THREE.Clock();

setTimeout(() => {
    console.log(`경과 시간: ${clock.getElapsedTime()}초`);
}, 3000);

3초 후, clock.getElapsedTime()을 호출하면 약 3.0초가 출력됩니다.

---

정리

메서드	설명
clock.start()	시계를 시작 (기본적으로 자동 시작됨)
clock.stop()	시계를 정지
clock.getDelta()	이전 프레임과 현재 프레임 사이의 시간 차이 (초 단위)
clock.getElapsedTime()	시작 이후 총 경과 시간 (초 단위)
clock.autoStart	true이면 clock.getDelta()를 호출할 때 자동 시작

---

언제 사용하면 좋을까?

✔ 부드러운 애니메이션 만들 때
✔ 프레임 속도(FPS) 변화에 영향을 받지 않는 움직임 구현
✔ 타이머 기능이 필요할 때

 

https://threejs.org/docs/index.html?q=clock#api/en/core/Clock

three.js docs