built out a simple framework for building 3d objects

an orbital camera and some basic shapes are used to build the 3d bin shell and the flat inventory when using manual or lidar are built

src/3dModels/Shapes/3D/Circle.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface CircleGeometry{
+    radius: number
+    radialSegments?: number
+    thetaStart?: number
+    thetaLength?: number
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: CircleGeometry;
+}
+
+export default function Circle(props: Props) {
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.CircleGeometry(
+            geometry.radius,
+            geometry.radialSegments ?? 24,
+            geometry.thetaStart ?? 0,
+            geometry.thetaLength ?? Math.PI * 2
+        );
+    }, [
+        geometry.radius,
+        geometry.radialSegments,
+        geometry.thetaStart,
+        geometry.thetaLength
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}

src/3dModels/Shapes/3D/Cone.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface ConeGeometry {
+    radius: number;
+    height: number;
+    radialSegments?: number;
+    heightSegments?: number;
+    openEnded?: boolean;
+    thetaStart?: number;
+    thetaLength?: number;
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: ConeGeometry;
+}
+
+export default function Cone(props: Props) {
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.ConeGeometry(
+            geometry.radius,
+            geometry.height,
+            geometry.radialSegments ?? 24,
+            geometry.heightSegments ?? 1,
+            geometry.openEnded ?? false,
+            geometry.thetaStart ?? 0,
+            geometry.thetaLength ?? Math.PI * 2
+        );
+    }, [
+        geometry.radius,
+        geometry.height,
+        geometry.radialSegments,
+        geometry.heightSegments,
+        geometry.openEnded,
+        geometry.thetaStart,
+        geometry.thetaLength
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}

src/3dModels/Shapes/3D/Cube.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface CubeGeometry {
+    height: number;
+    width: number;
+    depth: number;
+    widthSegments?: number;
+    heightSegments?: number;
+    depthSegments?: number;
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: CubeGeometry;
+}
+
+export default function Cube(props: Props) {
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.BoxGeometry(
+            geometry.height,
+            geometry.width,
+            geometry.depth,
+            geometry.widthSegments ?? 2,
+            geometry.heightSegments ?? 2,
+            geometry.depthSegments ?? 2
+        );
+    }, [
+        geometry.height,
+        geometry.width,
+        geometry.depth,
+        geometry.widthSegments,
+        geometry.heightSegments,
+        geometry.depthSegments
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}

src/3dModels/Shapes/3D/Cylinder.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface CylinderGeometry {
+    radiusTop: number;
+    radiusBottom: number;
+    height: number;
+    radialSegments?: number;
+    heightSegments?: number;
+    openEnded?: boolean;
+    thetaStart?: number;
+    thetaLength?: number;
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: CylinderGeometry;
+}
+
+export default function Cylinder(props: Props) {
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.CylinderGeometry(
+            geometry.radiusTop,
+            geometry.radiusBottom,
+            geometry.height,
+            geometry.radialSegments ?? 24,
+            geometry.heightSegments ?? 1,
+            geometry.openEnded ?? false,
+            geometry.thetaStart ?? 0,
+            geometry.thetaLength ?? Math.PI * 2
+        );
+    }, [
+        geometry.radiusTop,
+        geometry.radiusBottom,
+        geometry.height,
+        geometry.radialSegments,
+        geometry.heightSegments,
+        geometry.openEnded,
+        geometry.thetaStart,
+        geometry.thetaLength
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}