[ Three.js ] Date.now() 와 THREE.Clock 의 차이점

Three.js에서 애니메이션을 구현하다 보면 아래와 같은 코드를 자주 볼 수 있습니다.

let time = Date.now()

const tick = () =>
{
    const currentTime = Date.now()
    const deltaTime = currentTime - time
    time = currentTime

    mesh.rotation.y += 0.001 * deltaTime

    requestAnimationFrame(tick)
}

하지만 최근 Three.js 예제에서는 아래처럼 THREE.Clock을 사용하는 경우도 많습니다.

const clock = new THREE.Clock()

const tick = () =>
{
    const deltaTime = clock.getDelta()

    mesh.rotation.y += deltaTime

    requestAnimationFrame(tick)
}

그렇다면:

• 두 방식은 무엇이 다를까?
• 왜 THREE.Clock 을 사용하는 걸까?

이번 글에서는 Date.now() 방식과 THREE.Clock 방식의 차이점을 알아보겠습니다.

 

공통 목적은 같다

두 방식 모두:

이전 프레임과 현재 프레임 사이 시간(deltaTime)을 구하기 위한 방법

입니다.

왜냐하면 FPS(Frame Per Second)가 환경마다 다르기 때문입니다.

예를 들어:

• 어떤 컴퓨터는 144fps
• 어떤 컴퓨터는 60fps
• 어떤 컴퓨터는 30fps

로 실행될 수 있습니다.

만약 deltaTime 없이:

mesh.rotation.y += 0.01

처럼 작성하면 FPS가 높은 컴퓨터일수록 애니메이션이 더 빠르게 실행됩니다.

그래서:

movement = speed * deltaTime

처럼 시간 기반으로 움직여야 일정한 속도를 유지할 수 있습니다.

 

Date.now() 방식

let time = Date.now()

const tick = () =>
{
    const currentTime = Date.now()
    const deltaTime = currentTime - time
    time = currentTime

    mesh.rotation.y += 0.001 * deltaTime

    requestAnimationFrame(tick)
}

이 방식은 JavaScript의 기본 기능인 Date.now()를 사용하여 직접 시간을 계산합니다.

 

동작 원리

currentTime - time

을 통해:

현재 프레임 시간 - 이전 프레임 시간

을 계산합니다.

예를 들어:

1000 -> 1016

이라면:

1016 - 1000 = 16

이 되어:

이전 프레임 이후 16ms가 지났다는 의미

가 됩니다.

 

특징

장점:

• 원리를 이해하기 좋음
• JavaScript 기본 기능만 사용

단점:

• 직접 계산해야 함
• 코드가 길어짐
• 시간 변수 관리 필요
• ms 단위를 직접 계산해야 함

 

THREE.Clock 방식

Three.js 에서는 Clock 클래스를 제공합니다.

const clock = new THREE.Clock()

const tick = () =>
{
    const deltaTime = clock.getDelta()

    mesh.rotation.y += deltaTime

    requestAnimationFrame(tick)
}

getDelta()가 자동으로:

• 이전 프레임 시간
• 현재 프레임 시간

차이를 계산해 줍니다.

즉:

Date.now()로 직접 계산하던 작업을 Three.js가 대신 처리해 주는 것

입니다.

 

가장 큰 차이점

Date.now()

반환값 단위:

밀리초(ms)

예:

16

 

THREE.Clock

반환값 단위:

초(second)

예:

0.016

 

그래서 코드가 달라진다

Date.now()

mesh.rotation.y += 0.001 * deltaTime

deltaTime이 ms 단위이므로 숫자를 작게 조절해야 합니다.

 

THREE.Clock

mesh.rotation.y += 1 * deltaTime

초 단위이기 때문에 더 직관적으로 사용할 수 있습니다.

 

THREE.Clock 의 추가 기능

Clock은 deltaTime 외에도:

clock.getElapsedTime()

기능도 제공합니다.

이는:

프로그램 시작 후 총 경과 시간

을 반환합니다.

 

예제

const elapsedTime = clock.getElapsedTime()

mesh.position.y = Math.sin(elapsedTime)

이렇게 사인파 애니메이션 등에 자주 사용됩니다.

 

어떤 방식을 더 많이 사용할까?

최근에는 대부분 THREE.Clock 방식을 더 많이 사용합니다.

이유는:

• 코드가 간결함
• 관리하기 쉬움
• 초 단위라 직관적
• 실수 가능성이 적음
• Three.js 공식 예제에서도 많이 사용

하기 때문입니다.

 

정리

Date.now()

currentTime - previousTime

직접 계산하는 방식.

• 반환값: ms
• 원리 이해에 좋음
• 코드가 다소 복잡함

 

THREE.Clock

clock.getDelta()

Three.js가 자동 계산.

• 반환값: 초(second)
• 코드 간결
• 실무에서 많이 사용

 

한 줄 요약

THREE.Clock은:

Date.now()로 직접 계산하던 deltaTime 처리를 Three.js가 편리하게 래핑한 기능

이라고 이해하면 됩니다.