每当凸多面体之间发生碰撞时，cannon-es 就会崩溃

Question

I am trying to implement a dice roller in three.js and cannon-es. It works perfectly fine if I have only one dice. It rolls against the ground plane in a reasonable way.

When I add another dice it also works fine against the ground plane, but it completely breaks down and crashes the simulation as soon as the two CANNON.ConvexPolyhedron objects collide.

The error I am getting spammed with after the collision is this

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)

I am using a STL loader from three.js to load a stl file of a twenty sided dice, and then I am creating a cannon body from that 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
  }

I have little to no idea what is going wrong, as the error message is not saying much, but I've tried computing vertex normals on the ThreeJS mesh, which did nothing.

I've also tried merging verticies as I read that others have had issues with that (merged before creating the cannon body)

geometry = BufferGeometryUtils.mergeVertices(geometry, 0.01)

but again, it did nothing

Answer 1

I'm just guessing, but you may try defining the normals

new ConvexPolyhedron({ vertices, faces, normals });

I experienced weird behaviors with convex shape collisions (not errors, but like launching one of the colliding objects into the void), that I could resolve by re calculating the normal vectors

https://github.com/tomo0613/offroadJS_v2/blob/355b6aabf0446deefffba6d60e24a257836916ea/src/mapModules/baseMapElementComponents.ts#L137