React Three Fiber 로 canvas 셋팅하기 [Three.js 비교]

React에서 three.js 사용하는 방법

 

최근 3D 웹을 구현하고 싶어서 Three.js를 접하고 배우면서 궁금점이 생겼다. 

 

Three.js를 react에서 사용하고 싶은데 방법이 어떻게 될까?

 

React Three Fiber 활용하는 것이다.

 

하지만 three.js 와 사용방법이 완전히 다르다

또 다르지만, React Three fiber는 Threejs를 기반으로 하기 때문에

하기 위에서는 Three.js 를 먼저 알아야 된다.

 

React Three Fiber를 이해하기 가장 좋은 방법은

Three.js 라이브러리와 비교하면서 어떤 일이 일어나는지 보는 것이라고 생각이 들었다.

 

three.js 프로젝트와 React Three Fiber를 둘을 함께 작업하면서 간단하게 사용법을 비교해보기로 했다.

 

먼저 Three.js 에 canvas 초기 세팅 코드이다.

Three.js로 canvas 세팅

import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from "three";

// Create "Canvas"
const canvas = document.querySelector('#three-canvas');
const scene = new Scene();
const camera = new PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// Render
const renderer = new WebGLRenderer({ canvas, alpha: true, });
renderer.setSize(window.innerWidth, window.innerHeight);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

1. 캔버스를 지정한다.

 

2. 씬을 생성한다.

new Scene() 인스턴스를 생성해서 장면을 생성하고

 

3. 카메라를 셋팅한다.

PerspectiveCamera(fov:Number , aspect: Number, near: Number, far: Number)

fov — 카메라 프러스텀 수직 시야.
aspect — 카메라 절두체 종횡비.
near — 평면 근처의 카메라 절두체.
far — 카메라 절두체 원거리 평면.

 

4. 렌더러 세팅

그다음 지정한 캔버스에 renderer를 설정해 준다. 

Three.js는 여러 렌더링을 지원해주고 있고, 가장 일반적인 것은 WebGL 렌더링이다.

기본적으로 배경이 투명하지 않아서 배경이 검은색으로 나오기 때문에 alpha를 true로 하여 바꿨다.

 

그리고 renderer의 사이즈(setSize)를 창의 내부 너비와 높이로 설정해 주었다. 

 

5. 렌더링

requestAnimationFrame()으로 렌더링 루프 내에서 해당 장면을 렌더링을 돌린다. 

requestAnimationFrame 참고링크

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

 

이것이 Three.js의 기초세팅의 순서이자 모습이다.

 

 

다음 React Three Fiber는 작업자를 위해서 많은 편리한 것을 포함하고 있다.

 

React Three Fibe로 Canvas 세팅

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

export default function Demo() {
  return (
    <Canvas>
    </Canvas>
  );
}

여기에 있는 Canvas는 일반 html5 캔버스가 아니고

라이브러리에서 가져온 특별한 Canvas이다.

 

위에 Three js 코드와 다르게 많은 것이 생략된 것을 볼 수 있다.

 

처음 이 코드를 접했을 때는 카메라는? 렌더링 어디에 있는지? 루프안 돌려? 잠시 멍 때리게 됬었다.

 

위에 말했다시피 특별한 Canvas이다.  

 

React Three Fider Canvas 내에서 모든 것이 처리된다.

animate() 만들었던 렌더링 루프 까지도 말이다.

렌더링 루프에 render() 함수는 명시적으로 장면(scene)과 카메라에 의존하기 때문에

PerspectiveCamera 도 기본적으로 Canvas 내에 생성되어 있다. 

 

카메라를 내가 직접 관리하고 싶어도 문제없이 옵션을 통해 관리가 가능하다.

그것은 React Three Drei 라는 패키지에서 제공된다. (곧 포스트 할 예정)

 

확실하게 초기세팅이 Three.js 에서 했던 많은 세팅작업들이 생략된 것을 알 수 있다.

Fiber에서 감사하게도 작업자들이 가장 많이 즐겨 사용하는 세팅을 기본적으로 해주고있다.

 

하지만 심화적으로 기초세팅 외에 심화적으로 들어가려면

먼저 Three.js 에 방식과 과정을 알아야 할 것 같다.