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.