뫙뭉

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 ..

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을 직접 사용하려면..

최근 블록체인 팀에서 3D 웹 엔진 팀으로 소속을 옮기면서 기존에 관심있었던 3D에 대해 공부하고 있다.아직은 2D 웹 시장이 지배하고 있으나,3D 그래픽은 처음 등장할 때 주로 게임, 영화, 디자인 분야에서 사용되었고, 고성능 장비와 전문 소프트웨어가 필요한 기술이었다. 그러나 기술의 발전으로 3D 그래픽을 웹에서도 사용할 수 있게 되었고, 이제는 웹 브라우저에서도 3D 그래픽을 경험할 수 있는 시대가 되었다. 이번 글에서는 웹에서 3D 그래픽이 사용되게 된 배경과 기술적 차이점, 그리고 기본 원리와 주요 렌더링 방식에 대해 알아보겠다. 3D 그래픽을 웹에서 사용하게 된 배경초기의 3D 그래픽은 고성능 컴퓨터와 전문 소프트웨어가 필요했기 때문에 주로 영화나 애니메이션, 게임 제작에 사용되었다. 예를 들..