뫙뭉

3D 그래픽을 더욱 현실감 있게 만들기 위해 물리 엔진을 추가하면 객체가 중력에 반응하고 충돌하는 등의 물리적 효과를 구현할 수 있다. react-three-rapier는 Rapier라는 경량 물리 엔진을 react-three-fiber와 통합하여, React에서 쉽게 물리 효과를 적용할 수 있게 해주는 라이브러리다. 이번 글에서는 react-three-rapier의 기본 사용법과 주요 개념을 통해 3D 장면에 물리적 상호작용을 추가해 보겠다. react-three-rapier 공식 github: https://github.com/pmndrs/react-three-rapier GitHub - pmndrs/react-three-rapier: 🤺 Rapier physics in React🤺 Rapier ..

3D 웹 그래픽은 사용자가 화면을 통해 실제와 같은 경험을 할 수 있도록 돕는 중요한 기술 중 하나다. 웹 환경에서 3D 콘텐츠를 구현하기 위해 사용되는 대표적인 라이브러리로는 Three.js가 있으며, 이를 통해 비교적 쉽게 3D 모델을 로드하고 화면에 렌더링할 수 있다. 그러나 단순히 모델을 렌더링하는 것만으로는 현실감을 충분히 제공하기 어렵다. 예를 들어, 중력에 의해 물체가 떨어지거나, 공이 바닥에 튕기는 상황을 구현하려면 더 깊이 있는 물리 계산이 필요하다. 이러한 물리적 상호작용을 시뮬레이션하기 위해서는 별도의 물리 엔진이 필요하다. 물리 엔진은 주로 충돌 감지, 역학 계산 등을 처리해 모델이 현실감 있게 움직이도록 돕는 도구다. 웹 기반 3D 그래픽에서 사용되는 물리 엔진은 CPU 연산의 부..

Three.js는 기본적으로 애니메이션과 상호작용을 쉽게 구현할 수 있는 기능을 제공하며, 이를 통해 3D 장면에 생동감을 더하고 사용자와의 상호작용을 가능하게 한다. 이번 글에서는 Three.js에서 애니메이션을 추가하고, 마우스 클릭이나 드래그 같은 이벤트를 통해 상호작용을 구현하는 방법을 알아보겠다.  이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber5. [개발자일기/3D 웹 세상] - react-three-fiber로 간단한 3D..

Three.js로 3D 장면을 구성할 때, 조명과 재질은 장면을 더욱 현실감 있게 만들어주는 중요한 요소다. 조명을 통해 객체에 입체감을 더하고, 다양한 재질을 적용하여 시각적으로 매력적인 3D 장면을 만들 수 있다. 이번 글에서는 Three.js에서 제공하는 다양한 조명과 재질의 종류와 사용법을 알아보겠다.  이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber5. [개발자일기/3D 웹 세상] - react-three-fiber로 간단한 ..

react-three-fiber는 React 환경에서 Three.js를 간단하게 활용할 수 있는 라이브러리로, React 컴포넌트 스타일로 3D 객체를 렌더링할 수 있게 한다. 이번 글에서는 react-three-fiber의 기본 사용법을 익히고, 간단한 3D 큐브를 렌더링하는 예제를 통해 기본 개념을 이해해 보겠다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리4. [개발자일기/3D 웹 세상] - React와 Three.js의 결합: react-three-fiber   1.  프로젝트 준비: react-three-fiber 설치 먼저 ..

React는 컴포넌트 기반의 웹 개발에서 널리 사용되는 프레임워크로, 상태 관리와 컴포넌트 재사용성을 강화하여 웹 애플리케이션 개발을 단순화하고 있다. 하지만, 3D 그래픽을 React 환경에서 쉽게 구현하기 위해 등장한 것이 바로 react-three-fiber다. 이번 글에서는 react-three-fiber가 등장하게 된 배경, 역할, 그리고 대표적인 API와 특징들을 살펴본다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일3. [개발자일기/3D 웹 세상] - Three.js의 기본 개념과 원리  react-three-fiber가 등장하게 된 배경 Three.js는 WebGL을 기반으로 3D 그래픽을 ..

