diff --git a/public/index.html b/public/index.html
index 8f27a1d1c50d5bc58ca4660ef47265633e929ad6..d2a51e9b5cacf0e211073a8ceb706cdd792ca0bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -43,7 +43,7 @@
#add-menu {
overflow-y: auto;
-
+
}
#menu-bar,
@@ -192,13 +192,13 @@
height: 200px;
z-index: 20;
overflow-y: auto;
- padding: 20px;
+ padding: 20px 0;
border-radius: 8px;
}
#dynamic-menu input[type="range"] {
- width: calc(100% - 20px);
- margin: 10px 0;
+ width: 90%;
+ margin: 10px auto;
background: #3a3a3a;
border-radius: 5px;
}
@@ -232,7 +232,7 @@
flex-direction: column;
align-items: flex-start;
">
- <div id="debug-console" style="
+ <div id="debug-console" style="
width: 100%;
max-height: 200px;
overflow-y: auto;
@@ -241,7 +241,7 @@
padding: 5px;
display: none;
"></div>
- <button id="debug-toggle-btn" style="
+ <button id="debug-toggle-btn" style="
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
@@ -326,10 +326,12 @@
</div>
</div>
- <div id="map-window" class="menu-placeholder" style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
+ <div id="map-window" class="menu-placeholder"
+ style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
<div id="map-container" style="z-index: 1500; flex: 15; width: 100%; height: 100%;"></div>
- <div class="menu-item" onclick="showMenu('menu-bar')" style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
- <img src="previewImages/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
+ <div class="menu-item" onclick="showMenu('menu-bar')"
+ style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
+ <img src="previewImages/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
</div>
</div>
@@ -356,43 +358,57 @@
name: "Bench",
image: "previewImages/bench.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/bench_model/scene.gltf",
- scale: { x: 0.1, y: 0.1, z: 0.1 }
+ scale: { x: 0.1, y: 0.1, z: 0.1 },
+ minScale: 0.05, // 50% der aktuellen Größe
+ maxScale: 0.5 // 500% der aktuellen Größe
},
trashbin: {
name: "Trash bin",
image: "previewImages/trash_can.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/trash_model/scene.gltf",
- scale: { x: 0.04, y: 0.04, z: 0.04 }
- },
+ scale: { x: 0.04, y: 0.04, z: 0.04 },
+ minScale: 0.02, // 50% der aktuellen Größe
+ maxScale: 0.2 // 500% der aktuellen Größe
+ },
telephone_box: {
name: "Telephone Box",
image: "previewImages/telephone_box.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/telephone_box_model/scene.gltf",
- scale: { x: 0.04, y: 0.04, z: 0.04 }
+ scale: { x: 0.04, y: 0.04, z: 0.04 },
+ minScale: 0.02,
+ maxScale: 0.2
},
fire_hydrant_model: {
name: "Fire Hydrant",
image: "previewImages/hydrant.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/fire_hydrant_model/scene.gltf",
- scale: { x: 0.04, y: 0.04, z: 0.04 }
+ scale: { x: 0.04, y: 0.04, z: 0.04 },
+ minScale: 0.02,
+ maxScale: 0.2
},
statue: {
name: "Statue",
image: "previewImages/statue.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/statue_model/scene.gltf",
- scale: { x: 0.04, y: 0.04, z: 0.04 }
+ scale: { x: 0.04, y: 0.04, z: 0.04 },
+ minScale: 0.02,
+ maxScale: 0.2
},
fountain: {
name: "Fountain",
image: "previewImages/fountain.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/fountain_model/scene.gltf",
- scale: { x: 0.001, y: 0.001, z: 0.001 }
+ scale: { x: 0.001, y: 0.001, z: 0.001 },
+ minScale: 0.0005, // 50% der aktuellen Größe
+ maxScale: 0.005 // 500% der aktuellen Größe
},
lantern: {
name: "Lantern",
image: "previewImages/lantern.jpg",
file: "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/refs/heads/main/Models/Lantern/glTF/Lantern.gltf",
- scale: { x: 0.1, y: 0.1, z: 0.1 }
+ scale: { x: 0.1, y: 0.1, z: 0.1 },
+ minScale: 0.05,
+ maxScale: 0.5
}
};
@@ -570,72 +586,79 @@
}
function calculateBoundingBox(object) {
- const box = new THREE.Box3().setFromObject(object);
- const size = new THREE.Vector3();
- box.getSize(size);
- return size;
-}
-
-
-function calculateMaxScale(object) {
- const boundingBox = calculateBoundingBox(object);
- const viewportWidth = window.innerWidth;
- const viewportHeight = window.innerHeight;
-
- // Berechne die maximal mögliche Skalierung, um im Viewport zu bleiben
- const scaleWidth = viewportWidth / boundingBox.x;
- const scaleHeight = viewportHeight / boundingBox.y;
-
- // Wähle den kleineren Wert und reduziere ihn leicht, um sicherzugehen, dass das Objekt nicht über den Rand hinausgeht
- const safeScaleFactor = 0.95; // Puffer, um sicherzustellen, dass es nicht zu groß wird
-
- return Math.min(scaleWidth, scaleHeight) * safeScaleFactor;
-}
-
+ const box = new THREE.Box3().setFromObject(object);
+ const size = new THREE.Vector3();
+ box.getSize(size);
+ return size;
+ }
-function openScaleMenu() {
- if (!selectedPlacedModel) {
- showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
- return;
- }
+ function calculateMaxScale(object) {
+ const boundingBox = calculateBoundingBox(object);
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
- // Berechne die maximale Skalierung für das spezifische Objekt
- const maxScale = calculateMaxScale(selectedPlacedModel);
+ // Berechne die maximal mögliche Skalierung, um im Viewport zu bleiben
+ const scaleWidth = viewportWidth / boundingBox.x;
+ const scaleHeight = viewportHeight / boundingBox.y;
- // Aktuelle Skalierung des Modells bestimmen
- const currentScale = selectedPlacedModel.scale.x;
+ // Wähle den kleineren Wert und reduziere ihn leicht, um sicherzugehen, dass das Objekt nicht über den Rand hinausgeht
+ const safeScaleFactor = 0.95; // Puffer, um sicherzustellen, dass es nicht zu groß wird
- const dynamicMenu = document.getElementById("dynamic-menu");
- dynamicMenu.style.display = "flex";
- dynamicMenu.innerHTML = `
- <h3>Skalierung anpassen</h3>
- <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span><input type="range" min="0.01" max="${maxScale.toFixed(2)}" step="0.0001" value="${currentScale}" onchange="updateScale(this.value)"></label>
- <button onclick="closeDynamicMenu()">Zurück</button>
- `;
-}
+ return Math.min(scaleWidth, scaleHeight) * safeScaleFactor;
+ }
-
-/**
- *
+ /**
+ function openScaleMenu() {
+ if (!selectedPlacedModel) {
+ showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
+ return;
+ }
+
+ // Berechne die maximale Skalierung für das spezifische Objekt
+ const maxScale = calculateMaxScale(selectedPlacedModel);
+
+ // Aktuelle Skalierung des Modells bestimmen
+ const currentScale = selectedPlacedModel.scale.x;
+
+ const dynamicMenu = document.getElementById("dynamic-menu");
+ dynamicMenu.style.display = "flex";
+ dynamicMenu.innerHTML = `
+ <h3>Skalierung anpassen</h3>
+ <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span><input type="range" min="0.01" max="${maxScale.toFixed(2)}" step="0.0001" value="${currentScale}" onchange="updateScale(this.value)"></label>
+ <button onclick="closeDynamicMenu()">Zurück</button>
+ `;
+ }
+
+
+
+
+ * */
function openScaleMenu() {
if (!selectedPlacedModel) {
showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
return;
}
+ // Berechne die maximale Skalierung für das spezifische Objekt
+ // const maxScale = calculateMaxScale(selectedPlacedModel);
+
// Aktuelle Skalierung des Modells bestimmen
const currentScale = selectedPlacedModel.scale.x;
+ const minScale = selectedPlacedModel.minScale;
+ const maxScale = selectedPlacedModel.maxScale;
+ const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen
const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex";
dynamicMenu.innerHTML = `
<h3>Skalierung anpassen</h3>
- <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span><input type="range" min="0.01" max="3" step="0.001" value="${currentScale}" onchange="updateScale(this.value)"></label>
+ <label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span>
+ <input type="range" min="${minScale}" max="${maxScale}" step="${step}" value="${currentScale}" onchange="updateScale(this.value)"></label>
<button onclick="closeDynamicMenu()">Zurück</button>
`;
- }*/
+ }
function updateScale(value) {
if (selectedPlacedModel) {