Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,7 +1,8 @@
 /* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json
    - Lit config.json (data-config) => { "glb_url": "...", "usdz_url": "..." }
-   - iOS : AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom)
+   - iOS : AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom) + bouton “Lancer l’AR”
    - Android/Desktop : WebXR AR (plans HORIZONTAUX uniquement) + slider yaw + blob shadow
+   - Message de démarrage centré & plus grand sur iOS ET Android
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Monté dans un conteneur choisi (data-mount="#ar-mount") pour Squarespace
 */
@@ -106,28 +107,31 @@
   }
 
   // ============ UI / Overlay commun ============
-  // Style minimal intégré : toasts + variante centrée pour le message initial.
-  // (Si tu utilises un CSS externe, tu peux déplacer ces règles dans ce fichier.)
+  // Style minimal intégré : toasts, message centré, bouton “Lancer l’AR” (iOS & Android).
   var css = [
     /* Toast (bas) */
     ".pc-ar-msg{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10002;padding:10px 14px;background:rgba(0,0,0,.65);color:#fff;border-radius:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.3;text-align:center;max-width:min(90vw,640px);box-shadow:0 6px 20px rgba(0,0,0,.25);backdrop-filter:blur(4px);pointer-events:none}",
     /* Variante centrée + plus grande pour le message “Modèle chargé …” */
     ".pc-ar-msg.pc-ar-msg--centerBig{top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:18px;padding:14px 18px;max-width:min(90vw,720px)}",
 
+    /* Bouton “Lancer l’AR” */
+    "#ar-launch-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:72px;z-index:10003;pointer-events:auto;appearance:none;border:none;border-radius:14px;padding:12px 18px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:600;color:#fff;background:rgba(0,0,0,0.85);box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(6px);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}",
+    "#ar-launch-btn:active{transform:translateX(-50%) scale(0.98)}",
+    "#ar-launch-btn:disabled{opacity:.5;cursor:not-allowed}",
+
+    /* Ancre Quick Look cachée (iOS) */
+    "#ios-quicklook-anchor{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;pointer-events:none!important}",
+
     "#xr-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
 
-    /* --- NE PAS MODIFIER : panneau Rotation --- */
+    /* --- NE PAS MODIFIER : panneau Rotation (WebXR) --- */
     ".ar-ui{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.55);color:#fff;padding:12px 10px;border-radius:16px;width:56px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(6px);touch-action:none}",
     ".ar-ui .label{font-size:12px;text-align:center;opacity:.95}",
     ".rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;pointer-events:auto}",
     ".rotY-rail{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:rgba(255,255,255,.35);border-radius:2px;pointer-events:none}",
     ".rotY-knob{position:absolute;left:50%;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(-50%,-50%);top:50%;will-change:top;touch-action:none;pointer-events:none}",
     ".ar-ui input[type=\"range\"].rotY{position:absolute;opacity:0;pointer-events:none;width:0;height:0}",
-    ".ar-ui .val{font-size:12px;opacity:.95}",
-
-    /* iOS Quick Look button */
-    "#ios-quicklook-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10003;display:inline-block;pointer-events:auto}",
-    "#ios-quicklook-btn img{display:block;height:44px;width:auto}"
+    ".ar-ui .val{font-size:12px;opacity:.95}"
   ].join("\n");
   var styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -179,24 +183,39 @@
     }
   }
 
-  function ensureQuickLookButton(USDZ_URL) {
-    var btn = document.getElementById("ios-quicklook-btn");
-    if (btn) return btn;
-
-    var anchor = document.createElement("a");
-    anchor.id = "ios-quicklook-btn";
-    anchor.setAttribute("rel", "ar");
-    anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
+  // Bouton “Lancer l’AR” (visible) + ancre Quick Look (cachée) pour iOS
+  function ensureIOSLaunchUI(usdzUrl) {
+    // Ancre cachée qui déclenche Quick Look
+    var anchor = document.getElementById("ios-quicklook-anchor");
+    if (!anchor) {
+      anchor = document.createElement("a");
+      anchor.id = "ios-quicklook-anchor";
+      anchor.setAttribute("rel", "ar");
+      document.body.appendChild(anchor);
+    }
+    if (usdzUrl) anchor.setAttribute("href", buildQuickLookHref(usdzUrl));
+
+    // Bouton visible “Lancer l’AR”
+    var btn = document.getElementById("ar-launch-btn");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.id = "ar-launch-btn";
+      btn.type = "button";
+      btn.textContent = "Lancer l’AR";
+      // Évite la propagation d’events vers la scène
+      btn.addEventListener("pointerdown", function (e) { e.stopPropagation(); }, { passive: true });
+      btn.addEventListener("click", function (e) { e.stopPropagation(); }, false);
+      document.body.appendChild(btn);
+    }
 
-    var img = document.createElement("img");
-    img.alt = "Voir en AR";
-    img.src =
-      "data:image/svg+xml;charset=utf-8," +
-      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="180" height="48"><rect rx="10" ry="10" width="180" height="48" fill="black"/><text x="90" y="30" font-size="16" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
+    // Clic => simulateur de clic sur l’ancre rel="ar"
+    btn.onclick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (anchor && anchor.href) anchor.click();
+    };
 
