Create Collisions along viewport edges

[MrUltimate]

Hello,

Is there a programmatic way in which I can create collisions along the 4 edges of the viewport (aka browser window)?

I'm currently having to estimated values which isn't quite responsive:

function Collisions() {
  const viewport = useThree((state) => state.viewport);
  // Floor Plane //
  usePlane(() => ({ position: [0, 0, 0], rotation: [0, 0, 0] }));
  // Ceiling Plane //
  usePlane(() => ({
    position: !isMobileOnly ? [0, 0, 4] : [0, 0, 5],
    rotation: [0, -Math.PI, 0],
  }));
  // Bottom Plane //
  usePlane(() => ({
    position: !isMobileOnly ? [0, -3, 0] : [0, -5, 0],
    rotation: [-Math.PI / 2, 0, 0],
  }));
  // Top Plane //
  usePlane(() => ({
    position: !isMobileOnly ? [0, 6, 0] : [0, 4.8, 0],
    rotation: [Math.PI / 2, 0, 0],
  }));
  // Left Plane //
  usePlane(() => ({
    position: !isMobileOnly ? [-10, 0, 0] : [-2.5, 0, 0],
    rotation: [0, Math.PI / 2, 0],
  }));
  // Right Plane //
  usePlane(() => ({
    position: !isMobileOnly ? [10, 0, 0] : [2.5, 0, 0],
    rotation: [0, -Math.PI / 2, 0],
  }));
  const [, api] = useSphere(() => ({ type: "Kinematic", args: [2] }));
  return useFrame((state) =>
    api.position.set(
      (state.mouse.x * viewport.width) / 2,
      (state.mouse.y * viewport.height) / 2,
      1.2
    )
  );
}

[isaac-mason]

Hey MrUltimate!

I already shared this with you on the discord, but for others coming across this question, you can achieve this with the viewport returned from useThree:

e.g.

function Plane({ color, ...props }) {
  usePlane(() => ({ ...props }))
  return null
}

function Borders() {
  const { viewport } = useThree()
  return (
    <>
      <Plane position={[0, -viewport.height / 2, 0]} rotation={[-Math.PI / 2, 0, 0]} />
      <Plane position={[-viewport.width / 2 - 1, 0, 0]} rotation={[0, Math.PI / 2, 0]} />
      <Plane position={[viewport.width / 2 + 1, 0, 0]} rotation={[0, -Math.PI / 2, 0]} />
      <Plane position={[0, 0, -1]} rotation={[0, 0, 0]} />
      <Plane position={[0, 0, 12]} rotation={[0, -Math.PI, 0]} />
    </>
  )
}

Check out this codesandbox for an example: https://codesandbox.io/s/ballpit-mvkqs