# CANNON/OIMO/AMMO TypeScript/Webpack example please?

**URL:** <https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011>\
**Category:** Questions\
**Created:** [April 15, 2020, 8:33am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011 "2020-04-15T08:33:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kerihobo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kerihobo/32/7290_2.png) [@kerihobo](https://forum.babylonjs.com/u/kerihobo)\
**Post date:** [April 15, 2020, 8:33am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/1 "2020-04-15T08:33:39Z")

</div>

Hi, I am hoping someone might be able to link me to an example of a physics engine running in a typescript project? The examples here in Playground just seem to work but they don’t show HOW AMMO/CANNON/OIMO were implemented to get it working. And most topics I come across assume it’s a JavaScript project where I should just CDN it in.

I’m close to giving up, whatever I try, nothing works. I’ve followed every guideline in documentation and scoured forums for any hints of info.

I have what I believe is the simplest possible way to see if Ammo is working:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/dfb6de055493505aac12b1d83fe7410816001779.png)

and get the following result (no, it’s not because I’m missing all the extra BJS boilerplate, this issue was in a more fleshed out document as well, you can confirm this by doing the usual canvas/engine/scene/camera setup and commenting any attempt to access AmmoJS):

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d027aaddde151888c270b481b82e32341ed5857e.png)

I would love to see how anyone else has got AmmoJS running in TypeScript/Webpack because after it WAS working and now isn’t, I’m utterly confused and I believe I’ve done everything suggested in any BJS forum or document.

