7 minutes de sciences

Test molecule-viewer

Visualiseur moléculaire 3D — démonstration Mol2OBJ V15

Visualiseur moléculaire 3D

Chaque molécule ci-dessous est décrite par un seul jeu de fichiers produit par Mol2OBJ V15 : un .obj, un .mtl et un .json. Les trois représentations sont reconstruites à la volée depuis le JSON — aucun modèle supplémentaire n’est chargé.

Diagnostic d’installation

  • Vérification en cours…

Éthanol

Représentation par défaut : boules et bâtonnets. Les boutons « Atomes » et « Informations » sont inactifs au chargement ; activez-les pour interroger le modèle.

Méthoxyméthane

Même formule brute que l’éthanol, C2H6O, et même masse molaire : deux isomères que la manipulation en 3D permet de distinguer immédiatement. Plusieurs visionneuses coexistent sans interférence sur une même page.

Liaisons multiples

Le benzène et l’éthyne vérifient le traitement des ordres de liaison. En mode filaire, les liaisons doubles et triples sont reconstruites depuis bonds[].order, avec le même dédoublement que dans le modèle OBJ.

Benzène — liaisons doubles

Éthyne — liaison triple

Les trois représentations

Les trois cadres partagent exactement les mêmes fichiers ; seul l’attribut data-mode change. Le label 3D, destiné à MirageMake, est masqué ici par data-label="hide".

Boules et bâtonnets

Compact

Filaire

Le bloc à copier dans WordPress

À coller dans un bloc « HTML personnalisé ». Le <link> et le <script> ne sont à mettre qu’une fois par page ; les molécules suivantes ne demandent que leur <div>.

<link rel="stylesheet"
      href="/wp-content/uploads/simulations/viewer3d/molecule-viewer.css">

<div class="molecule-viewer"
     data-obj="/wp-content/uploads/simulations/viewer3d/models/ethanol.obj"
     data-mtl="/wp-content/uploads/simulations/viewer3d/models/ethanol.mtl"
     data-json="/wp-content/uploads/simulations/viewer3d/models/ethanol.json"></div>

<script src="/wp-content/uploads/simulations/viewer3d/molecule-viewer.js"
        data-three-base="/wp-content/uploads/simulations/viewer3d/three/"></script>

data-three-base désigne le dossier three/ déposé sur votre site : rien n’est chargé depuis un service extérieur.

Cas d’erreur

Un fichier absent produit un message discret dans le cadre concerné. Le reste de la page — y compris les autres visionneuses — continue de fonctionner normalement.

Mol2OBJ V15 · OBJ + MTL pour MirageMake, JSON pour le web · Three.js hébergé sur votre site, sans compilation.