-    anchor.appendChild(img);
-    document.body.appendChild(anchor);
-    return anchor;
+    return { btn: btn, anchor: anchor };
   }
 
   // ============ Canvas monté dans un conteneur contrôlé (Squarespace) ============
@@ -248,7 +267,7 @@
     return canvas;
   }
 
-  // ---------- Panneau “Rotation” (inchangé) ----------
+  // ---------- Panneau “Rotation” (inchangé pour WebXR) ----------
   function ensureSliderUI() {
     var p = overlayRoot.querySelector(".ar-ui");
     if (p) return p;
@@ -266,27 +285,31 @@
     return p;
   }
 
-  // ============ Boot : charge config, route iOS vs Android/Desktop ============
+  // ============ Boot : charge config, branche iOS vs Android/Desktop ============
   (async function () {
     var cfgUrl = findConfigUrl();
     var cfg = await loadConfigJson(cfgUrl);
-    var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url) ?
-                  cfg.glb_url :
-                  "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
-    var USDZ_URL = (cfg && typeof cfg.usdz_url === "string" && cfg.usdz_url) ?
-                   cfg.usdz_url :
-                   null;
-
+    var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url)
+      ? cfg.glb_url
+      : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
+    var USDZ_URL = (cfg && typeof cfg.usdz_url === "string" && cfg.usdz_url)
+      ? cfg.usdz_url
+      : null;
+
+    // --------- iOS : Quick Look + message centré + bouton “Lancer l’AR” ---------
     if (isIOS()) {
       if (USDZ_URL) {
-        ensureQuickLookButton(USDZ_URL);
-        messageToast("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
+        // UI iOS (ancre rel=ar + bouton visible)
+        ensureIOSLaunchUI(USDZ_URL);
+        // Message de démarrage centré et plus grand (même UX que WebXR)
+        messageCenterBig("Modèle chargé. Appuyez sur « Lancer l’AR » pour démarrer.");
       } else {
         messageToast("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
       return;
     }
 
+    // --------- Android / Desktop : WebXR ---------
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -303,11 +326,11 @@
 
     // Canvas + UI
     var canvas = ensureCanvas();
-    var sliderPanel = ensureSliderUI(); // (anciennement 'ui', plus explicite)
-    var rotTrack = sliderPanel.querySelector("#ar-rotY-wrap");     // (anciennement rotWrap)
-    var rotThumb = sliderPanel.querySelector("#ar-rotY-knob");     // (anciennement rotKnob)
-    var rotRangeInput = sliderPanel.querySelector("#ar-rotY");     // (anciennement rotYInput)
-    var rotValueLabel = sliderPanel.querySelector("#ar-rotY-val"); // (anciennement rotYVal)
+    var sliderPanel = ensureSliderUI();
+    var rotTrack = sliderPanel.querySelector("#ar-rotY-wrap");
+    var rotThumb = sliderPanel.querySelector("#ar-rotY-knob");
+    var rotRangeInput = sliderPanel.querySelector("#ar-rotY");
+    var rotValueLabel = sliderPanel.querySelector("#ar-rotY-val");
 
     window.focus();
 
@@ -473,8 +496,7 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-
-      // >>> Message centré & un peu plus grand pour l’invite initiale
+      // Message de démarrage centré & plus grand (même UX que iOS)
       messageCenterBig("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
@@ -529,7 +551,7 @@
     document.addEventListener("pointerup", endDrag, { capture: true, passive: false });
     document.addEventListener("pointercancel", endDrag, { capture: true, passive: false });
 
-    // --- Démarrage AR (Android/Desktop)
+    // --- Démarrage AR (tap écran)
     function activateAR() {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { messageToast("AR immersive indisponible sur cet appareil."); return; }
       if (!app.xr.domOverlay) app.xr.domOverlay = {};
@@ -593,7 +615,7 @@
               placedOnce = true;
               rotRangeInput.disabled = false;
 
-              // Après placement, on repasse aux toasts bas classiques
+              // Après placement, toasts bas classiques
               messageToast("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });