Add 3d model viewer to stage 2

src/components/Model3D.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * Model3D component - Show a 3D model that the user can rotate and zoom.
+ *
+ * The model file must be glTF (.glb or .gltf) and must be in `public/`.
+ *
+ * Usage:
+ * <Model3D src="/learning-course/stage2/midtide.glb" alt="MIDTIDE robot" />
+ */
+
+interface Props {
+    src: string;
+    alt: string;
+}
+
+const { src, alt } = Astro.props;
+---
+
+<model-viewer
+    src={src}
+    alt={alt}
+    camera-controls
+    touch-action="pan-y"
+    auto-rotate
+    rotation-per-second="20deg"
+    shadow-intensity="1"></model-viewer>
+
+<script
+    is:inline
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@google/model-viewer@4.3.1/dist/model-viewer.min.js"
+></script>
+
+<style>
+    model-viewer {
+        display: block;
+        margin: 1.5rem auto;
+        width: 100%;
+        max-width: 800px;
+        height: 400px;
+        border-radius: 0.25rem;
+        background: var(--sl-color-gray-6);
+    }
+</style>

src/content/docs/learning-course/stage2/stage-overview.mdx

@@ -4,6 +4,8 @@ description: An overview of Stage 2
 prev: learning-course/stage1/stage1c/stage-overview
 ---
 
+import Model3D from '@components/Model3D.astro';
+
 <Aside type="wip">Stage 2 is still in development!</Aside>
 
 Welcome to Stage 2!
@@ -20,6 +22,10 @@ Stage 2's project is programming a real FRC robot, team 4322 Clockwork's 2025 of
     src="/learning-course/stage2/midtide.webp"
 />
 
+<Model3D src="/learning-course/stage2/midtide.glb" alt="3D model of MIDTIDE" />
+
+You can also open the full [CAD in Onshape](https://cad.onshape.com/documents/4b238079b385fb0528ebcdb6/w/ff2d302f41952347dae14750/e/8152bb38da29eed9249acd33).
+
 By the end of Stage 2, you'll have programmed MIDTIDE to have full coral intaking and scoring capabilities
 
 Stage 2 consists of a number of substages, which break the task of programming an entire robot into smaller, much more reasonable chunks that advance in complexity and build on each other.