R3F

실행 화면 group과 ref, useFrame을 활용하여 자전하는 것과 같은 3D 애니메이션을 만들어 보았다. 가장 헤맸던 부분은 R3F의 기본으로 제공되는 카메라를 수정하거나 조작하고 싶었다. useThree훅을 활용하면 가능할 것 같았지만, 설명과 참고할 레퍼런스가 부족하여 카메라 조작을 어떻게 해야 할지 막막했다. 내가 해결한 방법은 react-three/drei의 카메라를 사용한 후 makeDefault 속성을 사용하는 것이였다. react-three-drei의 카메라는 three.js의 속성을 그대로 가지고 있었으며 컴포넌트로 제공되었기 때문에 ref를 통한 조작이 가능했다.

SSAFY에서 프로젝트를 진행하면서 Three.js에 관심이 생겼다. Three.js를 활용한다면 기존의 웹에서 조금 더 인터랙티브한 웹을 만들 수 있을 것 같았기 때문이다. 하지만, Three.js를 공부하기에는 한국어로 잘 정리된 레퍼런스가 많지 않았고 특히, React에서 Three.js렌더링을 도와주는 React-Three-Fiber는 더욱더 자료가 없었다. Three.js를 리액트 프로젝트에서 조금 더 잘 활용해보고싶어서 나름대로 공부하고, 공부한 것을 정리해보고자 한다. 아래의 코드는 1분코딩님의 Three.js 강의를 바탕으로 React-Three-Fiber로 내가 구현한 코드이다. import { Canvas, useFrame, useThree } from "@react-three/fibe..