Initial VR Setup

435bd854 · Stoll · d1607b82 · 435bd854
Commit 435bd854 authored Oct 11, 2025 by Stoll
--- a/first_test/a-frame/index.html
+++ b/first_test/a-frame/index.html
+<!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>