Skip to content
GitLab
Commit 3b621ab2 authored by Percen's avatar Percen
Browse files

Merge branch '21pesi1bif-master-patch-16187' into 'master' 

Update public/index.html

See merge request !63
parents 8e88fe81 b9039b6b
master 21caog1bif-master-patch-76399 21caog1bif-master-patch-83779 21caog1bif-master-patch-96693
1 merge request!63Update public/index.html
Pipeline #10551 passed with stage
in 6 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 62 additions and 72 deletions
+62 -72
public/index.html
+ 62
- 72
View file @ 3b621ab2
......@@ -18,52 +18,15 @@
background-size: cover;
background-position: center;
}
button {
padding: 15px;
font-size: 18px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.panel {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
padding: 10px;
border-radius: 15px;
display: flex;
justify-content: space-around;
width: 60%;
}
.panel button {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
.panel button:hover {
background-color: #45a049;
}
</style>
<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/jsm/webxr/VRButton.js"></script>
</head>
<body>
<script>
let selectedModel = 'robot'; // Standardauswahl
let models = {};
let reticle;
let currentModel = 0;
async function activateXR() {
const canvas = document.createElement('canvas');
......@@ -134,52 +97,79 @@
}
}
// Touch Events für Swipe-Geste
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
const threshold = 50; // Mindestdistanz für die Swipe-Erkennung
// Event Listener für Touch-Ereignisse
document.body.addEventListener('touchstart', (event) => {
// Die Startposition der Geste speichern
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
});
document.body.addEventListener('touchmove', (event) => {
// Die Bewegungsposition des Fingers (optional)
endX = event.touches[0].clientX;
endY = event.touches[0].clientY;
});
document.body.addEventListener('touchend', (event) => {
// Berechne die Distanz in der X- und Y-Richtung
let deltaX = endX - startX;
let deltaY = endY - startY;
// Wenn der Swipe horizontal ist (Links oder Rechts)
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) {
if (deltaX > 0) {
// Swipe nach rechts -> Wechseln zum nächsten Modell
switchModel('next');
} else {
// Swipe nach links -> Wechseln zum vorherigen Modell
switchModel('previous');
}
}
});
// Funktion zum Modellwechsel
function switchModel(direction) {
if (direction === 'next') {
selectedModel = selectedModel === 'robot' ? 'flower' : 'robot';
updateModel();
} else if (direction === 'previous') {
selectedModel = selectedModel === 'robot' ? 'flower' : 'robot';
updateModel();
}
}
function updateModel() {
// Entferne das aktuelle Modell
scene.remove(models[selectedModel]);
// Lade das neue Modell basierend auf selectedModel
if (selectedModel === 'robot') {
scene.add(models.robot);
} else if (selectedModel === 'flower') {
scene.add(models.flower);
}
}
// AR starten
if (navigator.xr) {
const startButton = document.createElement('button');
startButton.textContent = 'Start AR';
startButton.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; font-size: 18px;";
document.body.appendChild(startButton);
startButton.onclick = () => {
startButton.remove();
activateXR();
};
document.body.appendChild(startButton);
} else {
alert('WebXR wird nicht unterstützt.');
}
// Interaktive Buttons für AR-Modellwechsel
const createModelButtons = () => {
const panel = document.createElement('div');
panel.className = 'panel';
const previousButton = document.createElement('button');
previousButton.textContent = 'Previous';
previousButton.onclick = () => {
currentModel = (currentModel - 1 + Object.keys(models).length) % Object.keys(models).length;
updateModel();
};
const nextButton = document.createElement('button');
nextButton.textContent = 'Next';
nextButton.onclick = () => {
currentModel = (currentModel + 1) % Object.keys(models).length;
updateModel();
};
panel.appendChild(previousButton);
panel.appendChild(nextButton);
document.body.appendChild(panel);
};
const updateModel = () => {
const modelKeys = Object.keys(models);
scene.remove(models[modelKeys[(currentModel - 1 + modelKeys.length) % modelKeys.length]]);
scene.add(models[modelKeys[currentModel]]);
};
// Buttons beim Laden der Seite erstellen
window.onload = createModelButtons;
</script>
</body>
</html>
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