[R3F] React-Three-Fiber 연습하기_기본예제

SSAFY에서 프로젝트를 진행하면서 Three.js에 관심이 생겼다. Three.js를 활용한다면 기존의 웹에서 조금 더 인터랙티브한 웹을 만들 수 있을 것 같았기 때문이다. 하지만, Three.js를 공부하기에는 한국어로 잘 정리된 레퍼런스가 많지 않았고 특히, React에서 Three.js렌더링을 도와주는 React-Three-Fiber는 더욱더 자료가 없었다.

Three.js를 리액트 프로젝트에서 조금 더 잘 활용해보고싶어서 나름대로 공부하고, 공부한 것을 정리해보고자 한다.

아래의 코드는  1분코딩님의 Three.js 강의를 바탕으로 React-Three-Fiber로 내가 구현한 코드이다.

import { Canvas, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { useEffect, useRef } from "react";

import gsap from "gsap";


function MyBox() {
  const box = useRef();
  useEffect(() => {
    gsap.to(box.current.position, {
      duration: 1,
      y: 2,
    });
  }, [box]);
  useFrame((state, delta) => {
    gsap.to(box.current.rotation, {
      y: state.clock.elapsedTime,
    });
  });
  return (
    <mesh
      ref={box}
      position={[Math.random() * 5 - 2.5, 0, Math.random() * 5 - 2.5]}
    >
      <meshStandardMaterial attach="material" color="red" />
      <boxGeometry attach="geometry" />
    </mesh>
  );
}

function Lect6() {
  return (
    <>
      <Canvas
        style={{ width: "100vw", height: "100vh" }}
        camera={{
          aspect: window.innerWidth / window.innerHeight,
          fov: 100,
          near: 0.1,
          far: 1000,
          position: [0, 1, 6],
        }}
      >
        <color attach="background" args={["pink"]} />
        <fog attach={"fog"} args={["black", 0, 7]} />
        <directionalLight color={"red"} position={[0, 0, 1]} />
        <MyBox />
      </Canvas>
    </>
  );
}

export default Lect6;

 

React-Three-Fiber에서는 기본적으로 Canvas 태그를 제공해준다. 이 Canvas태그는 기본적으로 scene(renderer), camera, light를 제공해주기 때문에 쉽게 기본 3D렌더링할 준비를 할 수 있게 해준다.

Canvas 안에서 가장 먼저 설정해줘야 하는 것은 카메라이다.
카메라의 종류는 대표적으로 Perspective 카메라와 Orthographi 카메라가 있으며 기본값은 Perspective 카메라이다.

위 그림이 두 카메라의 차이를 잘 설명해준 그림인데 Perspective 카메라는 1인칭(원근과 각도의 차이가 느껴짐)의 시점에서 물체를 본 느낌이고, Orthographic Camera는 완전한 3인칭에서 물체를 본 느낌이었다.

위의 실행화면이 Perspective 카메라이고, Orthographic 카메라는 아래와 같이 보인다

 

우선 Perspecitve Camera는 아래의 값들을 가진다.

fov : 카메라 시야각
aspect : 카메라의 가로 세로 비율
near : 카메라가 볼 수 있는 최소 거리
far : 카메라가 볼 수 있는 최대 거리

R3F Canvas에서는 기본값이 Perspective 카메라이기 때문에 위 값을 원하는 대로 지정해 주면 된다. 나도 아직 이 값들을 제대로 이해하지 못하였기 때문에 강사님이 하신 대로 따라 했다.

다음은 OrthographicCamer이다. 
left : 왼쪽 평면의 위치
right : 오른쪽 평면의 위치
top : 상단 평면의 위치
bottom : 하단 평면의 위치
near : 위와 동일
far : 위와 동일
zoom : 확대 정도 (기본값 1) 

R3F에서 OrthographicCamera를 사용하기 위해서는 위와 같이 코드를 구성하면 된다. (left, right, bottom, top)이 작동하지 않는 것 같음...)