CurvedPlane.tsx

import React, { useMemo } from "react";
import { CylinderGeometry } from "three";

export const CurvedPlane = ({
  width,
  height,
  radius,
  children,
}: {
  width: number;
  height: number;
  radius: number;
  children?: React.ReactNode;
}) => {
  const { geometry, z } = useMemo(() => {
    const theta = Math.asin(width / (2 * radius));
    const thetaStart = Math.PI * 2 - theta;
    const thetaEnd = theta * 2;
    const z = radius * Math.cos(theta);
    const geometry = new CylinderGeometry(
      radius,
      radius,
      height,
      32,
      1,
      true,
      thetaStart,
      thetaEnd
    );
    geometry.scale(1, 1, -1);

    return { geometry, z };
  }, [width, height, radius]);

  return (
    <mesh position={[0, 0, z]} geometry={geometry}>
      {children}
    </mesh>
  );
};