<p><a href="http://jmol.sourceforge.net/" rel="nofollow noreferrer">JSmol</a> sounds like what you want - it'll let you display 3D structures from PDB files onto webpages using JavaScript. If you just want to view the structure rather than display them on webpages, there's many programs that exist already like <a href="https://spdbv.vital-it.ch/" rel="nofollow noreferrer">Swiss-PdbViewer</a> and <a href="https://pymol.org/2/" rel="nofollow noreferrer">Pymol</a>. There's even web-interfaces that let you upload a PDB file and they display it for you like <a href="http://jena3d.leibniz-fli.de/" rel="nofollow noreferrer">Jena3D Viewer</a>.</p>

CC BY-SA 4.0
2021-04-03T10:42:08.107Z
2021-04-03T10:42:08.107Z
Bioinfomrat
<p>If you want to share a PDB file, you could try <a href="https://michelanglo.sgc.ox.ac.uk/" rel="nofollow noreferrer">Michelanglo</a>. It allows you to upload a PDB file (among other things) edit a description panel (which can feature special links that control the protein view and representation) and share the link with whomever —without needing any installations on either side.
Here is the page of shared protein: <a href="https://michelanglo.sgc.ox.ac.uk/gallery" rel="nofollow noreferrer">gallery</a>
(disclaimer: I am the admin).</p>
<p>If you are interested in implementing a molecular viewer on your site, I'd suggest NGL. The PDB website uses NGL too, but is recently switching to MOL* (&quot;molstar&quot;), which is a new development, so less documented, but fixes some corner cases and is marginally faster and is a collaboration with a PDBe. NGL does not depend on any technology that will be depracated mind you, so it actually is a very solid choice for a JS molecular viewer.</p>
<p>The PDB format is a working format, not a deposition format, as is mmCIF. As a result NGL and Mol* have some issues when it comes to PDB files, such as lack of secondary structure records (HELIX/SHEET) results in anaemic sheets, fancier linkages (LINK/SSBOND reconds) are not handled only CONECT records.</p>

CC BY-SA 4.0
2021-04-08T11:42:44.633Z
disclaimer: I am the admin ..... I though you were the creator (!!) of Michelangelo ?
pippo1980
CC BY-SA 4.0
2021-04-08T11:53:01.977Z
@pippo1980 Ops. Yes, I am: I was trying to be subtle, but at the same time abiding by the transparency rules/guidelines/custom of SO.
Matteo Ferla
CC BY-SA 4.0
2021-04-08T11:54:39.263Z
I had a look at Michelanglo and as a third  party I can say that it rocks !!!! Very nice tool indeed
pippo1980
CC BY-SA 4.0
2021-04-08T12:01:00.403Z
Thank you —that is always nice to hear!
Matteo Ferla
CC BY-SA 4.0
2021-04-04T13:28:54.860Z
2021-04-08T11:55:23.873Z
2021-04-08T11:55:23.873Z
Matteo Ferla
<p>As others said, there already exist javascript libraries to visualize a protein. The most complete and recent one would probably be <a href="https://molstar.org/" rel="nofollow noreferrer">Mol*</a>, which is what is used on RCSB PDB website. Mol* actually works using <a href="https://nglviewer.org/#ngl" rel="nofollow noreferrer">NGL</a>, a WebGL engine. But probably the oldest library used on RCSB PDB to visualize proteins would be <a href="https://jsmol.com/" rel="nofollow noreferrer">JSMol</a>. You can actually switch between these viewers on RCSB PDB 3D view using &quot;Select a different viewer&quot; in the bottom right (<a href="https://www.rcsb.org/3d-view/1ubq" rel="nofollow noreferrer">try it out on 1UBQ</a>)</p>
<p>Now to address the first exercise: there are several things going on after getting the atom coordinates. A PDB file may or may not contain a CONECT part, where bonds between atoms will be clearly stated (contrarily to a CIF file which I believe always contain the bonds). Henceforth these packages may or may not have to guess atom bonds. Given that a PDB file also contains the residues of each atom it's fairly easy to do, less so when dealing with small molecules.</p>
<p>However what you see most of the time is a cartoon representation of proteins, where each secondary structure is represented differently. The library will compute the <a href="https://en.wikipedia.org/wiki/Protein_secondary_structure" rel="nofollow noreferrer">secondary structure</a> of each residue based on the dihedral angles of the backbone, then represent them. As of why they look like this, check the work of <a href="http://pdb101.rcsb.org/sci-art/geis-archive/irving-geis" rel="nofollow noreferrer">Irving Geis</a> and <a href="https://en.wikipedia.org/wiki/Jane_S._Richardson" rel="nofollow noreferrer">Jane Richardson</a>.</p>
<p>So if you want to have a website showing protein structures I would strongly advise to use an already existing library, although the exercise of coding your own can always be interesting. If you want to visualize structures on your own computer without using a web interface I can only recommend <a href="https://pymol.org/2/" rel="nofollow noreferrer">PyMOL</a>, <a href="https://www.ks.uiuc.edu/Research/vmd/" rel="nofollow noreferrer">VMD</a> and <a href="https://www.cgl.ucsf.edu/chimerax/" rel="nofollow noreferrer">ChimeraX</a>.</p>

