use-cannon

This project adds physics simulation to 3D scenes built with React. React is a popular JavaScript library for building user interfaces, and react-three-fiber is a React-based way to create 3D graphics in the browser using a library called Three.js. use-cannon connects that 3D environment to a physics engine called cannon-es, so objects in your scene can fall, collide, bounce, and behave as they would in the physical world.

The physics calculations run in a web worker, which is a background thread separate from the main browser tab. This matters because physics simulation can be computationally expensive, and keeping it off the main thread means the rest of your application stays responsive and does not stutter.

The repository is organized as a monorepo containing three packages. The main one, @react-three/cannon, provides React hooks that let you attach physics bodies to 3D objects with just a few lines of code. A second package handles the low-level communication between the physics worker and the main thread. A third package contains example scenes demonstrating the library.

Live demos of the examples are available at cannon.pmnd.rs. Detailed documentation and a getting started guide are in the main package's README. The project is part of the Poimandres open-source collective, which maintains several related tools for 3D work in React.