1.0.3 • Published 6 years ago
react-pdb-view v1.0.3
React PDB Viewer
What is it?
A simple React component for displaying molecular orbital models from Protein Databank (.pdb) files. Uses three-full and the PDBLoader class from the Three.js examples to load and display models in a WebGL context. Take a look at the demo here.
How to use it
If you're in a hurry, the only required prop is url.
is used as such:
` <PDBView
url="https://files.rcsb.org/download/6C4G.pdb"
atomIncrement={0}
width="60vw"
height="60vh"
atomSize={200}
cameraDistance={100}
autoRotate={false}
/>`Props:
| Prop | Variable Type | description | Default Value |
|---|---|---|---|
url | string | URL of a valid .pdb file. | Required |
atomIncrement | number (integer) | Number of atoms to skip while loading. If atomIncrement is 3, the viewer will only load and display every 4th atom from the source file. Tweak for speed. | 0 |
atomSize | number (float) | Corresponds to the radius of each individual atom | 1 |
atomDistance | number (float) | Distance between atoms in the model | 0.5 |
width | string | Width of the PDB Viewer component. Accepts relative or absolute units. | 400px |
height | string | Height of the PDB Viewer component. Accepts relative or absolute units. | 400px |
antialiasing | boolean | Enable/disable antialiasing | false |
cameraDistance | number | The distance of the camera from the origin point | 150 |
autoRotate | boolean | Should the camera automatically rotate around the molecule? | true |
pan | boolean | Allow panning when right-click dragging? | true |
loader | JSX element | Element to display while loading, e.g. a CSS spinner. | null |
fallback | JSX element | Element displayed in case the component fails to load or errors during operation | null |
Todos:
- Add additional shader options
- Add keyboard controls for rotation/zooming to OrbitControls
- Accessibility audit (probably add a colorblind mode too)
- Caching .pdb files
- Ribbon diagrams (secondary/tertiary structure)