Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -4,12 +4,13 @@
    - Android/Desktop : WebXR AR (horizontaux uniquement) + slider yaw + blob shadow
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Monté dans un conteneur choisi (data-mount="#ar-mount") pour Squarespace
+   - Bouton "Lancer l’AR" (Android & iOS)
+   - CSS externalisé : https://huggingface.co/spaces/MikaFil/VR/resolve/main/css/style.css
 */
 
 (function () {
-  // ============ Utils: script tag / config / platform ============
+  // ============ Utils: script tag / config / platform / CSS ============
   function getCurrentScript() {
-    // robuste même si currentScript n'est pas dispo
     return document.currentScript || (function () {
       var scripts = document.getElementsByTagName('script');
       return scripts[scripts.length - 1] || null;
@@ -46,6 +47,18 @@
     }
   }
 
+  // Charge un CSS externe une seule fois
+  function ensureCssLink(href) {
+    if (!href) return;
+    var existing = Array.prototype.slice.call(document.querySelectorAll('link[rel="stylesheet"]'))
+      .some(function (link) { return link.href === href; });
+    if (existing) return;
+    var linkEl = document.createElement('link');
+    linkEl.rel = 'stylesheet';
+    linkEl.href = href;
+    document.head.appendChild(linkEl);
+  }
+
   // ============ PlayCanvas version fixée (Android/Desktop) ============
   var PC_VERSION = "2.11.7";
   var PC_URLS = {
@@ -105,27 +118,7 @@
     }
   }
 
-  // ============ UI / Overlay commun ============
-  var css = [
-    ".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}",
-    "#xr-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
-
-    ".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}"
-  ].join("\n");
-  var styleTag = document.createElement("style");
-  styleTag.textContent = css;
-  document.head.appendChild(styleTag);
-
+  // ============ Overlay commun (structure DOM) ============
   function ensureOverlayRoot() {
     var r = document.getElementById("xr-overlay-root");
     if (!r) {
@@ -161,43 +154,21 @@
     }
   }
 
-  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));
-
-    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="160" height="44"><rect rx="8" ry="8" width="160" height="44" fill="black"/><text x="80" y="28" font-size="14" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
-
-    anchor.appendChild(img);
-    document.body.appendChild(anchor);
-    return anchor;
-  }
-
-  // ============ Canvas monté dans un conteneur contrôlé (Squarespace) ============
+  // Canvas monté dans un conteneur (Squarespace-friendly)
   function ensureCanvas() {
     var scriptEl = getCurrentScript();
     var mountSel = scriptEl && scriptEl.getAttribute('data-mount');
     var desiredHeight = (scriptEl && scriptEl.getAttribute('data-height')) || '70vh';
 
-    // Trouve le conteneur cible
     var mountEl = null;
     if (mountSel) mountEl = document.querySelector(mountSel);
     if (!mountEl) {
-      // fallback : tout en haut du body (pour éviter "sous le footer")
       mountEl = document.createElement('div');
       mountEl.id = 'ar-mount-fallback';
       document.body.insertBefore(mountEl, document.body.firstChild);
     }
 
-    // Style du conteneur
+    // Styles minimaux structurels (pas de "design", laissé au CSS externe)
     var mountStyle = mountEl.style;
     if (!mountStyle.position) mountStyle.position = 'relative';
     mountStyle.width = mountStyle.width || '100%';
@@ -205,7 +176,6 @@
     mountStyle.touchAction = mountStyle.touchAction || 'manipulation';
     mountStyle.webkitTapHighlightColor = 'transparent';
 
-    // Réutilise ou crée le canvas
     var canvas = mountEl.querySelector('#application-canvas');
     if (!canvas) {
       canvas = document.createElement('canvas');
@@ -213,7 +183,7 @@
       mountEl.appendChild(canvas);
     }
 
-    // Le canvas remplit le conteneur
+    // Positionne le canvas en plein dans son conteneur
     var cs = canvas.style;
     cs.position = 'absolute';
     cs.left = '0';
@@ -222,7 +192,6 @@
     cs.height = '100%';
     cs.display = 'block';
 
-    // Optionnel : ramener le viewport sur le viewer
     try {
       mountEl.scrollIntoView({ behavior: 'instant', block: 'start' });
     } catch (_) {}
@@ -247,8 +216,41 @@
     return p;
   }
 
