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

Update public/index.html

parent 36602065
master 21caog1bif-master-patch-76399 21caog1bif-master-patch-83779 21caog1bif-master-patch-96693
1 merge request!50Update public/index.html
Show whitespace changes
Inline Side-by-side
Showing
with 66 additions and 88 deletions
+66 -88
public/index.html
+ 66
- 88
View file @ ccd5cd14
...@@ -79,16 +79,19 @@ ...@@ -79,16 +79,19 @@
background-color: #1E88E5; background-color: #1E88E5;
} }
</style> </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/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.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> </head>
<body> <body>
<script> <script>
let selectedModel = 'car'; // Standardauswahl let selectedModel = 'car'; // Standardauswahl
let models = {}; let models = {};
let reticle; let reticle;
let menu; let ui;
async function activateXR() { async function activateXR() {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
...@@ -122,50 +125,22 @@ ...@@ -122,50 +125,22 @@
models.lamp = gltf.scene; models.lamp = gltf.scene;
}); });
// 3D-Menü erstellen // 3D UI mit three-mesh-ui erstellen
const ui = new THREE.MeshUI.UI({ ui = new ThreeMeshUI.Block({
containerWidth: 3, width: 0.4,
containerHeight: 2, height: 0.3,
fontSize: 0.1,
padding: 0.05, 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); 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 // AR-Session starten
try {
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');
...@@ -187,7 +162,6 @@ ...@@ -187,7 +162,6 @@
} }
}); });
// 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);
...@@ -202,7 +176,7 @@ ...@@ -202,7 +176,7 @@
camera.projectionMatrix.fromArray(view.projectionMatrix); camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true); camera.updateMatrixWorld(true);
// Menü bleibt fixiert vor der Kamera // UI bleibt fixiert vor der Kamera
ui.position.set(0, -0.5, -1); ui.position.set(0, -0.5, -1);
ui.lookAt(camera.position); ui.lookAt(camera.position);
...@@ -217,6 +191,10 @@ ...@@ -217,6 +191,10 @@
renderer.render(scene, camera); 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.");
}
} }
// AR starten // AR starten
...@@ -230,7 +208,7 @@ ...@@ -230,7 +208,7 @@
activateXR(); activateXR();
}; };
} else { } else {
alert('WebXR wird nicht unterstützt.'); alert('WebXR wird von diesem Browser nicht unterstützt.');
} }
</script> </script>
</body> </body>
......
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