diff --git a/public/index.html b/public/index.html
index 65b5cd6ffca80fff5d60d79d630f0a2b75eac35d..23535d536d0f7615affbf21aa49ffb1499247d08 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,12 +24,9 @@
</head>
<body>
<script>
- let selectedModel = 'robot';
+ let selectedModel = 'robot'; // Standardauswahl
let models = {};
let reticle;
- let currentModel = null;
- let scene, camera, hitTestSource;
- let hitTestResults = [];
async function activateXR() {
const canvas = document.createElement('canvas');
@@ -38,11 +35,11 @@
const renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl });
renderer.autoClear = false;
- scene = new THREE.Scene();
- camera = new THREE.PerspectiveCamera();
+ const scene = new THREE.Scene();
+ const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false;
- // Licht
+ // Licht hinzufügen
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);
@@ -55,23 +52,28 @@
scene.add(reticle);
});
- // Modelle
+ // Modelle laden
loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
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) => {
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'] });
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
const referenceSpace = await session.requestReferenceSpace('local');
const viewerSpace = await session.requestReferenceSpace('viewer');
- hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+ const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
session.requestAnimationFrame(onXRFrame);
+ // AR-Rendering
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
@@ -86,12 +88,24 @@
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
- hitTestResults = frame.getHitTestResults(hitTestSource);
+ const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0) {
const hitPose = hitTestResults[0].getPose(referenceSpace);
reticle.visible = true;
reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
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);
@@ -99,48 +113,7 @@
}
}
- // Touch-Logik zur Unterscheidung zwischen Swipe und Tap
- 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');
- }
-
+ // AR starten
if (navigator.xr) {
const startButton = document.createElement('button');
startButton.textContent = 'Start AR';