3dFileSystem - Portfolio

Interactive Preview

click & drag to orbit

Project Overview

3dFileSystem reimagines the filesystem browser as a Three.js-powered 3D environment. Instead of flat lists and tree views, directories become physical containers you navigate through with camera controls, and files are rendered as 3D objects whose size and color reflect their type and weight.

This was the first project in the Terminal/3D experimentation phase -- the spark that ignited an obsession with putting developer tools into spatial interfaces. The question was simple: what if ls was a place you could walk around in?

Key Features

3D Folder Containers

Directories render as translucent boxes you can fly into. Nested folders create a spatial hierarchy you physically traverse.

File Objects

Files appear as colored 3D shapes -- cubes, spheres, cylinders -- mapped by extension. Size scales with file size.

Camera Navigation

Orbit, zoom, and fly-through controls let you explore your project like a 3D game world. Double-click to enter directories.

Real-Time FS Reading

Watches the filesystem for changes and updates the 3D scene in real time. Create a file, see it appear.

Tech Stack

TypeScript Three.js Node.js fs API OrbitControls Raycasting Recursive Traversal WebGL

Architecture

// Core pipeline FileSystemReader -- recursive scan, watch mode --> SceneGraph | | fs.readdir() Three.js objects fs.watch() ├── FolderMesh (Box3) | ├── FileMesh (geometry by ext) v └── Labels (CSS2DRenderer) TreeModel -- layout algorithm --> PositionResolver --> Renderer | CameraController <-- orbit / fly-through RaycastPicker <-- click to inspect

Stats

425

KB Total Size

TS

Primary Language

MIT

License

#1

3D Phase Origin

Lessons Learned

01 Three.js scene management is a discipline. Disposing geometries, materials, and textures when folders close is critical. Leaking GPU memory crashes tabs fast. Every object needs a cleanup path.
02 Recursive filesystem traversal at scale is tricky. Naively walking node_modules spawns tens of thousands of objects. Depth limits, ignore patterns, and lazy loading turned out to be essential.
03 3D UX is a different world. Discoverability is near zero. Users cannot tell what is clickable, where to go, or how deep the tree goes. Spatial interfaces need far more signposting than 2D ones.
04 This project seeded everything that followed. The moment a filesystem felt like a place to explore, the question became: what else can live in 3D? Terminals, cards, modules -- the whole phase grew from this experiment.