[ReactThreeFiber] Canvas

Three.js 는 WebGL과 WebGPU를 wrapping한 라이브러리.

Three.js를 React에서 사용하기 위해서는 React Three Fiber(R3F) 라이브러리가 필요하다.

Canvas

Renderer, Scene, Camera를 자동으로 생성해준다.

---

예시

---

const refMesh = useRef()
<>
  <directionalLight position={{1,1,1}} />
  <mesh ref={refMesh} rotation={[0, 45*MathPI/100, 0]}>
    <boxGeometry args={[1, 1, 1]} />
    <meshStandardMaterial color="fcfcfc" />
  </mesh>
</>

<directionalLight position={{1,1,1}}>

• 지정한 색상으로 mesh를 띄우기 위해서는 조명이 필요하다.

<mesh rotation={[0, 45*MathPI/180, 0]}>, <mesh rotation-y={[45*MathPI/180]}>

• x축로 0도, y축으로 45도, z축으로 0도 만큼 회전