Skip to content
GitLab
Commit 2686c510 authored by Cantuerk's avatar Cantuerk
Browse files

Merge branch '21caog1bif-master-patch-35307' into 'master' 

Update public/index.html

See merge request !163
parents 7c033366 a050683b
master 21caog1bif-master-patch-96693
1 merge request!163Update public/index.html
Pipeline #10909 passed with stage
in 42 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 84 additions and 61 deletions
+84 -61
public/index.html
+ 84
- 61
View file @ 2686c510
......@@ -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) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal