Skip to content
GitLab
"...hvac-energy-optimization-with-occupancy-analytics.git" did not exist on "6c7b465b3d8fc62635dd585e560cf3f34c8a428e"
Commit b06ca8f7 authored by Tomi6545's avatar Tomi6545
Browse files

Merge branch 'master' of https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar

parents faaad5f0 56c6f1d1
Show whitespace changes
Inline Side-by-side
public/ar_main.js
View file @ b06ca8f7
// Variablen /* ========================= */
let selectedModel = 'robot'; /* GLOBALE VARIABLEN */
/* ========================= */
let selectedPlacedModel = null; let selectedPlacedModel = null;
let currentSession = null; let currentSession = null;
let reticle = null; let reticle = null;
let scene, camera; let scene, camera;
let geoLocation; let geoLocation;
const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu', 'map-window'];
/* ========================= */
/* MODELLE */
/* ========================= */
let models = { let models = {
bench: { bench: {
name: "Bench", name: "Bench",
...@@ -65,12 +70,13 @@ ...@@ -65,12 +70,13 @@
} }
}; };
const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu', 'map-window']; /* ========================= */
/* INITIALISIERUNG */
/* ========================= */
window.onload = () => { window.onload = () => {
initializeAddMenu(); initializeAddMenu();
// Fügt Sound zu allen Buttons hinzu // Allen Buttons den Sound hinzufügen
const buttons = document.querySelectorAll("button, .menu-item"); const buttons = document.querySelectorAll("button, .menu-item");
buttons.forEach(button => { buttons.forEach(button => {
button.addEventListener("click", playButtonSound); button.addEventListener("click", playButtonSound);
...@@ -95,6 +101,9 @@ ...@@ -95,6 +101,9 @@
`; `;
} }
/* ========================= */
/* MENÜ-STEUERUNG */
/* ========================= */
function showMenu(menuId) { function showMenu(menuId) {
const isMapWindow = menuId === 'map-window'; const isMapWindow = menuId === 'map-window';
if (isMapWindow && !geoLocation) { if (isMapWindow && !geoLocation) {
...@@ -111,23 +120,16 @@ ...@@ -111,23 +120,16 @@
else if (isMapWindow) init_map(); else if (isMapWindow) init_map();
} }
function clearSelectedModel() { function closeDynamicMenu() {
if (selectedPlacedModel) { const dynamicMenu = document.getElementById("dynamic-menu");
selectedPlacedModel.traverse((child) => { dynamicMenu.style.display = "none";
if (child.isMesh) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
selectedPlacedModel = null; // Kein Modell mehr ausgewählt
}
} }
function selectModel(modelId) { /* ========================= */
const model = models[modelId]; /* MODELL-HANDLING */
if (model && model.file) { /* ========================= */
loadModel(model.file); function getAllPlacedModels() {
showMenu('menu-bar'); return scene.children.filter(child => child.isPlacedModel === true);
}
} }
function loadModel(filePath) { function loadModel(filePath) {
...@@ -164,30 +166,11 @@ ...@@ -164,30 +166,11 @@
); );
} }
function highlightSelectedModel() { function selectModel(modelId) {
if (selectedPlacedModel) { const model = models[modelId];
removeHighlightFromAllModels(); if (model && model.file) {
selectedPlacedModel.traverse((child) => { loadModel(model.file);
if (child.isMesh) { showMenu('menu-bar');
child.material.emissive.setHex(0xff0000); // Rote Hervorhebung
}
});
}
}
function removeHighlightFromAllModels() {
scene.traverse((child) => {
if (child.isMesh && child.material && child.material.emissive) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
}
function removeHighlightFromSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) child.material.emissive.setHex(0x000000); // Markierung entfernen
});
} }
} }
...@@ -210,6 +193,12 @@ ...@@ -210,6 +193,12 @@
selectedObject = selectedObject.parent; selectedObject = selectedObject.parent;
} }
// Überprüfe, ob das ausgewählte Objekt das Reticle ist
if (selectedObject === reticle) {
console.log("Reticle kann nicht ausgewählt werden.");
return;
}
// Markiere das gesamte Modell als ausgewählt // Markiere das gesamte Modell als ausgewählt
selectedPlacedModel = selectedObject; selectedPlacedModel = selectedObject;
highlightSelectedModel(); highlightSelectedModel();
...@@ -217,6 +206,66 @@ ...@@ -217,6 +206,66 @@
} }
} }
function clearSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
selectedPlacedModel = null;
}
}
function highlightSelectedModel() {
if (selectedPlacedModel) {
removeHighlightFromAllModels();
selectedPlacedModel.traverse((child) => {
if (child.isMesh) {
child.material.emissive.setHex(0xff0000); // Rote Hervorhebung
}
});
}
}
function removeHighlightFromSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) child.material.emissive.setHex(0x000000); // Markierung entfernen
});
}
}
function removeHighlightFromAllModels() {
scene.traverse((child) => {
if (child.isMesh && child.material && child.material.emissive) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
}
function deleteModel() {
if (!selectedPlacedModel) {
console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es löschen.");
return;
}
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'flex';
}
function confirmDelete(shouldDelete) {
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'none';
if (shouldDelete && selectedPlacedModel) {
scene.remove(selectedPlacedModel);
selectedPlacedModel = null;
showMenu('menu-bar');
}
}
function completeEditing() { function completeEditing() {
removeHighlightFromSelectedModel(); removeHighlightFromSelectedModel();
closeDynamicMenu(); closeDynamicMenu();
...@@ -225,14 +274,16 @@ ...@@ -225,14 +274,16 @@
document.getElementById('menu-bar').style.display = 'flex'; document.getElementById('menu-bar').style.display = 'flex';
} }
/* ========================= */
/* BEARBEITUNGS-MENÜS */
/* ========================= */
function openRotationMenu() { function openRotationMenu() {
if (!selectedPlacedModel) { if (!selectedPlacedModel) {
showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten."); console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
return; return;
} }
// Holen Sie die aktuelle Y-Rotation des Modells (in Grad) const currentRotation = Math.round(THREE.MathUtils.radToDeg(selectedPlacedModel.rotation.y)); // Aktuelle Y-Rotation des Modells (in Grad)
const currentRotation = Math.round(THREE.MathUtils.radToDeg(selectedPlacedModel.rotation.y));
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex"; dynamicMenu.style.display = "flex";
...@@ -248,7 +299,7 @@ ...@@ -248,7 +299,7 @@
const radians = (value / 180) * Math.PI; const radians = (value / 180) * Math.PI;
selectedPlacedModel.rotation[axis] = radians; selectedPlacedModel.rotation[axis] = radians;
// Update der aktuellen Rotation im Menü // Anzeige der aktuellen Rotation im Dynamic-Menü aktualisieren
const currentRotationDisplay = document.getElementById("current-rotation"); const currentRotationDisplay = document.getElementById("current-rotation");
if (currentRotationDisplay) { if (currentRotationDisplay) {
currentRotationDisplay.textContent = value; // Zeige den aktuellen Wert in Grad an currentRotationDisplay.textContent = value; // Zeige den aktuellen Wert in Grad an
...@@ -256,127 +307,101 @@ ...@@ -256,127 +307,101 @@
} }
} }
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;
}
/**
function openScaleMenu() { function openScaleMenu() {
if (!selectedPlacedModel) { if (!selectedPlacedModel) {
showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten."); console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
return; return;
} }
// Berechne die maximale Skalierung für das spezifische Objekt // Aktuelle Skalierung und Grenzen bestimmen
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 currentScale = selectedPlacedModel.scale.x;
const minScale = selectedPlacedModel.modelConfig.minScale; const minScale = selectedPlacedModel.modelConfig.minScale;
const maxScale = selectedPlacedModel.modelConfig.maxScale; const maxScale = selectedPlacedModel.modelConfig.maxScale;
const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen
console.log("Slider-Werte:", { minScale, maxScale, currentScale }); const currentScalePercent = ((currentScale - minScale) / (maxScale - minScale)) * 100; // Umrechnung der Werte in Prozent
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex"; dynamicMenu.style.display = "flex";
dynamicMenu.innerHTML = ` dynamicMenu.innerHTML = `
<h3>Skalierung anpassen</h3> <h3>Skalierung anpassen</h3>
<label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span> <label>Größe: <span id="scale-value">${currentScalePercent.toFixed(0)}%</span>
<input type="range" min="${minScale}" max="${maxScale}" step="${step}" value="${currentScale}" onchange="updateScale(this.value)"></label> <input type="range" min="0" max="100" step="1" value="${currentScalePercent}" onchange="updateScale(this.value, ${minScale}, ${maxScale})"></label>
<button onclick="closeDynamicMenu()">Zurück</button> <button onclick="closeDynamicMenu()">Zurück</button>
`; `;
} }
function updateScale(value) { function updateScale(percentValue, minScale, maxScale) {
if (selectedPlacedModel) { if (selectedPlacedModel) {
const scale = parseFloat(value); // Berechnung der Skalierung basierend auf dem Prozentwert
const scale = minScale + (percentValue / 100) * (maxScale - minScale);
selectedPlacedModel.scale.set(scale, scale, scale); selectedPlacedModel.scale.set(scale, scale, scale);
// Anzeige des aktuellen Wertes aktualisieren // Anzeige des aktuellen Prozentsatzes im Dynamic-Menü aktualisieren
const scaleValueDisplay = document.getElementById("scale-value"); const scaleValueDisplay = document.getElementById("scale-value");
if (scaleValueDisplay) { if (scaleValueDisplay) {
scaleValueDisplay.textContent = `${scale.toFixed(2)}`; scaleValueDisplay.textContent = `${parseInt(percentValue, 10)}%`;
} }
} }
} }
function deleteModel() { let moveDelta = 0.1; // Standardwert für die Verschiebungsgröße, kann mit dem Slider geändert werden
function openMoveMenu() {
if (!selectedPlacedModel) { if (!selectedPlacedModel) {
showInfoDialog("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es löschen."); console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bewegen.");
return; return;
} }
// Dialog anzeigen const dynamicMenu = document.getElementById("dynamic-menu");
const deleteDialog = document.getElementById('delete-confirmation-dialog'); dynamicMenu.style.display = "flex";
deleteDialog.style.display = 'flex';
}
function confirmDelete(shouldDelete) { dynamicMenu.innerHTML = `
const deleteDialog = document.getElementById('delete-confirmation-dialog'); <h3>Modell bewegen</h3>
deleteDialog.style.display = 'none'; <div id="position-info">
<p>Aktuelle Position: X=${selectedPlacedModel.position.x.toFixed(2)}, Z=${selectedPlacedModel.position.z.toFixed(2)}</p>
</div>
<label>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span></label>
<input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)">
<div style="display: flex; flex-direction: column; align-items: center;">
<div>
<button onclick="moveModelDynamic('x', -1)">← X</button>
<button onclick="moveModelDynamic('x', 1)">→ X</button>
</div>
<div>
<button onclick="moveModelDynamic('z', -1)">- Z</button>
<button onclick="moveModelDynamic('z', 1)">+ Z</button>
</div>
</div>
<button onclick="closeDynamicMenu()">Zurück</button>
`;
}
if (shouldDelete && selectedPlacedModel) { function updateMoveDelta(value) {
scene.remove(selectedPlacedModel); moveDelta = parseFloat(value);
selectedPlacedModel = null; const moveDeltaDisplay = document.getElementById("move-delta-display");
showMenu('menu-bar'); if (moveDeltaDisplay) {
moveDeltaDisplay.textContent = moveDelta.toFixed(2);
} }
} }
function closeDynamicMenu() { function moveModelDynamic(axis, direction) {
const dynamicMenu = document.getElementById("dynamic-menu"); if (selectedPlacedModel) {
dynamicMenu.style.display = "none"; const delta = direction * moveDelta; // Dynamischer Wert basierend auf Slider
} selectedPlacedModel.position[axis] += delta;
function getAllPlacedModels() { // Position im Menü aktualisieren
return scene.children.filter(child => child.isPlacedModel === true); const positionInfo = document.getElementById("position-info");
if (positionInfo) {
positionInfo.innerHTML = `
<p>Aktuelle Position: X=${selectedPlacedModel.position.x.toFixed(2)}, Z=${selectedPlacedModel.position.z.toFixed(2)}</p>`;
}
}
} }
/* ========================= */
/* KARTENSTEUERUNG */
/* ========================= */
function refreshMapDialog() { function refreshMapDialog() {
const mapDialog = document.getElementById('map-dialog'); const mapDialog = document.getElementById('map-dialog');
mapDialog.style.display = 'flex'; mapDialog.style.display = 'flex';
...@@ -387,6 +412,9 @@ ...@@ -387,6 +412,9 @@
mapDialog.style.display = 'none'; mapDialog.style.display = 'none';
} }
/* ========================= */
/* AR-HANDLING */
/* ========================= */
async function activateXR(sceneData = null) { async function activateXR(sceneData = null) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
document.body.appendChild(canvas); document.body.appendChild(canvas);
...@@ -424,6 +452,7 @@ ...@@ -424,6 +452,7 @@
currentSession.addEventListener("end", () => { currentSession.addEventListener("end", () => {
currentSession = null; currentSession = null;
document.getElementById("dynamic-menu").style.display = "none";
menus.forEach(id => { menus.forEach(id => {
document.getElementById(id).style.display = 'none'; document.getElementById(id).style.display = 'none';
}); });
...@@ -441,7 +470,6 @@ ...@@ -441,7 +470,6 @@
console.log("GeoLocation: " + JSON.stringify(geoLocation)); console.log("GeoLocation: " + JSON.stringify(geoLocation));
if (sceneData) { if (sceneData) {
sceneData.models.forEach((model) => { sceneData.models.forEach((model) => {
const offSet = leafletToThree(sceneData.lat, sceneData.lng)
if (model.name) { if (model.name) {
const filePath = Object.values(models).find(m => model.name === m.name).file; const filePath = Object.values(models).find(m => model.name === m.name).file;
const { x, z } = leafletToThree(model.lat, model.lng); const { x, z } = leafletToThree(model.lat, model.lng);
...@@ -498,14 +526,14 @@ ...@@ -498,14 +526,14 @@
} }
function confirmExit(shouldExit) { function confirmExit(shouldExit) {
if (shouldExit && currentSession) { if (shouldExit && currentSession) currentSession.end();
currentSession.end();
}
document.getElementById('confirmation-dialog').style.display = 'none'; document.getElementById('confirmation-dialog').style.display = 'none';
} }
/* ========================= */
/* BENUTZERINTERAKTIONEN */
/* ========================= */
let soundTimeout = false; let soundTimeout = false;
function playButtonSound() { function playButtonSound() {
if (!soundTimeout) { if (!soundTimeout) {
const sound = document.getElementById("button-sound"); const sound = document.getElementById("button-sound");
......
public/ar_start.js
View file @ b06ca8f7
/* ========================= */
/* DEBUGGING UND START */
/* ========================= */
if (navigator.xr) { if (navigator.xr) {
let sceneData; let sceneData;
const startButton = document.createElement('button'); const startButton = document.createElement('button');
......
public/assets/models/park_light_model/license.txt 0 → 100644
View file @ b06ca8f7
Model Information:
* title: NYC Park Streetlight,
* source: https://sketchfab.com/3d-models/nyc-park-streetlight-4efdeb23f30e49aab10fac0c3064443d
* author: Anticipateants (https://sketchfab.com/anticipateants)
Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed.
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "NYC Park Streetlight," (https://sketchfab.com/3d-models/nyc-park-streetlight-4efdeb23f30e49aab10fac0c3064443d) by Anticipateants (https://sketchfab.com/anticipateants) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
public/assets/models/park_light_model/scene.gltf 0 → 100644
View file @ b06ca8f7
{
"accessors": [
{
"bufferView": 2,
"componentType": 5126,
"count": 2944,
"max": [
1.1778082847595215,
71.68600463867188,
1.177808165550232
],
"min": [
-1.1778085231781006,
-1.0,
-1.177808403968811
],
"type": "VEC3"
},
{
"bufferView": 2,
"byteOffset": 35328,
"componentType": 5126,
"count": 2944,
"max": [
0.9807855486869812,
0.7628369927406311,
0.9871309399604797
],
"min": [
-0.9807854294776917,
-1.0,
-0.9807857275009155
],
"type": "VEC3"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 2944,
"max": [
0.9722591042518616,
0.971050500869751
],
"min": [
0.017211854457855225,
0.012609779834747314
],
"type": "VEC2"
},
{
"bufferView": 0,
"componentType": 5125,
"count": 4410,
"type": "SCALAR"
}
],
"asset": {
"extras": {
"author": "Anticipateants (https://sketchfab.com/anticipateants)",
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
"source": "https://sketchfab.com/3d-models/nyc-park-streetlight-4efdeb23f30e49aab10fac0c3064443d",
"title": "NYC Park Streetlight,"
},
"generator": "Sketchfab-13.53.0",
"version": "2.0"
},
"bufferViews": [
{
"buffer": 0,
"byteLength": 17640,
"name": "floatBufferViews",
"target": 34963
},
{
"buffer": 0,
"byteLength": 23552,
"byteOffset": 17640,
"byteStride": 8,
"name": "floatBufferViews",
"target": 34962
},
{
"buffer": 0,
"byteLength": 70656,
"byteOffset": 41192,
"byteStride": 12,
"name": "floatBufferViews",
"target": 34962
}
],
"buffers": [
{
"byteLength": 111848,
"uri": "scene.bin"
}
],
"images": [
{
"uri": "textures/Material.001_baseColor.png"
}
],
"materials": [
{
"doubleSided": true,
"name": "Material.001",
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
},
"metallicFactor": 0.0
}
}
],
"meshes": [
{
"name": "Object_0",
"primitives": [
{
"attributes": {
"NORMAL": 1,
"POSITION": 0,
"TEXCOORD_0": 2
},
"indices": 3,
"material": 0,
"mode": 4
}
]
}
],
"nodes": [
{
"children": [
1
],
"matrix": [
1.0,
0.0,
0.0,
0.0,
0.0,
2.220446049250313e-16,
-1.0,
0.0,
0.0,
1.0,
2.220446049250313e-16,
0.0,
0.0,
0.0,
0.0,
1.0
],
"name": "Sketchfab_model"
},
{
"children": [
2
],
"name": "root"
},
{
"children": [
3
],
"matrix": [
1.0,
0.0,
0.0,
0.0,
0.0,
2.220446049250313e-16,
1.0,
0.0,
0.0,
-1.0,
2.220446049250313e-16,
0.0,
0.0,
0.0,
0.0,
1.0
],
"name": "GLTF_SceneRootNode"
},
{
"children": [
4
],
"matrix": [
0.03656700626015663,
0.0,
0.0,
0.0,
0.0,
0.010605139657855034,
0.0,
0.0,
0.0,
0.0,
0.03656700626015663,
0.0,
-0.006100017577409744,
0.010527204722166061,
-0.0016316026449203491,
1.0
],
"name": "main_0"
},
{
"mesh": 0,
"name": "Object_4"
}
],
"samplers": [
{
"magFilter": 9729,
"minFilter": 9987,
"wrapS": 10497,
"wrapT": 10497
}
],
"scene": 0,
"scenes": [
{
"name": "Sketchfab_Scene",
"nodes": [
0
]
}
],
"textures": [
{
"sampler": 0,
"source": 0
}
]
}
public/index.html
View file @ b06ca8f7
...@@ -5,43 +5,16 @@ ...@@ -5,43 +5,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoVis AR Projekt</title> <title>GeoVis AR Projekt</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script> <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head> </head>
<body> <body>
<!-- Debug --> <!-- Debug -->
<div id="debug-container" style=" <div id="debug-container">
position: fixed; <div id="debug-console"></div>
top: 0; <button id="debug-toggle-btn"></button>
left: 0;
width: 100%;
z-index: 9999;
font-family: monospace;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
">
<div id="debug-console" style="
width: 100%;
max-height: 200px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
padding: 5px;
display: none;
"></div>
<button id="debug-toggle-btn" style="
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
border: none;
padding: 5px 10px;
cursor: pointer;
display: none;
"></button>
</div> </div>
<!-- Standardmenü --> <!-- Standardmenü -->
...@@ -57,7 +30,7 @@ ...@@ -57,7 +30,7 @@
</div> </div>
</div> </div>
<!-- Hinzufügen-Menü --> <!-- Hinzufügen-Menü für das Auswählen der Modelle-->
<div id="add-menu" class="menu-placeholder" style="display: none;"></div> <div id="add-menu" class="menu-placeholder" style="display: none;"></div>
<!-- Bearbeiten-Menü --> <!-- Bearbeiten-Menü -->
...@@ -68,6 +41,9 @@ ...@@ -68,6 +41,9 @@
<div class="menu-item" onclick="openScaleMenu()"> <div class="menu-item" onclick="openScaleMenu()">
<img src="previewImages/scale-icon.png" alt="Skalierung" /> <img src="previewImages/scale-icon.png" alt="Skalierung" />
</div> </div>
<div class="menu-item" onclick="openMoveMenu()">
<img src="previewImages/move-icon.png" alt="Bewegen" />
</div>
<div class="menu-item" onclick="deleteModel()"> <div class="menu-item" onclick="deleteModel()">
<img src="previewImages/delete-icon.png" alt="Löschen" /> <img src="previewImages/delete-icon.png" alt="Löschen" />
</div> </div>
...@@ -89,7 +65,7 @@ ...@@ -89,7 +65,7 @@
</div> </div>
</div> </div>
<!-- Dynamisches Menü --> <!-- Dynamisches Menü für Rotation und Scaling-->
<div id="dynamic-menu" style="display: none;"></div> <div id="dynamic-menu" style="display: none;"></div>
<!-- Bestätigungsdialog für Löschen --> <!-- Bestätigungsdialog für Löschen -->
...@@ -112,15 +88,6 @@ ...@@ -112,15 +88,6 @@
</div> </div>
</div> </div>
<!-- Informations-Dialog -->
<div id="info-dialog" style="display: none;">
<div class="dialog-overlay"></div>
<div class="dialog-box">
<p id="info-text">Hier kommt die Nachricht hin</p>
<button onclick="closeInfoDialog()">OK</button>
</div>
</div>
<div id="map-window" class="menu-placeholder" <div id="map-window" class="menu-placeholder"
style="display: none; flex-direction: column; width: 100vw; height: 100vh;"> 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 id="map-container" style="z-index: 1500; flex: 15; width: 100%; height: 100%;"></div>
......
public/styles.css → public/style.css
View file @ b06ca8f7
...@@ -100,8 +100,7 @@ body { ...@@ -100,8 +100,7 @@ body {
/* Confirmation Dialog */ /* Confirmation Dialog */
#confirmation-dialog, #confirmation-dialog,
#delete-confirmation-dialog, #delete-confirmation-dialog {
#info-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -171,17 +170,17 @@ body { ...@@ -171,17 +170,17 @@ body {
#dynamic-menu { #dynamic-menu {
position: absolute; position: absolute;
bottom: 80px; bottom: 90px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; gap: 10px;
background: #1e1e1e; background: #1e1e1e;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8); box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8);
color: white; color: white;
width: 100vw; width: 100vw;
height: 200px; height: 250px;
z-index: 20; z-index: 20;
overflow-y: auto; overflow-y: auto;
border-radius: 8px; border-radius: 8px;
...@@ -205,3 +204,36 @@ body { ...@@ -205,3 +204,36 @@ body {
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
#debug-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
font-family: monospace;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#debug-console {
width: 100%;
max-height: 200px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
padding: 5px;
display: none;
}
#debug-toggle-btn {
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
border: none;
padding: 5px 10px;
cursor: pointer;
display: none;
}
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