edited

main.js

@@ -1,4 +1,11 @@
 import maplibregl from "maplibre-gl";
+import proj4 from "proj4";
+import * as THREE from "three";
+console.log(THREE);
+proj4.defs(
+  "EPSG:25832",
+  "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs"
+);
 
 
 const center = [9.209116842757239, 52.26520546238239]
@@ -28,7 +35,6 @@ viewer.setPointBudget(3*1000*1000);
 viewer.setMinNodeSize(0);
 viewer.setBackground("none"); 
 
-//viewer.setControls(null);
 
 //Dateipfade der Punktwolken
 const pointCloudFiles={
@@ -37,6 +43,8 @@ const pointCloudFiles={
   second: 'standpunkt2/metadata.json',
   third: 'punktwolke_3_converted/metadata.json',
 }
+
+
 //Aktuelle Datei und Sichtbarkeit
 let currentPointCloud=null;
 let isVisible=true;
@@ -70,59 +78,99 @@ function loadPointCloud(path){
   });
 }
 
-// Geo-Koordinaten der Punktwolke (müssen zu euren Daten passen!)
-// Das ist der Georeferenzpunkt – idealerweise aus den Metadaten der Punktwolke
-const CLOUD_GEO_ORIGIN = {
-    lng: 9.209116842757239,
-    lat: 52.26520546238239
-};
-
-// Hilfsfunktion: MapLibre Mercator → Meter-Offset relativ zum Ursprung
-function lngLatToMeters(lng, lat, originLng, originLat) {
-    const R = 6378137; // Erdradius in Metern (WGS84)
-    const dLng = (lng - originLng) * Math.PI / 180;
-    const dLat = (lat - originLat) * Math.PI / 180;
-    const dx = R * dLng * Math.cos(originLat * Math.PI / 180);
-    const dy = R * dLat;
-    return { x: dx, y: dy };
-}
 
 function syncCamera() {
+
     if (!currentPointCloud) return;
 
-    const mapCenter = map.getCenter();
-    const zoom      = map.getZoom();
-    const pitch     = map.getPitch();   // Grad, 0 = top-down
-    const bearing   = map.getBearing(); // Grad
+    const center = map.getCenter();
 
-    const box = currentPointCloud.boundingBox;
-    const cx = (box.min.x + box.max.x) / 2;
-    const cy = (box.min.y + box.max.y) / 2;
-    const cz = (box.min.z + box.max.z) / 2;
+    // -----------------------------------------
+    // WGS84 -> ETRS89 / UTM32
+    // -----------------------------------------
 
-    // Radius aus Zoom ableiten (Abstand Kamera → Target)
-    const earthCircumference = 2 * Math.PI * 6378137;
-    const canvas = map.getCanvas();
-    const metersPerPixel = (earthCircumference * Math.cos(mapCenter.lat * Math.PI / 180))
-                           / (Math.pow(2, zoom) * 512);
-    const radius = Math.pow(2,20 -zoom)*2;
+    const [x, y] = proj4(
+        "EPSG:4326",
+        "EPSG:25832",
+        [center.lng, center.lat]
+    );
 
-    // Potree View direkt setzen
-    const view = viewer.scene.view;
+    // -----------------------------------------
+    // Map Parameter
+    // -----------------------------------------
 
-    // Target = Wolken-Zentrum (lookAt mit 3 Argumenten nutzt new Vector3(...arguments))
-    view.lookAt(cx, cy, cz);
+    const pitch = map.getPitch() * Math.PI / 180;
+    const bearing = map.getBearing() * Math.PI / 180;
+    const zoom = map.getZoom();
 
-    // yaw = Himmelsrichtung: MapLibre bearing 0° = Nord, Potree yaw 0° = ??
-    // bearing in Potree-yaw umrechnen (ggf. Vorzeichen anpassen)
-    view.yaw   = -bearing * Math.PI / 180;
+    // -----------------------------------------
+    // Abstand abhängig vom Zoom
+    // -----------------------------------------
 
-    // pitch: MapLibre 0° = top-down, 60° = schräg
-    // Potree pitch: 0 = horizontal, -PI/2 = top-down → invertieren
-    view.pitch = -(90 - pitch) * Math.PI / 180;
+    const earthCircumference = 40075016.686;
 
-    // Radius = Zoom-abhängiger Abstand
-    view.radius = radius;
+    const metersPerPixel =
+        earthCircumference *
+        Math.cos(center.lat * Math.PI / 180) /
+        Math.pow(2, zoom + 8);
+
+    const distance =
+        metersPerPixel * map.getCanvas().height;
+
+    // -----------------------------------------
+    // Zielpunkt = Kartenzentrum
+    // -----------------------------------------
+
+    const target = new THREE.Vector3(
+        x,
+        y,
+        0
+    );
+
+    // -----------------------------------------
+    // Kameraoffset
+    // -----------------------------------------
+
+    const offset = new THREE.Vector3(
+        0,
+        -distance * Math.cos(pitch),
+        distance * Math.sin(pitch)
+    );
+
+    // Bearing rotieren
+    offset.applyAxisAngle(
+        new THREE.Vector3(0, 0, 1),
+        -bearing
+    );
+
+    // -----------------------------------------
+    // Kameraposition
+    // -----------------------------------------
+
+    const cameraPosition =
+        target.clone().add(offset);
+
+    // -----------------------------------------
+    // Potree Kamera setzen
+    // -----------------------------------------
+
+    const camera =
+        viewer.scene.getActiveCamera();
+
+    camera.position.copy(cameraPosition);
+
+    camera.lookAt(target);
+
+    viewer.scene.view.position.copy(cameraPosition);
+
+    viewer.scene.view.lookAt(target);
+
+    camera.updateMatrixWorld();
+
+    viewer.renderer.render(
+        viewer.scene.scene,
+        camera
+    );
 }
 
   map.on('move', ()=>{