![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcpmJmV%2FbtrLihbUAg2%2F7uIDkYsKfXSVyhxnr2VcGk%2Fimg.gif)
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..