THREE.Clock() - 주요 메소드

THREE.Clock은 Three.js에서 시간 관리를 위한 유용한 도구로, 애니메이션과 프레임 간의 간격을 측정하는 데 주로 사용됩니다. Clock 객체를 이용하면 시간의 경과를 측정하거나 프레임별 델타 시간(delta time)을 계산하여 애니메이션 속도를 일정하게 유지할 수 있습니다.

 

getElapsedTime()

• 경과된 전체 시간을 반환합니다. Clock이 생성된 이후 또는 마지막으로 clock.start()가 호출된 이후의 총 경과 시간을 초 단위로 반환합니다.

const elapsedTime = clock.getElapsedTime();

getDelta()

• 두 프레임 간의 시간 차이(델타 시간)를 반환합니다. getDelta()는 보통 매 프레임마다 호출되어 애니메이션을 프레임 속도에 관계없이 부드럽게 실행하게 합니다.

const delta = clock.getDelta();

start()

• Clock을 시작합니다. 시계를 다시 시작할 때 사용합니다

clock.start();

stop()

• Clock을 멈춥니다. getElapsedTime()과 getDelta()는 시계를 멈춘 후에도 동일한 값을 반환합니다.

clock.stop();

running

• Clock이 현재 작동 중인지 여부를 반환합니다. true면 작동 중, false면 멈춘 상태입니다.

const isRunning = clock.running;

 

활용예  

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

// 렌더링 루프에서 애니메이션 처리
function animate() {
  // 새로운 프레임을 요청 (requestAnimationFrame을 통한 반복적인 호출)
  requestAnimationFrame(animate);

  // 이전 프레임과의 시간 차이(델타 시간) 계산
  const delta = clock.getDelta();

  // 애니메이션에 delta 값을 반영하여 객체의 회전 속도를 일정하게 유지
  mesh.rotation.x += delta * 0.5; // 0.5 radian per second
  mesh.rotation.y += delta * 0.5;

  // 씬을 렌더링
  renderer.render(scene, camera);
}

// 애니메이션 시작
animate();

• clock.getDelta()를 이용하여 각 프레임에서의 시간 차이를 계산하고, 이를 객체의 회전에 적용함으로써 프레임 속도에 관계없이 일정한 속도로 애니메이션이 실행되도록 합니다.
• requestAnimationFrame(animate)를 통해 매 프레임마다 animate 함수가 호출되고, clock.getDelta()는 각 프레임에서 경과된 시간을 반환해 줍니다.
• 이 방식은 프레임 속도가 변동되더라도 애니메이션이 일정한 속도로 실행되도록 보장합니다.