반응형 분류 전체보기33 React Three Fiber 복기 4일차 Three.js 를 계속 사용하다보니Mesh에 대해서 정확하게 인지 하지 않고서는, 이거 Three.js 를 내가 올바르게 공부한게 맞나 싶을 정도로 매우 중요한거 같다. HTML 에서 div 태그를 자주 사용하듯, 현재 자연스럽게 mesh 태그 또한 사용 빈도가 많으며, 마치 내가 HTML 에서 코드 작성시, div 태그를 사용하듯 mesh 태그를 먼저 사용하고 여기서 내가 원하는걸 표현해야지~ 하는데 실상 mesh 에 대한 이해가 정말 없는거 같아서 정리가 필요한거 같다. Mesh의 기본 개념Mesh 는 3D 공간에 표시되는 실제 객체입니다. Three.js 에서 눈에 보이는 거의 모든 3D 객체는 Mesh 를 통해 생성됩니다. Mesh 의 구성 요소Mesh 는 크게 두 가지 핵심 구성 요소로 .. 2025. 5. 2. 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. 알아두면 유용한 대형쓰레기 스티커 완벽 가이드 대형쓰레기 스티커 구매 및 배출 방법 완벽 가이드2025년 3월 30일작성자: 환경지킴이🔍 대형쓰레기란 무엇인가요?일반쓰레기나 음식물 쓰레기와 달리, 대형쓰레기는 가정에서 발생하는 큰 규모의 폐기물을 의미합니다. 소파, 침대, 장롱, 냉장고, TV 등 크기가 큰 가구나 가전제품이 여기에 해당합니다. 이런 대형쓰레기는 일반 종량제 봉투로 배출할 수 없으며, 반드시 대형쓰레기 스티커를 구매하여 부착한 후 배출해야 합니다.📝 대형쓰레기 스티커 구매 방법 1. 온라인으로 구매하기요즘은 편리하게 온라인으로 대형쓰레기 스티커를 구매할 수 있습니다.지자체 홈페이지: 각 지자체 홈페이지에서 대형쓰레기 배출 신청 메뉴를 찾아보세요.모바일 앱: '우리동네' 앱이나 '정부24' 앱을 통해서도 신청 가능합니다.스마트폰.. 2025. 3. 30. 이전 1 2 3 4 5 6 다음 반응형
