3D 장면에서 카메라는 사용자의 관점입니다. 사용자가 화면에서 보는 것을 정의하는 것은 카메라입니다.

threejs에는 여러 종류의 카메라가 있습니다. 지금은 가장 일반적인 세 가지, 즉 perspective camera, orthographic camera, cube camera에 대해서만 다루겠습니다.

다양한 종류의 카메라를 살펴보기 전에 프로젝트에 OrbitControls를 추가해보겠습니다.

Orbit controls

Orbit controls는 사용자가 장면 주위를 카메라를 이동할 수 있게 해주는 제어 세트입니다.

이것을 사용하는 방법에 대해 나중에 자세히 살펴볼 것이지만, 지금부터는 다양한 카메라 유형을 더 잘 이해하기 위해 카메라를 이동할 수 있게 사용할 것입니다.

@react-three/drei 패키지에서 OrbitControls 컴포넌트를 Canvas 컴포넌트에 가져와 추가하세요:

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

function App() {
  return (
    <>
      <Canvas>
        <OrbitControls />
      </Canvas>
    </>
  );
}

이제 장면 주위를 카메라로 이동할 수 있습니다:

• 왼쪽 클릭 + 드래그: 카메라 회전
• 마우스 휠: 확대/축소
• 오른쪽 클릭 + 드래그: 카메라 팬

터치 기기에서도 호환됩니다:

• 한 손가락 + 드래그: 카메라 회전
• 두 손가락 + 핀치: 확대/축소
• 두 손가락 + 드래그: 카메라 팬

Perspective camera

r3f에서 기본 카메라는 perspective camera입니다. 이는 인간의 눈이 세상을 보는 방식을 시뮬레이션하기 때문에 3D 애플리케이션에서 가장 일반적인 카메라입니다.

기본 카메라이기 때문에 장면에 추가할 필요가 없습니다. 이미 존재하며 Canvas 컴포넌트에 camera prop을 추가하여 제어할 수 있습니다:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

하지만 장면에 새 카메라를 수동으로 추가할 수도 있습니다.

그리고 makeDefault prop을 사용하여 Canvas 컴포넌트의 어디에나 PerspectiveCamera 컴포넌트를 추가할 수 있습니다. 이 카메라를 장면의 기본 카메라로 만듭니다:

Copy
<Canvas>
  <PerspectiveCamera position={[0, 8, 0]} makeDefault />
</Canvas>

이제 카메라는 장면의 상단에 위치해 있습니다:

기본적으로 카메라는 장면의 중심 [0, 0, 0]을 바라보고 있습니다. 다음 강의에서 애니메이션을 위해 카메라의 대상을 변경하는 방법을 알아보겠습니다.

Perspective camera에는 시야각, 종횡비, 및 near/far 클리핑 평면이 있습니다.

Field of view

시야각은 카메라의 각도입니다. 이는 카메라의 아래쪽부터 위쪽까지의 각도입니다.

시야각은 각도로 정의됩니다. 기본값은 75도입니다.

현재 우리의 장면에서 보이는 것은 다음과 같습니다:

이제 시야각을 30도로 변경해 봅시다:

Copy
<Canvas camera={{ position: [3, 3, 3], fov: 30 }}>
{/* ... */}

또는

Copy
<Canvas>
  <PerspectiveCamera makeDefault position={[3, 3, 3]} fov={30} />
  {/* ... */}

이제 보는 장면은 다음과 같습니다:

시야각을 줄이면 장면의 더 적은 부분이 보이며 객체가 더 크게 보입니다. 이는 줌인하는 것과 같습니다.

종횡비

종횡비는 카메라의 너비와 높이의 비율입니다. 이는 width / height로 정의됩니다.

기본 값은 window.innerWidth / window.innerHeight입니다.

종횡비를 1로 변경해 보겠습니다. aspect prop을 사용하고 종횡비를 자동으로 계산하지 않도록 manual prop을 true로 설정해야 합니다: