Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,6 +1,6 @@
 /* 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) + bouton "Lancer l’AR" (centré)
+   - iOS : AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom) + bouton "Lancer l’AR" (centré, déclenche Quick Look direct)
    - Android/Desktop : WebXR AR (plans horizontaux uniquement) + bouton "Lancer l’AR" (centré, pas de tap écran) + curseur de rotation (yaw) + ombre blob
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Monté dans un conteneur choisi (data-mount="#ar-mount") pour Squarespace
@@ -10,8 +10,6 @@
   // ==========================
   // Utilitaires généraux
   // ==========================
-
-  // Récupère de façon robuste le <script> courant (compatible pages CMS)
   function getCurrentScript() {
     return document.currentScript || (function () {
       var scripts = document.getElementsByTagName('script');
@@ -19,7 +17,6 @@
     })();
   }
 
-  // URL du fichier config.json passée via data-config sur le <script>
   function findConfigUrl() {
     var el = getCurrentScript();
     if (!el) return null;
@@ -27,19 +24,16 @@
     return url || null;
   }
 
-  // Détection iOS (pour Quick Look)
   function isIOS() {
     return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   }
 
-  // Petit helper timeout pour sécuriser des chargements
   function timeout(ms) {
     return new Promise(function (_res, rej) {
       setTimeout(function () { rej(new Error("timeout")); }, ms);
     });
   }
 
-  // Charge config.json (chemins GLB/USDZ)
   async function loadConfigJson(url) {
     if (!url) return null;
     try {
@@ -62,7 +56,6 @@
     umd: ["https://cdn.jsdelivr.net/npm/playcanvas@" + PC_VERSION + "/build/playcanvas.min.js"]
   };
 
-  // Charge PlayCanvas de façon robuste (ESM puis fallback UMD)
   async function loadPlayCanvasRobust(opts) {
     opts = opts || {};
     var esmFirst = (typeof opts.esmFirst === "boolean") ? opts.esmFirst : true;
@@ -118,29 +111,29 @@
   // ==========================
   // Overlay / UI (styles intégrés)
   // ==========================
-  // NOTE: ids/classes explicites :
   // - #ar-overlay-root : overlay global (DOM overlay XR + toasts)
   // - #ar-start-button : bouton Android/Desktop
-  // - #ar-ios-quicklook-button : bouton iOS (rel="ar")
+  // - #ar-ios-quicklook-button : bouton iOS (rel="ar" + <img> requis pour Quick Look)
   // - .ar-rotation-panel : panneau rotation
-  // - #ar-rotation-track/#ar-rotation-knob/#ar-rotation-range/#ar-rotation-value : slider yaw
+  // - #ar-rotation-* : slider yaw
 
   var css = [
-    /* Conteneur overlay global (DOM Overlay WebXR + messages) */
+    /* Conteneur overlay global */
     "#ar-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
 
-    /* Toast (bas centre) utilisé pour la plupart des messages */
+    /* Toasts */
     ".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}",
     ".pc-ar-msg.pc-ar-msg--centerBig{top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:20px;padding:16px 22px;max-width:min(90vw,760px)}",
 
-    /* ----- Bouton start Android/Desktop : centré et légèrement plus grand ----- */
+    /* ----- Bouton Android/Desktop : centré + légèrement plus grand ----- */
     "#ar-start-button{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10003;pointer-events:auto;border:none;border-radius:16px;padding:16px 24px;font-size:18px;line-height:1;background:#000;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28);cursor:pointer;min-width:200px;text-align:center}",
     "#ar-start-button[disabled]{opacity:.5;cursor:not-allowed}",
 
