https://github.com/ldrfy/atoms_viewer
Web-based 3D molecular/atomic structure viewer. trajectory animation playback, high-quality image export, and video recording.
https://github.com/ldrfy/atoms_viewer
lammps lammps-data pdb visualization xyz
Last synced: 8 days ago
JSON representation
Web-based 3D molecular/atomic structure viewer. trajectory animation playback, high-quality image export, and video recording.
- Host: GitHub
- URL: https://github.com/ldrfy/atoms_viewer
- Owner: ldrfy
- Created: 2025-12-20T02:22:19.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-05-19T12:51:40.000Z (15 days ago)
- Last Synced: 2026-05-19T15:45:55.112Z (15 days ago)
- Topics: lammps, lammps-data, pdb, visualization, xyz
- Language: TypeScript
- Homepage: https://ldrfy.github.io/atoms_viewer/
- Size: 1.62 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
[](LICENSE)
LDR Atoms Viewer
[](readme/README_ZH.md) [](README.md)
## 🚀 Get Started
- Visit [Web: Ldr-Atoms-Viewer](https://ldrfy.github.io/atoms_viewer/)
- Upload your own model file (formats listed in [Multi-Format Support](#multi-format-support))
## Overview
LDR Atoms Viewer is a web-based atomic structure visualization tool. Upload atomic coordinate files to generate 3D structures, then fine-tune the display (rotation, atom size, atom color, bond thickness, etc.). It supports one-click export of transparent or colored, auto-cropped high-resolution PNGs, and can record animations.
Built with a modern front-end stack, the experience is smooth and performance-focused.
## Features
### Multi-Layer
Drag in multiple coordinate files to display multiple structures at once, and show or hide layers as needed.
### Video Recording
Models can auto-rotate around different symmetry axes. Record the rotation process or motion trajectory, with customizable recording regions and background colors.
### File Export
- Image export: transparent or colored background, adjustable resolution, auto-cropped bounding box
- Format conversion: export to formats such as `xyz` from supported inputs
- Project package: bundle models plus all layer settings for sharing and restoring
- Settings export: export layers, background, view, and camera distance in one file
### Smooth Performance & Multi-Device Support
Supports loading hundreds of thousands of atoms, and works on mobile and desktop.
### Multi-Format Support
Supported formats: `lammps-data`, `lammps-dump`, `pdb`, `mol`, `sdf`, `xyz`. Both `xyz` and `lammps-dump` support trajectory playback.
Multiple model files can also be packaged into a single `zip` and dragged into the viewer for batch loading.
### Rich Customization
Multi-language, dark/light themes, precise rotation control, atom size, atom color, bond thickness, visibility toggles, axes display, and more.
## 🏗️ Development Testing
### Prerequisites
- node25
- pnpm10
### Install & Run
```bash
pnpm install
pnpm dev
```
### Build
```bash
pnpm build
pnpm preview
```
## Reference & Credits
This project is inspired by the following online viewer in interaction design and goals, but is more modern in implementation, with better performance and smoother interaction:
[openmx-viewer](https://www.openmx-square.org/viewer/index.html)