// This initializes the viewer (called Stage). var stage = new NGL.Stage('viewer'); // Now we load the 3D model of caffeine into the viewer. In this case we provide // a URL pointing to the Chemical Identifier Resolver (https://cactus.nci.nih.gov/chemical/structure) // If you want to load another molecule, just change 'caffeine' into something else. stage.loadFile('https://cactus.nci.nih.gov/chemical/structure/caffeine/sdf', { // We also have to provide a file extension, in this case this is an SDF file. // SDF files are a type of chemical table file, more info: https://en.wikipedia.org/wiki/Chemical_table_file ext: 'sdf' }).then(function (molecule) { // This function will be called when the structured is loaded. // We can now attach our own representation to this structure. // Here we specify 'ball+stick', for alternatives, see the // documentation: http://arose.github.io/ngl/api/StructureComponent.html#addRepresentation molecule.addRepresentation('ball+stick', { // Enable the rendering of multiple bonds. multipleBond: true }); });