text: user10761: 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?
  
  user12054: As others said, there already exist javascript libraries to visualize a protein. The most complete and recent one would probably be Mol*, which is what is used on RCSB PDB website. Mol* actually works using NGL, a WebGL engine. But probably the oldest library used on RCSB PDB to visualize proteins would be JSMol. 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)
  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 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 and Jane 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, VMD and ChimeraX.
  
  user10049: 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
  
  user11856: JSmol 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 and Pymol. There's even web-interfaces that let you upload a PDB file and they display it for you like Jena3D Viewer.
  
  user6322: If you want to share a PDB file, you could try Michelanglo. 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
  (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.
  
original_text: 10761: <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>
   12054: <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>
   10049: <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.stack.imgur.com/2bmRT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2bmRT.png" alt="enter image description here" /></a></p>
  <p>Didn't manage how to show the dimer though</p>
   11856: <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>
   6322: <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>
  