react-three-next VS react-xr

ps, you can also try https://github.com/pmndrs/react-three-next where we have abstracted this stuff. it gets 100% lighthouse score for performance, accessibility, best practices and seo.

react-three-next

there's a whole eco system around three in react and next. it starts with react-three-fiber, drei has tons of helpers, and then there's three-next for when you need 100% lighthouse, persisting canvas across routes etc.

It’s a good combination, react-three-fiber expresses three in react, react-three-next makes for a good starting template for common issues like persisting canvas between routes. And Vercel is funding both pmndrs and r3f.

The team at r3f are doing killer work. Check out this repo for a way to do SSR with their react renderer. https://github.com/pmndrs/react-three-next

you could also check out https://github.com/pmndrs/react-three-next which is a nextjs starter. it gives you almost 100% lighthouse, and it has all these little tricks inbuilt.

Also check out https://github.com/pmndrs/react-three-next uses react three fiber, which is awesome.

I think the easiest for you would be to get into this through web development try this https://github.com/pmndrs/react-three-fiber coupled with this https://github.com/pmndrs/react-xr But don't expect super beautiful graphic from this, it's abstraction over three.js library which is abstraction over webgl standard which implements OpenGL ES 2.0 which is 7 years old graphics standard targeted to mobile devices with not much power. Or you can experiment with unity (unity XR) or unreal engine which are harder to learn but produce better graphics.

there's also a VR layer that makes previously complex things so easy https://github.com/pmndrs/react-xr

I'm a pure threejs afficionado myself, but r3f also has some good things going for it: https://github.com/pmndrs/react-xr

as an example, these are AR/VR components that allow you to build apps in minutes because all the hard parts have been taken take of, for instance gestures: https://github.com/pmndrs/react-xr

I haven’t played with it, but if I was going to I’d start here https://github.com/pmndrs/react-xr

React-XR for leveraging the WebXR API (e.g VR Headset + controllers) & React-Three-Drei which has useful functions for creating WebGL content.

React three fiber is amazing for building 3d on the web, and has an XR canvas https://github.com/pmndrs/react-xr

Their docs and examples are beautiful and make it so easy to get started. As a web dev myself, the transition was pretty easy, since it was as simple as "swapping dom out for threejs objects". You get the react "engine" around it for free. Super fun for game development. (even with WebXR support https://github.com/pmndrs/react-xr)