How to copy shape of CANNON.js body from a THREE.js IcosahedronGeometry object?

Question

I am trying to make a simple 3D object with Three.JS and CANNON.js, but cannot seem to make the collider shape match the visual object's shape.

I am creating my shape

const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshLambertMaterial({ color: 0x009900 });
const finalCube = new THREE.Mesh(geometry, material);

Then when I try and add a collision to the shape, there's multiple options to choose from, I went with ConvexPolyhedron because it seems like its the most flexible, only accepting an array of points and faces.

However I try to get the geometry's points and faces (I think in 3D talk that's vertices and faces), it doesn't work and wont' let me get them.

Some methods are protected, some just don't work and return a generic error code.

What I want to achieve is for the collusion box to match the 3D model.

if anyone would be able to help me I would appreciate it very much! Many thanks!

have you tried this lib: github.com/donmccurdy/three-to-cannon ? — Tamás Katona
– Tamás Katona, Commented Nov 16, 2023 at 12:19

Samarth Bagga · Accepted Answer · 2024-06-11 08:32:05Z

Is this what you are looking for?

const t = (1 + Math.sqrt(5)) / 2;
const verticesIcosa = [
    new CANNON.Vec3(-1, t, 0), new CANNON.Vec3(1, t, 0),
    new CANNON.Vec3(-1, -t, 0), new CANNON.Vec3(1, -t, 0),
    new CANNON.Vec3(0, -1, t), new CANNON.Vec3(0, 1, t),
    new CANNON.Vec3(0, -1, -t), new CANNON.Vec3(0, 1, -t),
    new CANNON.Vec3(t, 0, -1), new CANNON.Vec3(t, 0, 1),
    new CANNON.Vec3(-t, 0, -1), new CANNON.Vec3(-t, 0, 1)
];

// Faces
const facesIcosa = [
    [0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
    [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
    [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
    [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
];

// Create a ConvexPolyhedron shape from the vertices and faces
const icosahedronShape = new CANNON.ConvexPolyhedron({
    vertices: verticesIcosa,
    faces: facesIcosa
});

Collectives™ on Stack Overflow

How to copy shape of CANNON.js body from a THREE.js IcosahedronGeometry object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related