whatisgithub

What is use-cannon?

pmndrs/use-cannon — explained in plain English

Analysis updated 2026-05-18

2,948TypeScriptAudience · developerComplexity · 3/5Setup · moderate

In one sentence

A library that adds realistic physics, like gravity and collisions, to 3D scenes built with React and react-three-fiber.

Mindmap

mindmap
  root((use-cannon))
    What it does
      Physics for React 3D
      Collisions and gravity
    Tech stack
      React
      Three.js
      cannon-es
    Architecture
      Runs in web worker
      Keeps main thread smooth
    Packages
      React hooks package
      Worker bridge
      Examples package
    Use cases
      Interactive 3D scenes
      Physics based games

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Make objects in a React 3D scene fall, collide, and bounce realistically.

USE CASE 2

Attach physics bodies to 3D meshes using simple React hooks.

USE CASE 3

Build interactive 3D experiences where physics runs off the main thread for smooth performance.

What is it built with?

TypeScriptReactThree.jscannon-es

How does it compare?

pmndrs/use-cannonvercel-labs/wtermnutlope/self.so
Stars2,9482,9372,980
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity3/53/53/5
Audiencedeveloperdevelopervibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires an existing react-three-fiber 3D scene to attach physics to.

So what is it?

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.

Copy-paste prompts

Prompt 1
Show me how to attach a physics body to a mesh using @react-three/cannon.
Prompt 2
Walk me through setting up a basic falling-box scene with use-cannon.
Prompt 3
Help me understand how the physics worker keeps my app from stuttering.
Prompt 4
Point me to the live demos so I can see what's possible before installing.

Frequently asked questions

What is use-cannon?

A library that adds realistic physics, like gravity and collisions, to 3D scenes built with React and react-three-fiber.

What language is use-cannon written in?

Mainly TypeScript. The stack also includes TypeScript, React, Three.js.

How hard is use-cannon to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is use-cannon for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.