WEARFITS Shoes & Bags 3D/AR Try-On

Overview

The WEARFITS Shoes & Bags 3D/AR Try-On enables customers to visualize footwear and handbags from AI-generated 3D models. The process is simple:

1. Upload Images - Submit 1-4 photos of a shoe or bag
2. AI Processing - Our AI generates a 3D model (takes 1-5 minutes)
3. Viewer Ready - Receive a viewer URL with QR code (AR for shoes, 3D for bags)
4. Customer Experience - Customers scan the QR code to inspect the product

How It Works

1. Image Upload

Upload 1-4 high-quality images of the product. Multiple angles improve 3D model quality:

• Single image - Use a perspective view showing the front and side (3/4 angle)
• Multiple images - Front, side, back, and top views for best results

Shoes and bags follow the same upload flow; use the options.productType hint (see API Reference) to tell the backend which one it is, or pass "auto" to let it auto-detect.

2. 3D Model Generation

Our AI processes the images using state-of-the-art 3D reconstruction technology. The best model is automatically selected for optimal results.

3. AR / 3D Viewer

Once processing completes, you receive a viewer URL:

• Shoes → AR try-on URL (/tryon?object=...). Customers scan the QR code and see the shoe in augmented reality at real-world scale.
• Bags → 3D viewer URL (/viewer?object=...). Customers inspect the bag from every angle in an interactive 3D viewer. AR try-on is shoe-specific and not available for bags.

Either way, customers can:

• Scan the QR code with their smartphone
• View and rotate the 3D model
• See realistic proportions and materials

API Reference

Base URL

https://api.wearfits.com/v1

Authentication

All requests require an API key in the header:

X-API-Key: your-api-key

1. Upload Base 3D Model (Optional)

If you already have a 3D model of the product in .glb format, you can upload it directly to bypass the AI 2D-to-3D generation phase. Works for both shoes and bags.

POST /v1/files/upload
Content-Type: multipart/form-data

Request Fields

Response

{
  "url": "https://storage.wearfits.com/uploads/abc-123.glb"
}

2. Submit 3D Generation Job

The /v1/shoe-3d endpoint handles both shoes and bags — the historical name is retained for backwards compatibility. Use options.productType to indicate the product type (or "auto" to detect it).

POST /v1/shoe-3d

{
  "images": [
    "https://example.com/product-front.jpg",
    "https://example.com/product-side.jpg"
  ],
  "glbInput": "https://storage.wearfits.com/uploads/abc-123.glb",
  "options": {
    "uploadToWearFits": true,
    "productType": "auto",
    "enhanceTexture": true,
    "genaiQuality": "high",
    "smoothNormals": true
  }
}

Request Fields

* Required to receive wearfitsTryOn.viewerUrl in the completed response. Without it you only get the raw .glb URL in results[].url.

Response

{
  "jobId": "d6543a37-7867-4986-af23-856501c1338d"
}

3. Check Job Status

GET /v1/jobs/{jobId}

Response (Processing)

{
  "id": "d6543a37-7867-4986-af23-856501c1338d",
  "status": "processing",
  "progress": {
    "stage": "generating_3d_model",
    "percentage": 45
  }
}

Response (Completed)

{
  "id": "d6543a37-7867-4986-af23-856501c1338d",
  "status": "completed",
  "mode": "shoe-3d",
  "results": [
    {
      "url": "https://storage.example.com/model.glb",
      "expiresAt": "2026-01-22T00:43:10.895Z"
    }
  ],
  "wearfitsTryOn": {
    "modelId": "shoe-model-123",
    "colorId": "color-456",
    "viewerUrl": "https://dev.wearfits.com/tryon/shoe/shoe-model-123/color-456"
  },
  "progress": {
    "stage": "completed",
    "percentage": 100
  }
}

Job Status Values

Frontend Integration

Once you've generated the viewer URL via the API (backend), add a "Try On" / "View in 3D" button to your product pages:

Viewer URL Formats

# Shoes — AR try-on (WebXR)
https://dev.wearfits.com/tryon?object={id}

# Bags (and other non-shoe products) — 3D viewer
https://dev.wearfits.com/viewer?object={id}

The completed job response returns the correct URL in wearfitsTryOn.viewerUrl based on the detected product type. For shoes, the frontend may convert /viewer? → /tryon? to enable AR mode; for bags, keep the /viewer? URL as-is. Store the resulting URL in your product database.

Simple Button Link

<!-- Direct link to viewer (AR for shoes, 3D for bags) -->
<a href="https://dev.wearfits.com/tryon?object=abc123"
   target="_blank"
   class="tryon-button">
  Try On in AR
</a>

Button with QR Code

<div class="wearfits-viewer">
  <!-- QR Code for mobile scanning -->
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://dev.wearfits.com/tryon?object=abc123"
       alt="Scan to view" />

  <p>Scan with your phone to view in 3D / AR</p>

  <a href="https://dev.wearfits.com/tryon?object=abc123"
     target="_blank">
    Open Viewer
  </a>
</div>

Dynamic JavaScript Example

// Product data from your backend (viewer URL already generated)
const product = {
  id: 'sku-001',
  name: 'Running Sneaker',           // or a handbag, etc.
  productType: 'shoe',                // 'shoe' | 'bag'
  viewerUrl: 'https://dev.wearfits.com/tryon?object=abc123'
};

// Generate QR code URL
function getQrCodeUrl(url) {
  return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`;
}

// Add a viewer button to the product page.
// Shoes get "Try On in AR"; non-shoe products get "View in 3D".
function addViewerButton(product) {
  const button = document.createElement('a');
  button.href = product.viewerUrl;
  button.target = '_blank';
  button.className = 'tryon-button';
  button.textContent = product.productType === 'shoe'
    ? 'Try On in AR'
    : 'View in 3D';

  document.querySelector('.product-actions').appendChild(button);
}

Best Practices

1. Image Requirements (for API)

• Use high-quality images (minimum 500x500px, recommended 1000x1000px)
• White or neutral background for best results
• Good lighting without harsh shadows
• Multiple angles improve 3D quality significantly
• Supported formats: JPEG, PNG, WebP

2. Backend Integration

• Pre-generate 3D models when shoes or bags are added to your catalog
• Store viewer URLs (AR or 3D) in your product database
• 3D generation takes 1-5 minutes - run as a background job
• Cache generated viewer URLs by product ID

3. Frontend User Experience

• Place the "Try On in AR" / "View in 3D" button prominently on product pages
• Provide clear instructions for QR code scanning
• Offer both a QR code and a direct link for flexibility
• Consider showing the QR code on desktop and a direct button on mobile
• Use product-type-aware copy: "Try On in AR" for shoes, "View in 3D" for bags

4. Job Persistence

The WEARFITS photo-to-3D app automatically persists in-progress jobs across page reloads:

• If a user refreshes the page during 3D model generation, the job will automatically resume
• Pending jobs are stored in localStorage with a 15-minute expiration
• Once the job completes or fails, the pending state is cleared
• This ensures users don't lose their progress if they accidentally navigate away

Need Help?

For technical support and API access, contact our support team

View Clothing Try-On Integration Guide

📄 View as Markdown