threejs3 React-Three-Fiber + Next14 시작하기...일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starterReact Three Fiber, Threejs, Nextjs starter. Contribute to pmndrs/react-three-next development by creating an account on GitHub.github.com 위의 템플릿을 사용했다고 했을 때, 기본적.. 2024. 12. 8. 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 반응형
