Skip to content
GitLab
Commit 9a9776b4 authored by Cantuerk's avatar Cantuerk
Browse files

Update public/index.html, public/previewImages/placeholder.png,... 

Update public/index.html, public/previewImages/placeholder.png, public/previewImages/exit.png, public/previewImages/robot.png
parent eb572a6c
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 9a9776b4
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
color: white; color: white;
display: flex; display: none;
justify-content: space-around; justify-content: space-around;
padding: 10px; padding: 10px;
z-index: 10; z-index: 10;
...@@ -88,6 +88,55 @@ ...@@ -88,6 +88,55 @@
button:active { button:active {
background-color: #387a39; background-color: #387a39;
} }
#confirmation-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
}
.dialog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.dialog-box {
position: relative;
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.dialog-box button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.dialog-box button:first-child {
background-color: #e74c3c;
color: white;
}
.dialog-box button:last-child {
background-color: #3498db;
color: white;
}
</style> </style>
<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>
...@@ -96,14 +145,22 @@ ...@@ -96,14 +145,22 @@
<body> <body>
<div id="menu-bar"> <div id="menu-bar">
<div class="menu-item active" id="robot-item" onclick="selectModel('robot')"> <div class="menu-item active" id="robot-item" onclick="selectModel('robot')">
<img src="placeholder.png" alt="Roboter" style="width: 50px; height: 50px;"> <img src="previewImages/robot.png" alt="Roboter" style="width: 50px; height: 50px;">
<span>Roboter</span>
</div> </div>
<div class="menu-item" id="sunflower-item" onclick="selectModel('sunflower')"> <div class="menu-item" id="sunflower-item" onclick="selectModel('sunflower')">
<img src="placeholder.png" alt="Sonnenblume" style="width: 50px; height: 50px;"> <img src="previewImages/sunflower.png" alt="Sonnenblume" style="width: 50px; height: 50px;">
<span>Sonnenblume</span> </div>
<div class="menu-item" id="exit-item" onclick="exitAR()">
<img src="previewImages/exit.png" alt="Exit" style="width: 50px; height: 50px;">
</div>
</div>
<div id="confirmation-dialog" style="display: none;">
<div class="dialog-overlay"></div>
<div class="dialog-box">
<p>Möchten Sie die AR-Session wirklich verlassen?</p>
<button onclick="confirmExit(true)">Ja</button>
<button onclick="confirmExit(false)">Nein</button>
</div> </div>
<div class="menu-item" id="exit-item" onclick="exitAR()">Exit</div>
</div> </div>
<script> <script>
let selectedModel = 'robot'; // Start mit dem Roboter let selectedModel = 'robot'; // Start mit dem Roboter
...@@ -166,6 +223,9 @@ ...@@ -166,6 +223,9 @@
const viewerSpace = await session.requestReferenceSpace('viewer'); const viewerSpace = await session.requestReferenceSpace('viewer');
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
// Menü sichtbar machen, wenn die AR-Session gestartet wird
document.getElementById('menu-bar').style.display = 'flex';
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
session.addEventListener("select", (event) => { session.addEventListener("select", (event) => {
...@@ -195,6 +255,12 @@ ...@@ -195,6 +255,12 @@
lastClickTime = currentTime; lastClickTime = currentTime;
}); });
session.addEventListener("end", () => {
console.log("AR-Session beendet");
currentSession = null;
document.getElementById('menu-bar').style.display = 'none'; // Menü ausblenden
});
// AR-Rendering // AR-Rendering
function onXRFrame(time, frame) { function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
...@@ -224,6 +290,19 @@ ...@@ -224,6 +290,19 @@
} }
} }
function exitAR() {
document.getElementById('confirmation-dialog').style.display = 'flex'; // Dialog anzeigen
}
function confirmExit(shouldExit) {
if (shouldExit) {
if (currentSession) {
currentSession.end(); // Beende die AR-Session
}
}
document.getElementById('confirmation-dialog').style.display = 'none'; // Dialog ausblenden
}
// AR starten // AR starten
if (navigator.xr) { if (navigator.xr) {
const startButton = document.createElement('button'); const startButton = document.createElement('button');
...@@ -238,16 +317,7 @@ ...@@ -238,16 +317,7 @@
alert('WebXR wird nicht unterstützt.'); alert('WebXR wird nicht unterstützt.');
} }
function exitAR() {
if (navigator.xr && navigator.xr.isSessionSupported('immersive-ar')) {
navigator.xr.getSessions().then((sessions) => {
sessions.forEach((session) => session.end());
});
}
alert("AR-Session beendet.");
}
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
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