Punktwolken Dateien auf Server, Pfade geändert und Slider eingebunden

index.html

@@ -56,9 +56,9 @@
       <button id="disable">Punktwolke ausblenden</button>
       <p class="sideBarText">Qualität der Punktwolke</p>
       <div class="buttonRow">
-        <button class="qualityButtons">niedrig</button>
+        <button class="qualityButtons" id="low">niedrigste</button>
-        <button class="qualityButtons active">mittel</button>
+        <button class="qualityButtons active" id="medium">mittel</button>
-        <button class="qualityButtons">hoch</button>
+        <button class="qualityButtons" id="high">höchste</button>
       </div>
       <p class="sideBarText">Farbdarstellung</p>
       <div class="buttonRow">
@@ -66,9 +66,13 @@
         <button class="colorButtons">höhencodiert</button>
       </div>
       <p class="sideBarText" id="pointSliderValue"></p>
-      <input id="pointSlider" type="range" min="1000000" max="9000000" value="3000000">
+      <input id="pointSlider" type="range" min="500000" max="10000000" value="3000000">
-      <p class="sideBarText" id="pointSizeSliderValue"></p>
+      <p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
-      <input id="pointSizeSlider" type="range" min="0.1" max="5" value="1" step="0.1">
+      <div class="slider-labels">
+        <span>Klein</span>
+        <span>Groß</span>
+      </div>
+      <input id="pointSizeSlider" type="range" min="0" max="1000" value="0" step="1">
       <div class="logos">
         <a href="http://www.jade-hs.de">
           <img id="logoJadeHs" src="logoJadeHs.png" />

main.js

