Cannot set properties of undefined Ammo

Bugs
, , ,
1

Hello everyone! So im having a bug where i installed the AmmoJS but when i use it its not working i dont really know why. I remember solving it once in another project but its the same code but now working😥. If you guys could help me a little bit.

The code:

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import * as BABYLON from "@babylonjs/core";
import Ammo from "ammo.js";

import { ToonShaderComponent } from "./Shader/ToonShaderComponent";
import { MeshFollow } from "./MeshFollow";

//DOM Imports
import {handleFinishLoading} from "../view/loading"

class App {

  private sphere;
  private sphere1;

  constructor() {
    var canvas = document.getElementById("canvas");

    var engine = new BABYLON.Engine((canvas as HTMLCanvasElement), true);
    var scene = new BABYLON.Scene(engine);
    
    if(scene != null || scene != undefined){
      handleFinishLoading();
    }
    
    scene.clearColor = new BABYLON.Color4(0,0,0,0);
    
    this.CreatePhysics(scene, camera, engine);

    var camera: BABYLON.ArcRotateCamera = new BABYLON.ArcRotateCamera("Camera", 7.739712246449233, 0.01, 18.629691146092306, BABYLON.Vector3.Zero(), scene);
    camera.detachControl();
    camera.position = new BABYLON.Vector3(0.021241382121505482, 18.628759669297345, 0.18507886436930487);


    var light1: BABYLON.HemisphericLight = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);

    // this.CreateMeshes(scene, camera, engine);
    
    // camera.setTarget(sphere);

    window.addEventListener("keydown", (ev) => {
        // Shift+Ctrl+Alt+I to show debug layer
        if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
            if (scene.debugLayer.isVisible()) {
                scene.debugLayer.hide();
            } else {
                scene.debugLayer.show();
            }
        }

        if(ev.key == "e"){
          console.log("Camera Alpha: ", camera.alpha);
          console.log("Camera Beta: ", camera.beta);
          console.log("Camera Radius: ", camera.radius);
          console.log("Camera position: ", camera.position);
        }
    });


    engine.runRenderLoop(() => {
        scene.render();
        engine.resize();
    });
  }


  async CreatePhysics(scene, camera, engine): Promise<void> {
    const ammo = await Ammo();
    const physics = new BABYLON.AmmoJSPlugin(true,ammo);
    scene.enablePhysics(new BABYLON.Vector3(0,-100,0),physics);
    // this.CreateMeshes(scene, camera, engine);
    var cube = BABYLON.MeshBuilder.CreateBox("cube",{size:10},scene);
    cube.physicsImpostor = new BABYLON.PhysicsImpostor(cube,PhysicsImpostor.BoxImpostor,{mass:10,friction:1});
    cube.position = new BABYLON.Vector3(3,10,0);
  }

  CreateMeshes(scene, camera, engine){
    this.sphere  = BABYLON.MeshBuilder.CreateSphere("name");
    var toonShaderComponent = new ToonShaderComponent(camera, scene, engine,this.sphere, new BABYLON.Color3(0.1,0.4,1));
    var meshFollow = new MeshFollow(scene, camera, this.sphere);

    this.sphere1  = BABYLON.MeshBuilder.CreateSphere("name");
    var toonShaderComponent1 = new ToonShaderComponent(camera, scene, engine, this.sphere1, BABYLON.Color3.Red());
    var meshFollow1 = new MeshFollow(scene, camera, this.sphere1);


    this.sphere.physicsImpostor = new BABYLON.PhysicsImpostor(this.sphere, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 1});
    this.sphere.physicsImpostor.physicsBody.linearDamping = 0;
    this.sphere.physicsImpostor.physicsBody.angularDamping = 0;

    this.sphere1.physicsImpostor = new BABYLON.PhysicsImpostor(this.sphere1, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 0});
    this.sphere1.physicsImpostor.physicsBody.linearDamping = 0;
    this.sphere1.physicsImpostor.physicsBody.angularDamping = 0;
  }
}
new App();

image

2

Probably you need to import ammo with types - Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

1 Like
3

Hello @Firdeus_Kasaj just checking in if your issue was resolved?

4

i imported ammojs-typed package and use it like example u provide,but is not work from the beginning,
I am very confused,can u help me?
image
image
image

5

Could you check how it is done here - GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.
To load the ammo physics demo, use http://localhost:8080/?scene=physicsWithAmmo

1 Like
6

Hey @Rommon_Susiia,
Can you share more code or your project? It is difficult to say what is wrong with your code from such a small portion of the code.
You can also check my very basic repo of BabylonJS + AmmoJS

7 
import ammo from "ammo.js"
const Ammo = await ammo.bind(window)()
3 Likes
8

hey guys, try this:

const ammo = await new Ammo()
1 Like
9

it works!