How does react use the 'cannon.js' physics engine?

Questions
1

In the react project, I installed cannon. js – NPM install Cannon by ES5
But how do I seem to have failed in the project?

231
231713×453 18.5 KB
6814A
6814A1059×461 24.7 KB

2

Pinging @RaananW

3

I need a bit more information about your build environment to be able to help. If I see correctly, you are using Babylon’s UMD version (and not the es6). I assume cannon was installed using npm?

How does your packer setup look like? are you using webpack? something else?

Have you tried setting CANNON on the globalThis variable? (in your case - window):

window.CANNON = CANNON;

?

4

If you set window.CANNON = CANNON then you need to change your import * to:

import * as CANNON from ‘cannon’;
window.CANNON = CANNON;

1 Like
5

Thank you very much .I installed with the es5 version, and now my solution is to introduce ‘cannon’ directly into the script tag in ‘index.html’. But I don’t know if there’s a downside to that

6

it is answer,very good!

7

Thank you very much for your method, which I have successfully used

8

Same works for the maintained Cannon-ES fork

import * as Cannon from 'cannon-es';
window.CANNON = Cannon;

The “usingPhysicsEngine” page, should probably explain how to import the physics engines too.

9

Seems 'cannon-es' does not work with Babylon.js?
I get this error when using Cannon-es
(which I do not get when using Cannon)

src/sourceES6/core/Physics/Plugins/cannonJSPlugin.ts:138

TypeError: this.world.add is not a function. (In 'this.world.add(impostor.physicsBody)', 'this.world.add' is undefined)

135 | this.world.addEventListener("preStep", impostor.beforeStep);
136 | this.world.addEventListener("postStep", impostor.afterStep);
137 | impostor.physicsBody.addShape(shape);
> 138 | this.world.add(impostor.physicsBody);
^  139 |
140 | //try to keep the body moving in the right direction by taking old properties.
141 | //Should be tested!

I encourage the team at Babylon.js and Cannon-es to work together, as Cannon has not had a commit in 6 years.

1 Like
11

If they haven’t maintained backwards compatibility we might require a new plugin to support that.
I don’t mind looking into it, but it will take some time until we’ll find the time to port it. And as Babylon does maintain back-compat, we won’t get rid of cannon (not cannon-es) support any time soon.

Want to add an issue on github?

13

Just happened to stumble on this typeError: this.world.add is not a function error myself today while trying to get the cannon-es fork working…

There is currently an issue done by @tim-montague Is this package for Three.js only? · Issue #68 · pmndrs/cannon-es · GitHub, I think we should point out this error there as well.

14

Thanks for the encouragement Panuchka. Just wrote a follow-up post for the Cannon-es team.

1 Like
15

Github issue created

I believe this would be a modification of the CannonJSPlugin and that a new plugin would not need to be created, but TBD by those with more knowledge about the Babylon plugin and Cannon-es.

16

For Cannon-es

this.world.add(impostor.physicsBody); should be this.world.addBody(imposter.phsyicsBody);

1 Like