feat(#10): ✨ coordinates possible to see on scene

TDT4290-group-4 · Sep 22, 2025 · 7372c13 · 7372c13
1 parent 7ee1333
commit 7372c13
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
       type="text/css"
       href="/libs/jstree/themes/mixed/style.css"
     />
+    <link rel="stylesheet" type="text/css" href="src/style.css" />
   </head>
 
   <body>
@@ -39,6 +40,7 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
 
     <div
       class="potree_container"
@@ -49,7 +51,9 @@
         style="
           background-image: url('/build/potree/resources/images/background.jpg');
         "
-      ></div>
+      >
+        <canvas id="camera-pos" width="400" height="60"></canvas>
+      </div>
       <div id="potree_sidebar_container"></div>
     </div>
 
@@ -88,5 +92,6 @@
         viewer.fitToScreen()
       })
     </script>
+    <script type="module" src="src/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1 +1,17 @@
-/* Empty for now, add logic later */
+// EPSG:32633 (WGS84 / UTM zone 33N) → WGS84 (lon/lat)
+const utm33 = "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"; //UTM zone 33N
+const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; //Current standard for GPS coordinates
+
+const posCanvas = document.getElementById('camera-pos');
+const context = posCanvas.getContext('2d'); 
+
+function updateCameraOverlay() {
+    const cam = window.viewer.scene.view.position;
+    const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library
+
+    context.clearRect(0, 0, posCanvas.width, posCanvas.height);
+    context.fillStyle = 'white';
+    context.font = '20px Times New Roman';
+    context.fillText(`lat=${lat.toFixed(2)}˚ lon=${lon.toFixed(2)}˚`, 10, 40);
+}
+viewer.addEventListener("update", updateCameraOverlay);
diff --git a/src/style.css b/src/style.css
@@ -1 +1,10 @@
-/* Empty for now, add styles later */
+
+#camera-pos {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  width: 300px;
+  height: 60px;
+  pointer-events: none; 
+  z-index: 10;
+}