Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,23 +1,23 @@
-/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json
+/* script_ar.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 : fallback AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom)
    - 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
 */
 
 (function () {
-  // ============ Utils: script tag / config / platform ============
-  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;
-    })();
-  }
-
+  // ===== Utils: config + platform =====
   function findConfigUrl() {
-    var el = getCurrentScript();
+    var el = document.currentScript || null;
+    if (!el) {
+      var scripts = document.getElementsByTagName('script');
+      for (var i = scripts.length - 1; i >= 0; i--) {
+        if (scripts[i].getAttribute && scripts[i].getAttribute('data-config')) {
+          el = scripts[i];
+          break;
+        }
+      }
+    }
     if (!el) return null;
     var url = el.getAttribute('data-config');
     return url || null;
@@ -46,7 +46,7 @@
     }
   }
 
-  // ============ PlayCanvas version fixée (Android/Desktop) ============
+  // ===== PlayCanvas version fixée (Android/Desktop) =====
   var PC_VERSION = "2.11.7";
   var PC_URLS = {
     esm: ["https://cdn.jsdelivr.net/npm/playcanvas@" + PC_VERSION + "/build/playcanvas.min.mjs"],
@@ -105,10 +105,10 @@
     }
   }
 
-  // ============ UI / Overlay commun ============
+  // ===== 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}",
+    ".pc-ar-msg{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:2;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:9999;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}",
@@ -119,7 +119,7 @@
     ".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{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10001;display:inline-block;pointer-events:auto}",
     "#ios-quicklook-btn img{display:block;height:44px;width:auto}"
   ].join("\n");
   var styleTag = document.createElement("style");
@@ -147,7 +147,7 @@
     el.textContent = msg;
   }
 
-  // iOS Quick Look URL (empêche le pinch to scale)
+  // Construit l'URL Quick Look avec allowsContentScaling=0
   function buildQuickLookHref(usdzUrl) {
     try {
       var u = new URL(usdzUrl, window.location.href);
@@ -168,7 +168,7 @@
     var anchor = document.createElement("a");
     anchor.id = "ios-quicklook-btn";
     anchor.setAttribute("rel", "ar");
-    anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
+    anchor.setAttribute("href", buildQuickLookHref(USDZ_URL)); // << blocage du scaling
 
     var img = document.createElement("img");
     img.alt = "Voir en AR";
@@ -181,53 +181,16 @@
     return anchor;
   }
 
-  // ============ Canvas monté dans un conteneur contrôlé (Squarespace) ============
   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);
+    var c = document.getElementById("application-canvas");
+    if (!c) {
+      c = document.createElement("canvas");
+      c.id = "application-canvas";
+      c.style.width = "100%";
+      c.style.height = "100%";
+      document.body.appendChild(c);
     }
-
-    // Style du conteneur
-    var mountStyle = mountEl.style;
-    if (!mountStyle.position) mountStyle.position = 'relative';
-    mountStyle.width = mountStyle.width || '100%';
-    mountStyle.minHeight = mountStyle.minHeight || desiredHeight;
-    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');
-      canvas.id = 'application-canvas';
-      mountEl.appendChild(canvas);
-    }
-
-    // Le canvas remplit le conteneur
-    var cs = canvas.style;
-    cs.position = 'absolute';
-    cs.left = '0';
-    cs.top = '0';
-    cs.width = '100%';
-    cs.height = '100%';
-    cs.display = 'block';
-
-    // Optionnel : ramener le viewport sur le viewer
-    try {
-      mountEl.scrollIntoView({ behavior: 'instant', block: 'start' });
-    } catch (_) {}
-
-    return canvas;
+    return c;
   }
 
   function ensureSliderUI() {
@@ -247,8 +210,9 @@
     return p;
   }
 
-  // ============ Boot : charge config, route iOS vs Android/Desktop ============
+  // ===== Boot : charge config, route iOS vs Android/Desktop =====
   (async function () {
+    // 1) Lire config.json
     var cfgUrl = findConfigUrl();
     var cfg = await loadConfigJson(cfgUrl);
     var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url) ?
@@ -258,6 +222,7 @@
                    cfg.usdz_url :
                    null;
 
+    // 2) iOS → AR Quick Look (fallback)
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
@@ -265,9 +230,11 @@
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
+      // Option : lancer un viewer 3D non-AR ici si désiré.
       return;
     }
 
+    // 3) Android/Desktop → charger PlayCanvas et lancer l'app WebXR
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -278,7 +245,7 @@
     initARApp(GLB_URL);
   })();
 
-  // ============ App Android/Desktop (WebXR) ============
+  // ===== App Android/Desktop (WebXR) =====
   function initARApp(GLB_URL) {
     var pc = window.pc;
     var canvas = ensureCanvas();
@@ -299,13 +266,12 @@
     app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
     app.graphicsDevice.maxPixelRatio = window.devicePixelRatio || 1;
-
     var onResize = function () { app.resizeCanvas(); };
     window.addEventListener("resize", onResize);
     app.on("destroy", function () { window.removeEventListener("resize", onResize); });
     app.start();
 
-    // Rendu / PBR defaults
+    // ===== Rendu / PBR defaults =====
     app.scene.gammaCorrection = pc.GAMMA_SRGB;
     app.scene.toneMapping = pc.TONEMAP_ACES;
     app.scene.exposure = 1;
@@ -395,10 +361,10 @@
       return e;
     }
 
-    // Euler de base (évite inversions)
+    // Euler base
     var baseEulerX = 0, baseEulerZ = 0;
 
-    // Rotation via slider (0..360, 360 en haut / 0 en bas)
+    // Rotation via slider
     var rotationYDeg = 0;
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
 
@@ -421,14 +387,14 @@
       if (rotLikePlane) blob.setRotation(rotLikePlane);
     }
 
-    // Chargement GLB (depuis config.json)
+    // Chargement GLB (config.json)
     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);
 
-      // Fix matériaux simples
+      // Fix matériaux
       var renders = instance.findComponents('render');
       for (var ri = 0; ri < renders.length; ri++) {
         var r = renders[ri];
@@ -453,7 +419,7 @@
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // Slider fiable (pointer events en capture)
+    // ===== Slider fiable : Pointer Events en CAPTURE =====
     var uiInteracting = false;
     var draggingWrap = false;
     var activePointerId = null;
@@ -528,7 +494,7 @@
     }
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test HORIZONTAL uniquement
+    // ====== Hit-test HORIZONTAL uniquement ======
     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;
@@ -648,3 +614,4 @@
     else message("Chargement du modèle…");
   }
 })();
+