Skip to main content

​
Overview

RALQ’s molecular structures feature provides interactive 3D visualization of chemical compounds. Students can rotate, zoom, and explore molecules in detail, understanding their spatial arrangement, bonds, and geometry. Each molecule includes detailed information about its chemical formula, state, and molecular weight.

​
Available Molecules

RALQ includes the following molecular structures with interactive 3D models:

Water (H₂O)

Formula: H₂O
State: Liquid at 25°C
Molecular Weight: 18.015 g/mol
File: agua.glb

Benzyl Alcohol (C8H10O)

Formula: C8H10O
State: Liquid
Molecular Weight: 122.16 g/mol
File: benciletanol.glb

Caffeine (C8H10N4O2)

Formula: C8H10N4O2
State: Solid
Molecular Weight: 194.19 g/mol
File: cafeina.glb

Phenol (C6H5OH)

Formula: C6H5OH
State: Liquid
Molecular Weight: 94.11 g/mol
File: fenol (1).glb

Glycerol (C3H8O3)

Formula: C3H8O3
State: Liquid
Molecular Weight: 92.09 g/mol
File: glicerol (2).glb

Propane (C3H8)

Formula: C3H8
State: Gas
Molecular Weight: 44.10 g/mol
File: Propano .glb

​
Viewing 3D Models

​
Model Viewer Component

RALQ uses the Google model-viewer web component to display 3D molecular structures. Each molecule is rendered from GLB files stored in the modelos/ directory. Key Implementation: 
<model-viewer
    src="modelos/agua.glb"
    alt="Modelo de agua"
    auto-rotate
    camera-controls
    ar
    style="width: 100%; height: 240px; background-color: transparent;"
    shadow-intensity="0"
    interaction-prompt="none">
</model-viewer>

​
Model Viewer Attributes

The model-viewer component includes several important attributes:
  • auto-rotate - Automatically rotates the model for better visualization
  • camera-controls - Enables user interaction (rotate, zoom, pan)
  • ar - Enables augmented reality mode on compatible devices
  • shadow-intensity="0" - Removes shadows for cleaner visualization

​
Interacting with Models

​
Desktop/Laptop Controls

  • Rotate: Click and drag to rotate the molecule in any direction
  • Zoom: Use scroll wheel or pinch gesture to zoom in/out
  • Pan: Hold Shift + click and drag to move the model

​
Mobile Controls

  • Rotate: Touch and drag with one finger
  • Zoom: Pinch with two fingers
  • Pan: Touch and drag with two fingers
The camera-controls attribute enables all these interactions automatically. The model responds smoothly to user input for an intuitive experience.

​
Accessing AR Mode

Each molecular structure card includes a “Ver en Realidad Aumentada” (View in Augmented Reality) button that links to AR experiences:

​
AR Access Methods

Many molecules link to MyWebAR platform for browser-based AR experiences:

​
Molecular Information Display

​
Interactive Information Button

Each molecule card includes an “i” button (top-right) that toggles between two views: 1. Model View (Default):
  • 3D interactive model with auto-rotation
  • Molecule name and formula
  • “View in AR” button
2. Information View (Toggle):
  • Chemical formula
  • Physical state at standard conditions
  • Molecular weight in g/mol
JavaScript Toggle Function: 
function toggleFullInfo(button) {
    const card = button.closest('.menu-item');
    const content = card.querySelector('.card-content');
    const info = card.querySelector('.full-info');

    if (content.style.display !== "none") {
        content.style.display = "none";
        info.style.display = "flex";
    } else {
        content.style.display = "flex";
        info.style.display = "none";
    }
}

​
Educational Content

The molecular structures page includes educational accordion sections covering:

​
What are Molecular Structures?

  • 2D or 3D representations of atomic organization
  • Display of chemical bonds, angles, and molecular geometry
  • Help understand physical and chemical properties
  • Fundamental in chemistry, biology, pharmacology, and materials science

​
Types of Molecular Representations

  • Lewis Structure: Shows valence electrons and bonds
  • Ball-and-stick Model: Atoms as spheres, bonds as sticks
  • Space-filling Model (CPK): Emphasizes actual atomic volume
  • Digital 3D Model: Allows manipulation in software and augmented reality

​
Importance of Studying Molecular Structures

  • Understand how chemical bonds form and break
  • Predict compound reactivity and stability
  • Explain properties like solubility, polarity, and melting points
  • Develop new medicines and innovative materials

​
Applications of Molecular Visualization

  • Interactive chemistry teaching in schools and universities
  • Biomedical research and drug design
  • Materials study for engineering and nanotechnology
  • Exploration in augmented and virtual reality environments
Molecular structures are simplified representations. Actual molecules are dynamic with electron clouds in constant motion. These models help visualize and understand molecular geometry but are not exact physical representations.

​
Technical Implementation

​
Required Libraries

<!-- Google Model Viewer -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

​
File Structure

source/
├── estructuras-mol.php
└── modelos/
    ├── agua.glb
    ├── benciletanol.glb
    ├── cafeina.glb
    ├── fenol (1).glb
    ├── glicerol (2).glb
    ├── Propano .glb
    └── metano.glb

​
GLB File Format

All molecular models are stored in GLB (GL Transmission Format Binary) format:
  • Compact binary format for 3D models
  • Contains geometry, materials, textures, and animations
  • Optimized for web delivery and real-time rendering
  • Supported natively by model-viewer component

​
Best Practices

Performance

  • Keep GLB files optimized and compressed
  • Use shadow-intensity="0" to reduce rendering load
  • Enable auto-rotate for immediate visual engagement

Accessibility

  • Provide alt text for model-viewer elements
  • Include text-based information alongside 3D models
  • Ensure AR functionality gracefully degrades on unsupported devices

User Experience

  • Show loading indicators for large models
  • Provide clear interaction instructions
  • Test AR functionality on multiple device types

Educational Value

  • Include accurate chemical information
  • Provide context about molecular properties
  • Link to additional educational resources

Build docs developers (and LLMs) love

Get started for freeTalk to us