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
Hide 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 @@
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>
......
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