cannon-es-control
Version:
A lightweight 3D physics engine written in JavaScript with control system tools
82 lines (71 loc) • 2.65 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>cannon.js - Heightfield 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('Heightfield', () => {
const world = setupWorld(demo)
// Create a matrix of height values
const matrix = []
const sizeX = 15
const sizeZ = 15
for (let i = 0; i < sizeX; i++) {
matrix.push([])
for (let j = 0; j < sizeZ; j++) {
if (i === 0 || i === sizeX - 1 || j === 0 || j === sizeZ - 1) {
const height = 3
matrix[i].push(height)
continue
}
const height = Math.cos((i / sizeX) * Math.PI * 2) * Math.cos((j / sizeZ) * Math.PI * 2) + 2
matrix[i].push(height)
}
}
// Create the heightfield
const heightfieldShape = new CANNON.Heightfield(matrix, {
elementSize: 1,
})
const heightfieldBody = new CANNON.Body({ mass: 0 })
heightfieldBody.addShape(heightfieldShape)
heightfieldBody.position.set(
-((sizeX - 1) * heightfieldShape.elementSize) / 2,
-4,
((sizeZ - 1) * heightfieldShape.elementSize) / 2
)
heightfieldBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
world.addBody(heightfieldBody)
demo.addVisual(heightfieldBody)
// Add spheres
const mass = 1
for (let i = 0; i < sizeX - 1; i++) {
for (let j = 0; j < sizeZ - 1; j++) {
if (i === 0 || i >= sizeX - 2 || j === 0 || j >= sizeZ - 2) {
continue
}
const sphereShape = new CANNON.Sphere(0.1)
const sphereBody = new CANNON.Body({ mass })
sphereBody.addShape(sphereShape)
sphereBody.position.set(i + 0.25, 3, -j + 0.25)
sphereBody.position.vadd(heightfieldBody.position, sphereBody.position)
world.addBody(sphereBody)
demo.addVisual(sphereBody)
}
}
})
demo.start()
function setupWorld(demo) {
const world = demo.getWorld()
world.gravity.set(0, -10, 0)
return world
}
</script>
</body>
</html>