Apply Force Precisely on Cube, Fiber + Cannon

[AhP88Yu8tqUSzFJ]

Hello, could someone help me figure out where I am going wrong? Here is a CSB I made where you click on a cube face and push it in that direction. It applies force on the center of the cube volume (default). https://codesandbox.io/s/force-on-center-of-volume-r1sym0?file=/src/App.js. This works.

I have then been trying to apply force on precisely where the cube has been clicked in this CSB: https://codesandbox.io/s/force-on-click-position-o7qm37?file=/src/App.js. And it works to some extent but it works wrong in many more ways:

ISSUES:
1) Once the cube is pushed over onto another face- forces applied break in a way I don't understand
2) const deltaPosition = worldPoint.sub(center);
This works well for only vertical faces. Clicking on a horizontal face will produce wrong results?
3) const deltaPosition = center.sub(worldPoint);
This works well for only horizontal faces. Clicking on a vertical face will produce wrong results?
4) Force is more powerful when applied closer to the center of gravity, instead of further away from it
e.g. imagine a skyscraper, it will fall over easily when pushed at the base instead of the top/roof. Try it on a face.

I have written comments to explain my steps in the CSB, here is the snippet:

    <Box
      args={[1, 1, 1]}
      ref={ref}
      onClick={(event) => {
        //figuring out the position of the click in relation to the center of
        //the object so we can add impulse force here

        //get the world position of click (raycast hit, right?) on Box object
        const worldPoint = event.point.clone();
        //get the center position of the Box object
        const center = new THREE.Vector3(...props.position);

        //get the difference from world position and center position
        const deltaPosition = worldPoint.sub(center); //this works well for only vertical faces
        //const deltaPosition = center.sub(worldPoint); //this works well for only top and bottom faces

        //add delta to center position to get the click position relative to center of object
        // convert toArray so we can use in api.applyForce
        const localClickPos = center.add(deltaPosition).toArray();

        // console.log(event);

        //I think I need to get a different global/local normal somehow? idk, brain fried rn
        const normal = event.face.normal.multiplyScalar(1).toArray();

        // console.log("worldPoint", worldPoint);
        // console.log("props.position", props.position);
        // console.log("center", center);
        // console.log("deltaPosition", deltaPosition);
        // console.log("relativeClickPos", relativeClickPos);

        api.applyImpulse(normal, localClickPos);
      }}
    >

[mwmwmw]

Yeah, it is acting weird.

Here is a modification with the normal aligned correctly to the face
https://codesandbox.io/s/force-on-click-position-forked-n8ced6?file=/src/App.js

I added an ArrowHelper to show where the force is being applied.

The normal points away from the position where force is to be applied. But it behaves like it is receiving force from the opposite direction. If I flip it, it does the opposite.

Not an answer, but will maybe help a little.

[mwmwmw]

This has the normal flipped in (what appears to be) the correct direction, but the opposite occurs.

https://codesandbox.io/s/force-on-click-position-forked-33geiu?file=/src/App.js

[mwmwmw]

What if, instead of an impulse you have another physics object that pushes into the box.

Kind of like a little invisible bullet you shoot at the box.

[AhP88Yu8tqUSzFJ]

Hi, sorry for the lack of response, I will be looking in these over the next few days. Shooting a projectile was my plan B too hahaha :D

[mwmwmw]

Ha, no worries. I'm just thinking aloud. It bothers me that this doesn't seem to work right.

The docs for this are pretty straightforward.
https://schteppe.github.io/cannon.js/docs/classes/Body.html#method_applyImpulse