# R3F

## React Three Fiber

> React With Three.js

## Renderer

<pre class="language-javascript"><code class="lang-javascript"><strong>// three.js에서 렌더러를 화면에 렌더링시키기 위한 코드 
</strong><strong>function render() {
</strong>  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
</code></pre>

Three.js에서 렌더러를 사용하여 화면에 무언가를 그리려면 보통 `requestAnimationFrame()`을 사용하여  업데이트해야 한다. 그러나 r3f를 사용하면 이러한 세부적인 부분은 라이브러리 내부에서 처리되어 더 간단하게 코드를 작성할 수 있다.&#x20;

### useThree()

{% hint style="warning" %}
`<Canvas/>`의 자식(자손) 컴포넌트에서만 사용이 가능하다.
{% endhint %}

#### property

```javascript
import { useThree } from '@react-tree/fiber'

const { size, gl, scene, camera } = useThree();
```

* **size** -> 렌더러 사이즈 정보를 담고 있다. (resize시 자동으로 업데이트 된다.)
* **gl** -> WebGLRenderer의 정보를 담고 있다.
* **scene** -> Scene 정보를 담고 있다.
* **camera** ->  Camera 정보를 담고 있다.&#x20;

### useFrame()

> Scene의 변화를 useFrame 콜백함수에서 다루게 된다.&#x20;

```javascript
import { useFrame } from '@react-three/fiber';

useFrame((state, delta, xrFrame) => {})
```

* `useFrame()`을 사용하면 `requestAnimationFrame()` 을 사용하는 것과 같은 동작을 수행
* **state** ->  `useTree()` 에서 제공되는 `gl` 데이터, 매 프레임마다 갱신
* **delta** -> 매 프레임마다 경과된 시간
  * `three.js`에서 `new THREE.Clock()`을 사용하여 `clock.getElapsedTime()` 값을 얻고, 이 값을 활용하여 오브젝트를 업데이트하는 방식과 유사한 동작을 수행