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/pages/Bin.tsx

@@ -21,6 +21,7 @@ import {
   AccordionSummary,
   AccordionDetails,
   Typography,
+  TextField,
 } from "@mui/material";
 import BinActions from "bin/BinActions";
 import BinHistory from "bin/BinHistory";
@@ -65,6 +66,7 @@ import ButtonGroup from "common/ButtonGroup";
 import BinTransactions from "bin/BinTransactions";
 import { CO2 } from "models/CO2";
 import ObjectInteractions from "objects/objectInteractions/ObjectInteractions";
+import Bin3dView from "bin/3dView/Bin3dView";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -773,6 +775,8 @@ export default function Bin(props: Props) {
     );
   };
 
+  const [fillPercent, setFillPercent] = useState(0)
+
   const desktopView = () => {
     return (
       <Card sx={{ padding: 1 }}>
@@ -802,6 +806,17 @@ export default function Bin(props: Props) {
             </Box>
             {overview()}
             {preferences && binComponents(preferences)}
+            <Card>
+              <Box height={1000}>
+                <TextField 
+                  type="number"
+                  onChange={e => {
+                    setFillPercent(+e.target.value)
+                  }}
+                />
+                <Bin3dView bin={bin} scale={100} fillPercent={fillPercent/100}/>
+              </Box>
+            </Card>
           </Grid>
           <Grid id="tour-conditions" size={{ xs: 12, sm: 12, md: 12, lg: 2.6 }}>
             {(bin.settings.mode === pond.BinMode.BIN_MODE_DRYING ||