# Using AmmoJS with Babylon

**URL:** <https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413>\
**Category:** Questions\
**Created:** [January 1, 2022, 9:03pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413 "2022-01-01T21:03:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgonzosan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jgonzosan/32/10007_2.png) [@jgonzosan](https://forum.babylonjs.com/u/jgonzosan)\
**Post date:** [January 1, 2022, 9:03pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/1 "2022-01-01T21:03:28Z")

</div>

I’ve been trying to figure out how to properly use Cannon or Ammo for physics in BabylonJS but the documentation on this is very sparse.

Starting with AmmoJS I’m using the npm package “ammo.js”, there also seems to be one called “ammojs” so I’m not sure which is correct but I believe the former is what I’ve seen used. I’m using Typescript and this is what I have written:

```auto
import * as Ammo from "ammo.js";
  async CreatePhysics(): Promise<void> {
    await Ammo();
    this.scene.enablePhysics(
      new Vector3(0, -9.81, 0),
      new AmmoJSPlugin(true, Ammo)
    );
   }

```

I get an error about type definitions for ammo.js and it looks like none exist when I try to run  
`npm i --save-dev @types/ammo.js`

I did find these topics in the forum:

> [@Including Ammo.js with BABYLON using Nodejs](https://forum.babylonjs.com/t/including-ammo-js-with-babylon-using-nodejs/5054):
>
> So I am trying to get Ammo.js to work with BABYLON inside NodeJS using import statements, I have already installed babylonjs and ammo.js using npm, although I don’t know how to use import/require statements to get Babylon to register that Ammojs is there, here is the small example I have right now: import \* as BABYLON from 'babylonjs'; var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); var scene =…

> [@How to use AmmoJSPlugin when working with TypeScript](https://forum.babylonjs.com/t/how-to-use-ammojsplugin-when-working-with-typescript/9748):
>
> Hi, I’m very confused when trying to follow documentation for how to get AmmoJS running in my TypeScript/Webpack project. The documentation seems to imply that I need to npm install ammojs, but only if I’m working with AmmoJS directly as opposed to this implementation found in babylon.module.d.ts: [image] I have declared a variable like so: [image] And I have setup my physicsEngine and imposters like so: and naturally, cos it’s TypeScript it automates the following imports:

Unfortunately, even after following what was mentioned there I still don’t get around this issue. I assume the definitions are preventing me from using this at all. Is there a way around this?

I’ve also tried using Cannon, but from what I’ve read it’s currently outdated. I don’t know if this would cause any issues with it being outdated. I started using “cannon-es” which is the updated version, but I also get an error when using that:  
`TypeError: this.world.add is not a function`

According to this Github Issue:

> <https://github.com/BabylonJS/Babylon.js/issues/9810>
>
> Using the maintained \[Cannon-es\](https://github.com/pmndrs/cannon-es) version of… Cannon, with Babylon.js results in the following error.
> 
> \`\`\`javascript
> import \* as Cannon from 'cannon-es';
> window.CANNON = Cannon;
> \`\`\`
> 
> \`\`\`javascript
> 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!
> \`\`\`
> 
> This is also discussed on the Babylon.js forum and on the Cannon-es github:
> \- https://forum.babylonjs.com/t/how-does-react-use-the-cannon-js-physics-engine/10275/9?u=tim-montague
> \- https://github.com/pmndrs/cannon-es/issues/68

It looks like this might have been resolved but I still get the issue using this code:  
(using the cannon-es NPM package)  
`import \* as CANNON from “cannon-es”;

async CreatePhysics(): Promise {  
//tried using this from the example in the Github issue  
// window.CANNON = CANNON;

```
this.scene.enablePhysics(

  new Vector3(0, -9.81, 0),

  new CannonJSPlugin(null, null, CANNON)

);

```

}

`

I’m going to try using the outdated cannon NPM package, but if someone can tell me what I’m doing wrong here and how to use an updated physics engine I would greatly appreciate it. Thanks.

---

<div class="post-metadata">

**Author:** ![Panuchka](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/panuchka/32/12054_2.png) [@Panuchka](https://forum.babylonjs.com/u/Panuchka)\
**Post date:** [January 2, 2022, 7:49pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/2 "2022-01-02T19:49:05Z")

</div>

For me, I am using Ammo.js typed package to get the typescript types properly, package.json:

```auto
"ammojs-typed": "^1.0.6"

```

Then I initialize it in my async function:

```auto
import Ammo from 'ammojs-typed'
const ammo = await Ammo()
let physics: AmmoJSPlugin = new AmmoJSPlugin(true, ammo)
scene.enablePhysics(new Vector3(0, -10, 0), physics)

```

---

<div class="post-metadata">

**Author:** ![jgonzosan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jgonzosan/32/10007_2.png) [@jgonzosan](https://forum.babylonjs.com/u/jgonzosan)\
**Post date:** [January 2, 2022, 8:58pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/3 "2022-01-02T20:58:39Z")

</div>

Thank you, I wasn’t aware of the typed version of ammojs. I just tried it myself and it works, marked solution.

---

<div class="post-metadata">

**Author:** ![buigabor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buigabor/32/26736_2.png) [@buigabor](https://forum.babylonjs.com/u/buigabor)\
**Post date:** [September 2, 2022, 12:36pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/4 "2022-09-02T12:36:48Z")

</div>

Hi!

I did the same thing what @Panuchka has written above. Unfortunately, I receive the following error:

`Uncaught TypeError: Cannot set properties of undefined (setting 'Ammo')`

I am using Vite as the bundler.

Any idea?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 2, 2022, 12:40pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/5 "2022-09-02T12:40:44Z")

</div>

@RaananW might have an idea but at a first glance it looks like your import does not return anything for some reasons ☹

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 2, 2022, 12:41pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/6 "2022-09-02T12:41:44Z")

</div>

Would you be able to (minimally) reproduce that? a project, or some shared code?

---

<div class="post-metadata">

**Author:** ![buigabor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buigabor/32/26736_2.png) [@buigabor](https://forum.babylonjs.com/u/buigabor)\
**Post date:** [September 2, 2022, 1:02pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/7 "2022-09-02T13:02:51Z")

</div>

I reproduced it here:

> **[GitHub - buigabor/babylonjs-ammo-test1](https://github.com/buigabor/babylonjs-ammo-test1)**
>
> Contribute to buigabor/babylonjs-ammo-test1 development by creating an account on GitHub.

Thank you for your time and help! Appreciate it!

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 2, 2022, 4:10pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/8 "2022-09-02T16:10:28Z")

</div>

Seems like a module scoping issue. try this (instead of the line you have):

```auto
const ammo = await Ammo.call(this);

```

---

<div class="post-metadata">

**Author:** ![buigabor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buigabor/32/26736_2.png) [@buigabor](https://forum.babylonjs.com/u/buigabor)\
**Post date:** [September 2, 2022, 5:32pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/9 "2022-09-02T17:32:14Z")

</div>

Oh wow thanks! It works! 😃

---

<div class="post-metadata">

**Author:** ![wavetro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wavetro/32/24254_2.png) [@wavetro](https://forum.babylonjs.com/u/wavetro)\
**Post date:** [January 29, 2023, 11:15pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/10 "2023-01-29T23:15:36Z")

</div>

I’ve tried both `const ammo = await Ammo();` and `const ammo = await Ammo.call(this);` directly inside an async function that runs my entire BabylonJS app, and I keep getting an `Uncaught (in promise) TypeError: this is undefined` message in my console. I even tried this as specified in the [README](https://github.com/giniedp/ammojs-typed/blob/master/Readme.md#ammo-as-es6-module-import) for ammojs-typed:

```auto
const App = async function() {
    // ...

    await Ammo(Ammo).then(() => {
        scene01.enablePhysics(new Vector3(0, -9.81, 0), new AmmoJSPlugin(true, this));
    });

    // ...
}
App();

```

Still the same error. How do I call ammojs-typed in TypeScript for my case? I’m also using Vite

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [January 30, 2023, 3:38am UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/11 "2023-01-30T03:38:11Z")

</div>

thats kind of an incomplete example, but arrow functions do not have a “this” context, which you may not be expecting? also await Ammo(Ammo) is wrong. If anything, it’d be  
await Ammo().then((ammo) =\> { ammo maybe available here } . Idk if the ammo module returns itself, but either way, you’re probably better off just assigning ammo to the window instead of expecting it to be in the return value of the promise.

so like:  
async funciton App() {

window.Ammo = await Ammo()

scene01.enablePhysics(new Vector3(0, -9.81, 0), new AmmoJSPlugin(true, window.Ammo));

}

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 30, 2023, 4:17pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/12 "2023-01-30T16:17:56Z")

</div>



---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 30, 2023, 4:18pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/13 "2023-01-30T16:18:26Z")

</div>

@wavetro a repro could help @RaananW to do his magic a lot

---

<div class="post-metadata">

**Author:** ![wavetro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wavetro/32/24254_2.png) [@wavetro](https://forum.babylonjs.com/u/wavetro)\
**Post date:** [January 31, 2023, 4:33am UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/14 "2023-01-31T04:33:01Z")

</div>

@jeremy-coleman You’re right, I should probably provide more context.

@sebavan @RaananW You got it!

Here’s a copy of my dev environment: [debug/houseDev at main · wavetro/debug · GitHub](https://github.com/wavetro/debug/tree/main/houseDev)

---

<div class="post-metadata">

**Author:** ![bigrig](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bigrig/32/5548_2.png) [@bigrig](https://forum.babylonjs.com/u/bigrig)\
**Post date:** [January 31, 2023, 5:08am UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/15 "2023-01-31T05:08:25Z")

</div>

Oh, I just posted a quick code snippet in the tutorial section on this topic. [Getting ammo setup with webpack - #3 by bigrig](https://forum.babylonjs.com/t/getting-ammo-setup-with-webpack/37742/3)

---

<div class="post-metadata">

**Author:** ![wavetro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wavetro/32/24254_2.png) [@wavetro](https://forum.babylonjs.com/u/wavetro)\
**Post date:** [January 31, 2023, 5:26am UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/16 "2023-01-31T05:26:40Z")

</div>

@bigrig Legendary timing! Will look into how to apply this same method in Vite

**UPDATE:** This Webpack solution doesn’t seem to be as plug-and-play with Vite. I tried porting that Webpack method into a `vite.config.js` file like this, even after running `npm install` on kripken/ammo.js and fs:

```auto
export default {
    resolve: {
      alias: {
        fs: false,
        'path': false,
      },
    },
  }

```

Doesn’t seem to work…

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [January 31, 2023, 8:54am UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/17 "2023-01-31T08:54:56Z")

</div>

change your index.html to:

```auto
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>houseDev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script type="module" src="./src/app.ts"></script>
  </body>
</html>

```

then in app.ts

//you can can remove this  
//import “ammojs-typed”;  
…  
window.Ammo = await Ammo()  
scene01.enablePhysics(new Vector3(0, -9.81, 0), new AmmoJSPlugin(true));

(no errors)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/0/9039a2435643c32a83a8559b8e841913bba6def1.png)

maybe eventually you want to find a wasm copy of ammo and use that, but thats fine for now

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 31, 2023, 2:06pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/18 "2023-01-31T14:06:53Z")

</div>

This is an emscripten issue that I hope they will resolve.  
Short explanation - when running as es module, you don’t have the global context (when running functions in a module. i.e. - `this` is undefined). hence - it is not possible to assign anything to the global namespace. but emscripten is still trying to do it. and it fails.

fun fun fun!

The solution is simple! 🙂

First import ammo:

```javascript
import ammo from 'ammojs-typed';

```

then, in your scene init function use this:

```javascript
const ImportedAmmo = await ammo.call({});
scene01.enablePhysics(new Vector3(0, -9.81, 0), new AmmoJSPlugin(true, ImportedAmmo));

```

Setting the context in which the ammo function is called is enough. And - it works:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/a/aa8959757a754ff840851e901acfb6702e0e057e.png)

Avoid polluting the global namespace, avoid importing using different mechanisms. Stick with vite and es modules - this is a wonderful way to get your app performing wonderfully, loading fast, and compiling even faster 🙂

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [January 31, 2023, 2:43pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/19 "2023-01-31T14:43:59Z")

</div>

It will actually load faster and compile faster by using the script tag. It will load faster because it will be parsed in a different thread by chrome and compile faster because it wont be compiled at all. Doesnt really matter tho i guess.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 31, 2023, 2:51pm UTC](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413/20 "2023-01-31T14:51:08Z")

</div>

Not sure what you mean exactly with

> [@jeremy-coleman](#):
>
> compile faster because it wont be compiled at all

but i am not going to argue 🙂  
My very personal opinion is that if your system works one way, and your build system works one way, and the framework you have decided to use works one way, use this way.  
I also will not use someone else’s CDN when serving production code, because then you trust a system you don’t control. But that’s a different issue.

Anyhow - there are 100 different ways to solve this. I can only provide my 2 cents, and the way I personally think will be the cleanest.

[Next page](https://forum.babylonjs.com/t/using-ammojs-with-babylon/26413.md?page=2)