Interactive 3D electron density viewer for VASP CHGCAR/ELFCAR files and Materials Project data.
Periodic tiling with slice sweep:
- Drag-and-drop CHGCAR, ELFCAR, and
.npyfiles - Materials Project integration: load
.json.gzcharge densities from the MP S3 bucket - Isosurface rendering with adjustable iso-level and opacity
- Crystal structure overlay: atoms, abc lattice cell, XYZ bounding box, world axes
- 2D slice viewer along any axis
- Keyboard navigation: orbit, pan, zoom, roll; snap to lattice or world axes
- Discrete 90° orbit mode for presentation-quality views
- Comparison view: load multiple files side-by-side
- OPFS caching: browser-local cache for large charge density files
- Deep-linking: full camera, iso-level, and material state in URL params
- Screenshotting:
scrns-based automation for og:image and GIF recordings
pnpm install
pnpm dev # → http://localhost:3150Or load a Materials Project example directly: elvis.oa.dev/?m=mp-1000020
| Param | Description | Example |
|---|---|---|
m |
Materials Project ID | mp-1000020 |
iso |
Iso-level | 571.4 |
op |
Opacity | 0.6 |
c |
Camera: θ° φ° zoom roll° | 178.8 31.3 11.5 |
ct |
Camera target offset (pan): dx dy dz | 0.426 -0.56 -0.004 |
a |
Animation duration (seconds) | 2.0 |
lw |
Line width multiplier | 1.5 |
xb |
Show XYZ bounding box | (flag) |
xa |
Show XYZ axes | (flag) |
do |
Discrete 90° orbit | (flag) |
si |
Slice index | 48 |
sl |
Show slice plane | (flag) |
ss |
Slice sweep speed (slices/s) | 20 |
tp |
Tile padding (0–1) | 0.5 |
nf |
Disable tile fade | (flag) |
Automated via scrns:
pnpm scrns # all screenshots + screencasts
pnpm scrns -i og-image # just the og:imageReact · Three.js / React Three Fiber · Vite · TypeScript · use-kbd · use-prms
