React Three Fiber - Under the hood

One By One

1. Create Scene

Threejs

1. Scene instance 생성
2. Camera instance 생성
3. Renderer instance 생성
4. renderer 크기 설정
5. renderer의 domElement 를 container 에 추가
   
6. 애니메이션 호출 함수를 선언 및 호출, 이 안에서 애니메이션 처리와 렌더링을 진행.

react three js

1. Canvas JSX 리턴

2. add Cube

Threejs

• 사용할 mesh instance 생성 후 거기에 들어갈 Geometry 와 Material instance 를 생성한다.
• 이후 mesh에 대입하고 mesh를 scene에 추가한다.

react three fiber

• Canvas 안에 mesh 를 만들고 안에 geometry 와 material 을 children 으로 추가한다.
• Threejs의 코드를 추상화 했다.
• 카메라 지정을 위해 drei 의 perspective camera를 사용할수 있다.
• 각각의 geometry 와 material 에 attach attribute 를 주면 threejs의 mesh에 추가될때 어떤 변수에 대입할지를 정할수 있다.

<boxGeomeyry attach="material" />

>>> IS ACTUALLY <<<

cube.material = box;

---

Animation

threejs

• animate 함수에 추가한다.

react three fiber

• useFrame 을 사용한다.
  
• ref를 통해 mesh에 접근할수 있다.
• react-spring 과 같은 라이브러리를 통해 선언적으로 관리할수 있다.

---

Rendering

- ThreeJS는 Antialias 가 기본이 아니다. renderer에 arg 로 추가할수 있다.