some more stuff

frontend/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@react-three/drei": "^9.107.0",
+    "@react-three/drei": "^9.109.2",
+    "@react-three/fiber": "^8.16.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -34,6 +35,7 @@
     "react-spring": "^9.7.3",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.4.0",
+    "three": "^0.167.1",
     "urdf-loader": "^0.12.1",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",

frontend/src/components/listing/ListingSTLs.tsx

@@ -1,10 +1,33 @@
+import { Canvas, useLoader } from "@react-three/fiber";
 import ListingFileUpload from "components/listing/ListingFileUpload";
 import { Button } from "components/ui/Button/Button";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
 import { useState } from "react";
 import { FaCaretSquareDown, FaCaretSquareUp, FaTimes } from "react-icons/fa";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
+
+const Model = ({ url }: { url: string }) => {
+  const stl = useLoader(STLLoader, url);
+  return <primitive object={stl} />;
+};
+
+interface SingleStlViewerProps {
+  url: string;
+}
+
+const SingleStlViewer = (props: SingleStlViewerProps) => {
+  const { url } = props;
+
+  return (
+    <Canvas onError={(error) => console.log(error)}>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Model url={url} />
+    </Canvas>
+  );
+};
 
 interface Props {
   listingId: string;
@@ -67,11 +90,12 @@ const ListingSTLs = (props: Props) => {
                   key={stl.artifact_id}
                   className="bg-background rounded-lg p-2 relative"
                 >
-                  <img
+                  {/* <img
                     src={stl.url}
                     alt={stl.name}
                     className="rounded-lg w-full aspect-square"
-                  />
+                  /> */}
+                  <SingleStlViewer url={stl.url} />
                   {edit && (
                     <Button
                       onClick={() => onDelete(stl.artifact_id)}