Skip to main content

​
Overview

RALQ provides an extensive library of interactive 3D models including molecular structures and laboratory instruments. This guide covers how to navigate, view, and interact with these educational models.

​
Accessing Model Collections

After logging in to RALQ, you’ll see the main menu (menu.php) with three primary sections:
Access molecular 3D models by clicking “Estructuras Moleculares” from the main menu.Route: estructuras-mol.phpAvailable Models:
  • Water (H₂O)
  • Benzyl Alcohol (C₈H₁₀O)
  • Caffeine (C₈H₁₀N₄O₂)
  • Phenol (C₆H₅OH)
  • Glycerol (C₃H₈O₃)
  • Propane (C₃H₈)
1

Open Main Menu

After login, you’re directed to menu.php which displays the main navigation grid with large, clickable image buttons.
2

Select Molecular Structures

Click the “Estructuras Moleculares” card (labeled with molecular imagery) to navigate to estructuras-mol.php.
3

Browse Available Molecules

The page displays a hero section explaining molecular structures, followed by a grid of model cards (3 columns) showing:
  • 3D model preview
  • Molecule name and formula
  • Information button (i)
  • AR view button
4

Select a Model

Click on any model card to begin interaction. Each card measures 340px × 380px and displays an auto-rotating preview.
The molecular structures page includes educational accordion sections at the bottom covering molecular theory, types of representations, and applications.

​
3D Viewer Controls

RALQ uses Google’s <model-viewer> component for all 3D models. Each model supports these interactions:

​
Mouse Controls (Desktop)

Action: Click and drag on the modelEffect: Rotates the model in 3D space around its center pointUsage:
  • Drag horizontally to rotate left/right
  • Drag vertically to rotate up/down
  • Use circular motions for complete 360° inspection
All models have auto-rotate enabled by default, so they’ll spin slowly when not being interacted with.
Action: Scroll wheel or pinch gestureEffect: Increases or decreases the model scaleUsage:
  • Scroll up to zoom in (closer view)
  • Scroll down to zoom out (wider view)
  • Double-click to reset to default zoom level
Action: Right-click and drag (or two-finger drag on trackpad)Effect: Moves the model within the viewport without rotatingUsage:
  • Useful for centering specific parts of the model
  • Reposition after zooming in
  • Combine with rotation for optimal viewing angles

​
Touch Controls (Mobile/Tablet)

  • Drag: Rotates the model
  • Tap: Stops auto-rotation temporarily
  • Double-tap: Resets view to default
All models have camera-controls enabled, giving you full freedom to explore from any angle. The interaction-prompt="none" setting means models are immediately interactive without prompts.

​
Model Information Cards

Each model card displays essential information:

​
Card Layout

1

3D Model Viewer

The top section (240px height) contains the interactive 3D model with:
  • Auto-rotation at 2.5 RPM by default
  • Full camera controls
  • AR capability badge
  • Transparent background
  • Zero shadow intensity for clean display
2

Model Title

Below the viewer, the molecule or instrument name appears in bold (1.2rem font):
  • Chemical name (English/Spanish)
  • Chemical formula in subscript notation (e.g., H₂O)
  • Centered alignment
3

Information Button

A blue circular button (“i”) in the top-right corner (10px from edges) that reveals:
  • Chemical formula
  • Physical state at 25°C
  • Molecular weight (g/mol)
  • Additional properties
Click to toggle between model view and information view.
4

AR Button

At the card bottom, a prominent blue button labeled “Ver en Realidad Aumentada” (View in Augmented Reality) links to external AR experiences.

​
Information Toggle

The toggleFullInfo(button) JavaScript function switches card display: 
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";
  }
}
The information view displays textual data centered in the same 340px × 380px card format, making it easy to compare properties across molecules.

​
Viewing Model Information

1

Click Information Button

On any model card, click the blue “i” button in the top-right corner.
2

Review Properties

The card flips to show detailed information:For Molecular Structures:
  • Formula: Chemical composition (e.g., H₂O)
  • Estado: Physical state (Líquido, Sólido, Gas)
  • Peso molecular: Molecular weight in g/mol
For Laboratory Instruments:
  • Equipment description
  • Primary function
  • Usage context
3

Return to Model

Click the “i” button again to return to the interactive 3D view.

​
Example: Water Molecule (H₂O)

File: modelos/agua.glbInformation Display:
  • Fórmula: H₂O
  • Estado: Líquido a 25°C
  • Peso molecular: 18.015 g/mol
3D Model Features:
  • Shows two hydrogen atoms (white)
  • One oxygen atom (red)
  • Angular geometry (104.5° bond angle)
  • Accurate bond lengths and molecular structure
AR Link: https://mywebar.com/p/Project_2_y08cdw22dd

​
Laboratory Instrument Models

RALQ provides three specialized laboratory collections:

​
General Chemistry Lab

Navigate to quimica-general.php to view:
  • Gradilla (Test tube rack)
  • Matraz Erlenmeyer (Erlenmeyer flask)
  • Microscopio (Microscope)
  • Mortero con mano (Mortar and pestle)
  • Pipeta (Pipette)
  • Placas de porcelana (Porcelain plates)
  • Pinzas para matraces (Flask clamps)
  • Anillo de hierro (Iron ring)
  • Pinzas para tubo de ensayo (Test tube clamps)
