This page showcases browser-based 3D molecular models developed to support concept-driven teaching in organic, biological, and computational chemistry.
These interactive visualizations are designed for seamless integration into digital learning platforms and help students develop spatial understanding
of molecular structure, reactivity, and noncovalent interactions in both small molecules and complex biological systems.
The models can be rotated, zoomed, and translated directly in the browser, allowing students to explore molecules from different perspectives in real time.
Organic Chemistry
Explore stereochemistry, reaction mechanisms, and molecular orbital interactions in small organic molecules.
Caffeine
Biological Chemistry
Visualize protein structure, enzyme active sites, and biomolecular interactions in complex biological systems.
PDB: 1YCR - Example Protein
Organic Chemistry - Detailed View
This enhanced view shows caffeine with multiple representation styles. Students can explore molecular geometry, hydrogen bonding patterns, and aromatic systems. The molecule demonstrates important concepts like planarity in aromatic rings, sp2 and sp3 hybridization, and intramolecular interactions.
Caffeine (C₈H₁₀N₄O₂) - Central nervous system stimulant
Application in Biological Chemistry
This section demonstrates various protein visualization techniques for teaching structural biology concepts.
B-factor Visualization
This example illustrates B-factor visualization in a protein structure, highlighting how atomic displacement parameters can reveal regions of relative flexibility.
The B-factor, also known as the Debye–Waller factor or temperature factor,
reflects the uncertainty in an atom’s position due to thermal motion or structural disorder in the crystal.
The color scheme (blue–red–yellow) maps B-factor values to the structure, with yellow indicating higher mobility and blue corresponding to more rigid, well-ordered regions.
PDB: 2GBP – B-factor visualization shows relative atomic mobility and uncertainty, helping interpret flexible and well-ordered regions in the crystallographic model.
Technical Implementation Details
3Dmol.js Integration
The molecular visualizations are powered by 3Dmol.js, a modern WebGL-based library for molecular visualization that runs entirely in the browser without plugins.
Key Technical Features
Real-time rendering: WebGL acceleration for smooth 60fps interactions
Multiple file formats: Support for PDB, SDF, MOL2, and other standard formats
Customizable representations: Stick, sphere, cartoon, surface, and hybrid models
Cross-platform compatibility: Works on desktop, tablet, and mobile devices
No installation required: Pure web technology, no plugins or downloads
Educational Applications
These tools integrate seamlessly into LMS platforms, support SCORM packages, and can be embedded in interactive course materials for enhanced student engagement.