3D 그래픽을 웹에서 구현하는 데 가장 널리 사용되는 도구 중 하나가 Three.js다. Three.js는 복잡한 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리로, WebGL의 복잡한 코드를 더 간편하게 작성할 수 있게 해준다. 이번 글에서는 Three.js의 기본 개념과 원리를 이해하기 쉽게 설명해 보겠다. 이전 글1. [개발자일기/3D 웹 세상] - 웹에서의 3D 그래픽2. [개발자일기/3D 웹 세상] - GPU와 렌더링의 관계: GPU가 하는 일  Three.js란 무엇인가?Three.js는 JavaScript 기반의 3D 그래픽 라이브러리로, 개발자가 WebGL의 복잡한 코드를 직접 작성하지 않고도 3D 그래픽을 구현할 수 있게 도와준다. WebGL을 직접 사용하려면..

우리가 흔히 사용하는 검색 플랫폼으로는 구글, 네이버 등이 대표적이다.해당 플랫폼에서 검색을 해보면 단순히 화면만 바뀌는 것이 아니고 URL도 바뀌는 것을 확인할 수 있다.검색 뿐만 아니라 여러 필터기능도 URL을 변경시키는 것을 확인할 수 있다.해당 사항은 얼마전 검색 기능을 구현하면서 고민하게 되었던 부분이다.화면만 바뀌어도 무방할 것 같은데 왜 URL도 바뀌게 한 걸까. 분명히 이에 따른 장점이 있어서 그런것일 텐데..그래서 여러 고민과 검색 끝에 알아낸 것이 있다.검색을 하면서 URL이 바뀌게 해야하는 이유 3가지1. 사용자 경험 개선URL에 검색어나 필터를 포함시키면 사용자가 현재 검색상태를 쉽게 이해할 수 있음. 그리고 URL을 통해 검색 결과를 북마크하거나 공유할 수 있게함. (URL 복사해..

나는 사용하고자 하는 기술 스택을 정함에 있어 이유가 명확할수록 좋은 것이라 생각한다. 그 상황에 맞는 기술을 선택하는 것이 효율도 좋으며 효과도 좋기 때문이다. 그러함에 있어 CSS 사용 기술을 선택하는 것도 많은 고민이 있었다. 우선 우리 팀이 추구하는 개발 중 중요한 키워드는 '자유로운'이었다. CSS 하면 아무거나 갖다 쓰면 될 것 같다는 생각이 있었는데 여러 자료들을 찾아보니 선택 반경도 굉장히 넓고 상황에 맞는 선택법 또한 다양했기에 여러 프레임워크나 전처리기에 대해 알아볼 필요가 있었다. 어떤 분이 상황별 선택에 대해 잘 써놓은 글이 있어서 공유하겠다. https://ritza.co/articles/tailwind-css-vs-bootstrap-vs-material-ui-vs-styled-c..

프론트엔드의 길을 걸어보고자 한지 벌써 일 년이 넘어가고 있다. 그런 내가 갖고있는 가장 큰 부족한 점은 바로 팀 프로젝트 경험 하나 없었다는 것. 변변치 않은 개인 프로젝트들만 해오다가 성장 요소의 한계에 부딪히고 뒤늦게 팀 프로젝트를 시작하였다. 이 '팀 프로젝트' 시리즈는 팀 프로젝트의 시작부터 끝까지(팀플은 아직 진행중이다)에 대한 기록과 나처럼 독학으로 준비하시는 여러 분들에게 도움이 되고자 쓰는 글이다. 팀 프로젝트 꼭 해야하나..? 나는 겁이 많은 성격이다. 모르는 사람들을 접하는 것을 좀 꺼려하고 무언가 새로운 것을 시도하는 것을 싫어하진 않으나 도전해 보기까지 굉장히 보수적인 스탠스를 취하는 편. 그래서 팀 프로젝트를 여태 안 해봤나 싶다. 이런 생각을 해보았다. 규모가 꽤 있는, 소위 ..