CC BY-SA 4.0
2021-04-28T11:24:33.637Z
2021-04-29T08:34:20.220Z
2021-04-29T08:34:20.220Z
O.Laprevote
<p>I am not good as you are and needed to use a parser for the pdb file</p>
<p>see <a href="https://mmcif.wwpdb.org/docs/software-resources.html" rel="nofollow noreferrer">https://mmcif.wwpdb.org/docs/software-resources.html</a>:</p>
<pre><code>#!/usr/bin/env python3
# -*- coding: utf-8 -*-
&quot;&quot;&quot;
Created on Thu Nov  7 17:40:03 2020

@author: Pietro

&quot;&quot;&quot;



import matplotlib.pyplot as plt  #matplotlib

from pdbx.reader.PdbxReader import PdbxReader #PDB file parser

import numpy as np #numpy


openz = open('./1msc.cif')

print('opened')

# Initialize a PdbxReader object with the input file handle

pRd = PdbxReader(openz)

# Initialize a list to be propagated with DataContainer (and/or DefinitionContainer) objects (of the DataContainer class, which inherits from ContainerBase) parsed from the CIF file, where data blocks map to DataContainer objects

data = []

print(data)

# Call the read(self, containerList) method with your list

pRd.read(data)


print ('data ###################################################################\n' , data)
       
print('data lenght' , len(data))

# Your list is now propagated with one or more DataContainer objects, which represent data blocks. To get the first data block, just use list notation:

block = data[0]

print(' block ##############################################################\n',block)
      

pippo=block.getObjNameList()

print(pippo)

# To retrieve a category object, use the getObj(self, name) method

atomsite = block.getObj(&quot;atom_site&quot;)




print('atom site : ', atomsite)


atom = atomsite.getValue(&quot;group_PDB&quot;,0)



# print('atom sites id :', atom)


atomlist=[]

i=0
while True:
    atom =  atomsite.getValue(&quot;group_PDB&quot;,i)
    atomid = atomsite.getValue('label_atom_id',i)
    if atom =='ATOM':
        # print(atomsite.getValue(&quot;group_PDB&quot;,i))
        if atomid == 'CA':                         #select only carbon alpha (CA) to work with

            atomlist.append([float(atomsite.getValue('Cartn_x',i)),\
                           float(atomsite.getValue('Cartn_y',i)),float(atomsite.getValue('Cartn_z',i))])

    
        i +=1
    else:
        print('loop ends')
        False
        break



atomlist=np.array(atomlist)

print('end')

print(atomlist)

print('lunghezza : ', len(atomlist))




fig = plt.figure()
ax = plt.axes(projection=&quot;3d&quot;)



for p in atomlist:       #print CA as dots
    ax.scatter3D(p[0], p[1], p[2])
    print(p)

    
for i in range(0,len(atomlist)-1):   #connect with a line CA n with n+1
    x,y,z = [atomlist[i+1][0],atomlist[i][0]],[atomlist[i+1][1],atomlist[i][1]],[atomlist[i+1][2],atomlist[i][2]]
    ax.plot(x,y,z, color='red')


plt.show()

</code></pre>
<p>my input is <a href="https://files.rcsb.org/download/1MSC.cif" rel="nofollow noreferrer">https://files.rcsb.org/download/1MSC.cif</a></p>
<p>Result is just the CAs (carbon alpha) shown as dots and connected to form the main chain:</p>
<p><a href="https://i.sstatic.net/2bmRT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/2bmRT.png" alt="enter image description here" /></a></p>
<p>Didn't manage how to show the dimer though</p>

