cannon-es VS react-xr

// ============ // part 2 // add base vehicle body // reference: https://github.com/pmndrs/cannon-es/blob/master/examples/rigid_vehicle.html // ============ const carBody = new CANNON.Body({ mass: 20, position: new CANNON.Vec3(0, 6, 0), shape: new CANNON.Box(new CANNON.Vec3(4, 0.5, 2)), });

cannon.js hasn't been maintained for 7-8 years, the project lives on here https://github.com/pmndrs/cannon-es you import it like so

Cannon-ES - 3D physics engine

Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.

This was the post I was remembering, see repo here: https://github.com/pmndrs/cannon-es

btw canon has been abandoned for years. it continues to receive support on here: https://github.com/pmndrs/cannon-es which next to bug fixes also gives it types and esm/tree-shaking.

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)