Skip to main content
Version: 1.0.0

Routes / Navigation

Author: Gabriele Gilio Creation Date: 19/08/2025
Last Reviewer: Gabriele Gilio Last Updated: 25/08/2025

This document outlines all web routes and navigation patterns for the 3D AR Viewer application.

Route Overview​

The application supports multiple route patterns for different viewing modes and use cases, with comprehensive parameter support for customization.

Path / Route NameComponent / PageParametersDescription
/Arshades3ds/:TokenViewer/
glasses/:TokenCatalogProduct		ARShades3dsViewer.jsTokenViewer (string), TokenCatalogProduct (string)Multi-variant viewer - Displays all variants of a product with navigation menu.
/Arshades3d/:TokenViewer/
glasses/:TokenCatalogProduct/
variant/:TokenCatalogVariant		ARShades3dViewer.jsTokenViewer (string), TokenCatalogProduct (string), TokenCatalogVariant (string)Single variant viewer - Displays a specific model variant.
/Arshades3dLibrary/:TokenProduct/
variant/:TokenVariant		ARShades3dViewer.jsTokenProduct (string), TokenVariant (string)Library route - Independent variant viewing with default project parameters and simplified analytics.
/ArshadesDemo/:TokenProductIdARShadesDemo.jsTokenProductId (string)Interactive demo interface - Provides an environment with viewer mode switching and configuration controls.
/materialpresets/:TokenCatalogVariantMaterialPresets.jsTokenCatalogVariant (string)Material authoring system - Material preset creation, management, and GLB export capabilities.
/Renderer/:TokenVariantRenderer.jsTokenVariant (string)High-quality rendering system - Automated screenshot generation with template-driven configuration and server-side API.

Query Parameters​

All routes support additional query parameters for customization and feature control:

Viewer Configuration​

  • fov (number) - Field of view in degrees for desktop viewing
  • fovMobile (number) - Field of view in degrees for mobile devices
  • legacy (boolean) - Forces legacy model-viewer instead of ThreeJSViewer
  • reflect (boolean) - Enables reflective floor plane in the scene
  • noShadows (boolean) - Disables shadow rendering for performance
  • debug (boolean) - Enables debugging tools and performance monitoring

Scene Settings​

  • sceneSettings (string) - Set to "neutral" for validation mode with default scene parameters
  • mirror (boolean) - Special mirror mode for desktop QR code generation

Template Configuration (Renderer only)​

  • templateConfig (JSON) - Complete template configuration object containing:
    • background_color - Scene background color
    • light_exposition - Lighting intensity
    • camera_fov - Custom camera field of view
    • camera_position - Camera position array [x, y, z]
    • camera_rotation - Camera rotation array [x, y, z]
    • camera_look_at - Camera target array [x, y, z]

URL Generation Patterns​

Staging URLs​

  • Multi-variant: https://stagingstudio.arshades.it/Arshades3ds/{viewer-id}/glasses/{product-id}
  • Single variant: https://stagingstudio.arshades.it/Arshades3d/{viewer-id}/glasses/{product-id}/variant/{variant-id}
  • Library mode: https://stagingstudio.arshades.it/Arshades3dLibrary/{product-id}/variant/{variant-id}

Production URLs​

  • Multi-variant: https://studio.arshades.it/Arshades3ds/{viewer-id}/glasses/{product-id}
  • Single variant: https://studio.arshades.it/Arshades3d/{viewer-id}/glasses/{product-id}/variant/{variant-id}
  • Library mode: https://studio.arshades.it/Arshades3dLibrary/{product-id}/variant/{variant-id}

Example URLs with Parameters​

// Multi-variant with reflective floor
/Arshades3ds/ABCDviewer111/glasses/ABCDproduct123?reflect=true

// Single variant with legacy viewer
/Arshades3d/ABCDviewer111/glasses/ABCDproduct123/variant/XYZvariant789?legacy=true

// Library route with debug mode and no shadows
/Arshades3dLibrary/LIBproduct456/variant/LIBvariant999?debug=true&noShadows=true

// Demo with FOV customization
/ArshadesDemo/DEMProduct123?fov=15&fovMobile=20

// Material presets route with debug mode
/materialpresets/XYZvariant789?debug=true

// Renderer with custom template configuration
/Renderer/RENDvariant123?templateConfig=%7B%22camera_fov%22%3A8.5%2C%22background_color%22%3A%22%23ffffff%22%7D

URLs of Example​

Route Detection Logic​

The application uses intelligent route detection to determine the appropriate viewing mode:

Library vs Standard Routes​

const isLibraryRoute = params.TokenProduct && params.TokenVariant;

Parameter Mapping​

The application uses different parameter sets depending on the route type and data source:

Catalog-Based Routes (Multi-variant and Single-variant viewers)​

  • TokenViewer → References document ID in Firestore collection 3DViewers
  • TokenCatalogProduct → References document ID in Firestore collection CataloguesProducts
  • TokenCatalogVariant → References document ID in Firestore collection CataloguesVariants (single-variant only)

Library Routes (Independent viewing mode)​

  • TokenProduct → References document ID in Firestore collection Products
  • TokenVariant → References document ID in Firestore collection Variants
  • Note: Library routes bypass viewer configuration and use default project settings

Demo Routes​

  • TokenProductId → References document ID from the Products subcollection within 3DViewers
  • Note: Demo routes use a hard-coded viewer ID