Potree eingebunden und Kamera Synchronisiert

main.js

@@ -1,9 +1,5 @@
 import maplibregl from "maplibre-gl";
-import {Deck} from '@deck.gl/core';
+
-import {PointCloudLayer} from '@deck.gl/layers';
-import {LASLoader} from '@loaders.gl/las';
-import {MapboxOverlay} from '@deck.gl/mapbox';
-import {COORDINATE_SYSTEM} from '@deck.gl/core';
 
 
 const center = [9.209116842757239, 52.26520546238239]
@@ -23,48 +19,69 @@ map.addControl(
     })
 );
 
+
+const elRenderArea=document.getElementById("potree_render_area");
+
+const viewer=new Potree.Viewer(elRenderArea, {noDragAndDrop:true});
+viewer.setEDLEnabled(true);
+viewer.setFOV(60);
+viewer.setPointBudget(3*1000*1000);
+viewer.setMinNodeSize(0);
+
 //Dateipfade der Punktwolken
 const pointCloudFiles={
-  first: 'punktwolke_1.laz',
+  //Namen sind gerade nur Platzhalter. Richtige namen müssen rein
-  second: 'punktwolke_2.laz',
+  first: 'punktwolke_1_converted/metadata.json',
-  third: 'punktwolke_3.laz'
+  second: 'punktwolke_2_converted/metadata.json',
+  third: 'punktwolke_3_converted/metadata.json',
 }
 //Aktuelle Datei und Sichtbarkeit
-let currentData=null;
+let currentPointCloud=null;
 let isVisible=true;
 
-const overlay= new MapboxOverlay({layers: []});
+function loadPointCloud(path){
-
+  if(currentPointCloud){
-function updateLayer(){
+    viewer.scene.removePointCloud(currentPointCloud);
-  if (!currentData || !isVisible){
+    currentPointCloud=null;
-    overlay.setProps({layers:[]});
-    return;
   }
-  const layer = new PointCloudLayer({
-  id: 'pointcloud-layer',
-  data: currentData,
-  loaders: [LASLoader],
 
-    // 1. Set the coordinate system to meter offsets
+  if(!path ||!isVisible) return;
-  coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
 
-  // 2. Set the anchor point [longitude, latitude, elevation]
+  Potree.loadPointCloud(path, "punktwolke", function(e) {
-  coordinateOrigin: [9.209116842757239, 52.26520546238239], 
+    currentPointCloud=e.pointcloud;
-  pointSize: 1,
+    viewer.scene.addPointCloud(currentPointCloud);
-  getColor: [255,255,255]
+
+    let material =currentPointCloud.material;
+    material.size =1;
+    material.pointSizeType=Potree.PointSizeType.ADAPTIVE;
   });
-
-overlay.setProps({layers: [layer]});
 }
 
+function syncCamera(){
+  const zoom =map.getZoom();
+  const pitch=map.getPitch();
+  const bearing=map.getBearing();
+
+  const distance=Math.pow(2,20-zoom)*0.5;
 
 
-map.on('style.load', ()=>{
+  const pitchRad=pitch *(Math.PI/180);
-  if (!map._controls.includes(overlay)) {
+  const bearingRad=bearing*(Math.PI/180);
-    map.addControl(overlay);
+
+  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);
 }
-  updateLayer();
+
-})
+  map.on('move', syncCamera);
+  map.on('zoom', syncCamera);
+  map.on('pitch', syncCamera);
+  map.on('rotate', syncCamera);
+
+
 
 
 // Hintergrundkarte ändern
@@ -192,16 +209,12 @@ function changeBaseMap(newMap){
 }
 
 
-// dargestellte Punktwolke verändern
-function changePointCloud(value){
-  currentData = pointCloudFiles[value];
-  updateLayer();
-}
-
 document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=>
 {
   isVisible=!event.target.checked;
-  updateLayer();
+  if (currentPointCloud){
+    currentPointCloud.visible=isVisible;
+  };
 })
 
 
@@ -215,7 +228,7 @@ selectElement.addEventListener('change', (event) => {
 
 // ausgewähltes Element im Punktwolken DropDown Feld
 document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
-  changePointCloud(event.target.value);
+  loadPointCloud(pointCloudFiles[event.target.value]);
 });