New Physics Plugin for three.js (using ammo.js)

New Physics Plugin for three.js (using ammo.js)

About

enable3d provides a simple API to make development with ammo.js easier.

Quick start

:mega: Get started with Three.js + ammo.js with this easy to use template.

Features

  • Headless mode (runs ammo.js on your node.js server)
  • Add physics to all meshes
  • Compound Shapes (automatic or manually)
  • Supports Capsule, Hull, HACD, Convex/Concave Mesh and Heightfield
  • Collision Callbacks
  • Dynamic, Static, Kinematic and Ghost Bodies
  • Constraints
  • CCD Motion Clamping
  • Simple objects Factory

Examples

Here are some examples on how to use enable3d as a physics plugin for three.js.

There are a lot of examples that don’t directly use three.js, but you can do all the things (related to physics) shown in the other examples as well.

Documentation

You should find all you need in the documentation I wrote.

Screenshots

enable3d.io_examples_compare-physics-body-shapes.html(Pixel 2)

enable3d.io_examples_wrecking-ball-with-metal-chain.html(Pixel 2)

enable3d.io_examples_kinematic-body-orbiting-around-sun.html(Pixel 2)

enable3d.io_examples_first-phaser-game-3d-version.html(Pixel 2)

enable3d.io_examples_3rd-person-camera.html(Pixel 2)

Hope you :heart: it!

24 Likes

In the latest version (0.0.16), I added a headless mode. It allows you to use ammo.js on the server (node.js) without the need of packages like electron, puppeteer or jsdom. Only pure node.js.

It is also easily possible to load gltf (.glb) models and add whatever shape you want, like Hull, HACD or your custom compound shape.

Here are both examples:

1 Like

You can, of course, also include three and create your meshes as you are used to:

// ...
const THREE = require('three')
// ...
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const box = new THREE.Mesh(geometry, material)
box.name = 'box' // give it a name
box.position.set(0, 5, 0) // set y to 5
this.physics.add.existing(box) // add physics to the box

// and then push it to the objects array
this.objects.push[box]

This give exactly the same result as:

const box = this.physics.add.box({ name: 'box', y: 5 })
this.objects.push[box]
1 Like

Looks nice!

I was just browsing through the examples, but it seems like there is something horribly wrong with the water demo.

I’m running a Core i7 8700K with an RTX2080 Ti, and my FPS seems to be sitting between 5 and 10 :exploding_head:

Not sure whats going on there.

edit: This one: Water

Thanks :slight_smile:

Yes, I know. There is already a solution, but I have not implemented it yet. Will fix this in the next version.

Ah I saw that topic before. Didn’t realize it was this specific issue. Cheers!

Awesome! Love the new standalone mode. I added it to the list of Three.js-friendly physics engines: Preferred physics engine (cannon.js, ammo.js, DIY...)

2 Likes

Thanks, glad you like it :slight_smile:

It is actually the “headless mode” that is used on node.js.

The “standalone mode” is a different thing, that does not much at the moment. But I will add more functionality to it in the future.

1 Like

I’m about to implement a WebWorker for ammo.js. Infact, in my testing, I managed to implement the WebAssembly version of ammo.js into a WebWorker.

Hope I can release it soon :slight_smile:

10 Likes

Version 21 is now available with lots of fixes and improvements!

Take a look at the new examples.

And btw, Happy New Year :tada:

6 Likes

:mega: Get started with Three.js + ammo.js with this easy to use template.

2 Likes

Just found an awesome enable3d video :heart_eyes:

Nice job Yannick!

I took a dive into this, and had a question about whether it was possible to have enable3D physic bodies interact with the physic bodies created natively with Ammo?

When preserving the original Ammo physic updating function, and adding the update function for enable3D, both bodies will react accordingly to gravity, but they will not interact with each other.

Could you confirm if that was intended?

Would also be watching closely for height map support! Thanks for all of your efforts with this project.

Glad you like it :blush:

Enable3d is only a wrapper. Normally, everything should work.

It can be that there are some bugs. Maybe the objects created by enable3d have some additional properties. Please share your project and open a new issue and I will look at it and fix it.

Do you need hightmap support? I can add it. Is there already an open issue for that?

Thanks for your swift reply!

Per native ammo + enable3D, I have provided a demonstration where your suzanne model will fall through the native ammo ground plane. I didn’t see any examples of this use case so I demonstrated using the public ThreeJS example for ammo.

I’ve marked all four revisions with comments, allowing you to CTRL + F for the differences.
Demo URL
Demo (ZIP)

Regarding height maps, the enable3D website cites that they are coming soon.
I could not find any examples on the matter.

While Ammo can handle heightmaps, the lack of debugging capabilities adds undue difficulty. Since the only other debugger that I could find does not appear to work, and yours does: having support for heightmaps may be helpful on a number of fronts. Appreciating the consideration!

The demo on the front page is very fun!
One minor issue - the mouse sensitivity is way to high. If I move the mouse even one mm the camera goes wild.

I can’t open the urls.

Yes, I wanted to add it, but kept forgetting it :smiley:

Do you use an ultra-low or ultra-high resolution? It works fine on all my machines.

Actually: I personally use a fingertip grip and my wrist is always on the mouse pad. This means I always only move the mouse only a few millimeters. So high sensitivity for me is normal.
See the demonstraton :laughing:

But maybe I should reduce the default sensitivity for the first- and thirdPersonControls?

Nope, 1080p running in firefox on Windows.

Hello again Yannick,

Odd about your inability to access. I have attached an alternative download link using dropbox, if you find time to check into native ammo + enable3D collisions. Thanks again!

Just wanted to chime in and mention that I have the same sensitivity issues as looeee, with the front page demo.

This b9a0a83 should fix it.

Will have look at test.zip