From 7e7c61d5c23a7dfb897d5806bc0fad68001291e2 Mon Sep 17 00:00:00 2001
From: Tim Winters <twinters@aquidneckislandrobotics.org>
Date: Tue, 15 Sep 2026 15:17:51 -0400
Subject: [PATCH] Add 3d model viewer to stage 2

---
 src/components/Model3D.astro                  | 44 +++++++++++++++++++
 .../learning-course/stage2/stage-overview.mdx |  6 +++
 2 files changed, 50 insertions(+)
 create mode 100644 src/components/Model3D.astro

diff --git a/src/components/Model3D.astro b/src/components/Model3D.astro
new file mode 100644
index 00000000..69920881
--- /dev/null
+++ b/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>
diff --git a/src/content/docs/learning-course/stage2/stage-overview.mdx b/src/content/docs/learning-course/stage2/stage-overview.mdx
index 9afa754f..a1712b9c 100644
--- a/src/content/docs/learning-course/stage2/stage-overview.mdx
+++ b/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.