40 lines
No EOL
1.1 KiB
TypeScript
40 lines
No EOL
1.1 KiB
TypeScript
import { useMemo } from "react";
|
|
import * as THREE from "three";
|
|
import BaseMesh, { BaseMeshProps } from "../BaseMesh";
|
|
|
|
export interface RingGeometry{
|
|
// the radius of the ring from the center to the ouside edge, must be larger than thickness
|
|
radius: number
|
|
// the thickness of the tube, must be smaller than radius
|
|
thickness: number
|
|
radialSegments?: number
|
|
tubularSegments?: number
|
|
// central angle in radians
|
|
arc?: number
|
|
}
|
|
|
|
interface Props extends Omit<BaseMeshProps, "geometry"> {
|
|
geometry: RingGeometry;
|
|
}
|
|
|
|
export default function Ring(props: Props) {
|
|
const { geometry } = props;
|
|
|
|
const geo = useMemo(() => {
|
|
return new THREE.TorusGeometry(
|
|
geometry.radius,
|
|
geometry.thickness,
|
|
geometry.radialSegments ?? 12,
|
|
geometry.tubularSegments ?? 48,
|
|
geometry.arc ?? Math.PI * 2
|
|
);
|
|
}, [
|
|
geometry.radius,
|
|
geometry.thickness,
|
|
geometry.radialSegments,
|
|
geometry.tubularSegments,
|
|
geometry.arc
|
|
]);
|
|
|
|
return <BaseMesh {...props} geometry={geo} />;
|
|
} |