개발/R3F3 React-Three-Fiber 애니메이션 컨트롤 시작하기React Three Fiber 라이브러리로 오브젝트에 애니메이션을 부여하여 AboutMe 페이지를 실감나게 바꿔볼 계획을 세우고 있었다. 페이지가 로딩되면 우주비행사가 걸어들어오고 인사를 건내며 특정 질문에 대하여 특정 제스쳐를 표시하는 것이다. 하지만 우선 문제가 있다. 먼저 Blender에 어떻게 여러가지 동작을 한꺼번에 넣을 수 있을지와 해당 동작들을 어떻게 가져와서 사용할지, 그리고 추가적으로 자연스러운 그림자 옵션을 어떻게 넣을 수 있는지에 대해서였다. 생각보다 애니메이션 컨트롤을 하기 위해서 준비해야 할 것들이 너무 많았다. 차근차근먼저, 모델이 사용하고자 하는 Mixamo 애니메이션을 넣자해당 모델을 화면에 띄워보자띄운 모델을 직접 제어해보자 Blender 사용하기https://co.. 2025. 3. 1. React-Three-Fiber + WebXR (2) 우리가 해볼 것...Mixed Reality(혼합 현실) 위주로 WebXR을 만들 예정이기는 하지만, 대다수는 VR 기기가 없는 만큼 브라우저 상 등장하는 3D 모델의 배치도 고려 대상이다. 현재 구상중인 WebXR 스터디는 크게 두 가지 상호작용을 위주로 고려하고 있다.모델 터치모델 이동필요한 3D 모델을 제작하기 전에, 먼저 간단한 예제 코드들을 테스트 해보며, 랜더링 성능을 파악해보도록 하자. 컨트롤러오큘러스 프로에서는 두 가지 컨트롤러를 제공한다. 하나는 흔히 리모컨과 같이 동작하는 물리적 컨트롤러고, 다른 하나는 실제 손을 사용하는 컨트롤러다. 다행스럽게도 WebXR을 구동할 경우 해당 VR 기기에서 핸드 컨트롤러를 지원하면 자동으로 전환되어 사용할 수 있다. 지난 시간에 테스트한 큐브는 단순히.. 2024. 9. 2. React-Three-Fiber + WebXR (1) R3F?Three.js라는 3D 모델을 웹상에서 제어할 수 있게 해주는 라이브러리가 있었다. 이 라이브러리를 React 프레임워크에서 쉽게 사용될 수 있도록 만들어진 Three.js 파생 라이브러리를 React-three-fiber, 줄여서 R3F라고 한다. 내 개인 포트폴리오 웹사이트 또한 이 R3F를 사용해서 만들어졌다. 현재는 젠킨스 테스트를 위해 내려간 상태다. blender로 만든 3D 모형을 직접 웹상에 띄워 인터랙팅을 할 수 있다는 점은 굉장히 매력적이다. 놀랍게도 이 라이브러리에서 더 나아가 WebXR을 다룬다면 React로 직접 VR 기기에서 상호작용 할 수 있는 서비스도 만들 수 있다는 것이다. 오큘러스 프로를 오랫동안 사용중인 필자로서는 사용해보지 않을 수가 없다. 뭐가 필요할까?안타.. 2024. 8. 31. 이전 1 다음 728x90 반응형
