main.js

// Simple WebXR Demo with Three.js
import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';

const statusEl = document.getElementById('status');

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);

// 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.setPixelRatio(window.devicePixelRatio);
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);

// Floor
const floorGeometry = new THREE.PlaneGeometry(10, 10);
const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x2d2d44 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Floating cube
const cubeGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x6c63ff });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, -1);
scene.add(cube);

// Floating sphere
const sphereGeometry = new THREE.SphereGeometry(0.3, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff6b6b });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(-1, 1.2, -1.5);
scene.add(sphere);

// Floating torus
const torusGeometry = new THREE.TorusGeometry(0.25, 0.1, 16, 32);
const torusMaterial = new THREE.MeshStandardMaterial({ color: 0x4ecdc4 });
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.set(1, 1.3, -1.2);
scene.add(torus);

// Check WebXR support and add VR button
if (navigator.xr) {
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
    if (supported) {
      statusEl.textContent = 'WebXR supported! Click "Enter VR" to start.';
      document.body.appendChild(VRButton.createButton(renderer));
    } else {
      statusEl.textContent = 'WebXR available but VR not supported on this device.';
    }
  });
} else {
  statusEl.textContent = 'WebXR not supported in this browser.';
}

// Handle window resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// Animation loop
function animate() {
  // Animate objects
  const time = performance.now() * 0.001;
  cube.rotation.x = time * 0.5;
  cube.rotation.y = time * 0.3;
  sphere.position.y = 1.2 + Math.sin(time) * 0.2;
  torus.rotation.x = time * 0.7;
  torus.rotation.y = time * 0.5;

  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);