애니메이션

Frame rate

대부분의 스크린은 1초에 60프레임(= 1frame / 16ms)
하지만 이는 컴퓨터 성능에 따라 달라진다
frame rate에 상관없이 똑같은 애니메이션을 주기 위해 자바스크립트는 window.requesetAnimationFrame() 함수를 사용한다

requestAnimationFrame

const tick = () =>
{
    // Update objects
    mesh.rotation.y += 0.01

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

tick함수 안에서 자기 자신인 tick을 호출한다 ➡️ 무한 루프
문제는 frame rate가 높은 컴퓨터에서 위 코드를 테스트하면 오브젝트가 상대적으로 빨리 움직이고 낮은 컴퓨터에서는 느리게 움직일 것이므로 일관성이 없다

일관적인 frame rate

(1) Date.now()

네이티브 자바스크립트의 Date.now()를 사용하는 방법

const time = Date.now()

위 타임스탬프는 1970년 1월 1일로 부터 얼마나 많은 시간이 지났는지 밀리세컨드 단위로 나타내준다

let time = Date.now()

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

    // Update objects
    mesh.rotation.y += 0.01 * deltaTime

    // ...
}

tick()

• 현재 타임스탬프 - 이전 프레임 = deltaTime
• deltaTime은 60fps 스크린 기준 16
• 이 deltaTime을 이용해서 디바이스에 관계없이 일관적인 속도의 애니메이션을 만든다

(2) Clock

Three.js가 제공하는 Clock을 초기화 하고 getElapsedTime()같은 빌트인 함수를 사용하는 방법도 있다

const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update objects
    mesh.rotation.y = elapsedTime
    mesh.position.x = Math.cos(elapsedTime)
    mesh.position.y = Math.sin(elapsedTime)

    // ...
}

tick()

GSAP

정말정말 많은 애니메이션 라이브러리가 있지만 그 중 가장 유명한건 GSAP이다

npm install --save gsap을 통해 라이브러리를 설치해준다

import * as THREE from 'three'
import gsap from 'gsap'

파일 상단에 임포트도 잊지 않고 해준다

- gsap.to(...)

gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })

const tick = () =>
{
    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)
}

tick()