React Three Fiber(r3f, drei ) 설치 및 기초

 

Introduction - React Three Fiber

 

1. React-three-fiber

React-three-fiber는 React 기반으로 Three.js를 사용할 수 있게 해주는 라이브러리입니다. Three.js는 3D 그래픽 렌더링에 있어 가장 널리 사용되는 JavaScript 라이브러리이지만, DOM과는 별개의 렌더링 환경을 필요로 합니다. React-three-fiber는 이를 React의 상태 관리 및 컴포넌트 구조와 통합하여 다음과 같은 장점을 제공합니다.

https://r3f.docs.pmnd.rs/getting-started/introduction

Introduction - React Three Fiber

 

 

 

2. @react-three/drei

DREI->  React Three Fiber 컴포넌트와 플러그인들을 묶어놓은 패키지 

https://github.com/pmndrs/drei

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

 

@react-three/drei는 React-three-fiber에서 자주 사용하는 Three.js 기능과 컴포넌트를 제공하는 유틸리티 라이브러리입니다. 복잡한 Three.js의 설정을 단순화하고, 애니메이션이나 조명, 카메라 컨트롤 등을 쉽게 구현할 수 있는 사전 정의된 컴포넌트를 제공합니다.

 

 

---

 

1. Three.js는 Canvas 를 사용해서 만든다. 

 

2. R3F 라이브러리를 설치하고 나면, <Canvas> 라는 컴포넌트를 사용할 수 있고, 사용법은 아래와 같음

 

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

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

  // 매 프레임마다 회전
  useFrame(() => {
    boxRef.current.rotation.x += 0.01;
    boxRef.current.rotation.y += 0.01;
  });

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

export default function App() {
  return (
    <Canvas>
      {/* OrbitControls를 통해 3D 씬을 마우스로 회전 */}
      <OrbitControls />
      {/* 기본적인 조명 */}
      <ambientLight intensity={0.5} />
      <RotatingBox />
    </Canvas>
  );
}

 

 

주요 컴포넌트 설명

1. Canvas: 3D 씬을 렌더링하기 위한 React-three-fiber의 기본 컨테이너.
2. mesh: Three.js에서 물체를 정의하는 기본 단위.
3. OrbitControls (@react-three/drei): 마우스로 카메라를 이동하고 회전할 수 있는 컨트롤러.
4. useFrame: 애니메이션 프레임마다 실행되는 로직을 정의할 때 사용.
5. useTexture (@react-three/drei): 텍스처를 로드하는 간단한 유틸리티 훅.