A VS Code sidebar extension that renders your workspace as a real-time, 3D volumetric layout. Folder depth and file byte size are mapped into an interactive WebGL scene, lowering the cognitive load of navigating large repositories.
Features
- Directory parsing — recursively maps the workspace up to five layers deep.
- Volumetric scaling — file size drives each block's volume.
- Live sync — filesystem additions, deletions, and edits re-index the scene.
- Click to open — clicking a file box opens it in the editor.
- Theme aware — scene colours follow the active VS Code theme.
Usage
Open the 3D Explorer view from the activity bar. Orbit with click-drag, zoom with the scroll wheel, hover a box to highlight it, and click to open the file.
Development
npm install
npm run build # dev build
npm run watch # rebuild on change
npm run typecheck # type-check both targets
Press F5 in VS Code to launch the Extension Development Host.
Packaging
npm run package # produces spatial-3d-file-explorer.vsix
Architecture
The extension host (src/) scans the filesystem with VS Code's
FileSystemWatcher, builds a positioned FileNode[] layout, and ships it over
the postMessage IPC bridge to a sandboxed webview (webview/) that renders
the scene with React Three Fiber and Three.js.