CC BY-SA 4.0
2021-04-29T11:17:42.027Z
2021-04-29T11:32:29.343Z
2021-04-29T11:32:29.343Z
pippo1980
<p>I am trying to create a 3d structure from 3d coordinated from a pdb file.</p>
<p>I am trying to draw 3d coordinates from pdb file &quot;ATOM 1 N VAL A 14 22.692 -27.591 -39.402&quot; and using webgl javascript.</p>
<p>I've managed to get the 3d coordinates from a pdb file but i don't know the exact logic that is used to create 3d structure from the coordinates found in pdb file.</p>
<p>I tried those coordinates and managed to create a cloud of 3d points but it is not anywhere near the structure that is found on pdb site.</p>
<p>So wondering how the structure is created on the pdb website?</p>

CC BY-SA 4.0
2021-04-03T07:29:00.653Z
can you please add the code you tried so far?
Mr_Z
<pdb><3d-structure>
How to draw a 3d structure using 3d coordinates from pdb file?
# How to draw a 3d structure using 3d coordinates from pdb file?

(Asked by: username_0 on 2021-04-02)

I am trying to create a 3d structure from 3d coordinated from a pdb file.

I am trying to draw 3d coordinates from pdb file "ATOM 1 N VAL A 14 22.692 -27.591 -39.402" and using webgl javascript.

I've managed to get the 3d coordinates from a pdb file but i don't know the exact logic that is used to create 3d structure from the coordinates found in pdb file.

I tried those coordinates and managed to create a cloud of 3d points but it is not anywhere near the structure that is found on pdb site.

So wondering how the structure is created on the pdb website?

**Tags:** pdb, 3d-structure
> **Comments:**
> **username_1**: can you please add the code you tried so far?  

---

## 4 answers

### Answer by username_2 on 2021-04-03. Score: 4

