Visualisasi 3D Molekul dengan 3DMol.JS di Web/Blog

Kamis, 07 Januari 2021 edit

Alternatif untuk menampilkan (memvisualkan) molekul secara 3-Dimensi (3D) di web semakin mudah. Hanya dengan memasang kode dengan format tertentu molekul 3D yang cantik dapat ditampilkan. Syaratnya blog atau website yang digunakan memang mengizinkan penggunaan script. Molekul yang hendak ditampilkan pun tinggal menggunakan pada pangkalan data, sudah tersedia, kecuali kalau molekulnya khusus. Molekul 3D ini dapat diputar di perbesar/diperkecil dengan memainkan mouse atau dua jari di gawai. Bagaimana caranya simak kelanjutan tulisan ini.

Berikut ini baru satu cara, untuk cara yang lain silakan jelejah lebih lanjut ya.
Pertama salin skrip 3Dmol-min.js dan letakkan dalam tag <head>...</head> (biasa ini adalah dalam templat) blog/web atau kalau hanya ingin menggunakan sesekali saja cukup letakkan di bagian atas tulisan yang di dalamnya akan dimuat visual 3D molekul.

Tutorial format video dalam video berikut. Hanya saja di sini kode 3dmol-min-js diletakkan dalam tag head blogger. Selebihnya seperti dalam tutorial di tulisan ini.


Skrip yang perlu disalin, pilih salah satu saja:
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
atau
<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol-min.js"></script>

Bila akan memuat beberapa molekul skrip di atas ini cukup sekali saja dituliskannya.

Selanjutnya silakan muat skrip berikut, ini untuk memuat 3d molekulnya.
<div class="viewer_3Dmoljs" data-backgroundcolor="0xffffff" data-cid="1118" data-style="stick" style="height: 320px; position: relative; width: 320px;"></div>
Keterangan kode:
data-backgroundcolor="0xffffff" : ini adalah warna latar bisa diganti sesuai keinginan;
data-cid="1118" : ini adalah kode molekul untuk asam sulfat;
data-style="stick" : ini adalah kode untuk stil atau model 3D yang berupa stik saja, untuk yang lain simak catatan di bawah.
style="height: 320px; position: relative; width: 320px;" : ini adalah dimensi atau ukuran tinggi dan lebar kanvas molekul, boleh disesuaikan.

Untuk kode nomor CID dari setiap molekul dapat dilihat atau dicari sendiri di https://pubchem.ncbi.nlm.nih.gov/ 
Sila ketik rumus kimia atau nama senyawa (dalam Bahasa Inggris) kemudian tekan enter atau klik ikon lup di samping kota pencarian.

Setelah ketemu perhatikan Compound CID:1118 untuk asam sulfat dan salin nomor 1118 itu.

Molekul 3D asam sulfat (H2SO4)


Molekul 3D asam nitrat (HNO3)


Molekul 3D asam asetat (CH3COOH)


Molekul 3D fenol (C6H5OH)

Tutorial ada silakan simak di https://3dmol.csb.pitt.edu/doc/index.html. Selamat mencoba.
Thanks to:

Nicholas Rego and David Koes
3Dmol.js: molecular visualization with WebGL
Bioinformatics (2015) 31 (8): 1322-1324 doi:10.1093/bioinformatics/btu829

Bagikan di

3 komentar:

  1. pak kalau untuk membuat efek spin spt itu memanggil kelas apa?

    BalasHapus
    Balasan
    1. script
      setInterval(function() {
      if(3Dmol.viewers)if(3Dmol.viewers[2]) {
      var view = $3Dmol.viewers[2];
      view.rotate(1);
      }
      }, 50);
      /script

      view.rotate

      Hapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info