Skip to content

 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99

Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Change Mass

Working Example


All the Cannon Boxes created in this example are initialized with a mass of 0. This means that they will be static objects in the scene. They will not be affected by gravity or can be pushed around due to any collisions from other boxes.

When clicking a box, its mass is updated to 1. The box will now be affected by gravity and will fall freely. It may also collide with other boxes as it falls.

As each Cannon Box is created, a reference to its API is also created which means that we can then dynamically modify its properties in the Cannon world at runtime.

E.g., When a Box is clicked, its mass is updated to 1

function Box(props) {
  const [ref, api] = useBox(
    () => ({ args: [1, 1, 1], mass: 0, type: 'Dynamic', ...props }),

  return (
      onPointerDown={(e) => {
      <boxGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />

Note that modifying the Gravity sliders in the Leva GUI will have no effect on the static boxes with mass 0. But will affect any boxes that have been clicked and had there mass updated to a number higher than 0.