-    /* ----- Bouton iOS Quick Look (ancre rel=ar) : centré et légèrement plus grand ----- */
-    "#ar-ios-quicklook-button{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10003;display:inline-block;pointer-events:auto;background:#000;color:#fff;border-radius:16px;padding:16px 24px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:18px;line-height:1;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.28);min-width:200px;text-align:center}",
+    /* ----- Bouton iOS Quick Look : centré + <img> (exigé par Quick Look) ----- */
+    "#ar-ios-quicklook-button{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10003;pointer-events:auto;display:inline-block;text-decoration:none}",
+    "#ar-ios-quicklook-button img{display:block;height:60px;width:auto;box-shadow:0 10px 28px rgba(0,0,0,.28);border-radius:14px}",
 
-    /* ----- Panneau de rotation ----- */
+    /* ----- Panneau rotation ----- */
     ".ar-rotation-panel{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-rotation-panel .label{font-size:12px;text-align:center;opacity:.95}",
     "#ar-rotation-track{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;pointer-events:auto}",
@@ -153,7 +146,6 @@
   styleTag.textContent = css;
   document.head.appendChild(styleTag);
 
-  // Crée/récupère le conteneur d’overlay global
   function ensureOverlayRoot() {
     var r = document.getElementById("ar-overlay-root");
     if (!r) {
@@ -165,7 +157,6 @@
   }
   var overlayRoot = ensureOverlayRoot();
 
-  // Système de message (centre + agrandi si invite de départ)
   function message(txt) {
     var el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
@@ -178,7 +169,7 @@
     el.textContent = txt;
   }
 
-  // Construit l’URL Quick Look empêchant le pinch-to-scale
+  // iOS Quick Look URL sans zoom
   function buildQuickLookHref(usdzUrl) {
     try {
       var u = new URL(usdzUrl, window.location.href);
@@ -192,7 +183,7 @@
     }
   }
 
-  // Crée le bouton iOS Quick Look (ancre rel=ar) — centré
+  // iOS : ancre rel=ar + <img> (c’est ce format qui déclenche Quick Look direct)
   function ensureQuickLookButton(USDZ_URL) {
     var btn = document.getElementById("ar-ios-quicklook-button");
     if (btn) return btn;
@@ -201,12 +192,23 @@
     anchor.id = "ar-ios-quicklook-button";
     anchor.setAttribute("rel", "ar");
     anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
-    anchor.textContent = "Lancer l’AR";
+
+    // Bouton visuel en SVG embarqué, libellé "Lancer l’AR"
+    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="60">' +
+              '<rect rx="14" ry="14" width="240" height="60" fill="black"/>' +
+              '<text x="120" y="37" font-size="18" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Lancer l’AR</text>' +
+              '</svg>';
+
+    var img = document.createElement("img");
+    img.alt = "Lancer l’AR";
+    img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+
+    anchor.appendChild(img);
     document.body.appendChild(anchor);
     return anchor;
   }
 
-  // Android/Desktop : bouton “Lancer l’AR” — centré
+  // Android/Desktop : bouton “Lancer l’AR”
   function ensureARStartButton(onClick) {
     var btn = document.getElementById("ar-start-button");
     if (!btn) {
@@ -232,17 +234,14 @@
     var mountSel = scriptEl && scriptEl.getAttribute('data-mount');
     var desiredHeight = (scriptEl && scriptEl.getAttribute('data-height')) || '70vh';
 
-    // Trouve (ou fabrique) le conteneur d’accueil du canvas
     var mountEl = null;
     if (mountSel) mountEl = document.querySelector(mountSel);
     if (!mountEl) {
-      // Fallback : placé en haut de <body> pour éviter d’être “sous le footer”
       mountEl = document.createElement('div');
       mountEl.id = 'ar-mount-fallback';
       document.body.insertBefore(mountEl, document.body.firstChild);
     }
 
-    // Style de base du conteneur
     var mountStyle = mountEl.style;
     if (!mountStyle.position) mountStyle.position = 'relative';
     mountStyle.width = mountStyle.width || '100%';
@@ -250,7 +249,6 @@
     mountStyle.touchAction = mountStyle.touchAction || 'manipulation';
     mountStyle.webkitTapHighlightColor = 'transparent';
 
-    // Crée/réutilise le canvas
     var canvas = mountEl.querySelector('#application-canvas');
     if (!canvas) {
       canvas = document.createElement('canvas');
@@ -258,7 +256,6 @@
       mountEl.appendChild(canvas);
     }
 
-    // Le canvas remplit le conteneur
     var cs = canvas.style;
     cs.position = 'absolute';
     cs.left = '0';
@@ -267,15 +264,11 @@
     cs.height = '100%';
     cs.display = 'block';
 
-    // Optionnel : faire défiler vers la zone AR
-    try {
-      mountEl.scrollIntoView({ behavior: 'instant', block: 'start' });
-    } catch (_) {}
+    try { mountEl.scrollIntoView({ behavior: 'instant', block: 'start' }); } catch (_) {}
 
     return canvas;
   }
 
-  // Panneau “Rotation” vertical (slider personnalisé)
   function ensureRotationPanel() {
     var p = overlayRoot.querySelector(".ar-rotation-panel");
     if (p) return p;
@@ -306,11 +299,10 @@
                    cfg.usdz_url :
                    null;
 
-    // iOS → Quick Look (bouton centré)
+    // iOS → Quick Look via ancre rel=ar + <img> (ouverture directe de l’USDZ)
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
-        // Message centré + agrandi pour être bien visible
         message("Modèle chargé. Appuyez sur « Lancer l’AR ».");
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
@@ -318,7 +310,7 @@
       return;
     }
 
-    // Android/Desktop → PlayCanvas/WebXR (avec bouton centré)
+    // Android/Desktop → PlayCanvas/WebXR (bouton centré)
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -335,7 +327,6 @@
   function initARApp(GLB_URL) {
     var pc = window.pc;
 
-    // Canvas + panneau rotation
     var canvas = ensureCanvas();
     var rotationPanel = ensureRotationPanel();
     var rotTrack = rotationPanel.querySelector("#ar-rotation-track");
@@ -345,7 +336,6 @@
 
     window.focus();
 
-    // Application PlayCanvas
     var app = new pc.Application(canvas, {
       mouse: new pc.Mouse(canvas),
       touch: new pc.TouchDevice(canvas),
@@ -361,7 +351,7 @@
     app.on("destroy", function () { window.removeEventListener("resize", onResize); });
     app.start();
 
-    // Réglages de rendu PBR “safe”
+    // Rendu PBR “safe”
     app.scene.gammaCorrection = pc.GAMMA_SRGB;
     app.scene.toneMapping     = pc.TONEMAP_ACES;
     app.scene.exposure        = 1;
@@ -377,7 +367,7 @@
     light.setLocalEulerAngles(45, 30, 0);
     app.root.addChild(light);
 
-    // Réticule (visualise la cible du hit-test)
+    // Réticule
     var reticleMat = new pc.StandardMaterial();
     reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0);
     reticleMat.opacity = 0.85;
@@ -390,13 +380,13 @@
     reticle.enabled = false;
     app.root.addChild(reticle);
 
-    // Conteneur du modèle chargé
+    // Modèle
     var modelRoot = new pc.Entity("ModelRoot");
     modelRoot.enabled = false;
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // Ombre de contact (blob “peinte” sur un plan)
+    // Ombre blob
     var blob = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
@@ -451,7 +441,7 @@
       return e;
     }
 
-    // Rotation via slider (0..360)
+    // Rotation via slider
     var baseEulerX = 0, baseEulerZ = 0;
     var rotationYDeg = 0;
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
@@ -475,14 +465,13 @@
       if (rotLikePlane) blob.setRotation(rotLikePlane);
     }
 
-    // Chargement du modèle GLB (depuis config.json)
+    // Chargement GLB
     app.assets.loadFromUrl(GLB_URL, "container", function (err, asset) {
       if (err) { console.error(err); message("Échec du chargement du modèle GLB."); return; }
       var instance = asset.resource.instantiateRenderEntity({ castShadows: true, receiveShadows: false });
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(1, 1, 1);
 
-      // Ajustements simples matériaux (évite rendu trop sombre sans IBL)
       var renders = instance.findComponents('render');
       for (var ri = 0; ri < renders.length; ri++) {
         var r = renders[ri];
@@ -502,13 +491,12 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-      // >>> Message de démarrage
       message("Modèle chargé. Appuyez sur « Lancer l’AR ».");
     });
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // Gestion fiable du slider (capture des pointer events)
+    // Slider (pointer capture)
     var uiInteracting = false;
     var draggingTrack = false;
     var activePointerId = null;
@@ -519,7 +507,7 @@
       var y = (e.clientY != null) ? e.clientY : ((e.touches && e.touches[0] && e.touches[0].clientY) || 0);
       var ratio = (y - rect.top) / rect.height;
       var t = Math.max(0, Math.min(1, ratio));
-      return (1 - t) * 360; // 360 en haut, 0 en bas
+      return (1 - t) * 360;
     }
 
     function onPointerDownCapture(e) {
@@ -527,29 +515,21 @@
       uiInteracting = true;
       draggingTrack = true;
       activePointerId = (e.pointerId != null) ? e.pointerId : 1;
-      if (rotTrack.setPointerCapture) {
-        try { rotTrack.setPointerCapture(activePointerId); } catch (er) {}
-      }
+      if (rotTrack.setPointerCapture) { try { rotTrack.setPointerCapture(activePointerId); } catch (er) {} }
       applyRotationY(degFromPointer(e));
-      e.preventDefault();
-      e.stopPropagation();
+      e.preventDefault(); e.stopPropagation();
     }
     function onPointerMoveCapture(e) {
       if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
       applyRotationY(degFromPointer(e));
-      e.preventDefault();
-      e.stopPropagation();
+      e.preventDefault(); e.stopPropagation();
     }
     function endDrag(e) {
       if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
-      draggingTrack = false;
-      uiInteracting = false;
-      if (rotTrack.releasePointerCapture) {
-        try { rotTrack.releasePointerCapture(activePointerId); } catch (er) {}
-      }
+      draggingTrack = false; uiInteracting = false;
+      if (rotTrack.releasePointerCapture) { try { rotTrack.releasePointerCapture(activePointerId); } catch (er) {} }
       activePointerId = null;
-      e.preventDefault();
-      e.stopPropagation();
+      e.preventDefault(); e.stopPropagation();
     }
 
     document.addEventListener("pointerdown", onPointerDownCapture, { capture: true, passive: false });
@@ -574,13 +554,13 @@
       });
     }
 