Alternatively, if anyone would like to look at my _**[barebones project](https://gitlab.com/animregan/babylon-physics-typescript)**_ to see what I might be doing wrong, it would be greatly appreciated. I promise it’s a very small project, no bigger than it needs to be in order to replicate the issue I’m getting.

The files I look at to see that I’m following BabylonJS guidelines are:

- `webpack.config.js` (see that I configured ‘`fs`’)
- `tsconfig.json` (see that I am setup to use BabylonJS correctly)
- `package.json` (see my dependencies as well as my ‘.’ command to build via webpack and run http-server)
- `index.html` (see I have a canvas with an ID, and am loading script from the dist folder after building)
- `src/index.ts` (see my barebones attempt at importing Ammo from kripken’s github as directed by [BabylonJS docs](https://doc.babylonjs.com/features/es6_support#ammo))

I swear I’m doing everything by the book, and I swear that I’ve changed nothing from what was a working example only a few days ago.

Just for clarity, you can see my project here: [https://gitlab.com/animregan/babylon-physics-typescript](https://gitlab.com/animregan/babylon-physics-typescript)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 15, 2020, 3:30pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/2 "2020-04-15T15:30:08Z")

</div>

Pinging @RaananW

---

<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:** [April 15, 2020, 6:26pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/3 "2020-04-15T18:26:30Z")

</div>

Will work on that and see what’s up

Thanks for sharing the project, it’s very helpful to have a starting point 😊

---

<div class="post-metadata">

**Author:** ![kerihobo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kerihobo/32/7290_2.png) [@kerihobo](https://forum.babylonjs.com/u/kerihobo)\
**Post date:** [April 15, 2020, 11:00pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/4 "2020-04-15T23:00:43Z")

</div>

I’ve updated [the repo](https://gitlab.com/animregan/babylon-physics-typescript), it now has separate branches for each of the 3 implementations.

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d7b92a13e382a42e58d18e054e39072a39842737.png)

I actually have Cannon & Oimo working fine, and it doesn’t seem to need the suggestions outlined in the ES6 documentation for BJS (I’ve tested this in a more fully-fleshed out scene with objects, though you will only see barebones implementation in this repo).

Ammo is still giving me the above error. Again, I swear it wasn’t doing that a week ago, and that I’ve changed nothing… I did update NodeJS… but… that should have nothing to do with anything… I know nothing has changed too because I committed my work at the time (BECAUSE IT WAS WORKING) and have reverted to that commit with no luck. see my `package.json`, it has exactly what it should. How time will change a man… that man’s name is _`Ammo`_.

Note: I see Kripken’s `ammo.js` repo has been updated in the last few days. Maybe that has caused this as I keep saying I have changed nothing since I had this working about a week ago.

---

<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:** [April 16, 2020, 7:18am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/5 "2020-04-16T07:18:49Z")

</div>

Have you tried forcing an older version of ammo? To check if something changed there?

---

<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:** [April 16, 2020, 1:26pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/6 "2020-04-16T13:26:38Z")

</div>

Here is a quick boilerplate for oimo:

```auto
import * as BABYLON from "babylonjs";
// import * as Ammo from 'ammo.js';
import * as OIMO from "oimo";

export class Main {
    private readonly _canvas: HTMLCanvasElement;
    private readonly _engine: BABYLON.Engine;

    constructor(canvas: HTMLCanvasElement) {
        this._canvas = canvas;
        this._engine = new BABYLON.Engine(canvas);
    }

    public createScene(): BABYLON.Scene {
        // This creates a basic Babylon Scene object (non-mesh)
        var scene = new BABYLON.Scene(this._engine);

        // This creates and positions a free camera (non-mesh)
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(this._canvas, true);

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;

        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

        // Move the sphere upward 1/2 its height
        sphere.position.y = 2;

        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
        var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
        
        // var plugin = new BABYLON.AmmoJSPlugin(true, Ammo;
        var plugin = new BABYLON.OimoJSPlugin(undefined, OIMO);

        scene.enablePhysics(new BABYLON.Vector3(0, -9, 0), plugin);
        
        sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9 }, scene);
        ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);

        return scene;
    }

    public run(scene: BABYLON.Scene) {
        this._engine.runRenderLoop(() => {
            scene.render();
        });
    }
}

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const main = new Main(canvas);
const scene = main.createScene();

main.run(scene);

```

---

<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:** [April 16, 2020, 1:40pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/7 "2020-04-16T13:40:54Z")

</div>

for ammo you could still manually use the one from our dist folder referenced in the page directly and simply use `new BABYLON.AmmoJSPlugin(true);` this works cause I guess the wasm part of might be creating the issue in the build

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [April 16, 2020, 6:22pm UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/8 "2020-04-16T18:22:42Z")

</div>

It’s still working for me. I just removed my `node_modules` directory - if you can’t fix with a commit-ish suffix then I can clear my yarn cache to see. I see that repo was updated on April 11 and that is the only update this year. You can force with a commit-ish suffix the previous version:  
[https://docs.npmjs.com/files/package.json#github-urls](https://docs.npmjs.com/files/package.json#github-urls)

edit: I just did a `yarn clear cache --force`, checked the cache was indeed empty, cleared `node_modules` and `yarn install` and it’s still working - at least for me at least for simple physics impostors…

---

<div class="post-metadata">

**Author:** ![kerihobo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kerihobo/32/7290_2.png) [@kerihobo](https://forum.babylonjs.com/u/kerihobo)\
**Post date:** [April 19, 2020, 4:56am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/9 "2020-04-19T04:56:46Z")

</div>

I really should firstly apologize for making such a fuss out of this. I got led astray when Ammo stopped working randomly and it threw me off and that caused me to fumble a bit when I tried to work with Oimo or Cannon instead. It seems others have had problems after 11th Apr trying to use Ammo since that change occurred on the repo and using an older commit seems to work.

As for `Oimo` & `Cannon`, @sebavan I wasn’t so much having issues with the `TypeScript` file itself, the `import` statement makes sense and using it makes sense, my issue was deeper down where the `import` statment actually fails and believes there is no `Cannon`. TBH, this was my bad, I assumed because of the `CannonJSPlugin` type found in `babylonjs` that there was no need to import Cannon. And I’m about to try it as you described but the way I got it working was to `npm i cannon && npm i @types/cannon` and it seems like that was the part I was missing.

I am curious why `Ammo` seems to be so encouraged throughout the docs as it seems to be the one that is least supported all round. The fact that it comes from a special git repo and not from a maintained node package, etc.

Side-note: the `Playground` is really great for showing how runtime code works but if something needs to be implemented to get to that stage, it’d be great to be able to download typescript projects from a repo or something that shows if anything had to be done in the `tsconfig` or `webpack` file, maybe that already exists and I’m just unaware.

---

<div class="post-metadata">

**Author:** ![ycw](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ycw/32/4315_2.png) [@ycw](https://forum.babylonjs.com/u/ycw)\
**Post date:** [April 19, 2020, 9:00am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/10 "2020-04-19T09:00:00Z")

</div>

kripken said `Ammo` becomes async, so DI the real `Ammo` instance once the promise had resolved.

 ![asyncammo](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/70e09e8ca0bc1b2ab8fc10f21281d27d880ec7e5.png)

(index.ts line#13) DI  
(index.module.d.ts) annotate the new API (stub)  
(tsconfig.json line#8) `export =` requires synthetic def imp.

 ![1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/b9aaca44ea1a8d2156fe912ba4df12cae01443cd.gif)  
🍻

---

<div class="post-metadata">

**Author:** ![kerihobo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kerihobo/32/7290_2.png) [@kerihobo](https://forum.babylonjs.com/u/kerihobo)\
**Post date:** [April 19, 2020, 9:52am UTC](https://forum.babylonjs.com/t/cannon-oimo-ammo-typescript-webpack-example-please/10011/11 "2020-04-19T09:52:06Z")

</div>

tyvm! Amazing, this is exactly what I was looking to see ^^ Yay, all hope is not lost. I mean I’ve switched to Canon which had a much simpler setup but this is also good!