반응형 three.js2 React Three Fiber 복기 3일차 3일차 복기 2일차에는 React Three Fiber에서 주로 사용되는 훅을 정리했는데 , React 에서 Three.js 를 선언적으로 쉽게 사용할 수 있는 라이브러리 라는걸 절대 잊지 않고 있다. @react-three/fiber 의 핵심요소인 Canvas , useFrame , ThreeEvent ... 등등 간단하게 적었으며 @react-three/drei 에서 유용한 도구는 Environment, OrbitControls , PerspectiveCamera , useGLTF 가 있었다. 오늘은 내가 직접 겪은 문제를 바탕으로 찾은 기능 위주로 복기를 해볼 생각 SkeletonUtils (three-stdlib) 나는 3D 모델이 많은걸 보유 하지 않아서 , 똑같은걸 여러개로 배치하고자 했.. 2025. 4. 29. React Three Fiber 복기 2일차 React Three Fiber 와 주요 라이브러리 훅 정리 React Three Fiber는 React 에서 Three.js를 선언적으로 사용할 수 있게 해주는 강력한 라이브러리 입니다. 3D 웹 개발을 훨씬 쉽게 사용 할 수 있게 도와주는 라이브러리 입니다. React Three Fiber를 사용하며 자주 사용했던 요소들을 간략하게 정리했습니다. @react-three/fiber 의 핵심 요소 Canvas{/* 3D 요소들 */} - Three.js 씬을 렌더링 하는 컨테이너 - 렌더러, 씬 , 카메라 등을 자동으로 설정 - 모든 3D 요소의 부모 컴포넌트 역할 ThreeEventconst handleClick = (e:ThreeEvent) => {e.stopPropagation();// 3D .. 2025. 4. 27. 이전 1 다음 반응형
