3dmol / 3Dmol.js

WebGL accelerated JavaScript molecular graphics library
https://3dmol.org/
Other
794 stars 194 forks source link

Not showing Hydrogen atoms #757

Closed JavierSanchez-Utges closed 8 months ago

JavierSanchez-Utges commented 8 months ago

Some of the structures I am visualising have not hydrogens stripped from them. Rather than doing pre-processing, I was wondering if I an just not display them or strip them for the parsing 3DMol.js does when loading the structure. I found the keepH argument of the ParserOptionsSpec, but I am not sure where I must place it for it to work, or whether it actually is the right way of doing this.

Many thanks!

dkoes commented 8 months ago

Please provide example files and usage.

JavierSanchez-Utges commented 8 months ago

This is the code of my example visualisation:

<title>3DMol.js experiment</title>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>     

<script src="https://3Dmol.org/build/3Dmol.ui-min.js"></script> 

<div id="container-01" class="mol-container"></div>

<style>
    .mol-container {
      width: 100%;
      height: 800px;
      position: absolute;
    }
</style>

<script>
    let element = document.querySelector('#container-01');
    let config = { backgroundColor: 'white' , keepH: false};
    let viewer = $3Dmol.createViewer( element, config );
    let pdbUri = '/static/experiment/8az8-assembly-1.cif';
    jQuery.ajax( pdbUri, { 
      success: function(data) {
        let v = viewer;
        v.addModel( data, "cif" );                       /* load data */
        v.setStyle({}, {cartoon: {
                    style:'oval', color: 'white', arrows: true,
                }});  /* style all atoms */
                                  /* slight zoom */
        viewer.setStyle({resn:'OEI',},{stick:{colorscheme:"greenCarbon"}});
        viewer.setStyle(
            {resi:[28, 41, 45, 109, 111]},
            {stick:{color:"red",thickness:1.0}, cartoon:{stlye:"oval", arrows: true, color:"red",}
        });
        v.zoomTo();                                      /* set camera */
        v.render();                                      /* render scene */
        v.zoom(1.2, 1000); 
      },
      error: function(hdr, status, err) {
        console.error( "Failed to load PDB " + pdbUri + ": " + err );
      },
    });
</script>

You can download the structure file from here: https://www.ebi.ac.uk/pdbe/entry/pdb/8az8/analysis .

I am showing some interactions, and as you can see, hydrogen atoms are there. Is there a way to just not show them? Many thanks!

Screenshot 2024-01-23 at 13 09 53
dkoes commented 8 months ago

If all you want to do is not show hydrogens, don't style them. Or, perhaps simpler, un-style them at the end: viewer.addStyle({elem:"H"},{stick:{hidden:true},sphere:{hidden:true}});

JavierSanchez-Utges commented 8 months ago

Of course. That is a simple and effective solve. Many thanks!