An error occurred while loading the file. Please try again.
-
Percen authoreda7117f3b
<!doctype html><html lang="de"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GeoVis AR Projekt</title> <style> body { margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; background-image: url('https://www.hft-stuttgart.de/fileadmin/Dateien/Hochschule/-_R_Juergen_Pollak_HFT_18.04.18-0091.jpg'); background-size: cover; background-position: center; } button { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; font-size: 18px; } </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></head><body> <script> let selectedModel = 'robot'; let models = {}; let reticle; let currentModel = null; let scene, camera, hitTestSource, renderer; let lastTouchTime = 0; async function activateXR() { const canvas = document.createElement('canvas'); document.body.appendChild(canvas); const gl = canvas.getContext('webgl', { xrCompatible: true }); renderer = new THREE.WebGLRenderer({ alpha: true, canvas, context: gl }); renderer.autoClear = false; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(); camera.matrixAutoUpdate = false; const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 10, 10); scene.add(light); const loader = new THREE.GLTFLoader(); // Reticle laden loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", (gltf) => { reticle = gltf.scene; reticle.visible = false; scene.add(reticle); }); // Modelle laden loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => { models.robot = gltf.scene; }); loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", (gltf) => {
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
models.flower = gltf.scene;
});
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 });
session.addEventListener('select', placeModel);
session.requestAnimationFrame(onXRFrame);
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
const pose = frame.getViewerPose(referenceSpace);
if (pose) {
const view = pose.views[0];
const viewport = session.renderState.baseLayer.getViewport(view);
renderer.setSize(viewport.width, viewport.height);
camera.matrix.fromArray(view.transform.matrix);
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
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);
}
renderer.render(scene, camera);
}
}
}
// Modell platzieren
function placeModel() {
if (!reticle || !reticle.visible || !models[selectedModel]) return;
const model = models[selectedModel].clone();
model.position.copy(reticle.position);
scene.add(model);
}
// Swipe-Gesten erkennen
let touchStartX = 0;
let touchEndX = 0;
document.body.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
document.body.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].clientX;
handleSwipe();
});
function handleSwipe() {
const deltaX = touchEndX - touchStartX;
if (Math.abs(deltaX) > 50) {
if (deltaX > 0) {
switchModel('next');
} else {
switchModel('previous');
}
}
}
function switchModel(direction) {
if (direction === 'next') {
selectedModel = selectedModel === 'robot' ? 'flower' : 'robot';
} else {
selectedModel = selectedModel === 'flower' ? 'robot' : 'flower';
}
console.log(`Modell gewechselt zu: ${selectedModel}`);
}
if (navigator.xr) {
const startButton = document.createElement('button');
startButton.textContent = 'Start AR';
document.body.appendChild(startButton);
startButton.onclick = () => {
startButton.remove();
activateXR();
};
} else {
alert('WebXR wird nicht unterstützt.');
}
</script>
</body>
</html>