R3F

공식 문서: https://docs.pmnd.rs/react-three-fiber기존 Threejs 와 어떤점이 다른가요?React 에 친화적jsx 문법 사용같은 기능을 구현 시 코드 양이 적음동일한 기능을 하는 Shortcut 기능(drei, postproc

Mesh 를 직접 설정하지 않고 drei 를 사용하면 더 간편하게 구현 가능내부적으로 Buffer Geometry 로 구현되어 GPU 를 더 효율적으로 사용

glb 파일을 추가하기 위해선 useGLTF 와 primitive 컴포넌트를 사용primitive 컴포넌트란?오브젝트의 Geometry 혹은 이미 모델링된 에셋을 넣어주면 쉽게 해당 형태의 Mesh 를 만들 수 있는 컴포넌트useFrame: requestAnimatio

gltf 혹은 glb 파일을 jsx 파일로 만들어주는 라이브러리npx gltfjsx public/dancer.glb -o src/components/Dancer.jsxprimitive 컴포넌트에서 선언한 glb 와는 다르게내부적으로 다 뜯어서 수정이 가능하여 제약이 없

drei 에서 제공해주는 스크롤 컨트롤pages: 꽉차는 슬라이드의 페이지 갯수damping: 스무스한 이동 효과 정도감싸진 Dancer 컴포넌트 안에서 useScroll() 선언하여 스크롤 정보를 불러올 수 있다glb 모델을 불러오는동안의 로딩 작업비동기로 모델을 불

https://codesandbox.io/s/12nmp가까이 있는 물체는 디테일하게 멀리 있는 물체는 디테일 떨어지게총 4개의 모델링을 준비 (디테일순)const levels = useGLTF('/bust-1-d.glb', '/bust-2-d.glb', '/b

Mesh 를 화면상에 표현할 때 WebGL 은 GPU 에 하나당즉, 하나의 Mesh 당 거의 한번씩 Draw Call 을 부른다하지만 Instancing 방법을 사용하면 수많은 Mesh 를 갯수에 상관없이하나의 Draw Call 로 처리하여 성능상 이점instanced

표면 방향을 나타내고 조명 계산에 사용됨면 법선: 다각형의 모든 점에 수직인 단위 벡터표면 법선: 표면의 한 점이 바라보는 방향 벡터모델링 단계에서 정점마다 직접 색상을 지정하고, 렌더링 시 그 색상을 사용정점을 선으로 이어서 도형을 만들고내부에 있는 정점들은 표면을

