pitch gefixt

main.js

@@ -1,5 +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]
@@ -29,6 +35,7 @@ viewer.setPointBudget(3*1000*1000);
 viewer.setMinNodeSize(0);
 viewer.setBackground("none"); 
 
+
 //Dateipfade der Punktwolken
 const pointCloudFiles={
   //Namen sind gerade nur Platzhalter. Richtige namen müssen rein
@@ -36,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;
@@ -53,33 +62,89 @@ 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();
 
-  const distance=Math.pow(2,20-zoom)*0.5;
+function syncCamera() {
 
+    if (!currentPointCloud) return;
 
-  const pitchRad=pitch *(Math.PI/180);
+    const center = map.getCenter();
-  const bearingRad=bearing*(Math.PI/180);
 
-  const camX=distance*Math.sin(bearingRad) *Math.cos(pitchRad);
+    // -----------------------------------------
-  const camY=-distance*Math.cos(bearingRad) *Math.cos(pitchRad);
+    // WGS84 -> ETRS89 / UTM32
-  const camZ=distance*Math.sin(pitchRad)  + 50;
+    // -----------------------------------------
 
-  viewer.scene.view.position.set(camX, camY, camZ);
+    const [x, y] = proj4(
-  viewer.scene.view.lookAt(0,0,0);
+        "EPSG:4326",
+        "EPSG:25832",
+        [center.lng, center.lat]
+    );
+
+    // -----------------------------------------
+    // Map Parameter
+    // -----------------------------------------
+
+    const pitch = map.getPitch() * Math.PI / 180;
+    const bearing = map.getBearing() * Math.PI / 180;
+    const zoom = map.getZoom();
+
+    // -----------------------------------------
+    // Abstand abhängig vom Zoom
+    // -----------------------------------------
+    const earthCircumference = 40075016.686;
+    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.sin(pitch), distance * Math.cos(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
+    );
 }
 
+// Kameras bei jeder Kartenbewegung synchronisieren
   map.on('move', syncCamera);
   map.on('zoom', syncCamera);
   map.on('pitch', syncCamera);

package-lock.json

@@ -13,6 +13,8 @@
         "@loaders.gl/las": "^4.4.1",
         "deck.gl": "^9.3.1",
         "maplibre-gl": "^5.22.0",
+        "proj4": "^2.20.8",
+        "three": "^0.124.0",
         "vite": "^8.0.7"
       }
     },
@@ -1380,9 +1382,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1399,9 +1398,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1418,9 +1414,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1437,9 +1430,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1456,9 +1446,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1475,9 +1462,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4069,9 +4053,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4092,9 +4073,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4115,9 +4093,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4138,9 +4113,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4335,6 +4307,12 @@
         "is-buffer": "~1.1.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
+      "license": "MIT"
+    },
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
@@ -4582,6 +4560,19 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
+    "node_modules/proj4": {
+      "version": "2.20.8",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.20.8.tgz",
+      "integrity": "sha512-1C8sfT4xY4PAPwk0MroFBTGF4R4bzDXdmPQTGYVLsoNssrZ9odzObxS2dTeGBty8jW8KO7h16C1Hs2JP+ctfFw==",
+      "license": "MIT",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.5.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ahocevar"
+      }
+    },
     "node_modules/protocol-buffers-schema": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
@@ -4924,6 +4915,12 @@
         "texture-compressor": "bin/texture-compressor.js"
       }
     },
+    "node_modules/three": {
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
+      "integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg==",
+      "license": "MIT"
+    },
     "node_modules/timezone-groups": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/timezone-groups/-/timezone-groups-0.10.4.tgz",
@@ -5110,6 +5107,15 @@
         }
       }
     },
+    "node_modules/wkt-parser": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.5.5.tgz",
+      "integrity": "sha512-/zMYi94/7D7fxcOSlVmWn6vnOMj3Gq5d1xvVjaYOS9n6h0qOJ4I7YYVxBWYcH1vq9+suhqzXkn05Yx47zQNUIA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ahocevar"
+      }
+    },
     "node_modules/wordwrapjs": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.1.tgz",

package.json

@@ -16,6 +16,8 @@
     "@loaders.gl/las": "^4.4.1",
     "deck.gl": "^9.3.1",
     "maplibre-gl": "^5.22.0",
+    "proj4": "^2.20.8",
+    "three": "^0.124.0",
     "vite": "^8.0.7"
   }
 }