hello I have problem which is I made walls using CuboidCollider but my problem is I have objects they cross it when collide very much with each other and what I want is to make them no matter they collide with each other don’t cross the walls
my walls
function BorderWalls() {
const {size} = useThree() // Adjust this according to your scene size
const walls = [
{ position: [0, size.height /2, -1], size: [size.width, 1, 1000] }, // Bottom wall
{ position: [0, - size.height /2, 1], size: [size.width, 1, 1000] }, // Top wall
{ position: [-size.width /2, 0, 0], size: [1, size.height, 1000] }, // Left wall
{ position: [size.width / 2, 0, 0], size: [1, size.height, 1000] } // Right wall
];
return (
<>
{walls.map((wall, index) => (
<RigidBody restitution={0} key={index} type="fixed" >
<CuboidCollider args={wall.size} position={wall.position} />
</RigidBody>
))}
</>
);
}
my objects
function Sphere({ leavePosition,index,radius,image, scale, text, vec = new THREE.Vector3(), ...props }) {
const api = useRef()
const angle = Math.PI * 2;
const initialPos = useMemo(() => [THREE.MathUtils.randFloatSpread(2), THREE.MathUtils.randFloatSpread(2), 0], [])
const [position] = useState(() => new THREE.Vector3())
const [dragging, drag] = useState(false)
useFrame((state, delta) => {
easing.damp3(position, [state.pointer.x * state.viewport.width / 2 - dragging.x, state.pointer.y * state.viewport.height / 2 - dragging.y, 0], 0.2, delta)
api.current?.setNextKinematicTranslation(position)
})
const x = 500
const y = 200
return (
<RigidBody
ref={api}
type={dragging ? "kinematicPosition" : "dynamic"}
enabledRotations={[false, false, false]}
enabledTranslations={[true, true, false]}
linearDamping={10}
angularDamping={1}
friction={0.1}
position={[
Math.abs(100 - index) + (Math.random() - 0.5),
Math.abs(100 - index) + (Math.random() - 0.5),
0
]}
colliders={false}
gravityScale={(Math.abs(radius - index) / 80)}
>
<BallCollider args={[radius + 10]} />
<Float speed={250}>
<mesh
>
<circleGeometry args={[radius, 64]} />
<meshBasicMaterial {...props} />
{text && <Text font="Inter-Regular.woff" letterSpacing={-0.05} position={[0, 0, 0.01]} fontSize={0.425} material-toneMapped={false}>{text}</Text>}
</mesh>
</Float>
</RigidBody>
)
}