Routes / Navigation

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 Name	Component / Page	Parameters	Description
/Arshades3ds/:TokenViewer/ glasses/:TokenCatalogProduct	ARShades3dsViewer.js	TokenViewer (string), TokenCatalogProduct (string)	Multi-variant viewer - Displays all variants of a product with navigation menu.
/Arshades3d/:TokenViewer/ glasses/:TokenCatalogProduct/ variant/:TokenCatalogVariant	ARShades3dViewer.js	TokenViewer (string), TokenCatalogProduct (string), TokenCatalogVariant (string)	Single variant viewer - Displays a specific model variant.
/Arshades3dLibrary/:TokenProduct/ variant/:TokenVariant	ARShades3dViewer.js	TokenProduct (string), TokenVariant (string)	Library route - Independent variant viewing with default project parameters and simplified analytics.
/ArshadesDemo/:TokenProductId	ARShadesDemo.js	TokenProductId (string)	Interactive demo interface - Provides an environment with viewer mode switching and configuration controls.
/materialpresets/:TokenCatalogVariant	MaterialPresets.js	TokenCatalogVariant (string)	Material authoring system - Material preset creation, management, and GLB export capabilities.
/Renderer/:TokenVariant	Renderer.js	TokenVariant (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

• https://studio.arshades.it/Arshades3ds/Eo2MPry6FRmBzeiOtbv5/glasses/1CgMkeBgkGolCp9Z57Lk?reflect=true

• https://studio.arshades.it/Arshades3d/Eo2MPry6FRmBzeiOtbv5/glasses/KnDpTDcLk6YBmQv095s6/variant/lB1Hw2ka9Bij5kLlduUF?legacy=true

• https://studio.arshades.it/Arshades3dLibrary/6enFVnaxlmmEokslX3sM/variant/uRYDzTNUNXevMdX1j4k5?debug=true&noShadows=true

• https://studio.arshades.it/ArshadesDemo/HnyE09bthBi6caAAFZJg?fov=15&fovMobile=20

• https://studio.arshades.it/Renderer/l2LDgYRB4GhCXepz65Hn?templateConfig=%7B%22camera_fov%22%3A8.5%2C%22background_color%22%3A%22%23ca1400%22%7D

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