[JSmol](http://jmol.sourceforge.net/) sounds like what you want - it'll let you display 3D structures from PDB files onto webpages using JavaScript. If you just want to view the structure rather than display them on webpages, there's many programs that exist already like [Swiss-PdbViewer](https://spdbv.vital-it.ch/) and [Pymol](https://pymol.org/2/). There's even web-interfaces that let you upload a PDB file and they display it for you like [Jena3D Viewer](http://jena3d.leibniz-fli.de/).


---

### Answer by username_3 on 2021-04-04. Score: 4

If you want to share a PDB file, you could try [Michelanglo](https://michelanglo.sgc.ox.ac.uk/). It allows you to upload a PDB file (among other things) edit a description panel (which can feature special links that control the protein view and representation) and share the link with whomever —without needing any installations on either side.
Here is the page of shared protein: [gallery](https://michelanglo.sgc.ox.ac.uk/gallery)
(disclaimer: I am the admin).

If you are interested in implementing a molecular viewer on your site, I'd suggest NGL. The PDB website uses NGL too, but is recently switching to MOL\* ("molstar"), which is a new development, so less documented, but fixes some corner cases and is marginally faster and is a collaboration with a PDBe. NGL does not depend on any technology that will be depracated mind you, so it actually is a very solid choice for a JS molecular viewer.

The PDB format is a working format, not a deposition format, as is mmCIF. As a result NGL and Mol\* have some issues when it comes to PDB files, such as lack of secondary structure records (HELIX/SHEET) results in anaemic sheets, fancier linkages (LINK/SSBOND reconds) are not handled only CONECT records.

> **Comments:**
> **username_4**: disclaimer: I am the admin ..... I though you were the creator (!!) of Michelangelo ?  
> **username_3**: @pippo1980 Ops. Yes, I am: I was trying to be subtle, but at the same time abiding by the transparency rules/guidelines/custom of SO.  
> **username_4**: I had a look at Michelanglo and as a third  party I can say that it rocks !!!! Very nice tool indeed  
> **username_3**: Thank you —that is always nice to hear!  

---

### Answer by username_5 on 2021-04-28. Score: 2

As others said, there already exist javascript libraries to visualize a protein. The most complete and recent one would probably be [Mol\*](https://molstar.org/), which is what is used on RCSB PDB website. Mol\* actually works using [NGL](https://nglviewer.org/#ngl), a WebGL engine. But probably the oldest library used on RCSB PDB to visualize proteins would be [JSMol](https://jsmol.com/). You can actually switch between these viewers on RCSB PDB 3D view using "Select a different viewer" in the bottom right ([try it out on 1UBQ](https://www.rcsb.org/3d-view/1ubq))

Now to address the first exercise: there are several things going on after getting the atom coordinates. A PDB file may or may not contain a CONECT part, where bonds between atoms will be clearly stated (contrarily to a CIF file which I believe always contain the bonds). Henceforth these packages may or may not have to guess atom bonds. Given that a PDB file also contains the residues of each atom it's fairly easy to do, less so when dealing with small molecules.

However what you see most of the time is a cartoon representation of proteins, where each secondary structure is represented differently. The library will compute the [secondary structure](https://en.wikipedia.org/wiki/Protein_secondary_structure) of each residue based on the dihedral angles of the backbone, then represent them. As of why they look like this, check the work of [Irving Geis](http://pdb101.rcsb.org/sci-art/geis-archive/irving-geis) and [Jane Richardson](https://en.wikipedia.org/wiki/Jane_S._Richardson).

So if you want to have a website showing protein structures I would strongly advise to use an already existing library, although the exercise of coding your own can always be interesting. If you want to visualize structures on your own computer without using a web interface I can only recommend [PyMOL](https://pymol.org/2/), [VMD](https://www.ks.uiuc.edu/Research/vmd/) and [ChimeraX](https://www.cgl.ucsf.edu/chimerax/).


---

### Answer by username_4 on 2021-04-29. Score: 2

I am not good as you are and needed to use a parser for the pdb file
see https://mmcif.wwpdb.org/docs/software-resources.html:
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Created on Thu Nov  7 17:40:03 2020

@author: Pietro

"""



import matplotlib.pyplot as plt  #matplotlib

from pdbx.reader.PdbxReader import PdbxReader #PDB file parser

import numpy as np #numpy


openz = open('./1msc.cif')

print('opened')

# Initialize a PdbxReader object with the input file handle

pRd = PdbxReader(openz)

# Initialize a list to be propagated with DataContainer (and/or DefinitionContainer) objects (of the DataContainer class, which inherits from ContainerBase) parsed from the CIF file, where data blocks map to DataContainer objects

data = []

print(data)

# Call the read(self, containerList) method with your list

pRd.read(data)


print ('data ###################################################################\n' , data)
       
print('data lenght' , len(data))

# Your list is now propagated with one or more DataContainer objects, which represent data blocks. To get the first data block, just use list notation:

block = data[0]

print(' block ##############################################################\n',block)
      

pippo=block.getObjNameList()

print(pippo)

# To retrieve a category object, use the getObj(self, name) method

atomsite = block.getObj("atom_site")




print('atom site : ', atomsite)


atom = atomsite.getValue("group_PDB",0)



# print('atom sites id :', atom)


atomlist=[]

i=0
while True:
    atom =  atomsite.getValue("group_PDB",i)
    atomid = atomsite.getValue('label_atom_id',i)
    if atom =='ATOM':
        # print(atomsite.getValue("group_PDB",i))
        if atomid == 'CA':                         #select only carbon alpha (CA) to work with

            atomlist.append([float(atomsite.getValue('Cartn_x',i)),\
                           float(atomsite.getValue('Cartn_y',i)),float(atomsite.getValue('Cartn_z',i))])

    
        i +=1
    else:
        print('loop ends')
        False
        break



atomlist=np.array(atomlist)

print('end')

print(atomlist)

print('lunghezza : ', len(atomlist))




fig = plt.figure()
ax = plt.axes(projection="3d")



for p in atomlist:       #print CA as dots
    ax.scatter3D(p[0], p[1], p[2])
    print(p)

    
for i in range(0,len(atomlist)-1):   #connect with a line CA n with n+1
    x,y,z = [atomlist[i+1][0],atomlist[i][0]],[atomlist[i+1][1],atomlist[i][1]],[atomlist[i+1][2],atomlist[i][2]]
    ax.plot(x,y,z, color='red')


plt.show()


my input is https://files.rcsb.org/download/1MSC.cif
Result is just the CAs (carbon alpha) shown as dots and connected to form the main chain:

Didn't manage how to show the dimer though


---

