WebXR 3D Interface

Immersive 3D interface with VR/AR support using Three.js and WebXR API. Experience cutting-edge web technologies in a fully interactive 3D environment.

Note: Simplified version of interface developed for decentralized OS prototype (2023-2024).

Note: GitHub Pages deployment is not currently configured. To view the project, please clone the repository and run it locally (see Quick Start section). =

Features

Core Functionality

• Desktop Navigation - WASD + mouse controls with pointer lock
• VR Support - Full WebXR VR with Oculus Quest, HTC Vive, and other headsets
• AR Support - Mobile AR experiences with hit-testing
• 60 FPS Performance - Optimized rendering with real-time stats
• Interactive Objects - Click/hover interactions with visual feedback
• GLTF Model Loading - Support for 3D model imports
• Responsive Design - Mobile and desktop optimized

Technical Features

• Advanced Materials - Phong, Lambert, and custom shaders
• Dynamic Lighting - Directional, ambient, and point lights with shadows
• Performance Monitoring - Real-time FPS and mode tracking
• Modular Architecture - Clean, maintainable codebase
• Cross-browser Support - WebXR polyfill for unsupported browsers

Controls

Platform	Movement	Interaction	Special
Desktop	WASD keys	Mouse click	Pointer lock for look
VR	Controller joysticks	Trigger press	Hand tracking (optional)
AR	Touch screen	Tap to place	Device motion

Technical Stack

Core Technologies

• Three.js r150 - 3D graphics library
• WebXR Device API - VR/AR browser API
• GLTF Loader - 3D model loading

Development Tools

• Node.js - Server runtime (≥14.0.0)
• HTTP Server - Static file serving with CORS
• ES6 Modules - Modern JavaScript architecture

Browser Support

• Chrome 79+ (Desktop VR)
• Firefox 85+ (WebXR support)
• Safari 14.1+ (iOS AR)
• Edge 79+ (WebXR enabled)
• Mobile browsers (AR support)

Quick Start

Prerequisites

• Node.js ≥ 14.0.0
• Modern web browser with WebXR support
• VR headset (optional)

Installation & Setup

1. Clone the repository

   git clone https://github.com/lucien-vallois/webxr-3d-interface.git
   cd webxr-3d-interface

2. Install dependencies (if any)

   npm install

3. Start the development server

   npm start
   # or
   node server.js

4. Open in browser

   http://localhost:8000
   

Alternative: Python Server

python -m http.server 8000

Project Structure

webxr-3d-interface/
├── index.html          # Main HTML file
├── app.js             # WebXR application logic
├── styles.css         # UI styling
├── server.js          # Development server
├── models/            # 3D model assets (GLTF)
├── assets/            # Project assets (images, etc.)
├── package.json       # Project configuration
├── README.md          # This file
├── LICENSE            # MIT license
└── .gitignore         # Git ignore rules

Architecture

Class Structure

WebXRInterface
├── Scene Management
├── Renderer Setup
├── Lighting System
├── Object Creation
├── Controls (Desktop/VR/AR)
├── Event Handling
├── Performance Monitoring
└── Model Loading

Key Components

• Scene Setup - THREE.Scene with optimized camera and renderer
• Lighting - Multi-light setup with shadow mapping
• Interactions - Raycasting for object selection
• XR Integration - WebXR session management
• Performance - Real-time stats and optimization

Development

Available Scripts

npm start      # Start development server
npm run dev    # Start development server (alias)
npm run serve  # Python HTTP server alternative

Building for Production

The project uses CDN-hosted dependencies for optimal loading. No build process required for basic deployment.

Testing VR/AR

• VR Testing: Use browser developer tools WebXR emulation
• AR Testing: Use mobile device or browser AR emulation
• Cross-browser: Test on multiple browsers for compatibility

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test across browsers
5. Submit a pull request

Performance Metrics

• Target FPS: 60 FPS on modern hardware
• Draw Calls: Optimized for < 100 objects
• Memory Usage: < 50MB for basic scene
• Load Time: < 2 seconds initial load
• Compatibility: 90%+ modern browser support

Security

• Server implements path traversal protection
• CORS headers configured for local development
• No external dependencies for core functionality
• Static file serving with security checks

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Three.js community for excellent documentation
• WebXR Device API specification authors
• Open source contributors to WebXR ecosystem

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

About the Author

Lucien Vallois

• GitHub: @lucien-vallois

---