-  // ============ Boot : charge config, route iOS vs Android/Desktop ============
+  // Bouton "Lancer l'AR" + (iOS) ancre rel=ar cachée
+  function ensureLaunchControls(USDZ_URL) {
+    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';
+      // Ne laisse pas le bouton déclencher des interactions scène
+      btn.addEventListener('pointerdown', function (e) { e.stopPropagation(); }, { passive: true });
+      btn.addEventListener('click', function (e) { e.stopPropagation(); }, false);
+      document.body.appendChild(btn);
+    }
+
+    var anchor = document.getElementById('ios-quicklook-anchor');
+    if (isIOS()) {
+      if (!anchor) {
+        anchor = document.createElement('a');
+        anchor.id = 'ios-quicklook-anchor';
+        anchor.setAttribute('rel', 'ar');
+        document.body.appendChild(anchor);
+      }
+      if (USDZ_URL) {
+        anchor.setAttribute('href', buildQuickLookHref(USDZ_URL));
+      }
+    }
+    return { btn: btn, anchor: anchor || null };
+  }
+
+  // ============ Boot : charge CSS, config, route iOS vs Android/Desktop ============
   (async function () {
+    // CSS externe
+    ensureCssLink("https://huggingface.co/spaces/MikaFil/VR/resolve/main/css/style.css");
+
+    // Config
     var cfgUrl = findConfigUrl();
     var cfg = await loadConfigJson(cfgUrl);
     var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url) ?
@@ -258,28 +260,50 @@
                    cfg.usdz_url :
                    null;
 
+    // Bouton (Android & iOS) + ancre QuickLook (iOS)
+    var controls = ensureLaunchControls(USDZ_URL);
+    var launchBtn = controls.btn;
+    var iosAnchor = controls.anchor;
+
     if (isIOS()) {
       if (USDZ_URL) {
-        ensureQuickLookButton(USDZ_URL);
-        message("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
+        message("iOS détecté : appuyez sur « Lancer l’AR » pour ouvrir Quick Look.");
+        launchBtn.onclick = function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (iosAnchor && iosAnchor.href) iosAnchor.click();
+        };
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
+        launchBtn.disabled = true;
+        launchBtn.style.opacity = '0.5';
       }
       return;
     }
 
+    // Android / Desktop : charger PlayCanvas et initialiser l’app
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
       console.error("Chargement PlayCanvas échoué ->", e);
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
+      launchBtn.disabled = true;
+      launchBtn.style.opacity = '0.5';
       return;
     }
-    initARApp(GLB_URL);
+
+    var activateARRef = { fn: null };
+    initARApp(GLB_URL, activateARRef);
+
+    launchBtn.onclick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (typeof activateARRef.fn === 'function') activateARRef.fn();
+    };
   })();
 
   // ============ App Android/Desktop (WebXR) ============
-  function initARApp(GLB_URL) {
+  function initARApp(GLB_URL, activateARRef) {
     var pc = window.pc;
     var canvas = ensureCanvas();
     var ui = ensureSliderUI();
@@ -395,7 +419,7 @@
       return e;
     }
 
-    // Euler de base (évite inversions)
+    // Euler de base
     var baseEulerX = 0, baseEulerZ = 0;
 
     // Rotation via slider (0..360, 360 en haut / 0 en bas)
@@ -448,7 +472,7 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
+      message("Modèle chargé. Appuyez sur « Lancer l’AR » pour démarrer.");
     });
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
@@ -502,7 +526,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 (Android/Desktop) — exposé via activateARRef.fn et bouton
     function activateAR() {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
       if (!app.xr.domOverlay) app.xr.domOverlay = {};
@@ -518,6 +542,11 @@
         }
       });
     }
+    if (activateARRef && typeof activateARRef === 'object') {
+      activateARRef.fn = activateAR;
+    }
+
+    // Tap écran (optionnel, on le conserve)
     app.mouse.on("mousedown", function () { if (!app.xr.active && !uiInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", function (evt) {
@@ -640,7 +669,7 @@
     app.xr.on("available:" + pc.XRTYPE_AR, function (a) {
       if (!a) message("AR immersive indisponible.");
       else if (!app.xr.hitTest.supported) message("AR Hit Test non supporté.");
-      else message(modelLoaded ? "Touchez l’écran pour démarrer l’AR." : "Chargement du modèle…");
+      else message(modelLoaded ? "Touchez l’écran ou « Lancer l’AR »." : "Chargement du modèle…");
     });
 
     if (!app.xr.isAvailable(pc.XRTYPE_AR)) message("AR immersive indisponible.");