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!

21 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:

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: