From bdf93ff9b7bbf80287a045b8622c8c0a83f9f8d1 Mon Sep 17 00:00:00 2001
From: Percen <21pesi1bif@hft-stuttgart.de>
Date: Sat, 14 Dec 2024 14:47:18 +0000
Subject: [PATCH] Update public/index.html
---
public/index.html | 182 ++++++++++++++++++++++++++++------------------
1 file changed, 113 insertions(+), 69 deletions(-)
diff --git a/public/index.html b/public/index.html
index 42b0424..b3999cb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoVis AR Projekt</title>
- <style>
+ <style>
body {
margin: 0;
font-family: Arial, sans-serif;
@@ -28,7 +28,7 @@
max-width: 80%;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
-
+//teste
h1 {
font-size: 3em;
margin-bottom: 20px;
@@ -79,19 +79,15 @@
background-color: #1E88E5;
}
</style>
-
- <!-- Include Three.js and Three-Mesh-UI -->
<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://cdn.jsdelivr.net/npm/three-mesh-ui@3.4.0/dist/three-mesh-ui.min.js"></script>
</head>
-
<body>
<script>
let selectedModel = 'car'; // Standardauswahl
let models = {};
let reticle;
- let ui;
+ let menu;
async function activateXR() {
const canvas = document.createElement('canvas');
@@ -117,6 +113,27 @@
scene.add(reticle);
});
+const container = new ThreeMeshUI.Block({
+ width: 1.2,
+ height: 0.7,
+ padding: 0.2,
+ fontFamily: './assets/Roboto-msdf.json',
+ fontTexture: './assets/Roboto-msdf.png',
+});
+
+//
+
+const text = new ThreeMeshUI.Text({
+ content: "Some text to be displayed"
+});
+
+container.add( text );
+
+// scene is a THREE.Scene (see three.js)
+scene.add( container );
+
+// This is typically done in the render loop :
+ThreeMeshUI.update();
// Modelle laden
loader.load("https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (gltf) => {
models.car = gltf.scene;
@@ -125,75 +142,102 @@
models.lamp = gltf.scene;
});
- // 3D UI mit three-mesh-ui erstellen
- ui = new ThreeMeshUI.Block({
- width: 0.4,
- height: 0.3,
- padding: 0.05,
- fontSize: 0.05,
- backgroundColor: new THREE.Color(0x333333),
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 0.05
- });
- ui.position.set(0, -0.5, -1); // Vor der Kamera positionieren
- scene.add(ui);
+ // 3D-Menü erstellen
+ const menuGeometry = new THREE.PlaneGeometry(0.5, 0.2); // Menügröße
+ const menuMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, opacity: 0.8, transparent: true });
+ menu = new THREE.Mesh(menuGeometry, menuMaterial);
+ menu.position.set(0, -0.5, -1); // Unten im Kamerasichtfeld
+ scene.add(menu);
+
+ // Menü-Buttons als Flächen
+ const buttonGeometry = new THREE.PlaneGeometry(0.15, 0.1);
+ const buttonMaterial1 = new THREE.MeshBasicMaterial({ color: 0x2196F3 });
+ const buttonMaterial2 = new THREE.MeshBasicMaterial({ color: 0xFF9800 });
+
+ const carButton = new THREE.Mesh(buttonGeometry, buttonMaterial1);
+ carButton.position.set(-0.2, -0.5, -0.99); // Links unten
+ scene.add(carButton);
+
+ const lampButton = new THREE.Mesh(buttonGeometry, buttonMaterial2);
+ lampButton.position.set(0.2, -0.5, -0.99); // Rechts unten
+ scene.add(lampButton);
+
+
+
+ // Raycaster für Button-Interaktion
+ const raycaster = new THREE.Raycaster();
+ const pointer = new THREE.Vector2();
// AR-Session starten
- try {
- 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');
- const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+ 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');
+ const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
- session.requestAnimationFrame(onXRFrame);
+ session.requestAnimationFrame(onXRFrame);
+
+ session.addEventListener("select", (event) => {
+ if (!reticle) return;
- session.addEventListener("select", (event) => {
- if (!reticle) return;
+ // Raycaster von der Kameraposition (Mitte des Bildschirms)
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster.intersectObjects([carButton, lampButton]);
- // Modell platzieren, wenn kein Button angeklickt wurde
- if (models[selectedModel]) {
- const clone = models[selectedModel].clone();
- clone.position.copy(reticle.position);
- clone.scale.set(0.5, 0.5, 0.5); // Größe anpassen
- scene.add(clone);
- console.log(`${selectedModel} platziert`);
+ // Prüfen, ob ein Button getroffen wurde
+ if (intersects.length > 0) {
+ const clickedButton = intersects[0].object;
+
+ if (clickedButton === carButton) {
+ selectedModel = 'car';
+ console.log('Auto ausgewählt');
+ } else if (clickedButton === lampButton) {
+ selectedModel = 'lamp';
+ console.log('Laterne ausgewählt');
}
- });
-
- 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);
-
- // UI bleibt fixiert vor der Kamera
- ui.position.set(0, -0.5, -1);
- ui.lookAt(camera.position);
-
- 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);
+ }
+ // Kein Button getroffen -> Modell platzieren
+ else if (models[selectedModel]) {
+ const clone = models[selectedModel].clone();
+ clone.position.copy(reticle.position);
+ clone.scale.set(0.5, 0.5, 0.5); // Größe anpassen
+ scene.add(clone);
+ console.log(`${selectedModel} platziert`);
+ }
+ });
+
+ // AR-Rendering
+ 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);
+
+ // Menü bleibt fixiert vor der Kamera
+ menu.position.set(0, -0.5, -1);
+ menu.lookAt(camera.position);
+
+ carButton.position.set(-0.2, -0.5, -0.99);
+ lampButton.position.set(0.2, -0.5, -0.99);
+
+ 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);
}
- } catch (e) {
- console.error("AR-Session konnte nicht gestartet werden: ", e);
- alert("AR konnte nicht gestartet werden. Bitte sicherstellen, dass WebXR und AR auf deinem Gerät unterstützt werden.");
}
}
@@ -208,7 +252,7 @@
activateXR();
};
} else {
- alert('WebXR wird von diesem Browser nicht unterstützt.');
+ alert('WebXR wird nicht unterstützt.');
}
</script>
</body>
--
GitLab