Skip to content

Instantly share code, notes, and snippets.

@mtsmfm
Last active August 20, 2023 16:23
Show Gist options
  • Save mtsmfm/6b7294e3692edd7c0312e2c93d088558 to your computer and use it in GitHub Desktop.
Save mtsmfm/6b7294e3692edd7c0312e2c93d088558 to your computer and use it in GitHub Desktop.
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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment