There is a 3d scene on which objects are flying and I need to prevent them from flying far off the screen, are there any good practices for this?
I was trying to make walls out of boxGeometry to keep objects from flying out and stretch them across the viewport
Are there any other good practices for dealing with this problem?
You could try and use CuboidColliders. 6X of these and you would have containment.
import { CuboidCollider } from "@react-three/rapier";
export function Wall({
height,
width,
depth,
x,
y,
z,
}: {
height: number;
width: number;
depth: number;
x: number;
y: number;
z: number;
}) {
return <CuboidCollider args={[width, height, depth]} position={[x, y, z]} />;
}
import { RigidBody } from "@react-three/rapier";
import { useThree } from "@react-three/fiber";
import { Wall } from "./Wall";
export function Box() {
const { viewport } = useThree(); //viewport bounds
const wallHeight = 25; // depth
return (
<RigidBody type="fixed">
{/* FRONT */}
<Wall
width={viewport.width / 2}
height={wallHeight / 2}
depth={1}
x={0}
y={wallHeight / 2}
z={viewport.height / 2}
/>
{/* BACK */}
<Wall
width={viewport.width / 2}
height={wallHeight / 2}
depth={1}
x={0}
y={wallHeight / 2}
z={-viewport.height / 2}
/>
{/* RIGHT */}
<Wall
width={1}
height={wallHeight / 2}
depth={viewport.height / 2}
x={viewport.width / 2}
y={wallHeight / 2}
z={0}
/>
{/* LEFT */}
<Wall
width={1}
height={wallHeight / 2}
depth={viewport.height / 2}
x={-viewport.width / 2}
y={wallHeight / 2}
z={0}
/>
{/* BOTTOM */}
<Wall
width={viewport.width / 2}
height={0.5}
depth={viewport.height / 2}
x={0}
y={-1}
z={0}
/>
{/* TOP */}
<Wall
width={viewport.width / 2}
height={0.5}
depth={viewport.height / 2}
x={0}
y={wallHeight}
z={0}
/>
</RigidBody>
);
}