Currently, I'm working on implementing a dice roller using three.js and cannon-es. Everything runs smoothly when there's only one dice, rolling against the ground plane in a satisfactory manner.
However, the trouble arises when I add a second dice. While both dices roll fine against the ground plane, the simulation crashes when the two CANNON.ConvexPolyhedron objects collide.
After the collision, I continually receive this error message:
cannon-es.js:920 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at Vec3.copy (cannon-es.js:920:21)
at ConvexPolyhedron.clipFaceAgainstHull (cannon-es.js:2662:24)
at ConvexPolyhedron.clipAgainstHull (cannon-es.js:2404:12)
at Narrowphase.convexConvex (cannon-es.js:10916:10)
at Narrowphase.getContacts (cannon-es.js:10608:33)
at World.internalStep (cannon-es.js:12649:22)
at World.step (cannon-es.js:12515:12)
at updatePhysics (rolling.svelte:154:11)
at animate (rolling.svelte:142:5)
To load a stl file of a twenty-sided dice, I use an STL loader from three.js and convert it to a cannon body like this:
function createConvexHull(mesh: THREE.Mesh) {
const position = mesh.geometry.attributes.position.array
const points: CANNON.Vec3[] = []
const faces: number[][] = []
for (let i = 0; i < position.length; i += 3) {
points.push(new CANNON.Vec3(position[i], position[i + 1], position[i + 2]))
}
for (let i = 0; i < position.length / 3; i += 3) {
faces.push([i, i + 1, i + 2])
}
const convexGeometry = new CANNON.ConvexPolyhedron({
vertices: points,
faces: faces
})
const body = new CANNON.Body({ mass: 1 })
body.addShape(convexGeometry)
return body
}
Despite attempting to compute vertex normals on the Three.js mesh and merging vertices before creating the cannon body, the issue persists without any resolution.
Any advice or guidance on what might be going wrong would be greatly appreciated.