https://github.com/justinmc/tiny-molecule

A small, developer-friendly 3D molecule viewer for the modern web
https://github.com/justinmc/tiny-molecule

3d mmcif molecule pdb visualizer

Last synced: about 2 months ago
JSON representation

A small, developer-friendly 3D molecule viewer for the modern web

• Host: GitHub
• URL: https://github.com/justinmc/tiny-molecule
• Owner: justinmc
• License: mit
• Created: 2017-12-16T20:33:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-27T08:13:41.000Z (over 6 years ago)
• Last Synced: 2024-04-26T02:41:11.956Z (8 months ago)
• Topics: 3d, mmcif, molecule, pdb, visualizer
• Language: JavaScript
• Homepage: https://justinmc.github.io/tiny-molecule/
• Size: 8.07 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tiny-molecule

A small, developer-friendly 3D molecule viewer for the modern web.

See a live exmaple at [https://justinmc.github.io/tiny-molecule/](https://justinmc.github.io/tiny-molecule/).

![demo](./demo.gif)

![demo for spheres](./demo_sphere.gif)

## Getting Started

`npm install --save tiny-molecule`

```

import tinyMolecule from 'tiny-molecule';

import pdbString from 'raw-loader!./3aid.pdb';

tinyMolecule(

  window.document.body, // the DOM element to render into

  dataString, // string of pdb or mmcif data

  {

    type: 'PDB', // or 'MMCIF' depending on what filetype dataString is

    representation: 'particle', // or 'sphere'

  }

);

```

## API

`tinyMolecule` exports a single function that takes a DOM element, a data string, and an options object.  The data string can be either the contents of a PDB or MMCIF file.  It will synchronously render a canvas into the given DOM element visualizing the given molecule.

See the example folder for a full working example that uses RCSB's API to fetch molecules by PDBID.  You can run it for yourself with `npm run example` (after an `npm install`).

### options

#### type {PDB|MMCIF}

Indicates the type of data that is being input into tinyMolecule.  Currently PDB and MMCIF files are supported.

#### representation {particle|sphere}

The fastest option is `particle`, which draws a 2d particle that looks like a sphere for each atom.  `sphere` draws a fully lit 3D sphere for each atom, but is slow for large structures.

## License

MIT.  See LICENSE file.