Skip to content
GitLab
Commit 11cd97c1 authored by Percen's avatar Percen
Browse files

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

Update public/index.html

See merge request !75
parents eef6999a fb6583bc
Pipeline #10563 passed with stage
in 6 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 26 additions and 53 deletions
+26 -53
public/index.html
+ 26
- 53
View file @ 11cd97c1
...@@ -24,12 +24,9 @@ ...@@ -24,12 +24,9 @@
</head> </head>
<body> <body>
<script> <script>
let selectedModel = 'robot'; let selectedModel = 'robot'; // Standardauswahl
let models = {}; let models = {};
let reticle; let reticle;
let currentModel = null;
let scene, camera, hitTestSource;
let hitTestResults = [];
async function activateXR() { async function activateXR() {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
...@@ -38,11 +35,11 @@ ...@@ -38,11 +35,11 @@
const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl }); const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
renderer.autoClear = false; renderer.autoClear = false;
scene = new THREE.Scene(); const scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(); const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false; camera.matrixAutoUpdate = false;
// Licht // Licht hinzufügen
const light = new THREE.DirectionalLight(0xffffff, 1); const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10); light.position.set(10, 10, 10);
scene.add(light); scene.add(light);
...@@ -55,23 +52,28 @@ ...@@ -55,23 +52,28 @@
scene.add(reticle); scene.add(reticle);
}); });
// Modelle // Modelle laden
loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => { loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
models.robot = gltf.scene; models.robot = gltf.scene;
models.robot.visible = false; // Start ohne sichtbar
scene.add(models.robot);
}); });
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => { loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
models.flower = gltf.scene; models.flower = gltf.scene;
models.flower.visible = false; // Start ohne sichtbar
scene.add(models.flower);
}); });
// XR-Session // AR-Session starten
const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] }); const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test'] });
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
const referenceSpace = await session.requestReferenceSpace('local'); const referenceSpace = await session.requestReferenceSpace('local');
const viewerSpace = await session.requestReferenceSpace('viewer'); const viewerSpace = await session.requestReferenceSpace('viewer');
hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
// AR-Rendering
function onXRFrame(time, frame) { function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer); gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
...@@ -86,12 +88,24 @@ ...@@ -86,12 +88,24 @@
camera.projectionMatrix.fromArray(view.projectionMatrix); camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true); camera.updateMatrixWorld(true);
hitTestResults = frame.getHitTestResults(hitTestSource); const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0) { if (hitTestResults.length > 0) {
const hitPose = hitTestResults[0].getPose(referenceSpace); const hitPose = hitTestResults[0].getPose(referenceSpace);
reticle.visible = true; reticle.visible = true;
reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z); reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
reticle.updateMatrixWorld(true); reticle.updateMatrixWorld(true);
// Interaktive Modellwahl
const distanceToRobot = hitTestResults[0].distanceTo(models.robot.position);
const distanceToFlower = hitTestResults[0].distanceTo(models.flower.position);
if (distanceToRobot < distanceToFlower) {
models.robot.visible = true;
models.flower.visible = false;
} else {
models.flower.visible = true;
models.robot.visible = false;
}
} }
renderer.render(scene, camera); renderer.render(scene, camera);
...@@ -99,48 +113,7 @@ ...@@ -99,48 +113,7 @@
} }
} }
// Touch-Logik zur Unterscheidung zwischen Swipe und Tap // AR starten
let startX = 0, startY = 0, endX = 0, endY = 0;
const swipeThreshold = 50; // Minimale Swipe-Distanz
document.body.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
document.body.addEventListener('touchend', (e) => {
endX = e.changedTouches[0].clientX;
endY = e.changedTouches[0].clientY;
const deltaX = endX - startX;
const deltaY = endY - startY;
// Unterscheidung zwischen Swipe und Tap
if (Math.abs(deltaX) > swipeThreshold) {
if (deltaX > 0) {
switchModel('next');
} else {
switchModel('previous');
}
} else if (Math.abs(deltaY) < swipeThreshold) {
placeModel(); // Nur platzieren, wenn keine große Bewegung erkannt wurde
}
});
function placeModel() {
if (reticle && reticle.visible && models[selectedModel]) {
const newModel = models[selectedModel].clone();
newModel.position.copy(reticle.position);
scene.add(newModel);
}
}
function switchModel(direction) {
selectedModel = direction === 'next' ?
(selectedModel === 'robot' ? 'flower' : 'robot') :
(selectedModel === 'robot' ? 'flower' : 'robot');
}
if (navigator.xr) { if (navigator.xr) {
const startButton = document.createElement('button'); const startButton = document.createElement('button');
startButton.textContent = 'Start AR'; startButton.textContent = 'Start AR';
......
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