-    // Crée le bouton et relie le clic au démarrage AR
+    // Bouton start Android/Desktop
     var startBtn = ensureARStartButton(activateAR);
 
-    // IMPORTANT : aucun démarrage par clic/tap sur le canvas
+    // Pas de démarrage par tap/clic sur le canvas
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test : détecte uniquement des surfaces quasi-horizontales
+    // Hit-test (plans quasi-horizontaux)
     var TMP_IN = new pc.Vec3(0, 1, 0), TMP_OUT = new pc.Vec3();
     function isHorizontalUpFacing(rot, minDot) {
       minDot = (typeof minDot === "number") ? minDot : 0.75;
@@ -588,7 +568,6 @@
       return TMP_OUT.y >= minDot;
     }
 
-    // Hit Test global (alimentation du réticule + premier placement)
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
@@ -605,7 +584,6 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Ombre de contact au placement initial
               blob = createBlobShadowAt(pos, rot);
 
               var e = new pc.Vec3();
@@ -622,7 +600,7 @@
       });
     });
 
-    // Déplacement XR continu (drag) — ignoré si UI active
+    // Drag XR continu
     var isDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
@@ -686,7 +664,7 @@
       applyRotationY(v);
     }, { passive: true });
 
-    // Événements AR (feedback + visibilité du bouton)
+    // Événements AR (feedback + visibilité bouton)
     app.xr.on("start", function () {
       if (startBtn) startBtn.style.display = "none";
       message("Session AR démarrée. Visez le sol pour détecter un plan…");