NGL viewer

Vous souhaitez ajouter une structure 3D dans votre page web ? NGL viewer est un outil simple à mettre en place. Un exemple est proposé dans l’annexe Spectrométrie de masse.

Comment faire ?

1- Télécharger le script JS de NGL

Il y a deux solutions :

Via Github. Note : si le lien est mort, je vous conseille de vous rendre directement sur la page GitHub dans dossier dist/ (valable en août 2020)
Télécharger celui utilisé sur ce site : ici (Enregistre sous si le téléchargement ne se lance pas)

2- Importer le script dans votre page

Avec un site HTLM classique

1
<script src="PATH/TO/FILE/ngl.js"></script>

3- Ajouter dans le head de votre page HTML

1
2
3
4
5
6
7
8
9
10
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var stage = new NGL.Stage("viewport");

        stage.loadFile('rcsb://1blu').then(function (o) {
            o.addRepresentation("cartoon");
            o.autoView();
        });
    });
</script>

Ici, la molécule importée est 1blu qui se trouve sur le site de la PDB (rcsb). Il est aussi possible de remplacer rcsb://1blu par le chemin jusqu’à votre fichier pdb : PATH/TO/FILE/1blu.pdb

4- Ajouter dans le body de votre page HTML

1
<div id="viewport" style="width:400px; height:400px;"></div>

5- Ensemble du code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Un visualisation 3D</title>
    <script src="ngl.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var stage = new NGL.Stage("viewport");

            stage.loadFile('rcsb://1blu').then(function (o) {
                o.addRepresentation("cartoon");
                o.autoView();
            });
        });
    </script>
</head>
<body>
    <div id="viewport" style="width:400px; height:400px;"></div>
</body>
</html>