sync angepasst

main.js

@@ -1,7 +1,6 @@
 import maplibregl from "maplibre-gl";
 
 
-
 const center = [9.209116842757239, 52.26520546238239]
 
 const map = new maplibregl.Map({
@@ -29,6 +28,8 @@ viewer.setPointBudget(3*1000*1000);
 viewer.setMinNodeSize(0);
 viewer.setBackground("none"); 
 
+//viewer.setControls(null);
+
 //Dateipfade der Punktwolken
 const pointCloudFiles={
   //Namen sind gerade nur Platzhalter. Richtige namen müssen rein
@@ -53,34 +54,81 @@ function loadPointCloud(path){
     currentPointCloud=e.pointcloud;
     viewer.scene.addPointCloud(currentPointCloud);
 
+   // View-Objekt inspizieren
+    console.log("view:", viewer.scene.view);
+    console.log("view.lookAt:", viewer.scene.view.lookAt);
+    console.log("view.position:", viewer.scene.view.position);
+    console.log("view keys:", Object.keys(viewer.scene.view));
+    
+
     let material =currentPointCloud.material;
     material.size =1;
     material.pointSizeType=Potree.PointSizeType.ADAPTIVE;
     
     viewer.fitToScreen();
+    syncCamera();
   });
 }
 
-function syncCamera(){
-  const zoom =map.getZoom();
-  const pitch=map.getPitch();
-  const bearing=map.getBearing();
+// 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
+};
 
-  const distance=Math.pow(2,20-zoom)*0.5;
-
-
-  const pitchRad=pitch *(Math.PI/180);
-  const bearingRad=bearing*(Math.PI/180);
-
-  const camX=distance*Math.sin(bearingRad) *Math.cos(pitchRad);
-  const camY=-distance*Math.cos(bearingRad) *Math.cos(pitchRad);
-  const camZ=distance*Math.sin(pitchRad)  + 50;
-
-  viewer.scene.view.position.set(camX, camY, camZ);
-  viewer.scene.view.lookAt(0,0,0);
+// 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 };
 }
 
-  map.on('move', syncCamera);
+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 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;
+
+    // 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 = metersPerPixel * canvas.height;
+
+    // Potree View direkt setzen
+    const view = viewer.scene.view;
+
+    // Target = Wolken-Zentrum (lookAt mit 3 Argumenten nutzt new Vector3(...arguments))
+    view.lookAt(cx, cy, cz);
+
+    // yaw = Himmelsrichtung: MapLibre bearing 0° = Nord, Potree yaw 0° = ??
+    // bearing in Potree-yaw umrechnen (ggf. Vorzeichen anpassen)
+    view.yaw   = -bearing * Math.PI / 180;
+
+    // pitch: MapLibre 0° = top-down, 60° = schräg
+    // Potree pitch: 0 = horizontal, -PI/2 = top-down → invertieren
+    view.pitch = -(90 - pitch) * Math.PI / 180;
+
+    // Radius = Zoom-abhängiger Abstand
+    view.radius = radius;
+}
+
+  map.on('move', ()=>{
+    console.log(viewer.scene.view)
+    syncCamera();
+  });
   map.on('zoom', syncCamera);
   map.on('pitch', syncCamera);
   map.on('rotate', syncCamera);