Three.js/React Three Fiber
1.[R3F] React Three Fiber+GSAP으로 오브젝트 클릭 시 카메라 이동하는 애니메이션 구현하기
2.[R3F] React Three Fiber에서 3D 모델 띄우기
3D로 웹을 구현하고 싶다면 가장 먼저 해야할 일은 당연히 3D 모델이 '보여지게' 하는 것이다. (@react-three/fiber 설치 O)구글에 'free 3d model' 이런 식으로 검색하면 사이트가 많이 나온다.위쪽에 뜨는 사이트 아무데나 들어가서 .gltf
3.[R3F] React Three Fiber로 Atmos website 제작하기(Part 1,2)
해당 포스트는 유튜브 'Wawa Sensei' 채널의 [Recreating Atmos 3D Website with React Three Fiber] 강의를 보며 공부한 내용입니다. Part1- Curved Path https://www.youtube.com/watch?
4.[R3F] React Three Fiber에 Rapier Physics Engine 사용해보기
해당 포스트는 유튜브 'Wawa Sensei' 채널의 [React Three Fiber Tutorial - Rapier Physics Engine] 강의를 보며 기록한 내용입니다. https://www.youtube.com/watch?v=OpYtwrtpePY&t=97s
5.[R3F] 마우스 클릭한 위치로 물체 이동+3인칭 시점 카메라 구현하기
이번에는 마우스 클릭한 위치로 물체(캐릭터)를 이동시키는 기능과 이동하는 물체를 따라다니는 3인칭 시점 카메라를 구현해봤다. 환경 세팅 및 3D 모델 추가 App.tsx에서 Canvas와 기본 카메라 위치를 간단하게 세팅을 해준 뒤, Experience.tsx 에
6.[Three.js] Three.js의 기본 구성
다양한 레퍼런스를 둘러보면서 웹에서 이런 형태까지 구현이 가능하다니!!!✨👁️👁️✨하고 보니 대부분 Three.js를 사용했던 것.. . . 을 시작으로 3D 웹 개발의 전반적인 내용, 주로 React를 사용하는 점을 고려하여 React Three Fiber를 공부
7.[R3F] 캐릭터 랜덤생성, react-three/rapier로 캐릭터 충돌 처리하기(+socket.io)
작년 it 동아리에서 활동할 당시 실시간 양방향 통신 기능을 구현해보고 싶었는데, 기획을 따라가다 보니 구현할 기회가 없었던 게 아쉬워서 혼자 간단하게라도 적용해보며 정리했던 내용이다. 3D 형태에 적용하면 재미있을 것 같아서 간단하게 추가해봤고 중간에 추가한 부분도