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

Questions
, ,
1

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?

2

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

image

3

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

4

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

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

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

6

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.

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>
  )
}
7

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

8

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.”

9

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

10

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

image

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

11

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 :wink:

12

This uses instanced cubes.
@react-three/cannon (pmnd.rs)

github : use-cannon/demo-CubeHeap.tsx at master · pmndrs/use-cannon (github.com)

13

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.
  • Second question, how to access the api.mass.set function via a useEffect?
14

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

image
image878×246 30.5 KB

The official example I linked doesn’t do this.
CubeHeap source: use-cannon/demo-CubeHeap.tsx at b3dad4fe73617221f91a5e31be2ec06e5f98b62c · pmndrs/use-cannon · GitHub

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

15

Here is another example,

  • uses 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

image

1 Like
16

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?