Including Ammo.js with BABYLON using Nodejs

Questions
1

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 = new BABYLON.Scene(engine);
scene.enablePhysics(new BABYLON.Vector3(20,0,0),new BABYLON.AmmoJSPlugin())
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
new BABYLON.PhysicsImpostor(sphere,BABYLON.PhysicsImpostor.MeshImpostor,{ mass: 1, friction: 1.0, restitution: 0 },scene)
sphere.position.y = 1;
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

engine.runRenderLoop(function () {
	if (scene) {
		scene.render();
	}
});

But when I build it using webpack and then run the index.html I get the error “Uncaught ReferenceError: Ammo is not defined”

2

Good news everyone, I have figured out the answer, even though I’m pretty sure no one will ever need this information the problem was that the ammo.js npm module is missing like half of the api for some reason (fantastic!) but after instead doing npm install kripken/ammo.js it installed the complete version and then after modifying the code because I realized i need to pass the import to the plugin in worked great.

import * as BABYLON from 'babylonjs';
import * as Ammo from 'ammo.js';

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });

var scene = new BABYLON.Scene(engine);
scene.enablePhysics(new BABYLON.Vector3(20,0,0),new BABYLON.AmmoJSPlugin(true,Ammo))
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
new BABYLON.PhysicsImpostor(sphere,BABYLON.PhysicsImpostor.MeshImpostor,{ mass: 1, friction: 1.0, restitution: 0 },scene)
sphere.position.y = 1;
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

engine.runRenderLoop(function () {
	if (scene) {
		scene.render();
	}
});
2 Likes
3

Congrats!

4

Hi. I guess I’m getting closer to solving this for myself but I’m missing type definitions it seems.

image

I tried the following:

npm i --save-dev @types/ammo.js

but that doesn’t seem to exist. How did you get past this issue?

1 Like
5

The types are not required for compilation, and you won’t be using Ammo directly so you’ll be relying on the Babylon typings anyway.

6

I see, thank you. I have found success! :smiley:

I set

"noImplicitAny": false

in my tsconfig.json, and I followed Babylon’s ES6 guidelines (Ammo section) to add this to webpack.config.js
image
so this is fine now:
image

I can compile and load the scene now, and found success with the following:

image

I’m eternally grateful for how cool Babylon is but I would offer my first-born child for clearer docs ^^

2 Likes
7

@kerihobo I would personally try to keep no implicit any. Did you try to ignore by putting a comment above the ammo import?
// @ts-ignore

Otherwise create a .d.ts file with? Used to need to do tricks with root and types, but shouldn’t anymore.
declare module 'ammo.js' {}

1 Like
8

Oh those are 2 tricks I didn’t know! Thanks, yeah I would rather keep noImplicitAny as well. Thanks!

1 Like
9

Weird… it was working a couple days ago, today I fired it up with no luck, now my browser console says ‘apply’ could not be found from ammo.js. I’ve setup a file to test JUST ammo.js:

image

and now it gives me this on line 7 where I assign the Ammo plugin:

image

So confused. I swear I’ve changed nothing since I got this running only a few days ago. Any idea what is causing this?

Here is my package.json:

image

10

Had the same ‘apply’ problem - looks like they’ve just updated the master commit on ammojs - so I used a previous commit from 2019 which doesn’t have the same error Add btEmptyShape to IDL (#283) · kripken/ammo.js@aab297a · GitHub

yarn add kripken/ammo.js#aab297a4164779c3a9d8dc8d9da26958de3cb778

1 Like
11

Thanks! That confirms my suspicion that it was a change made to Kripken’s ammo lib on 11th Apr. I was seriously tearing my hair out on this one blaming my implementation. I’ve opened an issue on the git repo, Kripken has replied ^^.