cannon-es-control
Version:
A lightweight 3D physics engine written in JavaScript with control system tools
87 lines (71 loc) • 2.62 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>cannon.js - jenga demo</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<script type="module">
import * as CANNON from '../dist/cannon-es-control.js'
import { Demo } from './js/Demo.js'
const demo = new Demo()
demo.addScene('Jenga', () => {
const world = setupWorld(demo)
const size = 0.5
const mass = 1
const gap = 0.02
// Layers
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 3; j++) {
const body = new CANNON.Body({ mass })
let halfExtents
let dx
let dz
if (i % 2 === 0) {
halfExtents = new CANNON.Vec3(size, size, size * 3)
dx = 1
dz = 0
} else {
halfExtents = new CANNON.Vec3(size * 3, size, size)
dx = 0
dz = 1
}
const shape = new CANNON.Box(halfExtents)
body.addShape(shape)
body.position.set(
2 * (size + gap) * (j - 1) * dx,
2 * (size + gap) * (i + 1),
2 * (size + gap) * (j - 1) * dz
)
world.addBody(body)
demo.addVisual(body)
}
}
})
demo.start()
function setupWorld(demo) {
const world = demo.getWorld()
world.gravity.set(0, -5, 0)
// Max solver iterations: Use more for better force propagation, but keep in mind that it's not very computationally cheap!
world.solver.iterations = 50
// Tweak contact properties.
// Contact stiffness - use to make softer/harder contacts
world.defaultContactMaterial.contactEquationStiffness = 5e6
// Stabilization time in number of timesteps
world.defaultContactMaterial.contactEquationRelaxation = 3
// Uncomment to test with sleeeping bodies
// world.allowSleep = true
// Static ground plane
const groundShape = new CANNON.Plane()
const groundBody = new CANNON.Body({ mass: 0 })
groundBody.addShape(groundShape)
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
world.addBody(groundBody)
demo.addVisual(groundBody)
return world
}
</script>
</body>
</html>