R3F

React Three Fiber

React With Three.js

Renderer

// three.js에서 렌더러를 화면에 렌더링시키기 위한 코드 
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

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

useThree()

<Canvas/>의 자식(자손) 컴포넌트에서만 사용이 가능하다.

property

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

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

• size -> 렌더러 사이즈 정보를 담고 있다. (resize시 자동으로 업데이트 된다.)

• gl -> WebGLRenderer의 정보를 담고 있다.

• scene -> Scene 정보를 담고 있다.

• camera -> Camera 정보를 담고 있다.

useFrame()

Scene의 변화를 useFrame 콜백함수에서 다루게 된다.

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

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

• useFrame()을 사용하면 requestAnimationFrame() 을 사용하는 것과 같은 동작을 수행

• state -> useTree() 에서 제공되는 gl 데이터, 매 프레임마다 갱신

• delta -> 매 프레임마다 경과된 시간

  • three.js에서 new THREE.Clock()을 사용하여 clock.getElapsedTime() 값을 얻고, 이 값을 활용하여 오브젝트를 업데이트하는 방식과 유사한 동작을 수행