@@ -14,7 +14,8 @@ const map = new maplibregl.Map({
     container: 'map',
     style: "https://tiles.openfreemap.org/styles/bright",
     center: center,
-    zoom: 17
+    zoom: 17,
+    maxZoom: 24,
 });
 
 map.addControl(
@@ -37,14 +38,15 @@ map.on('mousemove', (e) => {
     coordinatesDiv.innerHTML = `Lon: ${lng}° | Lat: ${lat}°`;
 });
 
-
+var pointBudget = document.getElementById("pointSlider").value;
+var pointSize = document.getElementById("pointSizeSlider").value;
 const elRenderArea=document.getElementById("potree_render_area");
 
 const viewer=new Potree.Viewer(elRenderArea, {noDragAndDrop:true});
-viewer.setEDLEnabled(true);
+viewer.setEDLEnabled(false); // sieht realistischer aus
 viewer.setFOV(60);
-viewer.setPointBudget(3*1000*1000);
+viewer.setPointBudget(pointBudget);
-viewer.setMinNodeSize(0);
+viewer.setMinNodeSize(pointSize);
 viewer.setBackground("none"); 
 
 console.log(viewer.orbitControls);
@@ -56,14 +58,17 @@ viewer.fpControls.enabled=false;
 viewer.deviceControls.enabled=false;
 
 
-//Dateipfade der Punktwolken
+var quality = 'medium';
-const pointCloudFiles={
-  //Namen sind gerade nur Platzhalter. Richtige namen müssen rein
-  first: 'output/metadata.json',
-  second: 'standpunkt2/metadata.json',
-  third: 'punktwolke_3_converted/metadata.json',
-}
 
+// Dateipfade der Punktwolke
+// Funktion für aktuelle Pfade
+function getPointCloudFiles() {
+    return {
+      first: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp1_${quality}/metadata.json`,
+      second: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp2_${quality}/metadata.json`,
+      third: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp3_${quality}/metadata.json`,
+    };
+}
 
 //Aktuelle Datei und Sichtbarkeit
 let currentPointCloud=null;
@@ -71,9 +76,23 @@ let isVisible=true;
 
 function loadPointCloud(path){
   console.log("Laden aufgerufen")
-  if(currentPointCloud){
+  console.log("Pfad "+ path);
-    viewer.scene.removePointCloud(currentPointCloud);
+    // Vorherige Punktwolke entfernen
-    currentPointCloud=null;
+    if (currentPointCloud) {
+      // Aus Potree-Liste entfernen
+      const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
+
+      if (index !== -1) {
+        viewer.scene.pointclouds.splice(index, 1);
+      }
+
+      // Aus Three.js Szene entfernen
+      if (currentPointCloud.parent) {
+        currentPointCloud.parent.remove(currentPointCloud);
+      }
+
+      currentPointCloud = null;
+      viewer.render();
     }
 
   if(!path ||!isVisible) return;
@@ -191,7 +210,6 @@ function changeBaseMap(newMap){
         ],
         tileSize: 256,
         attribution: "© MapTiler",
-        maxzoom: 20
       }
     },
     layers: [
@@ -211,7 +229,6 @@ function changeBaseMap(newMap){
         type: 'raster',
         url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH',
         tileSize: 256,
-        maxzoom: 20
       },
             // Use a different source for terrain and hillshade layers, to improve render quality
             terrainSource: {
@@ -255,7 +272,6 @@ function changeBaseMap(newMap){
         ],
         tileSize: 256,
         attribution: "© MapTiler",
-        maxzoom: 20
       },
             // Use a different source for terrain and hillshade layers, to improve render quality
             terrainSource: {
@@ -319,8 +335,12 @@ selectElement.addEventListener('change', (event) => {
 
 
 // ausgewähltes Element im Punktwolken DropDown Feld
+
 document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
-  loadPointCloud(pointCloudFiles[event.target.value]);
+  const pointCloudFiles = getPointCloudFiles();
+  var pointcloud = pointCloudFiles[event.target.value];
+  loadPointCloud(pointcloud);
+  console.log(pointCloudFiles[event.target.value]);
 });
 
 
@@ -336,15 +356,18 @@ pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.v
 
 pointCountSlider.oninput = function() {
   pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');;
+  pointBudget = document.getElementById("pointSlider").value;
+  viewer.setPointBudget(pointBudget);
 }
 
 
+
 var pointSizeSlider = document.getElementById("pointSizeSlider");
-var pointSizeOutput = document.getElementById("pointSizeSliderValue");
-pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(pointSizeSlider.value).toLocaleString();
 
 pointSizeSlider.oninput = function() {
-  pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(this.value).toLocaleString('de-DE');;
+  pointSize = document.getElementById("pointSizeSlider").value;
+  viewer.setMinNodeSize(pointSize);
+  console.log(pointSize);
 }
 
 const closeButton = document.getElementById("closeSideBarButton");
@@ -375,7 +398,15 @@ const qualityButtons = document.querySelectorAll('.qualityButtons');
 qualityButtons.forEach(button => {
 
     button.addEventListener('click', () => {
+        console.log(button.id);
+        quality=button.id;
 
+        if (currentPointCloud) {
+          const pointCloudFiles = getPointCloudFiles();
+          var pointCloudValue = document.getElementById("pointcloud").value
+          var pointcloud = pointCloudFiles[pointCloudValue];
+          loadPointCloud(pointcloud);
+        }
         qualityButtons.forEach(btn => {
             btn.classList.remove('active');
         });

style.css

@@ -43,7 +43,7 @@ body{
 }
 
 .logos{
-  margin-top:25px;
+  margin-top:20px;
   margin-left: 12px;
   opacity:0.8;
 }
@@ -97,8 +97,10 @@ body{
   top: 48%;
   transform:translateY(-50%);
   left: 20px;
-  width: 200px;
+  width: 210px;
   padding: 22px;
+  padding-bottom: 10px;
+  padding-top: 10px;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(18px);
   border: 1px solid rgba(255,255,255,0.3);
@@ -228,6 +230,7 @@ footer{
 .sideBarText{
 font-size:80%;
 margin:0;
+margin-bottom: -2px;
 }
 
 #pointSlider, #pointSizeSlider{
@@ -235,6 +238,7 @@ margin:0;
   margin: 0;
   padding: 0;
   height: 6px;
+  margin-bottom: 8px;
 }
 
 input[type="range"]{
@@ -247,7 +251,6 @@ input[type="range"]{
   margin: 0;
   padding: 0;
   outline: none;
-
 }
 
 input[type="range"]::-webkit-slider-thumb{
@@ -266,6 +269,15 @@ input[type="range"]::-webkit-slider-thumb{
   cursor:pointer;
 }
 
+.slider-labels{
+    display:flex;
+    justify-content:space-between;
+    font-size:0.5rem;
+    color:#868686;
+    margin-bottom:0px;
+    margin-top: -5px;
+}
+
 #title{
   z-index: 30;
   position: absolute;