Problem to add physic in a hollow cylinder (threeJS, AmmoJS)

Questions
1

Hi all,

I’m pretty new to threeJs and AmmoJs world and I don’t know if I’m moving totally wrong or I miss something.

I created a hollow cylinder with threeJs using custom shape CODE and created the physic with ammoJS using btConvexHullShape and btCompoundShape CODE, but something went wrong and I don’t know how to make it work.

Here is a demo.

Anybody can help me?

2

/cc

3

Yes, I wrote the same question on stackoverflow to have more chance to have an answer. Thanks.

4

UPDATE (05/01/2021)

I update the ammoJS code part like this

const vec31 = new Ammo.btVector3(0, 0, 0);
const vec32 = new Ammo.btVector3(0, 0, 0);
const vec33 = new Ammo.btVector3(0, 0, 0);
const vertices = geometry.vertices;
geometry.faces.forEach(face => {
   triangles.push([
      { x: vertices[face.a].x, y: vertices[face.a].y, z: vertices[face.a].z },
      { x: vertices[face.b].x, y: vertices[face.b].y, z: vertices[face.b].z },
      { x: vertices[face.c].x, y: vertices[face.c].y, z: vertices[face.c].z }
   ]);
});

const shape = new Ammo.btConvexHullShape();
triangles.forEach(triangle => {
   vec31.setX(triangle[0].x);
   vec31.setY(triangle[0].y);
   vec31.setZ(triangle[0].z);
   shape.addPoint(vec31, true);
   vec32.setX(triangle[1].x);
   vec32.setY(triangle[1].y);
   vec32.setZ(triangle[1].z);
   shape.addPoint(vec31, true);
   vec33.setX(triangle[2].x);
   vec33.setY(triangle[2].y);
   vec33.setZ(triangle[2].z);
   shape.addPoint(vec31, true);
});

I found this code from this question, but this solution does not seem to work well, the cylinders fall to one side without standing.

5

Hi @Alessandro_Renato,

I tried to implement the hollow cylinder using enable3d (ammo.js).

It did work but has a strange offset (see the example’s source).

[Link to example]

127.0.0.1_8081_examples_hollow-cylinder.html(Pixel 2)
127.0.0.1_8081_examples_hollow-cylinder.html(Pixel 2)1257×771 143 KB

6

But there is an even easier way to add a hollow cylinder with physics. I have added it to the example above. Hope it helps :blush:

const extrudeSettings = {
  depth: 2,
  steps: 1,
  bevelEnabled: false,
  curveSegments: 8
}

const arcShape = new THREE.Shape()
arcShape.absarc(0, 0, 4, 0, Math.PI * 2, 0, false)

const holePath = new THREE.Path()
holePath.absarc(0, 0, 3.5, 0, Math.PI * 2, true)
arcShape.holes.push(holePath)

const geo = new THREE.ExtrudeBufferGeometry(arcShape, extrudeSettings)
const mat = new THREE.MeshBasicMaterial({ color: 'khaki' })
const mesh = new THREE.Mesh(geo, mat)
geo.translate(0, 0, -1) // somehow this has an offset as well :/
mesh.rotateX(Math.PI / 2)
mesh.position.y = 15
scene.add(mesh)
physics.add.existing(mesh, { shape: 'hacd' })
1 Like
7

Thank you for the reply,

I did not know enable3D, it’s very useful.

in order not to modify my project too much I took the file three-to-ammo.js and physics.ts using only the hacd’s parts.
I also updated ammo.js from kripken to mozillareality, but my browser show a “Maximum call stack size exceeded” exception; I handle it with a try catch and solve it, but I think it’s a problem. I’ll investigate this problem.

When I’ll have more time I will look better at enable3D.

thank you so much for helping me.

1 Like