using onCollide with proper collisions

[Seanmclem]

Hi, this may seem like a weird question, but I have 2 box objects and I'd like to use onCollide to detect if they are touching, but prevent them from physically bouncing against each other. I'd like to handle the behavior of collision myself, after using the cannon events to detect them.

I guess what I'm looking to do is like a hit-box, or something around my component to detect collisions without the inner boxes really touching yet. Right now, it's like the collision is only detected if the middles of the boxes are touching, and by then they are bumping into each other and I want to prevent that.

I'm using blocks like this

  const [ref, api] = useBox(() => ({
    onCollide: () => {
      console.log("colliding");
    },
    onCollideBegin: () => {
      console.log("start collision");
    },
    mass: 1,
    position: [currentPosition.x, size / 2, currentPosition.z],
  }));

[Seanmclem]

It seems to work better now that I added type: "Kinematic", to my useBox declaration. The boxes no longer fling each other everywhere, but they still don't onCollideBegin until they're overlapping a lot. Any idea how I can expand that? See screenshot

It'a like there's a tiny box in the center that's actually getting collided with

Any tips for a collider size that visually matches the mesh?

[bjornstar]

Have you tried turning on the debugger?

What is the size of your three box? It looks like your cannon box has no arguments so it's the default size of 1x1x1.

Do you have a codesandbox that exhibits this problem?

[Seanmclem]

Thanks, that was it. I was setting my Mesh size args to [2,2,2], but nothing for useBox. So I had physics of a [1,1,1] box. I had to pass args: [2, 2, 2], to my useBox declaration and that fixed my issue. Thanks again!