From ccd5cd14edaa610da354dc5d06e3fadb791e52cc Mon Sep 17 00:00:00 2001
From: Percen <21pesi1bif@hft-stuttgart.de>
Date: Sat, 14 Dec 2024 14:45:10 +0000
Subject: [PATCH] Update public/index.html
---
public/index.html | 154 ++++++++++++++++++++--------------------------
1 file changed, 66 insertions(+), 88 deletions(-)
diff --git a/public/index.html b/public/index.html
index be704f1..42b0424 100644
--- a/public/index.html
+++ b/public/index.html
@@ -79,16 +79,19 @@
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"></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 menu;
+ let ui;
async function activateXR() {
const canvas = document.createElement('canvas');
@@ -122,100 +125,75 @@
models.lamp = gltf.scene;
});
- // 3D-Menü erstellen
- const ui = new THREE.MeshUI.UI({
- containerWidth: 3,
- containerHeight: 2,
- fontSize: 0.1,
+ // 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);
- // Text hinzufügen
- const text = new THREE.MeshUI.Text({
- content: 'Modell auswählen',
- fontSize: 0.2,
- color: new THREE.Color(0xFFFFFF)
- });
- ui.add(text);
-
- // Buttons hinzufügen
- const buttonGeometry = new THREE.PlaneGeometry(0.5, 0.3);
- const button1 = new THREE.MeshUI.Button({
- width: 0.8,
- height: 0.4,
- backgroundColor: new THREE.Color(0x2196F3),
- });
- button1.position.set(-0.5, -0.8, 0);
- button1.onClick = () => {
- selectedModel = 'car';
- console.log('Auto ausgewählt');
- };
- ui.add(button1);
-
- const button2 = new THREE.MeshUI.Button({
- width: 0.8,
- height: 0.4,
- backgroundColor: new THREE.Color(0xFF9800),
- });
- button2.position.set(0.5, -0.8, 0);
- button2.onClick = () => {
- selectedModel = 'lamp';
- console.log('Laterne ausgewählt');
- };
- ui.add(button2);
-
// 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');
- const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
-
- session.requestAnimationFrame(onXRFrame);
-
- session.addEventListener("select", (event) => {
- if (!reticle) return;
-
- // 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`);
- }
- });
+ 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 });
- // 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
- 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);
+ session.addEventListener("select", (event) => {
+ if (!reticle) return;
+
+ // 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`);
+ }
+ });
+
+ 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);
+ }
}
+ } 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.");
}
}
@@ -230,7 +208,7 @@
activateXR();
};
} else {
- alert('WebXR wird nicht unterstützt.');
+ alert('WebXR wird von diesem Browser nicht unterstützt.');
}
</script>
</body>
--
GitLab