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

Merge branch '21pesi1bif-master-patch-09927' into 'master' 

Update public/index.html

See merge request !50
parents 36602065 ccd5cd14
Pipeline #10538 passed with stage
in 6 seconds
Show whitespace changes
Inline Side-by-side
Showing
with 66 additions and 88 deletions
+66 -88
public/index.html
+ 66
- 88
View file @ d5ed3caa
......@@ -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,50 +125,22 @@
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
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');
......@@ -187,7 +162,6 @@
}
});
// AR-Rendering
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
......@@ -202,7 +176,7 @@
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
// Menü bleibt fixiert vor der Kamera
// UI bleibt fixiert vor der Kamera
ui.position.set(0, -0.5, -1);
ui.lookAt(camera.position);
......@@ -217,6 +191,10 @@
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
......@@ -230,7 +208,7 @@
activateXR();
};
} else {
alert('WebXR wird nicht unterstützt.');
alert('WebXR wird von diesem Browser nicht unterstützt.');
}
</script>
</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