3Dmol

3Dmol é uma biblioteca JavaScript orientada a objetos para visualização de dados moleculares disponível em: <http://3dmol.csb.pitt.edu>. 3Dmol pode ser utilizado para visualizar arquivos no formato PDB.

Exemplo de visualização com 3Dmol da proteína beta-glicosidase 1BGA.

	Comandos básicos
Movimento	Entrada do mouse
Rotação	Botão primário do mouse.
Translação	Botão do meio do mouse ou Ctrl + botão primário.
Zoom	Scroll ou botão secundário do mouse ou Shift + botão primário.

Requisitos básicos

Antes de iniciar o desenvolvimento de aplicações com 3Dmol é necessário declara no código a biblioteca 3Dmol. Há três versões do código-fonte:

• 3Dmol-min.js: versão reduzida da biblioteca (já inclui a biblioteca JQuery);
• 3Dmol.js: versão não reduzida da biblioteca;
• 3Dmol-nojquery.js: versão sem a biblioteca JQuery embutida.

Recomenda-se que seja declarada no final da página HTML, em geral, no head ou no footer.

<script src="http://cdn.jsdelivr.net/3dmol.js/latest/3Dmol-min.js"></script>

c15_s1.html | https://goo.gl/fUH4a4

Recomenda-se que a biblioteca seja armazenada localmente. Para isso, acesse o link <http://cdn.jsdelivr.net/3dmol.js/latest/3Dmol-min.js> e salve o arquivo na pasta app/js. Declare da seguinte forma:

<script src="app/js/3Dmol-min.js"></script>

c15_s2.html | https://goo.gl/0uwysZ

Visualizando estruturas de proteínas

Para embutir uma visualização com 3Dmol é necessário, além da declaração da biblioteca, inserir uma div com a classe ‘viewer_3Dmoljs’ e alguns atributos a mais.

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
<div 
style="height: 400px; width: 400px; position: relative;" 
class='viewer_3Dmoljs' 
data-pdb='2POR' 
data-backgroundcolor='0xffffff' 
data-style='stick'
></div>

c15_s3.html | https://goo.gl/S3h8YM

O conteúdo das visualizações pode ser manipulado através das tags data-. Por exemplo:

• data-pdb: recebe o ID de um arquivo PDB (3Dmol requisitará o arquivo PDB diretamente da Internet, ou seja, não é necessário ter o arquivo PDB);
• data-href: recebe o endereço de um arquivo PDB (caso tenha o arquivo localmente);
• data-element: recebe o ID de um elemento HTML na página atual em que os dados moleculares serão embutidos;
• data-type: recebe um formato de arquivo (padrão pdb; pode ser sdf, xyz, mol2, ou cube);
• data-backgroundcolor: define a cor do background (padrão preto);
• data-select: recebe uma especificação de seleção AtomSpec;
• data-style: recebe uma especificação de estilo (pode ser sticks, cartoon, sphere, line, etc.);
• data-surface: recebe uma especificação de superfície, como por exemplo, opacidade e cor da superfície;
• data-labelres: recebe uma especificação de estilo para rótulos de resíduos.

Gerando múltiplas visualizações

Usando um numeral após as data- tags é possível inserir múltiplas visualizações com estilos diferentes. No exemplo abaixo, veremos a cadeia A de uma proteína exibida como cartoon e a cadeia B exibida como stick:

<div 
style="height: 400px; width: 400px; position: relative;" 
class='viewer_3Dmoljs' 
data-pdb='1YCR' 
data-backgroundcolor='0xffffff'      
data-select1='chain:A' 
data-style1='cartoon:color=spectrum' 
data-surface1='opacity:.7;color:white' 
data-select2='chain:B' 
data-style2='stick'
></div>

c15_s4.html | https://goo.gl/90w27c

Desenvolvendo com 3Dmol

Podemos carregar visualizações diretamente de arquivos JavaScript e exibi-las diretamente em um elemento HTML. Primeiro vamos criar uma div com id “pdb”. A div não precisa ter qualquer informação, pois se trata de um simples espaço para que as visualizações sejam salvas.

<div id="pdb"></div>

c15_s6.html | https://goo.gl/JBdhZp

Agora vamos criar uma função que lê um arquivo PDB.

var glviewer = null;

/* Load default PDB */
document.onload = readPDB("1bga.pdb");

/* Reading PDB */
function readPDB(id){
    var txt = id;
    
    $.post(txt, function(d) {
        moldata = data = d;

        /* Cria visualizacao */
        glviewer = $3Dmol.createViewer("pdb", {
            defaultcolors : $3Dmol.rasmolElementColors
        });

        /* Define cor do fundo*/
        glviewer.setBackgroundColor(0x242830);

        receptorModel = m = glviewer.addModel(data, "pqr");

        /* Define o tipo de visualizacao*/
        glviewer.setStyle({},{cartoon:{color:'spectrum'}}); /* Cartoon multi-color */
        glviewer.addSurface($3Dmol.SurfaceType, {opacity:0.3}); /* Surface */

        /* Define os nomes do atomos*/
        atoms = m.selectedAtoms({});
        for ( var i in atoms) {
            var atom = atoms[i];
            atom.clickable = true;
            atom.callback = atomcallback;
        }

        glviewer.mapAtomProperties($3Dmol.applyPartialCharges);
        glviewer.zoomTo();
        glviewer.render();
    });
}

c15_s7.js | https://goo.gl/kzPT3E

Observe que a declaração glviewer é necessária para o correto carregamento da visualização. Declaramos ela inicialmente como nula. O script acima recebe o nome de um arquivo “.pdb” e ao carregar chama uma função chamada readPDB. Essa função, via método post, carrega o PDB. A seguir criamos a visualização, definimos a cor de fundo, definimos o tipo de visualização (no caso cartoon com esquema de cores spectrum, mas também definimos uma superfície com transparência de 30%), criamos uma função que exibe o nome dos átomos ao clicar neles, e por fim, renderizamos a visualização na div selecionada.

Ao final teremos essa figura:

No próximo capítulo, vamos abordar o uso do JavaScript e do jQuery para inserir novas funcionalidades nas visualizações de arquivos PDB em nosso projeto final.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99: