Cannon.js Three.js create inverted cylinder barrier

17 Views Asked by At

I have a dices game just like that ( https://tympanus.net/codrops/2023/01/25/crafting-a-dice-roller-with-three-js-and-cannon-es/ ) and i am trying to put them inside a circle so the will not go out of the screen.

i have written this.

` function createCylinder() {

// visual ring barrier
const ringGeometry = new THREE.RingGeometry(4.5, 4.53, 32)
const ringMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const ringMesh = new THREE.Mesh( ringGeometry, ringMaterial );
ringMesh.rotation.x = - Math.PI / 2;
ringMesh.position.set(1.2,floorPositionValue+0.02, -6);
scene.add( ringMesh );


// Create the cylinder geometry
const cylinderGeometry = new THREE.CylinderGeometry(4.5, 4.5, 10, 32); // Adjust the height (10) as needed
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity:0.5 }); // Change color as desired
const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);

// Set position same as ringMesh
cylinderMesh.position.copy(ringMesh.position);
scene.add(cylinderMesh);

// physical barrier
const cylinderShape = new CANNON.Cylinder(4.5, 4.5, 10, 32);
const cylinderBody = new CANNON.Body({
    mass: 0, // Non-zero mass makes the object dynamic, 0 makes it static
    position: new CANNON.Vec3(ringMesh.position.x, ringMesh.position.y, ringMesh.position.z)
});
cylinderBody.addShape(cylinderShape);
physicsWorld.addBody(cylinderBody);

} `

I want a cannon represantion of this

const cylinderGeometry = new THREE.CylinderGeometry(4.5, 4.5, 10, 32,1,true,0,-6.3)

which is open on the inside.

But this creates a real cylinder that dices cannot be inside. I want exact the opposite shape of a cylinder. Is there any way to achieve that? So the dices will always be inside the ring circle?

I want dices to be always inside the a circle. But the cannon barrier i put throws the dices far away. I want the opposite of the cylinder. Inside to be empty and the wall collide to be the outer part of it.

0

There are 0 best solutions below