3Dmol

You are here:

 

Library name 3Dmol
Difficulty Medium (intermediate JavaScript knowledge required)
Returned value Graphic object
Description WebGL accelerated JavaScript molecular graphics library.
Link https://github.com/3dmol/3Dmol.js
Documentation http://3dmol.csb.pitt.edu/doc/index.html
License BSD-3
Library implementation
  • Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
  • Give a name to the library (3DMol), add required file:

Url 1: https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.7/3Dmol-nojquery-min.js

  • Add description (optional). 
  • Click ‘OK’.
Custom functions

There are different graphic objects offered by this library. We will use one of them for this example (read more how to add a custom function here):

  • MOLA

This function is only our proposal to deal with the library, but user can define their own function(s).

Function name DMOLA
Arguments – dataset
Syntax =DMOLA(dataset)
Description

Calls the library function and returns the result as an graphic object. Dataset is a data bank model and is loaded from server.

Function body
//create temporary container for graphic manipulations
var garbageContainer;
if (!document.getElementById('garbageContainer')) {
 garbageContainer = document.createElement('div');
 garbageContainer.id = 'garbageContainer';
 document.body.appendChild(garbageContainer);
} else {
 garbageContainer = document.getElementById('garbageContainer');
}
//create container element (div) for graph and set unique id property
var tempUUID = Formula.CREATEUUID(16);
var container = document.createElement('div');
container.id = '3DMOL_' + tempUUID;
//set properties of the container
container.style.width = '500px';
container.style.height = '400px';
container.style.position = 'relative';
//append graph container to the temporary container
garbageContainer.appendChild(container);

//create 3Dmol object and append it to the container
var element = $('#3DMOL_' + tempUUID);
var viewer = $3Dmol.createViewer(element);
$3Dmol.download("pdb:"+dataset,viewer,{multimodel:true, frames:true},function(){
 viewer.setStyle({}, {cartoon:{color:"spectrum"}});
 viewer.render();
});
//return graph to the cell
return container;
Example =DMOLA(1A01)

Ready spreadsheet is presented below:

Get the copy of this spreadsheet