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

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


2 month ago I started developing a 3d extension for Phaser called enable3d. It wraps three.js and ammo.js.

This week I spend a lot of time extracting the three and ammo wrappers into their own modules. This is how the physics plugin for three.js was born.

Features

  • Add physics to all meshes (also BufferGeometry)
  • Compound Shapes (automatic or manuall)
  • 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. Only the first example uses native three.js with the physics plugin. 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.

Quick start guide.

// Use the physics loader to load the right version of ammo.js,
// before starting your scene.
PhysicsLoader('/lib', () => MainScene())

// Start the physics plugin.
const physics = new AmmoPhysics(scene)
physics.debug.enable(true)

// Add a physics body to a three.js mesh.
physics.add.existing(mesh)

// Add a clock
const clock = new THREE.Clock()

// Update the physics in your animation loop
const animate = () => {
  physics.update(clock.getDelta() * 1000)
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}
requestAnimationFrame(animate)

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!

10 Likes