# How to change static to dynamic with instances on react with threejs and cannonjs

**URL:** <https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733>\
**Category:** Questions\
**Tags:** react, instancedmesh, cannonjs\
**Created:** [February 6, 2023, 6:39pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733 "2023-02-06T18:39:44Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 6, 2023, 6:39pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/1 "2023-02-06T18:39:44Z")

</div>

Hi,

I would like that when the mouse passes over my red instance, it turns into a dynamic body and falls to the ground.

What am I doing wrong because my code doesn’t work?

> **[Simple physics demo (forked) v2 - CodeSandbox](https://codesandbox.io/s/simple-physics-demo-forked-v2-0k1kd2?file=%2Fsrc%2FApp.js)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 6, 2023, 6:53pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/2 "2023-02-06T18:53:45Z")

</div>

you set the mass = 0 to make it static.

In this example, the plane mass is set to 0. which is actually the default so you don’t need to set it at all.

See line 23 : [R3F Cannon Example](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-qduc08?file=/src/App.jsx:483-549)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/ab670682ab14ab19eee8fce0b5b468bc49335b33.png)](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-qduc08?file=/src/App.jsx:483-549)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 6, 2023, 6:55pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/3 "2023-02-06T18:55:01Z")

</div>

yes and i try also but the refs.current[index].current.body doesn’t exist…

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 6, 2023, 7:04pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/4 "2023-02-06T19:04:54Z")

</div>

It seems you have a different problem  
“React Hook “useBox” cannot be called inside a callback.”

Anyway, to change a cannon bodies properties in `@react-three/cannon` you should use the `api`, because your `ref` is referring to the mesh and not the cannon body.

I don’t yet have any examples of this to show.  
But declare something like this

```javascript
const [ref, api] = useBox(() => ({ mass: 1 }))

```

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 6, 2023, 7:08pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/5 "2023-02-06T19:08:49Z")

</div>

it doesn’t works and i don’t see my instance :

> **[Simple physics demo (forked) v3 - CodeSandbox](https://codesandbox.io/s/simple-physics-demo-forked-v3-iu93y5?file=%2Fsrc%2FInstanceBox.js)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 6, 2023, 7:20pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/6 "2023-02-06T19:20:09Z")

</div>

I don’t know why yours is broken. It is too complex for me to quickly understand.

I updated my example to use the api.

If you click any objects, they will have a velocity applied to them to make them jump.

```javascript
function Box(props) {
  const [ref, api] = useBox(() => ({ args: [1, 1, 1], mass: 1, ...props }), useRef())

  return (
    <mesh ref={ref} castShadow onPointerDown={() => api.velocity.set(0, 5, 0)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  )
}

```

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 6, 2023, 7:33pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/7 "2023-02-06T19:33:48Z")

</div>

No yout snippet doesn’t works with me and i try different things but without success…

> **[Simple physics demo (forked) v4 - CodeSandbox](https://codesandbox.io/s/simple-physics-demo-forked-v4-oxgbg9?file=%2Fsrc%2FInstanceBox.js)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 6, 2023, 7:38pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/8 "2023-02-06T19:38:02Z")

</div>

I’m not trying to fix your specific code, I already said I can’t read it.

I also told you that you should set mass to `0` if you want a cannon body to be static.

I also told you if you want to change a cannon bodies properties, then use the `api` option that you get with `@react-three/cannon`

I am suggesting alternate working examples so that you can get a different perspective to help you figure it out yourself.

It seems that you still didn’t fix this problem.  
“React Hook “useBox” cannot be called inside a callback.”

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 6, 2023, 7:42pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/9 "2023-02-06T19:42:44Z")

</div>

Thanks @seanwasere for your tips.

it’s just frustrating when you can’t figure out how to make something work and you think that what you’re doing is logical

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 6, 2023, 9:50pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/10 "2023-02-06T21:50:20Z")

</div>

I threw together a quick demo of clicking boxes which causes there mass to change.

To be able to modify a bodies mass from 0 to something else at runtime, it appears you also need to set them as ‘Dynamic’ when you create them.

In this example, I initialise the boxes with mass 0, and then set them to 1 when you click them.

Example : [Change Cannon Body Mass](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-change-mass-cmux5k?file=/src/App.jsx)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/c/0c3442538df1c57ee1dc3bbb505c93e5f4e7852f.jpeg)](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-change-mass-cmux5k?file=/src/App.jsx)

I think your difficulties are compounded by trying to get physics to work with instanced meshes. This sounds very complicated. But probably not impossible.

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 9, 2023, 8:33am UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/11 "2023-02-09T08:33:24Z")

</div>

Thanks @seanwasere, your solution works very well on simple box. But since your post i try to transpose it to instances and i don’t success. It’s true that instance is complicated but it’s necessary for perfomance.

Maybe if you have a tips about it, i will keep it 😉

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 9, 2023, 9:15am UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/12 "2023-02-09T09:15:32Z")

</div>

This uses instanced cubes.  
[@react-three/cannon (pmnd.rs)](https://cannon.pmnd.rs/#/demo/CubeHeap)

github : [use-cannon/demo-CubeHeap.tsx at master · pmndrs/use-cannon (github.com)](https://github.com/pmndrs/use-cannon/blob/master/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 11, 2023, 2:29am UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/13 "2023-02-11T02:29:38Z")

</div>

Hi, I have successfully set up instances with your advice.

Instances = red box  
normal mesh = yellow box

- The problem is that the positions of my instances are not good. Normally they are defined with ‘positions’ and in my code they appear at the same position. When I click on them, the mass changes.

> **[physics with instances v6 - CodeSandbox](https://codesandbox.io/s/physics-with-instances-v6-4yoqsk?file=%2Fsrc%2FApp.js)**
>
> Attempt with box and instances dropping onto a plane using use-cannon / cannon-es.

- Second question, how to access the api.mass.set function via a useEffect?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 11, 2023, 10:16am UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/14 "2023-02-11T10:16:15Z")

</div>

You need to go backwards.  
You still haven’t resolved this error.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/c/5c115c97d7633f85565ea9af797ae1794310f6fe.png)

The official example I linked doesn’t do this.  
CubeHeap source: [use-cannon/demo-CubeHeap.tsx at b3dad4fe73617221f91a5e31be2ec06e5f98b62c · pmndrs/use-cannon · GitHub](https://github.com/pmndrs/use-cannon/blob/b3dad4fe73617221f91a5e31be2ec06e5f98b62c/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx)

I am very busy at the moment, maybe I will update my example to use instanced meshes in a few days.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [February 12, 2023, 1:25pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/15 "2023-02-12T13:25:21Z")

</div>

Here is another example,

- uses [InstancedMesh](https://threejs.org/docs/#api/en/objects/InstancedMesh)
- doesn’t have your error - `React Hook "useBox" cannot be called inside a callback.`
- changes the mass of a cannon body due to user interaction.
- uses the `@react-three/cannon` APIs `at` method to reference the instance by its id

[cannon change instance property : codesandbox.io](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-change-instance-property-mt917w?file=/src/App.jsx)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/1/8142c74381ad91641f05181504608e0e5f9fd2f4.png)](https://codesandbox.io/s/react-three-fiber-boilerplate-cannon-change-instance-property-mt917w?file=/src/App.jsx)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [February 12, 2023, 6:59pm UTC](https://discourse.threejs.org/t/how-to-change-static-to-dynamic-with-instances-on-react-with-threejs-and-cannonjs/47733/16 "2023-02-12T18:59:08Z")

</div>

Thanks @seanwasere but how do you find this information?

Since my last post, I searched several tags

three js react instance mass  
react instance cannon  
r3f instance physics  
react instance physics  
react change mass instance three

Explore many sandboxes with these terms  
Explore google images with these terms  
Explore the forum with these terms…  
Try with Chatgpt =\> 10 chat …

And I didn’t find anything.

So my question is how do you get to this information? Do you have any tools or tips for this?