


The addModel method has two arguments: (1) a string containing the contents of the crystal structure file and (2) a string identifying what type of file it is. Now’s the time where we add the structure. The third line reads these settings and creates a viewer, our molecular canvas, per say. The first and second lines of the function link to the container and set the background color to white, respectively. For example, we set the height to be 400 px and the width to be 60% of the that.įinally, we get to the meat of the script where we pass the structure and define how we would like it plotted. The div tag defines a container that will hold the crystal structure and the style tag defines its size. 3Dmol.js contains different functions for reading, configuring, and plotting molecules and crystal structures. Between the head tags is a script tag that contains the path to a minimal implementation of 3Dmol.js, which can be found here. Everything is sandwiched between the html tags. Woah, nelly! It looks like a lot but it really isn’t. Instead of doing this by hand, here’s how you can do it on the command line: 3Dmol.js, requires all line breaks to be written as \n. It turns out that the JavaScript software that we will use, i.e. For more information on this system and the ab initio grand canonical Monte Carlo method I used to find it, check out my recent paper in the Journal of Physical Chemistry C. This structure is an Ag 10O 7 overlayer that happens to form on the Ag(111) surface in an O 2 atmosphere. For reference, I’ve used CrystalMaker and here is the pdb I generated. If you’re willing to shell out, you could also get CrystalMaker. Some packages you might consider are VESTA, Avogadro, and Mercury all of these are free. If you’re lucky, you might be starting out with a pdf file! You will need to find a software package that converts your file into a pdb. I started out with an xsf but, in principle, you could start out from a, VASP POSCAR, or any other crystal structure data file, for that matter. Take your crystal structure file and convert it into a pdb file. In order to make sure that no one else endures my pain, here is how you can do this in Markdown using html and 3Dmol.js.Ĭaveat: I’ve worked this out for Jekyll but I’m pretty sure the approach is extensible.

As you can see on my homepage, I have finally achieved success but it took a few days to work out the kinks. Have you ever wanted to embed a crystal structure visualization in your website? Oddly specific question, I know, but recently I found my wanting to do this.
