diff --git a/index.html b/index.html
index 43956ef..6518d71 100644
--- a/index.html
+++ b/index.html
@@ -56,9 +56,9 @@
-
-
-
+
+
+
@@ -66,9 +66,13 @@
-
-
-
+
+
+
+ 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;