An interactive 3D encyclopedia that visualizes human knowledge as a network of interconnected nodes on a rotating globe. Built with Three.js and powered by a rich dataset spanning technology, science, mathematics, philosophy, history, art, and more.
3D Visualization
- Animated globe with glowing atmosphere, nebula shader, and starfield backdrop
- Color-coded knowledge nodes grouped by category (Technology, Science, Mathematics, Philosophy, History, Arts, Society, Space)
- Animated connection lines between related topics that pulse and shimmer
- Post-processing bloom effects via Three.js
UnrealBloomPass
Two View Modes
- Globe View — topics mapped as nodes on a rotating sphere with auto-rotation
- Neural View — nodes scatter into a free-floating 3D network layout, mimicking a neural map
Search
- Live text search with a dropdown of matching topics and their categories
- Voice search via the Web Speech API (microphone button in the header)
Topic Panel
- Click any node to open a side panel with the topic's description, founding year, category, and a list of related concepts
- Click a related concept to jump directly to that node
- Keyboard shortcut:
Escapeto close the panel
Hand Tracking (Experimental)
- Webcam-based gesture control using MediaPipe Hands (loaded from CDN)
- Move hand to rotate the globe
- Pinch (thumb + index finger) to zoom in/out
- Open palm to select a node at the hand's position
Category Legend
- Clickable legend on the left that filters visible nodes by category
Keyboard Shortcuts
| Key | Action |
|---|---|
Escape |
Close info panel / dismiss search |
→ Arrow |
Navigate to next related topic |
- Node.js v18 or higher
- npm
npm installnpm run devOpens a local dev server (default: http://localhost:5173).
npm run buildOutput goes to the dist/ folder, ready for static hosting.
| Tool | Purpose |
|---|---|
Three.js ^0.160 |
3D rendering |
Three.js EffectComposer + UnrealBloomPass |
Post-processing bloom |
Three.js OrbitControls |
Mouse/touch orbit |
| MediaPipe Hands | Webcam gesture control (CDN) |
| Web Speech API | Voice search |
| GSAP | Smooth node transition animations |
Vite ^5 |
Dev server and bundler |
| Space Grotesk / Inter | UI fonts (Google Fonts) |
The globe ships with ~80+ pre-loaded topics across eight categories:
- Technology — AI, Machine Learning, Quantum Computing, Blockchain, Cybersecurity, and more
- Science — Physics, Biology, Neuroscience, Genetics, Chemistry, Cosmology, and more
- Mathematics — Statistics, Probability, Game Theory, Topology, Number Theory, and more
- Philosophy — Ethics, Consciousness, Logic, Epistemology, and more
- History — Ancient Rome, Renaissance, Industrial Revolution, World Wars, and more
- Arts — Music Theory, Architecture, Photography, Cinema, Literature, and more
- Society — Democracy, Economics, Psychology, Linguistics, and more
- Space — Mars Exploration, Dark Matter, Exoplanets, Gravitational Waves, and more
Topics are defined in the knowledgeData object in main.js. Each entry includes a description, category, founding/discovery year, and an array of related topics that drive the connection graph.
knowledge-globe/
├── index.html # App shell, CSS, and inline fallback script
├── main.js # Three.js scene, knowledge data, and all interaction logic
├── package.json
└── package-lock.json
Open main.js and add a new entry to the knowledgeData object:
"Your Topic": {
category: "Science", // Must match an existing category key
description: "A short description shown in the info panel.",
related: ["Physics", "Mathematics"], // Links drawn between these nodes
year: 1905 // Year of origin/discovery (negative = BCE)
},The node will automatically be placed on the globe, colored to its category, and connected to its related topics.
MIT