Three.js/ R3F 구성요소

기존에 JavaScript THREE.js로 회전하는 카드효과, 스크롤 이펙트와 같은 interactive web 개발을 했으나 React 로 넘어오게 되면서 React three fiber 일명 (R3F)로 작업을 해야할 일이 생겼다.  

 

1. Scene

촬영장의 세트장이라고 생각하면 편하다. 여러개가 될 수도 있음, 찍히는 대상

 

다른 geometry, 같은 material, mesh 로 scene 에 추가한 예

 

1) Mesh: geometry + material 를 감싸는 영역 

 

2) geometry: 모양, 구조로 three.js에서 다양한 geometry를 볼 수 있음

https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry

three.js docs

 

3. material: 텍스쳐, 색상으로 기본적으로 color 값을 지정할 수 있음.

 

<Canvas>
  <mesh>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
</Canvas>

 

이처럼 mesh 안에 boxGeometry, material 이 포함된 상태.

 

2. Camera 

scene 을 감시하는, 촬영하는 카메라

 

1) Perspective

원근법 적용된 상태의 카메라, 기본값이며 다음과 같은 값 적용 가능

  camera={{
          zoom: 150,
          near: 1,
          far: 20,
          fov: 150, 
          position: [5, 5, 0],
        }}

 

2)  Orthographic

원근법 적용이 되지 않는 2d 카메라로 fov 적용 불가 => zoom 으로 대신 가능하다.

 

3. Renderer

scene을 찍고나서 특수효과, 다른 효과를 합성할 수 있는 렌더링 되는 결과물