Fun little camera pose viewer

[Juniormunk]

Description

Still very much a draft.

Meta

Merge checklist:

• Pull Request title is short, imperative summary of proposed changes
• The description documents the what and why
• If this PR changes behavior or adds a feature, user documentation is updated
• If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly
• If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1
• If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated
• If this PR addresses a bug, a regression test for it is added

[mcm001]

This will not work offline. We should figure out how to make this work offline lol

[mcm001]

should we allow users to rotate the camera view around the robot? I briefly tried to get OrbitControls working, but orbit controls seemed to behave weirdly. They seemed to assume Y was up?

diff --git a/docs/source/docs/quick-start/camera-calibration.md b/docs/source/docs/quick-start/camera-calibration.md
index d795d8ed..e69d8b1c 100644
--- a/docs/source/docs/quick-start/camera-calibration.md
+++ b/docs/source/docs/quick-start/camera-calibration.md
@@ -55,8 +55,16 @@ Below is an interactive demo to visualize multiple cameras' positions and orient
 </table>
 <button id="add-camera" style="margin-top: 10px;">Add Camera</button>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
-<script>
+<script type="module">
+  // import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152/build/three.module.js';
+  // import { OrbitControls } from 'https://unpkg.com/three@0.152.0/examples/jsm/controls/OrbitControls.js?module';
+
+  import * as THREE from "https://unpkg.com/three@0.152.0/build/three.module.js";
+  import { OrbitControls } from "https://unpkg.com/three@0.152.0/examples/jsm/controls/OrbitControls.js?module";
+
+
+  // const THREE = three;
+
   const scene = new THREE.Scene();
   const aspect = 800 / 400; // Aspect ratio based on the renderer size
   const orthoSize = 1.5; // Size of the orthographic view
@@ -310,6 +318,9 @@ Below is an interactive demo to visualize multiple cameras' positions and orient
     camera.lookAt(0, 0, 0); // Look at the origin
   }
 
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.update();
+
   setCameraView('isometric');
 
   // Draw the fixed bumpers once
@@ -317,6 +328,7 @@ Below is an interactive demo to visualize multiple cameras' positions and orient
 
   function animate() {
     requestAnimationFrame(animate);
+    controls.update();
     renderer.render(scene, camera);
   }
   animate();

[Juniormunk]

I couldn't get it to work at all 💀let me try some more.