DesktopX is an immersive, browser-based 3D spatial desktop environment built entirely with standard web technologies (HTML, CSS, JS, and Three.js). It transforms your local file system, media, and web browsing into a fully interactive 3D room.
Say goodbye to flat windows. Walk around your files, pin videos to the walls, drop a 3D model on the floor, and throw a party with your local music library!
- Walk Mode: Roam freely around your desktop room using classic
WASDcontrols and mouse look. - Forge Grab: Seamlessly pick up, move, and rotate files, images, and 3D objects anywhere in the room. Snap them precisely to the walls or place them on the floor.
- Customizable Hub: Adjust your Field of View (FOV), movement speed, and aesthetic particle effects instantly from the settings menu.
- Load your local folders natively in the browser.
- Interactive 3D icons spawn on your walls for images, videos, audio, text, and code.
- Rich Preview Engine: Double-click to view media on a sleek 2D glassmorphic overlay, or pin it persistently in 3D space.
- 3D Model Support: Drag in
.glbor.fbxfiles and they instantly spawn as physical objects in the room!
- A massive, built-in 3D Movie Screen locked to your left wall.
- Load local video files directly onto the screen.
- Dim the lights with a single click using the Theatre Mode overlay for a cinematic viewing experience.
- Includes chunky, tactile 3D control buttons (Play, Pause, Stop, Fullscreen).
- A fully modeled 3D DJ Booth with spinning vinyl platters and a reactive audio waveform display.
- Load a folder of music and watch the room react to the beat!
- Party Mode: Activate dynamic floor grids, strobing neon lights, and adjust BPM effects on the fly.
- Enter an Ethereum wallet address (and Alchemy API key) to summon your digital collectibles into the 3D space.
- Turn your room into a personal gallery for your Web3 assets.
- Multi-Platform Support: Seamlessly browse and launch games from Steam, Xbox, GOG, and Epic Games all in one unified library.
- Smart Game Discovery: Automatically scans your game installation directories across all platforms.
- Provider Filters: Sort and filter by platform to quickly find the games you want to play.
- Search & Discovery: Find games by name with instant search functionality.
- One-Click Launch: Launch any game directly from your 3D desktop—no need to alt-tab to launchers.
- Game Metadata: Displays game names, installation paths, and provider information at a glance.
- Floating Web Panel: Spawn a floating 3D web panel to browse Wikipedia, check the weather, or write code without leaving the room.
- YouTube Support: Search and cast YouTube videos directly to your 3D movie screen. Choose from unlimited content on demand.
- Video Casting: Convert YouTube URLs or search results and display them on your massive 3D screen for an immersive viewing experience.
- Embedded YouTube Player: Full playback controls (play, pause, seek, volume) built into the 3D interface.
- YouTube Search Integration: Search YouTube directly from the Web Player interface using the YouTube Data API v3 (requires API key configuration).
- Multi-Format Support: Supports standard YouTube URLs, short URLs (youtu.be), video IDs, and YouTube Shorts.
- Have the perfect room setup? Save your layout!
- DesktopX securely saves your pinned images, videos, 3D models, and games into
IndexedDB. - Export your room as a
save.jsonfile to share with friends or back up your masterpiece.
- One-Click Room Customization: Choose from six stunning pre-designed color themes to instantly transform your environment.
- Available Presets:
- 🌌 Deep Space: A dark, cosmic palette with deep blues and purple accents
- 🌋 Lava Cave: Warm oranges and reds with glowing emissive surfaces
- 🌆 Neon City: Vibrant neon colors with high-contrast accent lighting
- ⬛ The Void: Pure darkness with minimalist subtle gradients
- 🌿 Aurora: Cool greens and cyans with ethereal atmosphere
- 🩸 Crimson: Deep reds and burgundy tones with atmospheric fog
- Switch presets on-the-fly from the editor—all room customizations update instantly.
- Visual Room Customization Tool: Access the powerful Room Editor to fine-tune every aspect of your 3D environment.
- Editor Features:
- ATMO Panel: Customize atmosphere settings including fog density, sky gradients, star fields, and ambient lighting
- LIGHTS Panel: Add and configure point lights with custom colors and intensities to create dynamic lighting rigs
- MATS Panel: Adjust material properties for floors, walls, grid lines, and accent colors; control room size and wall height
- ICONS Panel: Customize icon appearances and behaviors
- PORTALS Panel: Create and manage spatial portals for navigation
- Export/Import: Save your custom room configurations as
.dxroomfiles to share with friends or backup your designs - Real-Time Preview: See all changes reflected instantly in the 3D viewport
- Access the Editor: Open
dx-room-editor.htmlin your browser to begin designing
- Extend DesktopX with Community Mods: Create and share custom modifications to add new functionality and features.
- Mod Management:
- Import Mods: Drag-and-drop or browse to load custom
.dxmodfiles into your environment - Mod Panel: Access the dedicated mods sidebar to view all installed mods, view their IDs, and manage installations
- Activate/Deactivate: Toggle mods on and off without uninstalling them
- Mod Cards: Each mod displays its name, unique ID, and quick-action buttons for management
- Import Mods: Drag-and-drop or browse to load custom
- Create Your Own: Mods can add custom features, themes, utilities, and more to personalize your DesktopX experience
- Community Sharing: Share your creations with the DesktopX community via Discord
| Action | Key / Input |
|---|---|
| Move Around | W, A, S, D |
| Look Around | Mouse Movement (Walk Mode) |
| Toggle Modes | TAB (Switch between Walk Mode & Desktop UI) |
| Interact / Open | Double Left-Click |
| Forge Grab | Hold Left-Click on an object |
| Rotate Object | Q and E (while grabbing) |
| Move Closer/Further | Mouse Scroll Wheel (while grabbing) |
| Toggle Wall Snap | X (while grabbing) |
DesktopX is completely client-side and requires zero build steps!
-
Clone the repository:
git clone https://github.com/M2AF/DesktopX.git cd DesktopX/app -
Run it locally: Because DesktopX uses advanced browser APIs (like the File System Access API and Blob URLs for 3D models), it is best served over a local web server.
If you have Python installed, just run:
python -m http.server 3333
-
Open in Browser: Navigate to
http://localhost:3333in any modern web browser (Chrome/Edge recommended). -
Games Library Setup (Desktop/Electron only): The Electron desktop app automatically detects games from Steam, Xbox, GOG, and Epic Games installations on your system. No additional setup required—just open the Games Library from the start menu!
-
Ready for YouTube & Web Features? The local server (
localhost:3333) enables secure YouTube iframe proxying and enhanced web player features!
Built with ❤️ using:
- HTML5 & CSS3 (Vanilla, Glassmorphism, CSS Variables)
- Vanilla JavaScript (ES6+)
- Three.js (WebGL 3D Rendering)
- GLTFLoader & FBXLoader (3D Model parsing)
- Electron (Desktop app packaging with game library integration)
- YouTube Data API v3 (Search and metadata integration)
Check out the DESIGN.md for a deep dive into the architecture and spatial UX principles behind DesktopX.