A few tips for using the Cannon phyiscs library with THREE.js
https://github.com/pmndrs/cannon-es/blob/master/examples/threejs.html
THREE | CANNON |
---|---|
Scene | World |
Scene.add() | World.addBody() |
Geometry | Shape |
THREE.Material | CANNON.Material(‘name’) |
Mesh | Body |
.position | .position |
.quaternion | .quaternion |
static object | body.mass = 0 |
See https://pmndrs.github.io/cannon-es/docs/
const world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.81, 0)
})
function animate() {
requestAnimationFrame(animate)
// world stepping...
world.fixedStep()
mesh.position.copy(body.position)
mesh.quaternion.copy(body.quaternion)
// three.js render...
}
animate()
applyForce
/ applyImpulse
? => avoid, accumulation issues…
=> set velocity
instead, see:
https://github.com/schteppe/cannon.js/issues/257
https://stackoverflow.com/questions/72719561/applyimpulse-and-applyforce-accumulate-forces-they-dont-replace-them
https://github.com/pmndrs/cannon-es/blob/master/examples/trigger.html
https://www.npmjs.com/package/cannon-es-debugger
try it here:
https://pmndrs.github.io/cannon-es-debugger/