React-three-fiber

React-three-fiber(R3F)는 React를 사용하여 Three.js 라이브러리를 사용할 수 있게 해주는 라이브러리입니다. 당연하겠지만 R3F를 사용하기위해서 react 문법과 기초적인 three.js 문법을 알아야합니다. R3F는 npm으로 다운로드 받을 수 있습니다.

npm install three  @react-three/fiber

react-three-drei

react-three-drei 란 R3F에 기반하여 만들어졌으며, 빠르게 3D 웹 애프레이케이션을 만들 수 있도록 도와주는 라이브러리입니다.

react-three-drei를 사용하는 이유는 간단합니다. Three.js보다 훨씬 간단하게 3D 웹 애플리케이션을 구축할 수 있습니다.

예시로들면 OrbitControls를 구현하기 위해 three.js에서는

import * as THREE from "../node_modules/three/build/three.module.js";
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 2; //마우스 휠로 카메라 거리 조작시 최소 값
controls.maxDistance = 6;
controls.maxPolarAngle = 1; //아랫 각도 제어
controls.maxPolarAngle = Math.PI / 2; //절반
controls.minPolarAngle = 1; //윗 각도 제어
controls.update();

이런 코드가 필요하지만 react-three-drei를 사용한다면

import {OrbitControls,} from "@react-three/drei";
function Orbit(){
  return(
    <>
        <OrbitControls
        target={[0, 0.35, 0]}
        maxPolarAngle={1.45}
        enablePan={false}
        enableZoom={false}
        autoRotate
      />
     <>
          )
}

간단하게 컴포넌트 안에서 함수를 처리하고 구현할 수 있습니다. 보통 react-three-fiber를 사용한다면 react-three-drei까지 사용하는게 일반적입니다.

react-three-drei에 관해서는 https://github.com/pmndrs/drei 깃허브 홈페이지에서 확인할 수 있습니다.