R3F 공식 독스에서 추천중인 라이브러리많은 커뮤니티와 호환성을 고려한 업데이트 진행중사용방법모션을 줄 mesh 혹은 group 에 접두사로 motion 붙이면 됨initial (초기값) 설정animate (애니메이션) 설정transition (스피드, 딜레이와 같은

간단한 클릭 이벤트의 경우 RayCaster 사용 안하고 onClick 만으로 구현 가능

drei 에서 3D Scene 의 환경을 설정할 때 유용한 컴포넌트아래 3가지 통해서 조명과 그림자에 자연스러운 효과 생성

Light 는 drei 에서 지원하는 useHelper 를 사용하여 Helper 를 등록할 수 있다또한, drei 에서 제공하는 Light 가 하나 있는데 바로 SpotLight 이다.기존과 다른점이라면 마치 동굴에서 새어나오는 빛과 같은 형태가 추가되어있다

3D 객체 기반으로 한 Bounding box 를 생성하고 관리하는데 사용children 은 가상 공간인 bounding box 안에서 관리됨Bounds 컴포넌트의 요소들fit주어진 객체나 경계 상자에 맞게 조정됨children 의 mesh 들 포지션들의 중앙점을 기준

Canvas 의 Mesh 에 마우스를 올렸을 시 마우스 형태를 변경하는것은 해당 Mesh 가 onPointerEnter 되었을 때body 에 클래스를 추가하는 방식으로 구현 가능drei 의 Cloud 컴포넌트 사용주변에 둥둥 떠다니는 입자 효과 (반딧불이)

다양한 물리엔진 라이브러리가 존재1\. cannon2\. rapier3\. p2...이중에서 우리는 cannon 으로 작업할 예정cannon-es 는 가벼우면서 웹에서 사용하기 쉬운 3D 물리엔진use-cannon 은 R3F 와 cannon-es 를 연결하여 쉽게 3D

아래의 이미지를 useTrimesh 혹은 useConvexPolyhedron 로 물리엔진을 구현한다면 충돌체에 대한 args 형태를 만들어야함반면에 이미지의 빨간 원처럼 useCompoundBody 사용하여 세개의 원으로 나누어서 작업을 한다면성능에도 좋고 충돌 감지도

우리가 만든 자동차는 엔진이 두개의 바퀴에 힘을 주는 2륜 자동차이다앞바퀴에 힘을 주는것 => 전륜 구동뒷바퀴에 힘을 주는것 => 후륜 구동이 중 구현할 자동차는 후륜 구동이며 앞바퀴는 방향을 담당한다앞서 차체와 바퀴를 결합하는 데 사용한 useRaycastVehicl

정적 물체, 움직이지 않는 물체주로 화면상 움직이지 않는 요소 (벽, 바닥 등) 에 사용물체는 물리 시뮬레이션에 참여하지만, 중력이나 다른 외력에 의해 움직이지 않음운동 물체, 사용자가 직접 제어하는 물체주로 플레이어 캐릭터나 움직이는 플랫폼과 같은 요소에 사용물리 시

자동차 외에 물체들에 framer-motion-3d 로 모션을 주고,모든 모션이 마무리 되면 자동차가 나오도록 구현motion 태그로 만든 요소는 다음 이벤트들을 사용할 수 있음onUpdate애니메이션 진행중 지속적으로 호출됨onAnimationStart애니메이션이 시

프로젝트에서 drei 의 Stats 컴포넌트를 사용하여 FPS, MS, MB 확인 가능 FPS Frame Per Second 1초당 보여줄 화면의 장수 높은 FPS 일수록 더 부드러운 애니메이션 우리의 눈은 일반적으로 초당 약 24 프레임을 연속된 동작으로 인식 M

먼저 웹 소켓에 대해 알아보자HTML5 웹 표준기술이며, TCP 소켓 기반으로 폴링의 대체 수단으로 사용된다최초에 클라이언트가 서버에 웹소켓을 사용해도 되는지 요청을 통해 알고가능하다면 그 때부터 서버와 클라이언트가 양방향 소통 가능이러면 클라이언트에서 먼저 요청하지

반복적으로 사용할 모델들(나무)은 clone 하여 참조 끊어놓고 사용하기. 나중에 어떤 로직으로 인해 나무에 이벤트를 주면 모든 나무가 다 변하기 때문gsap 라이브러리를 통해 모델에 애니메이션을 주어서특정 좌표로 이동하고 돌아오는 반복된 애니메이션을 구현할 예정핵심은

벽에 구멍을 뚫고 그 위치에 창문을 배치할 것이다Step 1. 정사각형 벽에 어떻게 구멍을 내야하는가Step 2. 구멍이 뚫린 부분을 제외한 벽에 물리엔진을 어떻게 부여할까정사각형 벽에 구멍을 뚫기위해서는 Shape 로 직접 선을 그어주면서 2D 도형을 완성시켜야한다완

100x100 의 땅에 랜덤한 위치에 풀과 꽃을 심을 예정마당에 있는 풀들과 꽃을 여러개 생성해도한번의 DrawCall 로 그려지도록 최적화 작업도 같이 진행여기서 사용한 최적화 방법으로는 instancedMesh 와 Merged 컴포넌트를 사용하였다풀들은 materi