Tutorial on JavaScript Physics Using AmmoJS and ThreeJS

Showcase
#1

Hello All

Just wanted to share a tutorial I wrote on medium about JavaScript 3D physics. Its more like an introductory tutorial using Ammo.js and threejs.

I hope someone finds it helpful :smiley:

Intro to JavaScript 3D Physics using Ammo.js and Three.js

Update
Still in the same spirit, a follow up article has been published :grin:

Moving Objects In JavaScript 3D Physics using Ammo.js and Three.js

Another Update
Third article; based on collision detection :wink:

Collision Detection In Javascript 3D Physics using Ammo.js and Three.js

15 Likes
#2

Nice tutorial :grin:

BTW the grammarly extension will help you catch basic grammar mistakes in your article.

3 Likes
#3

Thanks :smile:

1 Like
#4

Updated to include link to follow up article

#5

is ammo.js best physics engine ?

#6

I can’t really say. But I do know that Bullet Physics, it’s parent, is widely used.

#7

@extremety1989

Think of it like this. Ammo.js to, say, Phys.js is what Fighter Jet is to a paper airplane. If you need a fully featured physics engine - there’s just no competition on the market to Ammo at the moment. If you only need a subset of what a physics engine typically is - you can get excellent results with the few other decent engines on the market.

4 Likes
#8

Added a new article on collision detection.

1 Like
#9

Thanks for this tutorial, I appreciate your efforts.

1 Like
#10

This is the best tutorial about Ammo.js for beginners in Ammo.js. I study the Collision Detection lesson. I use TypeScript as a programming language and pure WebGL 1.0 to draw objects:

move-cube

I want to print names of colliding objects as in the lesson. I try to use setUserPointer/getUserPointer.

I created an object to keep a user data:

const userData = { name: name };

I keep this object in a body using setUserPointer:

this.body.setUserPointer(userData);

I try to get these names using getUserPointer and print them. But I get “undefined” instead of names:

function detectCollison(): void
{
    const dispatcher = physicsWorld.getDispatcher();
    const numManifolds = dispatcher.getNumManifolds();

    for (let i = 0; i < numManifolds; i++)
    {
        const contactManifold = dispatcher.getManifoldByIndexInternal(i);
        const body0 = contactManifold.getBody0();
        const body1 = contactManifold.getBody1();

        const p0 = body0.getUserPointer();
        const p1 = body1.getUserPointer();

        console.log("first object: " + (p0 as any).name);
        console.log("second object: " + (p1 as any).name);
    }
}
#11

This is a solution for my problem above:

const userData = { name: name };
(this.body as any).userData = userData;

function detectCollison(): void
{
    const dispatcher = physicsWorld.getDispatcher();
    const numManifolds = dispatcher.getNumManifolds();

    for (let i = 0; i < numManifolds; i++)
    {
        const contactManifold = dispatcher.getManifoldByIndexInternal(i);
        const body0 = contactManifold.getBody0();
        const body1 = contactManifold.getBody1();

        const rb0 = (Ammo as any).castObject( contactManifold.getBody0(), Ammo.btRigidBody );
        const rb1 = (Ammo as any).castObject( contactManifold.getBody1(), Ammo.btRigidBody );

        console.log("first object:", rb0.userData);
        console.log("second object:", rb1.userData);
    }
}