[ReactThreeFiber] 애니메이션

애니메이션

매 프레임마다 rotation이 바뀌어야한다.

매 프레임이 렌더링 되기 이전에 호출되는 콜백함수를 정리하기 위해서 useFrame 사용

const refMesh = useRef()
useFrame((state, delta) => {
  refMesh.current.rotation.y += delta
})
<>
  <directionalLight position={[1, 1, 1]} />
  <mesh ref={refMesh} rotation={[0, 45*MathPI/180, 0]}>
    <boxGeometry args={[1, 1, 1]} />
    <meshStandardMaterial color="fcfcfc" />
  </mesh>
</>

delta는 이전 프레임과 현제 프레임의 경과시간, 단위는 밀리초

콜백함수는 매 프레임이 렌더링되기 직전에 호출되며 그 안에서 rotation을 바꾼다.