반응형 react4 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. React Three Fiber 복기 1일차 React Three FIber란?React Three Fiber 는 인기 있는 3D 라이브러리인 Three.js를 React 환경에서 쉽게 사용할 수 있게 해주는 라이브러리입니다.Three.js의 복잡한 설정을 React 방식으로 쉽게 작성할 수 있게 해줍니다. - Three.js: 웹에서 3D를 구현하는 강력한 도구 - React: 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 - React Three Fiber : 이 둘을 결합하여 React 방식으로 3D 구현 https://r3f.docs.pmnd.rs/getting-started/introduction Introduction - React Three FiberReact-three-fiber is a React renderer.. 2025. 4. 26. querySelector 로 DOM 선택 querySelector 와 querySeletorAll 은 CSS 슬 선택자를 사용하여 , HTML 요소를 선택할 수 있게 해주는 메서드 querySelector : 첫 번쨰로 일치하는 요소 하나만 반환 querySelectorAll : 일치하는 모든 요소를 NodeList 형태로 반환 - CSS 선택자를 사용하여 요소를 선택할 수 있습니다. (#id, .class , tag 등..) # 1. ID로 요소 선택하기 const elementById = document.querySelector("#myId");// id 가 myId 인 첫 번째 요소를 반환 # 2. 클래스로 요소 선택하기const elementByClass = document.querySelector(".myClass");// cl.. 2025. 4. 22. 이전 1 다음 반응형
