[R3F] R3F 연습하기 ref를 활용한 움직임

실행 화면

group과 ref, useFrame을 활용하여 자전하는 것과 같은 3D 애니메이션을 만들어 보았다.

가장 헤맸던 부분은 R3F의 기본으로 제공되는 카메라를 수정하거나 조작하고 싶었다. useThree훅을 활용하면 가능할 것 같았지만, 설명과 참고할 레퍼런스가 부족하여 카메라 조작을 어떻게 해야 할지 막막했다.

내가 해결한 방법은 react-three/drei의 카메라를 사용한 후 makeDefault 속성을 사용하는 것이였다.

      <PerspectiveCamera
        makeDefault
        ref={ref}
        position={props.position || [0, 1, 5]}
        aspect={window.innerWidth / window.innerHeight}
        fov={100}
        near={0.1}
        far={1000}
      />
      <group ref={group_one}>
        <mesh ref={box} position={[0, 0, 0]}>
          <meshStandardMaterial attach="material" color="red" />
          <boxGeometry attach="geometry" args={[1, 1, 1]} />
        </mesh>
        <group ref={group_two} position={[2, 0, 0]}>
          <mesh scale={[0.3, 0.3, 0.3]}>
            <meshStandardMaterial attach="material" color="red" />
            <boxGeometry attach="geometry" args={[1, 1, 1]} />
          </mesh>
          <group ref={group_three} position={[1, 0, 0]}>
            <mesh scale={[0.15, 0.15, 0.15]}>
              <meshStandardMaterial attach="material" color="red" />
              <boxGeometry attach="geometry" args={[1, 1, 1]} />
            </mesh>
          </group>
        </group>
      </group>
    </>

react-three-drei의 카메라는 three.js의 속성을 그대로 가지고 있었으며 컴포넌트로 제공되었기 때문에 ref를 통한 조작이 가능했다.