애니메이션은 3D 장면에 생명을 불어넣는 중요한 요소입니다. 이러한 애니메이션은 사용자 상호작용, 스크롤 또는 시간에 의해 트리거되어 3D 객체, 조명, 카메라에 적용될 수 있습니다.

애니메이션을 마스터하는 것은 몰입형 경험을 창출하는 중요한 기술입니다. 알고 있는 기술이 많을수록, 더 많이 창의력을 표현할 수 있습니다.

참고: 3D 모델 애니메이션은 모델 챕터에서 다룹니다.

Lerp

Lerp는 두 값 사이를 보간하는 수학적 함수입니다. 이는 한 지점에서 다른 지점으로 값을 애니메이션화 하는 데 유용합니다.

Copy
const value = THREE.MathUtils.lerp(start, end, t);

첫 번째 매개변수는 시작 값, 두 번째 매개변수는 종료 값, 세 번째 매개변수는 0과 1 사이의 보간 계수입니다.

보간 계수가 0에 가까울수록, 애니메이션의 속도는 느려집니다. 보간 계수가 1에 가까울수록, 애니메이션은 끝 또는 목표 값에 더 빨리 도달합니다.

스타터 팩의 AnimatedBox 컴포넌트에서 이를 실험해봅시다.

이 컴포넌트는 다양한 시점의 박스의 위치를 포함하는 boxPositions 배열을 가지고 있습니다. useFrame 훅을 추가하여 시간에 따라 박스의 위치를 업데이트합시다:

Copy
import { RoundedBox } from "@react-three/drei";
import { useRef } from "react";

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];

    box.current.position.x = targetPosition.x;
    box.current.position.y = targetPosition.y;
    box.current.position.z = targetPosition.z;
  });
  // ...
};

여기서 우리의 박스는 애니메이션화되지 않았습니다. 이는 한 위치에서 다른 위치로 텔레포트합니다. lerp 함수를 사용하여 이를 애니메이션화합시다:

Copy
import * as THREE from "three";
// ...

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];
    box.current.position.x = THREE.MathUtils.lerp(
      box.current.position.x,
      targetPosition.x,
      0.05
    );
    box.current.position.y = THREE.MathUtils.lerp(
      box.current.position.y,
      targetPosition.y,
      0.05
    );
    box.current.position.z = THREE.MathUtils.lerp(
      box.current.position.z,
      targetPosition.z,
      0.05
    );
  });
  // ...
};

이제 박스가 애니메이션화되었습니다. 이는 부드럽게 이동하여 한 위치에서 다른 위치로 이동합니다.

Vector3 클래스는 THREE.MathUtils.lerp 함수 대신 사용할 수 있는 lerp 메서드를 가지고 있습니다:

Copy
// box.current.position.x = THREE.MathUtils.lerp(
//   box.current.position.x,
//   targetPosition.x,
//   0.05
// );
// box.current.position.y = THREE.MathUtils.lerp(
//   box.current.position.y,
//   targetPosition.y,
//   0.05
// );
// box.current.position.z = THREE.MathUtils.lerp(
//   box.current.position.z,
//   targetPosition.z,
//   0.05
// );
box.current.position.lerp(targetPosition, 0.05);

같은 결과를 위해 많은 줄을 절약했네요!

시간을 조작하고 rotation이나 scale 같은 다른 속성들에서도 lerp를 사용하여 다양한 효과를 시도하는 것을 주저하지 마세요.

Float

Float는 객체가 떠 있는 인상을 간단히 줄 수 있는 Drei 라이브러리의 wrapper component입니다.

다음과 같은 props를 포함합니다:

• speed: 애니메이션 속도로, 기본값은 1입니다.
• rotationIntensity: XYZ 회전 강도로, 기본값은 1입니다.
• floatIntensity: 위/아래 부유 강도로, floatingRange와 곱셈으로 작동하며 기본값은 1입니다.
• floatingRange: 객체가 부유할 y-축 값의 범위로, 기본값은 [-0.1,0.1]입니다.

Experience.jsx에서 Duck을 부유하게 만들어 보겠습니다: