애니메이션 기본

 

애니메이션 넣기

 

mesh 회전시키기

  import * as THREE from "three";

  /*  그리기 */
  function draw() {
    // 애니메이션 추가
    // mesh.rotation.y += 0.1;  // 각도는 Radian을 사용, 360도는 2파이
    mesh.rotation.y += THREE.MathUtils.degToRad(1);
    mesh.position.y += 0.01;
    if (mesh.position.y > 3) {
      mesh.position.y = 0;
    }

    renderer.render(scene, camera);

    // window.requestAnimationFrame(draw);
    renderer.setAnimationLoop(draw);
  }

  draw();

 

 

window.requestAnimationFrame()

참고 : window 함수는 전역함수여서 생략하고 작성해도 된다.

 

• threeJS에서 애니메이션을 주는 것은 Canvas랑 마찬가지 requestAnimationFrame메드를 사용한다.
  • window.requestAnimationFrame() 메서드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받다.
  • 예를 들어, 박스가 하나 있고 1도씩 회전한다면 리페인트를 해주기 전 박스를 1도 회전하는 함수를 호출한다는 것 (박스 돌리기 → 리페인트를 반복한다는 뜻)

 

 

• 비슷하게 예전에 많이 사용되는 SetInterval 이 있다.
  • SetInterval : 자동으로 지정해 둔 초당 프레임수를 빠르게 반복하는 함수
  • 성능 이슈와 단점이 많음
  • 빠르게 반복 실행하면서 애니메이션 처리를 할 때는 요즘 requestAnimationFrame을 사용한다.

 

 

• 1분 코딩 requestAnimationFrame 사용법

 

 

renderer.setAnimationLoop(draw)

• window.requestAnimationFrame() 대신 사용
• 렌더러가 가지고 있는 메드를 사용하여 애니메이션을 사용해도 된다.
• threeJS를 이용해서 AR이나 VR 같은 콘텐츠를 만들 경우는 setAnimationLoop 로 꼭 사용하기

 

 

mesh.rotation.y += 0.1

• 각도는 Radian을 사용
• 360도는 2파이

 

 

mesh.rotation.y += THREE.MathUtils.degToRad(1)

• THREE.MathUtils.degToRad()가 우리에게 익숙한 각도
• deg : 360도 기반의 각도
• 디그리 값을 라디안으로 변환해 주는 메드
• THREE.MathUtils.degToRad(1) = 1도씩 돌리는 것

 

 

---

 

 

애니메이션 속도는 컴퓨터 성능이나 상황에 다라 다를 수 있다.

• 예전에는 일반적으로 초당 60회 반복을 목표로 했었음.
• 최근 브라우저들 같은 경우 화면 주사율을 따라가는 것이 권고된다.
• 컴퓨터 화면 주사율에 따라 60회보다 훨씬 더 많이 반복이 될 수 있다.

 

 

window.requestAnimationFrame(draw)

• draw()를 호출하면서 반복되는 것.
• 인자로 넣은 함수를 리페인트가 일어나기 전 한번 호출해 주고 끝낸다. draw가 계속 호출되기 때문 반복되는 것
• 단, 리퀘스트 애니메이션 프레임 자체는 반복시키지 않는다.