[Three.js] 애니메이션

오늘 배운 것들

• 애니메이션 기본(requestAnimationFrame, setAnimationLoop)
• 성능 보정(clock을 이용한 디바이스 별 성능 격차 보정, JavaScript Date.now를 사용한 성능 격차 보정)
• 안개

애니메이션 기본

 

window.requestAnimationFrame(draw);

renderer.setAnimationLoop(draw); //작동이 똑같음 but AI, VR 컨텐츠 할때는 이거를 사용해야 한다.

requestAnimationFrame과 setAnimationLoop 모두 리페인트를 한다. (프레임을 새로 그린다...?)

재귀함수식으로 draw 함수를 만들고 그 안에 저 코드를 넣으면 프레임이 계속 갱신되면서 자연스러운 애니메이션을 만들 수 있게 된다.

mesh.rotation.y += 0.01; //radian

mesh.rotation.y += THREE.MathUtils.degToRad(1); //deg to rad

이렇게 빨간 박스의 속성을 설정하게 되면

이 빨간 박스가 막 돌아가는 걸 볼 수 있다.

 

애니메이션 성능 보정

그러나 이 돌아가는 속도가 컴퓨터마다 다를 수 있다.

const clock = new THREE.Clock();

//draw 함수 안에서

const time = clock.getElapsedTime();

time을 콘솔에 찍어보면 draw 함수에서 프레임이 갱신될 때마다 시간 정보가 찍히는 것을 볼 수 있는데 이 시간의 격차가 컴퓨터마다 다르다. 성능이 좋은 컴퓨터는 1초에 한 번 씩 찍힌다고 가정할 때 좋지 않은 컴퓨터는 5초에 한 번씩 찍힐 수도 있는 것이다.

따라서 위에서처럼 직접 설정하는 대신

mesh.rotation.y = time; //어떤 성능의 컴퓨터에서도 같은 속도로 움직일 수 있게

이런식으로 설정을 해 주면 모든 디바이스에서 일정한 속도가 유지될 수 있다.

const delta = clock.getDelta(); //실행되는 간격시간

elapsed time은 절대시간을 나타내고 getDelta는 간격을 출력하는데 둘 다 사용할 수 있다. 다만 delta를 쓸 때는 rotation.y에 += 를 해줘야 한다.

 

안개

scene.fog = new THREE.Fog('blue', 3, 4); //색상, near, far

scene에 fog 속성을 추가하면 아래와 같은 안개 효과를 줄 수 있다. 원근을 나타낼 때 유용하다고 한다. 색상 지정, 범위 지정(near, far)이 가능하다.