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

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} />;
}