Three.js / [3] animate & requestAnimationFrame

- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. -

 

---

이번 게시물은 공식문서보다는 강의를 위주로 설명하려고 한다.

강의랑 공식문서랑 버전도 다른것같고 약간 순서의 괴리감도 있어서, 강의가 끝난 후에 공식문서를 호로록 다시 돌아보는 것을 목표로 한당.

 

---

[requestAnimationFrame]

지난 강에서 animate부분에 이런 코드를 작성했었다

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

그리고 난 후 화면이 새로고침될때 마다 계속해서 렌더링이 될 수 있도록 해준다.

setInterval과 비슷해 보이지만, 화면에서 벗어낫을때 이를 멈춰 에너지를 아끼기 위함이라고 한다

 

라고 설명했었다.

 

그런 동작이 일어나기 위해서, requestAnimationFrame에 다시 animate함수를 넣어 계속해서 재귀적으로 렌더가 일어나도록 하면서, 화면이 움직이거나 브라우저의 사이즈가 변경될때도 계속해서 렌더링이 되는것이다.

 

무한하게 렌더링이 되는것은 아니고 60/s에 한번씩 일어난다고 한다. 하지만 화면 주사율에 따라 다름 -> 아마 헤르쯔 이야기하는것 같음

---

그리고 중요한건 이게 three.js의 api인줄 알았는데 그냥 web api였음.

이제야 보니 어디서 불러와서 쓰질않고 있더라.

 

그래서 mdn에 적혀있는 requestAnimationFrame의 내용을 조금 더 공부해봤음

window.requestAnimationFrame() - Web API | MDN

 

공식문서 예제

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

 

 

공식문서의 예시를 보면 해당 함수가 조금 더 이해하기 쉬워진다.

우선 내가 에니메이팅(움직이게 하고 싶은)요소를 element라고 해본다.

 

이제 이 엘리멘트가 움직이도록 해줘야하는데, 이 움직이는 값은 흐른 시간에 따라 달라지도록 해줘야한다.

 

step함수를 이를 행하게 한다.

만약 시작을 하지 않았다면, start에 현재 시간을 찍어준다. 그렇게 되면 start는 고정된 시간값이 되며, 지금의 시간값과 현재 시간값의 차이가 바로 애니메이팅이 진행되어야 할 정도가 되는 것이다.

 

그리고 난 후, element에 스타일을 적용 시킨다.

스타일에는 element의 위치 변경에 대한 내용이 들어가며, Math.min으로 값을 정해주는 이유는 progess가 커지더라도 200이라는 값을 고정시키기 위해서다.

 

만약 진행이 일정이상 된다면, 새롭게 requestAnimiationFrame으로 step함수를 재귀적으로 호출한다.

그러면 다시끔 start값이 바뀌게 되면서 빙글빙글 돌게 되는 것이다.

 

이렇게 문서를 통해 requestAnimiation을 보니, three.js가 어떤 일을 도와주는지 명백히 보이는 것 같다.

 

이상