[R3F] React Three Fiber 설치 & 기본 개념 정리

Vanilla Three의 경우 간단한 3D 도형이라도 생성하고 화면에 띄우기 위해서는 많은 번거로운 작업이 필요하였습니다.

https://angelplayer.tistory.com/491

[Three.js] Three.js 설치 및 기본 사용법

R3F(React Three Fiber)는 React에서 three.js를 효과적으로 사용할 수 있도록 해주는 라이브러리입니다.

 

가령 Three.js는 객체를 생성하기 위해서 Render, Scene, Camera 등을 각각 수동으로 만들어 연결하는 작업이 필요했지만,

R3F는 Canvas를 생성하면 Render, Scene, Camera 객체를 자동으로 생성 및 초기화됩니다.

 

R3F에서 미리 선언한 컴포넌트를 사용함으로써 해당 기능들을 손쉽게 사용할 수 있습니다.

 

 

 

 

1. 설치방법

R3F는 CRA(create-react-app)와 vite를 통해 생성된 프로젝트 모두에서 사용 가능합니다.

 

 

CRA로 설치

npx create-react-app 앱이름

cd 앱이름
# R3F 설치
npm install three @react-three/fiber

npm run start

 

 

vite로 설치

npm create vite 앱이름

cd 앱이름
# R3F 설치
npm install three @react-three/fiber

npm run dev

 

 

 

 

2. 3D 객체 띄워보기

3D 객체를 띄위기 위해서는 필수 요소인 3D 모델, 조명, 카메라 등을 선언해주어야 합니다.

 

 

// 'App.js

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

function App() {
    return (
        <>
            <Canvas></Canvas>
        </>
    );
}

export default App;

먼저 Canvas 컴포넌트를 생성한 후 하위에 앞서 언급하였던 필수 요소들을 생성해주어야 합니다. 

 

 

 

 

 

 

3D 좌표계

X축

수평 방향

오른쪽 +

왼쪽 -

 

y축

수직 방향

위쪽 +

아래쪽 -

 

z축 방향

사용자 방향 +

사용자 반대 방향 -

 

 

회전 방향 

반시계 방향 : +

시계 방향 : -

ex) -30º -> 시계 방향으로 30도 회전

 

단위 : 라디안

도(º) 단위 * PI/180 == 라디안

THREE에서 THREE.MathUtils.degToRad(도단위) 로 대체할 수 있음

 

 

 

3D 객체 변환 요소

3차원 객체(ex. Mesh)를 변환시키는 요소

 

위치(Position), 

회전(Rotation),

크기(Scale)

 

 

부모의 위치가 (0,0)이 되어서 적용됨 (가장 최상위 태그의 (0,0)이 아님)