Application to Organic Chemistry
Organic chemistry is inherently three-dimensional—reaction mechanisms, stereochemistry, conformational preferences, and transition states all rely on spatial relationships between atoms.
Interactive 3D visualizations make it easier for students to grasp these abstract concepts by allowing direct manipulation of molecules.
This is particularly valuable when teaching topics like hybridization, aromaticity, or stereoelectronic effects.
Orbital Visualization
This visualization illustrates how valence bond (VB) orbitals emerge from the combination of atomic orbitals.
Students can observe how σ and π bonds form through the constructive overlap of s and p orbitals, and how orbital orientation dictates bond geometry.
This is a powerful way to connect abstract wavefunction concepts with chemical bonding in a spatial, intuitive format.
Valence bond model – Orbital overlap and bond formation
Conformations
This visualization shows different conformations of cyclohexane, highlighting how atoms can adopt distinct spatial arrangements without breaking bonds.
Students can explore chair, boat, and twist-boat conformers, gaining an intuitive understanding of steric strain, torsional interactions, and the dynamic nature of molecular structure.
Such conformational flexibility plays a critical role in reactivity, stability, and biological recognition.
Cyclohexane – Chair and boat conformations
Reaction Coordinate: Cope Rearrangement
This visualization illustrates the Cope rearrangement, a classic pericyclic reaction involving a [3,3]-sigmatropic shift.
Students can observe how the molecule evolves along the reaction coordinate, from the starting material through the transition state to the product.
This helps build intuition for reaction mechanisms that proceed through concerted, symmetry-allowed pathways and reinforces the concept of transition state geometries.
Cope rearrangement – Concerted [3,3]-sigmatropic reaction pathway
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.
Different Visualization Styles
This interactive example demonstrates how the same protein structure (ubiquitin, PDB: 1UBQ) can be visualized in multiple styles: cartoon, surface, sticks, and spheres. Use the buttons to switch between representations and explore how each style highlights different aspects of molecular structure and function.
Ubiquitin (1UBQ) – Cartoon, surface, stick, and sphere representations
Peptide–Protein Interaction
This interactive example shows a peptide (orange, Chain B) bound to an MHC protein (blue, Chain A). Use the buttons to switch between cartoon+sticks and surface views to explore how the peptide fits into the protein binding groove and how molecular recognition is achieved.
Example: MHC protein (1YCR) with bound peptide (Chain B)
Technical Implementation Details
How It Works
Interactive molecular visualizations on this site are built using standard HTML and JavaScript, with 3Dmol.js as the core rendering engine.
Everything runs directly in the browser, no server, plugins, or installation required.
Why This Matters
Because the code is fully self-contained and runs locally, it can be easily embedded into learning management systems like Moodle, including TU Wien’s TUWEL, or any other teaching platform that allows HTML editing.
Example Snippet
Simply copy and paste the following code into any HTML file or the source view of a Moodle page:
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<div style="width: 400px; height: 300px; position: relative; margin: 0 auto; display: block;" class="viewer_3Dmoljs"
data-pdb="1crn" data-backgroundcolor="0xffffff" data-style="cartoon:color=spectrum">
</div>
This will render a colorful cartoon-style protein (PDB code: 1CRN) directly in your teaching material.
More Examples
Visit chemistry-in-3d.github.io/3Dify-Chemistry for more examples and copy-paste snippets for common teaching use cases.
3Dmol.js • HTML/JS • Local rendering • LMS-ready