From 435bd854204ba7f60306f4aca9d4af429f62f598 Mon Sep 17 00:00:00 2001
From: nicolas <41stni1mst@hft-stuttgart.de>
Date: Sat, 11 Oct 2025 14:02:13 +0200
Subject: [PATCH] Initial VR Setup

---
 first_test/a-frame/index.html | 63 +++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 first_test/a-frame/index.html
diff --git a/first_test/a-frame/index.html b/first_test/a-frame/index.html
new file mode 100644
index 0000000..cb70178
--- /dev/null
+++ b/first_test/a-frame/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WebXR Cube Example</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        #info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; }
+    </style>
+</head>
+<body>
+<div id="info">Hello, Three.js + WebXR!</div>
+
+<script type="module">
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
+import { XRButton } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/webxr/XRButton.js';
+
+// Scene
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xaaaaaa);
+
+// Camera
+const camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 100);
+camera.position.set(0, 1.6, 3);
+
+// Renderer
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.xr.enabled = true;
+document.body.appendChild(renderer.domElement);
+document.body.appendChild(XRButton.createButton(renderer));
+
+// Light
+const light = new THREE.HemisphereLight(0xffffff, 0x444444);
+light.position.set(0, 1, 0);
+scene.add(light);
+
+// Cube at fixed position on the ground
+const cube = new THREE.Mesh(
+    new THREE.BoxGeometry(0.5, 0.5, 0.5),
+    new THREE.MeshStandardMaterial({ color: 0xff0000 })
+);
+cube.position.set(0, 0.25, -1); // 0.25 because cube height / 2
+scene.add(cube);
+
+// Resize handler
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Animation loop
+function animate() {
+    renderer.setAnimationLoop(() => {
+        renderer.render(scene, camera);
+    });
+}
+
+animate();
+</script>
+</body>
+</html>
-- 
GitLab

