React three rapier scene limitation for objects

Question

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?

Answer 1

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>
  );
}