97 display 3d model of satellite on website (#452)

* feat: rendering 3D model of satellite on website

* clean: unused code cleaned up

* clean: clean up

* fix: trying to fix dependancies

backend/src/api/satellite/content-types/satellite/schema.json

@@ -29,7 +29,8 @@
       "multiple": false,
       "required": false,
       "allowedTypes": [
-        "images"
+        "images",
+        "files"
       ]
     },
     "projects": {

frontend/package.json

@@ -26,6 +26,8 @@
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
+        "@react-three/drei": "^9.56.14",
+        "@react-three/fiber": "^8.15.13",
         "@strapi/blocks-react-renderer": "^1.0.0",
         "@turf/boolean-point-in-polygon": "^6.5.0",
         "@turf/helpers": "^6.5.0",
@@ -69,7 +71,7 @@
         "shadcn-ui": "^0.8.0",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
-        "three": "^0.161.0",
+        "three": "^0.150.1",
         "topojson-client": "^3.1.0",
         "vaul": "^0.9.0",
         "zustand": "^4.5.2"

frontend/src/app/_homeComponents/SatDropdown.tsx

@@ -162,6 +162,7 @@ export default function SatDropdown() {
                                 handleSelect(Number(num) as SatelliteNumber)
                             }
                             role="option"
+                            aria-selected={satNum === selectedSatellite}
                         >
                             {satNumToEntry[satNum].name}
                         </div>

frontend/src/app/satellites/[satelliteSlug]/orbitDataGraph.tsx

@@ -203,8 +203,6 @@ const OrbitDataGraph: React.FC<OrbitDataProps> = ({
         return () => window.removeEventListener("resize", updateSize);
     }, [handleChartScroll, months]);
 
-    console.log("orbitalData", orbitalData);
-
     return (
         <>
             {orbitalData && (

frontend/src/app/satellites/[satelliteSlug]/page.tsx

@@ -14,6 +14,7 @@ import { SatelliteNumber } from "@/lib/store";
 import { graphql } from "@/lib/tada/graphql";
 import { getClient } from "@/lib/ApolloClient";
 import OrbitDataGraph from "./orbitDataGraph";
+import Render3DMod from "../render3DMod";
 
 export interface ProjectOrSatellite {
     id: string;
@@ -64,12 +65,12 @@ export default async function SatelliteInfoPage({
 
     // Get the satellite image
     let satelliteImage = satAttributes?.satelliteImage?.data?.attributes?.url;
+
     let imageURL = undefined;
     if (STRAPI_URL && satelliteImage) {
         imageURL = STRAPI_URL + satelliteImage;
     }
-
-    console.log("satAttributes", satAttributes);
+    const is3DModel = (satelliteImage ?? "").endsWith(".glb");
 
     return (
         <>
@@ -119,16 +120,21 @@ export default async function SatelliteInfoPage({
                         ) : null}
                     </div>
                     {/* Image container */}
+
                     <div className="w-full border-t-2 border-gray-600 xl:border-t-0">
                         <div className="flex h-full w-full items-center justify-center bg-black">
                             {imageURL ? (
-                                <Image
-                                    src={imageURL}
-                                    alt={satAttributes?.name ?? ""}
-                                    width={1600} // Set according to the aspect ratio of the image
-                                    height={0}
-                                    className="p-2"
-                                />
+                                is3DModel ? (
+                                    <Render3DMod url={imageURL} />
+                                ) : (
+                                    <Image
+                                        src={imageURL}
+                                        alt={satAttributes?.name ?? ""}
+                                        width={1600} // Set according to the aspect ratio of the image
+                                        height={0}
+                                        className="p-2"
+                                    />
+                                )
                             ) : null}
                         </div>
                     </div>

frontend/src/app/satellites/render3DMod.tsx

@@ -0,0 +1,24 @@
+"use client";
+import React, { Suspense } from "react";
+import { OrbitControls, useGLTF } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+
+function Model({ url }: { url: string }) {
+    const { scene } = useGLTF(url);
+
+    return <primitive object={scene} scale={0.002} />;
+}
+export default function Render3DMod({ url }: { url: string }) {
+    return (
+        <div className="flex h-[500px] w-full items-center justify-center bg-black">
+            <Canvas camera={{ position: [10, 10, 5] }}>
+                <ambientLight intensity={0.7} />
+                <directionalLight position={[10, 10, 10]} intensity={0.5} />
+                <Suspense fallback={null}>
+                    <Model url={url} />
+                </Suspense>
+                <OrbitControls />
+            </Canvas>
+        </div>
+    );
+}

frontend/src/components/satelliteData/SatellitePassOverLocation.tsx

@@ -156,6 +156,7 @@ export default function SatellitePassOverLocation() {
                         className="cursor-pointer p-2 text-white hover:bg-gray-700"
                         onClick={() => handleSelect(location)}
                         role="option"
+                        aria-selected={location === selectedLocation}
                     >
                         {location.name} ({location.latitude + "° N"},{" "}
                         {location.longitude + "° E"})