애니메이션 기본

draw함수로 그리기 부분 넣기

렌더러가 렌더 메서드를 호출하는 부분을 draw 함수 안으로 넣기

src/ex05_animationBasic

import * as THREE from "three";

/* 주제:  애니메이션 기본 */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
    // alpha: true // 배경 투명도 설정
  });
  renderer.setSize(window.innerWidth, window.innerHeight);

  /*  디바이스 픽셀 비율을 설정 */
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /*  배경색, 투명화 설정 */
  // renderer.setClearAlpha(0.5); // 불투명도 설정
  // renderer.setClearColor(0x00ff00);

  /*  Scene 만들기 */
  const scene = new THREE.Scene();
  // scene.background = new THREE.Color("blue");

  /*  Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75, // 시야각 (field of view)
    window.innerWidth / window.innerHeight, // 종횡비(aspect)
    0.1, // near
    1000 // far
  );
  camera.position.z = 5;
  scene.add(camera);

  /*  Light 만들기 */
  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.x = 2;
  light.position.z = 2;
  scene.add(light);

  /*  Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    // MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
    // MeshStandardMaterial는 빛의 영향을 받는다.
    color: "red"
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  /*  그리기 */
  function draw() {
    renderer.render(scene, camera);
  }

  function setSize() {
    // 카메라
    camera.aspect = window.innerWidth / window.innerHeight; // window는 전역 객쳐여서 작성하지 않아도 됨. window.innerWidth === innerWidth
    // updateProjectionMatrix -  카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함
    camera.updateProjectionMatrix();
    // setSize - 변화된 것을 다시 그려주는 것까지 해야 작동된다.
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /*  이벤트 */
  window.addEventListener("resize", setSize);

  draw();
}

애니메이션 넣기

mesh 회전 시키기

src/ex05_animationBasic

import * as THREE from "three";

/* 주제:  애니메이션 기본 */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
    // alpha: true // 배경 투명도 설정
  });
  renderer.setSize(window.innerWidth, window.innerHeight);

  /*  디바이스 픽셀 비율을 설정 */
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /*  배경색, 투명화 설정 */
  // renderer.setClearAlpha(0.5); // 불투명도 설정
  // renderer.setClearColor(0x00ff00);

  /*  Scene 만들기 */
  const scene = new THREE.Scene();
  // scene.background = new THREE.Color("blue");

  /*  Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75, // 시야각 (field of view)
    window.innerWidth / window.innerHeight, // 종횡비(aspect)
    0.1, // near
    1000 // far
  );
  camera.position.z = 5;
  scene.add(camera);

  /*  Light 만들기 */
  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.x = 2;
  light.position.z = 2;
  scene.add(light);

  /*  Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    // MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
    // MeshStandardMaterial는 빛의 영향을 받는다.
    color: "red"
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  /*  그리기 */
  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);
  }

  function setSize() {
    // 카메라
    camera.aspect = window.innerWidth / window.innerHeight; // window는 전역 객쳐여서 작성하지 않아도 됨. window.innerWidth === innerWidth
    // updateProjectionMatrix -  카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함
    camera.updateProjectionMatrix();
    // setSize - 변화된 것을 다시 그려주는 것까지 해야 작동된다.
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /*  이벤트 */
  window.addEventListener("resize", setSize);

  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가 계속 호출되기 때문 반복되는 것
단, 리퀘스트 애니메이션 프레임 자체는 반복시키지 않는다.

저작자표시 변경금지 (새창열림)