Step 1 — Upload the HTML File

Go to WordPress Admin → Media → Add New
Upload apparel-studio-v3.html
Copy the file URL (e.g. https://yoursite.com/wp-content/uploads/2024/apparel-studio-v3.html)

Step 2 — Embed on a Page

Create a WordPress page. In the Gutenberg editor, add a Custom HTML block and paste:

<iframe
  src="https://yoursite.com/wp-content/uploads/.../apparel-studio-v3.html"
  width="100%"
  height="800px"
  style="border:none;border-radius:12px"
  allowfullscreen
></iframe>

Step 3 — Admin vs Visitor Roles

The studio already has a built-in admin system:

👤 Visitors — see the designer, pick colors/logos/text, export PNG
🔐 Admin — click "Admin" button, enter password (studio2024), upload models

To change the admin password, open the HTML file in a text editor and find:
const ADMIN_PASS = 'studio2024';
Replace with your own secure password.

Step 4 — Saving Models (Persistent Storage)

Currently: Models added by URL persist in browser localStorage.
File uploads are session-only (too large for localStorage).

Best practice for WP:
1. Upload your GLB files to WP Media Library or AWS S3 / Cloudinary
2. Copy the direct URL
3. In studio Admin → "Add by URL" → paste URL + select garment type
4. The studio saves URL-based models in localStorage — they persist across visits

Pro tip: Use the "WP Offload Media" plugin to get permanent CDN URLs for your GLB files.

Step 5 — CORS for 3D Models

If models are hosted on your own WP server, add to your .htaccess:

✅ Recommended Workflow Summary

1. Upload GLB → WP Media or S3
2. Embed studio as iframe on WP page
3. Admin logs in → adds model URLs → sets UV zones
4. Visitors open page → select garment → customize → export PNG
5. Customer emails/submits the exported PNG with their order