Each instrument includes educational context about its use in basic chemistry experiments.

​
Instrumental Analysis Lab

Navigate to analisis-instrumental.php for specialized instruments:
  • Autoclave - Sterilization equipment using high-pressure steam
  • Campana de extracción - Fume hood for toxic vapor extraction
  • Centrifugadora - Centrifuge for component separation
  • Incubadora - Controlled temperature/humidity for cultures
  • Placa calefactora - Heating plate for uniform warming
  • Soporte universal - Universal stand for equipment support
Each model includes technical descriptions and application contexts.

​
Chemical Plants Lab

The plantas-quimicas.php page focuses on industrial-scale chemical processes and equipment used in chemical plants, including reactors, distillers, heat exchangers, and process simulation concepts.

​
Tips for Best Viewing Experience

Desktop/Laptop:
  • Use a mouse with scroll wheel for precise zoom control
  • Larger screens (15”+ recommended) provide better detail
  • Hardware acceleration enabled in browser settings
  • Modern browser (Chrome, Firefox, Safari, Edge)
Mobile/Tablet:
  • Tablets (10”+ screens) offer better viewing than phones
  • Portrait mode works well for single models
  • Landscape mode recommended for detailed examination
  • Ensure good lighting for AR mode preparation
Best Performance:
  • Google Chrome (v90+)
  • Mozilla Firefox (v88+)
  • Safari (v14+)
  • Microsoft Edge (v90+)
Requirements:
  • JavaScript enabled
  • WebGL support (for 3D rendering)
  • Minimum 4GB RAM
  • Hardware acceleration enabled
  • 3D models (.glb files) range from 1-10 MB each
  • First load caches models for faster subsequent viewing
  • Minimum 5 Mbps internet recommended
  • Wi-Fi preferred over cellular for initial model loading
  • Models load from CDN: unpkg.com/@google/model-viewer
For Molecular Structures:
  • Zoom in to see bond details and atom placement
  • Rotate to understand 3D spatial arrangement
  • Compare multiple molecules by opening in different tabs
  • Review information cards before and after viewing
For Laboratory Instruments:
  • Examine from multiple angles to understand construction
  • Zoom to see component details and labels
  • Pair with educational accordion content for context
  • Note scale and proportions relative to other equipment

​
Educational Features

​
Accordion Sections

Each model collection page includes expandable educational content:
1

Locate Accordions

Scroll below the model grid to find accordion sections with topics like:
  • “¿Qué son las estructuras moleculares?”
  • “Tipos de representaciones moleculares”
  • “Importancia de estudiar estructuras moleculares”
2

Expand Topics

Click any accordion header (with + icon) to reveal detailed information:
  • Bullet-pointed lists
  • Definitions and explanations
  • Examples and applications
  • Educational context
3

Navigate Content

The accordion icon changes from + to − when expanded. Click again to collapse.
Use the educational accordions to deepen your understanding of why specific molecules or instruments are important in chemistry education.

​
Header Navigation

Every model page includes a consistent header with:
  • Back Button: Arrow icon (left side) returns to previous page
  • RALQ Logo: Always visible for brand consistency
  • Ayuda (Help) Link: Access user manual at publuu.com/flip-book/821912/1808843
  • User Dropdown: Shows logged-in email and logout option
1

From Main Menu

menu.php → Choose category
2

To Model Collection

Category page (e.g., estructuras-mol.php) → Browse models
3

Back to Menu

Use back button or click RALQ logo to return to main menu

​
Troubleshooting

Symptoms: Blank card or loading spinnerSolutions:
  • Check internet connection
  • Refresh the page (F5 or Ctrl+R)
  • Clear browser cache
  • Verify WebGL support at https://get.webgl.org
  • Try a different browser
  • Disable browser extensions temporarily
Symptoms: Stretched, pixelated, or incorrectly rendered modelSolutions:
  • Reset zoom by double-clicking model
  • Clear browser cache and reload
  • Update graphics drivers
  • Enable hardware acceleration in browser settings
  • Close other tabs to free up GPU resources
Symptoms: Can’t rotate, zoom, or pan modelSolutions:
  • Ensure cursor is over the model viewer area
  • Check if information view is active (toggle “i” button)
  • Disable browser extensions that might block interactions
  • Try mouse instead of trackpad (or vice versa)
  • Refresh the page to reinitialize controls
Symptoms: Laggy rotation or delayed responsesSolutions:
  • Close unnecessary browser tabs
  • Disable auto-rotate (pause by clicking model)
  • Reduce browser zoom level to 100%
  • Close other applications to free RAM
  • Update browser to latest version
  • Check Task Manager for high CPU usage

​
Next Steps

After mastering 3D model viewing:
  • Learn how to use AR Mode to view models in your physical space
  • Explore detailed Laboratory Guides for each equipment type
  • Understand molecular properties to enhance learning
  • Share findings with classmates or educators
The RALQ model viewer is designed for educational purposes. Take time to explore each model thoroughly to gain maximum educational value.

Build docs developers (and LLMs) love

Get started for freeTalk to us