3D 장면에서 카메라를 위치시키고 애니메이션화하기 위해, 우리는 이를 수행하는 몇 가지 방법을 발견했습니다.

• 카메라 위치와 회전을 수동으로 설정합니다.
• OrbitControls와 같은 다양한 종류의 컨트롤을 사용합니다.

하지만 때때로 카메라에 대한 더 많은 컨트롤이 필요하며, 이를 올바르게 설정하려면 많은 코드와 계산이 필요합니다. 다행히도, 이를 도와줄 라이브러리가 있습니다.

우리가 사용할 것은 camera-controls라 불리는 작은 라이브러리입니다. 이 라이브러리를 사용하면 다양한 카메라 움직임과 애니메이션을 매우 쉽게 수행할 수 있습니다.

운 좋게도, Drei는 이 라이브러리에 대한 래퍼를 가지고 있어서 몇 줄의 코드로 사용할 수 있습니다.

시작 프로젝트

이 라이브러리의 다양한 기능을 발견하기 위해, iPhone 15 Pro Max Black을 보여줄 수 있는 멋진 3D 슬라이더를 만들 것입니다.

iPhone 16이 출시되면 이 강의를 업데이트할 수 있도록 저에게 연락해 주세요 🤭

시작 프로젝트에는 다음이 포함됩니다:

• polyman이 제작한 Apple iPhone 15 Pro Max Black 모델. Creative Commons Attribution 라이선스 하에 제공됩니다.
• 프로젝트에 나중에 추가할 Tailwind CSS로 제작된 슬라이더를 포함하는 UI 컴포넌트.

현재로서는 우리는 iPhone 모델만 볼 수 있습니다

이제 카메라 컨트롤을 가지고 놀아봅시다.

Controls

카메라 컨트롤을 활성화하려면 스타터 프로젝트에 이미 존재하는 OrbitControls를 Drei의 CameraControls 컴포넌트로 교체해야 합니다.

또한 나중에 접근하여 메서드를 사용할 수 있도록 컨트롤에 대한 참조를 추가할 것입니다.

Experience.jsx:

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

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

참조 대신, 이제 react-three-fiber의 useThree 훅을 사용하여 CameraControls 컴포넌트에 접근할 수 있습니다. 자세한 내용은 문서를 참조하세요.

이렇게 하면, OrbitControls와 큰 차이를 느낄 수 없습니다. 여전히 카메라를 회전하고, 팬하고, 줌할 수 있습니다.

API는 distance, zoom, polarAngle, azimuthAngle 등과 같은 많은 공통 컨트롤을 가지고 있습니다.

CameraControls 컴포넌트가 빛을 발하는 부분은 카메라를 애니메이션화하고 싶을 때입니다.

사용 가능한 모든 컨트롤을 다루지는 않겠지만, 가장 일반적인 것들을 살펴볼 것입니다. 전체 목록은 카메라-컨트롤 문서에서 찾을 수 있습니다.

Dolly

dolly 컨트롤은 카메라를 앞뒤로 이동할 수 있게 해줍니다.

Leva를 사용하여 카메라를 앞뒤로 움직이는 버튼을 추가해 봅시다:

Copy
// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

dolly 메서드의 첫 번째 인자는 카메라를 이동시키고 싶은 거리입니다. 두 번째 인자는 움직임을 애니메이션으로 만들지 여부를 나타내는 부울 값입니다.

이제 카메라가 앞뒤로 이동할 수 있습니다

OrbitControls로 동일한 결과를 얻으려면 카메라와 타겟의 새 위치를 계산해야 합니다. 그런 다음 카메라와 타겟을 새 위치로 애니메이션화해야 합니다.

트럭

truck 제어는 카메라의 방향을 변경하지 않고 카메라를 위, 아래, 왼쪽, 오른쪽으로 이동할 수 있게 합니다.

dolly 제어와 마찬가지로, truck 제어를 실험하기 위해 버튼을 추가해봅시다:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

truck 메서드의 첫 번째 두 인자는 카메라를 이동하고자 하는 수평 및 수직 거리입니다. 세 번째 인자는 움직임을 애니메이션으로 만들지 여부를 나타내는 boolean 값입니다.

카메라를 대각선으로 이동시키기 위해 수평 및 수직 거리 값들을 다르게 설정할 수 있습니다.

회전

Camera Controls는 OrbitControls로 마우스를 드래그할 때의 움직임처럼 카메라를 목표 지점 주위로 프로그래밍 방식으로 회전시키는 방법을 제공합니다.

카메라를 목표 지점 주위로 회전시키는 버튼을 추가해봅시다:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

rotate 메서드의 인수는 다음과 같습니다:

• azimuthAngle: 수평의 라디안 각도.
• polarAngle: 수직의 라디안 각도.
• enableTransition: 움직임을 애니메이션화할지 여부를 나타내는 boolean 값.

애니메이션 시간 매끄럽게 하기

enableTransition 인자를 사용할 때 애니메이션 시간을 제어하기 위해, smoothTime 속성을 사용할 수 있습니다.