From 8f92839c065d39ba7007f26f7e13d4abc77e9917 Mon Sep 17 00:00:00 2001 From: Arne Zitting Date: Thu, 28 May 2026 20:41:56 +0200 Subject: [PATCH] =?UTF-8?q?Punktwolken=20Dateien=20auf=20Server,=20Pfade?= =?UTF-8?q?=20ge=C3=A4ndert=20und=20Slider=20eingebunden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 16 +++++++----- main.js | 77 ++++++++++++++++++++++++++++++++++++++---------------- style.css | 18 ++++++++++--- 3 files changed, 79 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 43956ef..6518d71 100644 --- a/index.html +++ b/index.html @@ -56,9 +56,9 @@

Qualität der Punktwolke

- - - + + +

Farbdarstellung

@@ -66,9 +66,13 @@

- -

- + +

Punktgröße

+
+ Klein + Groß +
+
diff --git a/main.js b/main.js index cf524ad..a6e6066 100644 --- a/main.js +++ b/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.setMinNodeSize(0); +viewer.setPointBudget(pointBudget); +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 -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', -} +var quality = 'medium'; +// 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,10 +76,24 @@ let isVisible=true; function loadPointCloud(path){ console.log("Laden aufgerufen") - if(currentPointCloud){ - viewer.scene.removePointCloud(currentPointCloud); - currentPointCloud=null; - } + console.log("Pfad "+ path); + // Vorherige Punktwolke entfernen + 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'); }); diff --git a/style.css b/style.css index 476beac..dac79e0 100644 --- a/style.css +++ b/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;