【React Three Fiber】#03 카메라: Orthographic Camera, OrbitControls

이번 글에서는 React Three Fiber의 카메라 중 Orthographic Camera, 그리고 카메라를 제어할 수 있는 OrbitControls에 대해 작성해보고자 한다.

 

이전 글은 아래를 참고해 주세요.

【React Three Fiber】#02 카메라: Perspective Camera

【React Three Fiber】#02 카메라: Perspective Camera

 

Orthographic Camera

정투영(평행 투영) 카메라.

원근감이 없어, 오브젝트의 크기가 카메라의 거리와 관계없이 일정하게 유지된다.

 

이전 글에서 원근 카메라를 사용하기 위해서 canvas 태그에 camera 속성을 지정하면 된다고 언급했는데,

그렇다면 정투영 카메라는 어떻게 하면 사용할 수 있을까?

바로 아래와 같이 orthographic 프로퍼티만 추가하면 된다.

const OrthographicCamera = ({ sizes }: Props) => {
  const aspectRatio = sizes.width / sizes.height;
  return (
    <div style={{ width: sizes.width, height: sizes.height }}>
      <Canvas
        orthographic
        camera={{
          zoom: 300,
          position: [2, 2, 2],
          left: -1 * aspectRatio,
          right: 1 * aspectRatio,
          top: 1,
          bottom: -1,
          near: 0.1,
          far: 100,
        }}
      >
        <Cube />
      </Canvas>
    </div>
  );
};

주로 사용되는 프로퍼티는 다음과 같다. (원근 카메라와 겹치는 부분이 많다.)

 

zoom

장면에 줌인 / 줌아웃이 가능하다.

position

카메라의 위치.

x, y, z 축 순으로 설정할 수 있다.

left

카메라 중심 좌표로부터 왼쪽의 길이.

right

카메라 중심 좌표로부터 오른쪽의 길이.

top

카메라 중심 좌표로부터 위쪽의 길이.

bottom

카메라 중심 좌표로부터 아래쪽의 길이.

near

카메라에서 렌더링 되는 장면의 최소 거리.

0.00001 같은 이상치는 z-fighting의 원인이 되기 때문에 사용하지 말 것.

far

카메라에서 렌더링 되는 장면의 최대 거리.

999999 같은 이상치는 z-fighting의 원인이 되기 때문에 사용하지 말 것.

※ near, far범위를 벗어난 부분은 렌더링 되지 않는다는 점을 기억하자.

※ 이외에도 view라는 속성이 있으나, 여기서는 언급하지 않겠다.

 

위의 코드를 작성 후, npm start를 실행하면 크기가 일정한 오브젝트가 나타날 것이다.

조명이 없어서 육각형처럼 보이지만, 정투영 카메라로 본 정육면체이다.

getElapsedTime()를 이용해, rotation값을 변경하면 일정하게 정육면체가 돌아가게도 할 수 있다.

/**
 * 큐브.
 * @return Cube
 */
const Cube = () => {
  const cubeRef = useRef<THREE.Mesh>(null);

  useFrame((state) => {
    const elapsedTime = state.clock.getElapsedTime();
    if (!cubeRef.current) {
      return;
    }
    state.camera.lookAt(cubeRef.current.position);
    cubeRef.current.rotation.y = elapsedTime;
  });

  const object = (
    <mesh ref={cubeRef}>
      <boxGeometry args={[1, 1, 1, 5, 5, 5]} />
      <meshBasicMaterial color="#e91e63" />
    </mesh>
  );
  return object;
};

---

OrbitControls

카메라 컨트롤러.

OrbitControls를 사용하면 마우스 드래그 & 휠 등으로, 즉 수동으로 카메라를 제어할 수 있다.

React Three Fiber에서 OrbitControls를 사용하기 위해서는 아래 라이브러리의 설치가 필요하다.

npm install --save @react-three/drei

@react-three/drei에 대한 자세한 내용은 아래 깃헙을 참고하도록 하자.

GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

사용방법은 간단하다. @react-three/drei의 OrbitControls를 임포트 하여 canvas태그 안에 추가하기만 하면 된다. 

/* eslint-disable react/no-unknown-property */

import * as THREE from "three";

import { Canvas, useFrame } from "@react-three/fiber";
import React, { useRef } from "react";

import { OrbitControls } from "@react-three/drei";
import { Sizes } from "../../Common";
import classes from "../../styles/Global.module.css";

/**
 * Props.
 */
interface Props {
  sizes: Sizes;
}

/**
 * キューブ.
 * @return Cube
 */
const Cube = () => {
  const cubeRef = useRef<THREE.Mesh>(null);

  useFrame((state) => {
    if (!cubeRef.current) {
      return;
    }
  });

  const object = (
    <mesh ref={cubeRef}>
      <boxGeometry args={[1, 1, 1, 5, 5, 5]} />
      <meshBasicMaterial color="#e91e63" />
    </mesh>
  );
  return object;
};

/**
 * AddOrbitControls: 카메라 컨트롤러
 * @param {object} sizes 화면 사이즈
 * @return AddOrbitControls
 */
const AddOrbitControls = ({ sizes }: Props) => {
  return (
    <div
      style={{ width: sizes.width, height: sizes.height }}
      className={classes.canvas_new}
    >
      <Canvas
        camera={{
          position: [0, 0, 3],
          fov: 75,
          near: 0.1,
          far: 100,
        }}
      >
        <Cube />
        // target: 카메라의 주시점. x, y, z 축 순으로 설정할 수 있다.
        // enableDamping: true를 설정할 경우, 드래그 시의 애니메이션을 부드럽게 한다. 디폴트 값은 false.
        <OrbitControls target={[0, -1, 0]} enableDamping={true} />
      </Canvas>
    </div>
  );
};

export default AddOrbitControls;

위의 코드를 실행하여 화면에서 마우스 휠을 움직이거나 드래그해 보자.

그러면 화면이 자유자재로 움직이는 것을 확인할 수 있을 것이다.

 

이다음에는 일반적으로 사용되지는 않지만, VR/AR등에서 사용되는 카메라에 대해 알아보고자 한다.

 

つづく