Visual 3D Molekul dengan iCn3D

iCn3D ("I see in 3D - Saya melihat dalam 3D") merupakan penampil struktur 3D berbasis WebGL menggunakan Three.js dan jQuery. Ini merupakan alternatif cara tercepat dan paling praktis untuk menampilkan model molekul 3D di website atau weblog. Cukup menggunakan iframe. Tidak perlu melakukan banyak ubahan di template blog/web. Kalau mau sedikit repot dapat melakukan embed dengan Javascript. Semua data dijalankan dari milik penyedia layanan ini, www.ncbi.nlm.nih.gov, setidaknya sampai beberapa waktu ke depan. Bagaimana caranya silakan simak catatan berikut.

Buat sebuah postingan di web/blog, dan sertakan kode berikut seperti yang direkomendasikan di website sumber: 

<iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&width=300&height=300&showcommand=0&mobilemenu=1&showtitle=0" width="320" height="320" style="border:none"></iframe>

Hasil struktur 3D dari kode tersebut seperti di bawah ini.

Maksud dari kode, (ini yang diberi latar warna tertentu saja ya selebihnya itu kode html biasa):

<iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&width=300&height=300&showcommand=0&mobilemenu=1&showtitle=0" width="320" height="320" style="border:none"></iframe>

https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?

Ini alamat (url) sumber dari aplikasi untuk menjalankan penampil struktur 3D, tidak boleh diubah :D.

mmdbid=1tup

Ini merupakan parameter url bahwa akan ditampilkan struktur sesuai kode dari NCBI MMDB ID atau PDB ID. Ini bisa diganti dengan mmdbid, mmtfid, pdbid, mmcifid, gi, cid. Silakan simak dalam tautan referensi di bawah. 1tup ini adalah id kode senyawa yang ditanpilkan. Untuk masing-masing id silakan simak di web site penyedia data. Misal untuk data mmdb dan pdb id dapat dilihat di sini, untuk cid dapat dilihat di sini. Silakan cari rumus kimia di sana dan salin nomor id untuk struktur dari rumus kimianya.

width=300&height=300

Ini meruapakan dimensi tampilan lebar 300 px dan tinggi 300 px. Silakan sesuaikan dengan kebutuhan.

showcommand=0

Ini merupakan perintah untuk menampilkan perintah yang sedang berjalan. Nilai 0 berarti perintah tidak ditampilkan; Nilai 1 berarti perintah ditampilkan.

mobilemenu=1

Ini merupakan perintah untuk mengaktifkan menu dengan format mobile bila diberi nilai 1, dan dinonaktifkan bila diberi nilai 0. Untuk model menu simpel desktop (parameter yang digunakan simplemenu=1, tetapi mobilemenu harus dinonaktifkan lebih dahulu.  

showtitle=0

Ini merupakan perintah untuk menampilkan judul dari struktur, bila nilainya 0 maka judul disembunyikan, bila nilainya 1 maka judul akan ditampilkan.

Contoh lain yang sudah sedikit dimodifikasi dengan kode berikut dapat dilihat dibagian bawah ini.

Kode yang digunakan untuk visual molekul TNT:

<div style="text-align: center;"><iframe height="320" src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=8376&amp;divid=div0&amp;width=300&amp;height=300&amp;showcommand=0&amp;mobilemenu=1&amp;command=set background white;" style="border: 3px solid red; border-radius:5px;" width="320"></iframe></div>

Penggunaan iCn3D di komputer untuk memutar, menggeser, zoom struktur 3D. Dilakukan dengan menggunakan mouse atau keyboard.

• Memutar bebas: mouse kiri (tekan dan tahan sambil digerakkan)
• Putar kiri: tombol L 
• Putar kanan: tombol J
• Putar atas: tombol I
• Putar bawah: tombol M

• Putar kiri 90°: tombol Shift + L
• Putar kanan 90°: tombol Shift + J 
• Putar atas 90°: tombol Shift + I
• Putar bawah 90°: tombol Shift + M 

• Zoom : tekan scrool mouse (bagian tengah) sambil geser mouse
• Zoom in : tombol Z di keyboard
• Zoom out : tombol Z di keyboard
• Menggeser molekul: mouse kanan ((tekan dan tahan sambil digerakkan).

Visual molekul HClO₄ dengan menggunakan notasi SMILES.

Kode yang digunakan untuk visual molekul HClO₄:

<div style="text-align: center;"><iframe height="320" src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?smiles=OCl(%3DO)(%3DO)%3DO&amp;divid=div0&amp;width=300&amp;height=300&amp;showcommand=0&amp;mobilemenu=1&command=set background white;" style="border: 3px solid red; border-radius:5px;" width="320"></iframe></div>

Notasi SMILES untuk HClO₄ dalam iframe adalah smiles=OCl(%3DO)(%3DO)%3DO
%3D ini maksudnya untuk pembentukan ikatan rangkap, untuk ikatan rangkap tiga/tripel dapat menggunakan kode %23. Kode-kode untuk notasi SMILES akan dibuat otomatis pada link icn3d setelah menginput notasi SMILES melalui Menu File > Retrieve by Id  > Chemical SMILES. Notasi SMILES yang diinput harus benar formatnya. Sekilas tentang notasi SMILES silakan baca di sini.

Referensi:

Tutorial selengkapnya silakan simak di sini.
Selamat mencoba.