내용 소개

R3F 에서 Canvas 는 3D 그래픽을 위해 가장 먼저 만들어야하는 객체이다.

canvas 는 scene, renderer, camera 로 구성된다. R3F 에서는 canvas 를 생성하면 이 세 객체를 생성해주고, 3차원 장면을 그릴수 있도록 초기화한다.

scene

3D 장면을 의미한다.

장면의 구성 요소

• 3D 모델
• 조명
• 카메라

camera

카메라는 3D 장면을 보는 시점을 의미한다.

동일한 scene 이라도 카메라에 따라 보이는 모습이 달라진다.

renderer

GPU 를 이용해서 3D 장면을 그리는 역할을 한다.

mesh

렌더링할 3차원 모델을 의미한다.

DOM 형식으로 객체를 생성할 수 있다.

<mesh>
  <boxGeometry />
  <meshStandardMaterial color="#e67e22" />
</mesh>

조명

조명은 3D 장면을 보는 시점을 의미한다.

<directionalLight position={[1, 1, 1]} />

조명도 DOM 형식으로 생성할 수 있다.

useFrame

useFrame 은 매 프레임마다 실행되는 함수이다. 프레임 마다 3D 장면을 업데이트 할 수 있다. 아래 코드는 mesh 를 회전시킨다.

useFrame((state, delta) => {
  if (refMesh.current) {
    refMesh.current.rotation.y += delta;
  }
});