https://github.com/zackbrooks84/virtual
https://github.com/zackbrooks84/virtual
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zackbrooks84/virtual
- Owner: zackbrooks84
- Created: 2025-11-11T01:21:29.000Z (7 months ago)
- Default Branch: claude/continue-work-01SWJjG4woJQquvNgVtM598f
- Last Pushed: 2025-11-20T04:00:43.000Z (7 months ago)
- Last Synced: 2025-11-20T04:08:59.114Z (7 months ago)
- Language: JavaScript
- Size: 77.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🖖 Holodeck VR Experience
A Star Trek-inspired virtual reality world built with WebXR and Three.js. Experience the magic of a holodeck with immersive 3D environments you can explore in VR or on your desktop.
## Features
### Core Holodeck Experience
- **Authentic Holodeck Grid**: Classic Star Trek holodeck wireframe environment with glowing cyan grid lines
- **Ambient Particles**: Floating holographic particles that give the space an otherworldly feel
- **Multiple Simulated Environments**: Switch between 5 different holodeck programs
### Environments (Programs)
1. **Forest** 🌲 - A peaceful woodland with trees and natural ground
2. **Space Station** 🚀 - Experience the void of space with stars and a distant planet
3. **Ocean Beach** 🏖️ - Relaxing beach scene with water and sand
4. **Ancient Temple** 🏛️ - Mysterious temple with columns and an altar
5. **Futuristic City** 🌆 - Cyberpunk-style cityscape with metallic buildings
### Controls
#### Desktop Mode
- **Click screen**: Lock pointer to enable controls
- **Mouse**: Look around (while pointer is locked)
- **W/A/S/D**: Move forward/left/backward/right
- **1-5**: Load holodeck programs (Forest, Space, Beach, Temple, City)
- **0 or ESC**: Return to empty grid room
#### VR Mode
- **Trigger**: Teleport/Select
- **Grip**: Grab objects
- **Thumbstick**: Move around
- **Head Movement**: Look naturally around the environment
## Getting Started
### Quick Start (No Installation Required)
1. Simply open `index.html` in a web browser
2. You'll start in the empty holodeck grid room
3. **Click the screen** to lock your pointer, then use WASD to move and mouse to look around
4. Press **1-5** to load different holodeck programs
5. Press **0 or ESC** to return to the empty grid room
6. Or click "ENTER VR" for VR mode
### For VR Experience
**Requirements:**
- VR headset (Meta Quest, Valve Index, HTC Vive, etc.)
- WebXR-compatible browser:
- **Meta Quest**: Built-in browser
- **Desktop**: Chrome, Edge, or Firefox with WebXR support
**Steps:**
1. Open `index.html` in your VR headset's browser or on desktop
2. Click the "ENTER VR" button
3. Put on your headset and start exploring!
### Local Development Server
For best results, serve the files through a local web server:
```bash
# Using Python 3
python -m http.server 8000
# Using Node.js (http-server)
npx http-server -p 8000
# Using PHP
php -S localhost:8000
```
Then visit: `http://localhost:8000`
## Technology Stack
- **Three.js** - 3D graphics library
- **WebXR** - Virtual reality API for the web
- **Vanilla JavaScript** - No framework dependencies
- **ES6 Modules** - Modern JavaScript module system
## Browser Compatibility
| Browser | Desktop Support | VR Support |
|---------|----------------|------------|
| Chrome | ✅ | ✅ |
| Edge | ✅ | ✅ |
| Firefox | ✅ | ⚠️ (Limited) |
| Safari | ⚠️ (No WebXR) | ❌ |
| Meta Quest Browser | N/A | ✅ |
## Architecture
### Main Components
- `index.html` - Entry point with UI and WebXR setup
- `holodeck.js` - Main application logic
- `Holodeck` class - Core VR experience manager
- Scene management - Dynamic environment loading
- Controller handling - VR controller and desktop input
- Animation loop - Render and update cycle
### Key Features Implementation
**Holodeck Grid Environment:**
```javascript
- Floor and ceiling grids using THREE.GridHelper
- Wireframe walls with cyan accent lighting
- Floating holographic particles
```
**Scene System:**
```javascript
- Modular scene creation functions
- Dynamic loading/unloading
- Easy to add new environments
```
**VR Controller Support:**
```javascript
- Dual controller tracking
- Visual feedback rays
- Select and grip interactions
```
## Customization
### Adding New Scenes
Add a new scene to the `createScenes()` method in `holodeck.js`:
```javascript
this.scenes.push(() => {
const group = new THREE.Group();
// Add your 3D objects here
const myObject = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
group.add(myObject);
return group;
});
```
### Customizing the Grid
Modify the `createHolodeckGrid()` method to change:
- Grid size and divisions
- Grid colors
- Particle count and behavior
- Wall opacity and patterns
## Performance Optimization
- Shadows are enabled but can be disabled for better performance
- Particle count can be reduced in `createHolodeckGrid()`
- Scene complexity can be adjusted per environment
- Automatic LOD (Level of Detail) can be added for complex models
## Troubleshooting
**VR Button Not Appearing:**
- Ensure you're using HTTPS or localhost
- Check if your browser supports WebXR
- Verify VR headset is connected
**Poor Performance:**
- Reduce particle count
- Disable shadows in renderer setup
- Lower grid divisions
- Simplify scene geometry
**Desktop Controls Not Working:**
- Click on the canvas to enable pointer lock
- Check browser console for errors
- Ensure JavaScript is enabled
## Future Enhancements
Potential features to add:
- [ ] Voice commands for program selection
- [ ] Object interaction and physics
- [ ] Multiplayer support
- [ ] Save/load custom programs
- [ ] Advanced teleportation system
- [ ] Hand tracking support
- [ ] Spatial audio
- [ ] Custom model loading (GLTF/FBX)
- [ ] Program randomization
- [ ] Time of day controls
## Credits
Inspired by Star Trek's iconic holodeck technology. Built as a demonstration of modern WebXR capabilities.
## License
MIT License - Feel free to use and modify for your own projects!
---
**"Computer, run program holodeck-1"** 🖖