react-three-fiber로 간단한 3D 객체 렌더링하기

react-three-fiber는 React 환경에서 Three.js를 간단하게 활용할 수 있는 라이브러리로, React 컴포넌트 스타일로 3D 객체를 렌더링할 수 있게 한다. 이번 글에서는 react-three-fiber의 기본 사용법을 익히고, 간단한 3D 큐브를 렌더링하는 예제를 통해 기본 개념을 이해해 보겠다.

 

이전 글

1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽

2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일

3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리

4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber

 

 

---

 

1.  프로젝트 준비: react-three-fiber 설치

 

먼저 react-three-fiber 라이브러리를 설치해야 한다. 터미널에서 다음 명령어를 실행하여 프로젝트에 설치한다.

 

npm install @react-three/fiber

 

설치가 완료되면, react-three-fiber를 사용해 Three.js 기반의 3D 객체를 렌더링할 수 있다.

 

---

 

2.  Canvas 컴포넌트로 3D 장면 생성하기

 

react-three-fiber에서 3D 장면을 만들기 위해 가장 먼저 사용하는 컴포넌트가 Canvas이다. Canvas는 Three.js의 렌더링 컨텍스트를 제공하며, 이 컨텍스트 내에서 모든 3D 객체가 렌더링된다. React의 최상위 요소처럼 작동하며, Three.js의 Scene에 해당하는 역할을 한다.

 

import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      {/* 여기서부터 3D 장면을 구성 */}
    </Canvas>
  );
}

export default App;

 

 

위 코드에서 Canvas 컴포넌트가 React 앱의 렌더링 영역을 차지하게 된다. 이 Canvas 내부에 3D 객체들을 추가하여 장면을 구성할 수 있다.

 

---

 

3. 간단한 3D 큐브 생성하기

 

Three.js에서 3D 큐브를 생성하려면 기본적으로 Geometry, Material, 그리고 Mesh 객체가 필요하다. react-three-fiber를 사용하면, 이러한 Three.js 객체들을 컴포넌트 형태로 사용할 수 있어 더욱 직관적이다. 이제 BoxGeometry와 MeshStandardMaterial을 사용하여 3D 큐브를 생성해 보자.

3D 큐브 컴포넌트

import { Canvas } from '@react-three/fiber';

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Box />
    </Canvas>
  );
}

export default App;

 

코드 설명

• mesh: Three.js에서 모든 3D 모델은 Mesh로 구성된다. mesh는 기하체(geometry)와 재질(material)을 결합하여 객체를 화면에 렌더링한다.
• boxGeometry: Three.js의 BoxGeometry에 해당하며, 큐브 형태의 기하체를 생성한다. args를 통해 가로, 세로, 깊이 값을 전달한다.
• meshStandardMaterial: Three.js의 재질 중 하나로, 빛에 반응하는 표준 재질이다. color 속성을 통해 객체의 색상을 설정할 수 있다.

위 예제에서는 mesh 컴포넌트를 이용해 오렌지색 큐브를 화면에 렌더링한다.

 

---

 

4.  카메라와 조명 설정하기

 

3D 장면을 더 현실감 있게 만들기 위해 조명과 카메라를 설정할 수 있다. react-three-fiber는 ambientLight와 pointLight 같은 조명 컴포넌트를 제공하여, 각 3D 객체가 빛을 받아 더욱 입체적으로 보이게 한다. Canvas에 camera 속성을 추가해 카메라의 위치를 조정할 수도 있다.

 

<Canvas camera={{ position: [0, 0, 5] }}>
  <ambientLight intensity={0.5} />
  <pointLight position={[10, 10, 10]} />
  <Box />
</Canvas>

 

• ambientLight: 장면 전체에 균일하게 빛을 비추는 조명이다. intensity 속성으로 빛의 세기를 조절할 수 있다.
• pointLight: 특정 위치에서 모든 방향으로 빛을 비추는 조명이다. position 속성으로 위치를 설정할 수 있다.

카메라와 조명을 통해 3D 큐브가 더욱 입체적이고 현실감 있게 보인다.

 

---

 

5.  애니메이션 추가하기

 

react-three-fiber에서는 useFrame 훅을 사용해 매 프레임마다 상태를 업데이트하여 애니메이션을 추가할 수 있다. useFrame을 이용해 큐브가 지속적으로 회전하는 애니메이션을 구현해 보자.

회전 애니메이션이 있는 Box 컴포넌트

 

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

function RotatingBox() {
  const meshRef = useRef();

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.x += 0.01;
      meshRef.current.rotation.y += 0.01;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <RotatingBox />
    </Canvas>
  );
}

export default App;

 

 

위 코드에서 useRef를 사용해 mesh의 참조를 생성하고, useFrame 훅을 통해 매 프레임마다 rotation 값을 업데이트하여 큐브가 회전하도록 만든다.

• useRef: 특정 DOM 요소나 Three.js 객체를 참조할 수 있도록 도와주는 React 훅이다.
• useFrame: Three.js의 애니메이션 루프와 연동하여, 매 프레임마다 실행되는 함수를 정의할 수 있다.

이제 큐브가 지속적으로 회전하는 애니메이션이 추가되었다.

 

---

결론

react-three-fiber를 활용하면 Three.js 객체를 React 컴포넌트로 다룰 수 있어, 더욱 직관적이고 체계적으로 3D 장면을 구성할 수 있다. Canvas를 중심으로 3D 객체를 컴포넌트화하여 구성하고, useFrame을 통해 애니메이션을 쉽게 적용할 수 있다. 다음 글에서는 복잡한 3D 장면을 구성하는 방법과 추가적인 인터랙션을 더해보는 실습을 이어가겠다.