Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,9 +1,10 @@
-/* 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é, 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
+/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json (+ support murs via "sol": false)
+   - Lit config.json (data-config) => { "glb_url": "...", "usdz_url": "...", "sol": true|false }
+   - iOS : AR Quick Look (USDZ) — on ne peut PAS forcer mur/sol, mais l’utilisateur peut glisser l’objet sur un mur
+   - Android/Desktop : WebXR AR
+       * sol=true  => plans horizontaux (sol)
+       * sol=false => plans verticaux (murs)
+     + bouton "Lancer l’AR" (centré) + curseur rotation (yaw)
 */
 
 (function () {
@@ -111,29 +112,14 @@
   // ==========================
   // Overlay / UI (styles intégrés)
   // ==========================
-  // - #ar-overlay-root : overlay global (DOM overlay XR + toasts)
-  // - #ar-start-button : bouton Android/Desktop
-  // - #ar-ios-quicklook-button : bouton iOS (rel="ar" + <img> requis pour Quick Look)
-  // - .ar-rotation-panel : panneau rotation
-  // - #ar-rotation-* : slider yaw
-
   var css = [
-    /* Conteneur overlay global */
     "#ar-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
-
-    /* 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 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{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;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 : 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 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}",
@@ -183,7 +169,7 @@
     }
   }
 
-  // iOS : ancre rel=ar + <img> (c’est ce format qui déclenche Quick Look direct)
+  // iOS : bouton Quick Look (l’utilisateur peut glisser l’objet sur un mur si souhaité)
   function ensureQuickLookButton(USDZ_URL) {
     var btn = document.getElementById("ar-ios-quicklook-button");
     if (btn) return btn;
@@ -193,7 +179,6 @@
     anchor.setAttribute("rel", "ar");
     anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
 
-    // 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>' +
@@ -227,7 +212,7 @@
   }
 
   // ==========================
-  // Montage du canvas (Squarespace-friendly)
+  // Montage du canvas
   // ==========================
   function ensureCanvas() {
     var scriptEl = getCurrentScript();
@@ -299,18 +284,23 @@
                    cfg.usdz_url :
                    null;
 
-    // iOS → Quick Look via ancre rel=ar + <img> (ouverture directe de l’USDZ)
+    // NEW: lecture de "sol" (par défaut true)
+    var PLACE_ON_FLOOR = true;
+    if (cfg && typeof cfg.sol === "boolean") PLACE_ON_FLOOR = !!cfg.sol;
+
+    // iOS → Quick Look (on ne peut pas imposer mur/sol)
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
-        message("Modèle chargé. Appuyez sur « Lancer l’AR ».");
+        message("Modèle chargé. Appuyez sur « Lancer l’AR » puis placez-le " +
+                (PLACE_ON_FLOOR ? "sur le sol." : "sur un mur (faites-le glisser)."));
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
       return;
     }
 
-    // Android/Desktop → PlayCanvas/WebXR (bouton centré)
+    // Android/Desktop → WebXR
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -318,13 +308,13 @@
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
-    initARApp(GLB_URL);
+    initARApp(GLB_URL, PLACE_ON_FLOOR);
   })();
 
   // ==========================
   // Application WebXR (Android/Desktop)
   // ==========================
-  function initARApp(GLB_URL) {
+  function initARApp(GLB_URL, PLACE_ON_FLOOR) {
     var pc = window.pc;
 
     var canvas = ensureCanvas();
@@ -386,7 +376,7 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // Ombre blob
+    // Ombre blob (uniquement pour le sol)
     var blob = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
@@ -496,6 +486,24 @@
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
+    // ----- Détection d’orientation de plan -----
+    var TMP_IN = new pc.Vec3(0, 1, 0), TMP_OUT = new pc.Vec3();
+    // Sol : normal ≈ +Y
+    function isHorizontalUpFacing(rot, minDot) {
+      minDot = (typeof minDot === "number") ? minDot : 0.75;
+      rot.transformVector(TMP_IN, TMP_OUT);
+      return TMP_OUT.y >= minDot;
+    }
+    // Mur : normal ≈ horizontale (|y| petit)
+    function isVerticalFacing(rot, maxAbsY) {
+      maxAbsY = (typeof maxAbsY === "number") ? maxAbsY : 0.35; // tolérance
+      rot.transformVector(TMP_IN, TMP_OUT);
+      return Math.abs(TMP_OUT.y) <= maxAbsY;
+    }
+    function planeMatchesMode(rot) {
+      return PLACE_ON_FLOOR ? isHorizontalUpFacing(rot) : isVerticalFacing(rot);
+    }
+
     // Slider (pointer capture)
     var uiInteracting = false;
     var draggingTrack = false;
@@ -557,24 +565,16 @@
     // Bouton start Android/Desktop
     var startBtn = ensureARStartButton(activateAR);
 
-    // 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 (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;
-      rot.transformVector(TMP_IN, TMP_OUT);
-      return TMP_OUT.y >= minDot;
-    }
-
+    // Hit-test (sol ⇧ vs mur ⇨)
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
         callback: function (err, hitSource) {
           if (err) { message("Le AR hit test n’a pas pu démarrer."); return; }
           hitSource.on("result", function (pos, rot) {
-            if (!isHorizontalUpFacing(rot)) return;
+            if (!planeMatchesMode(rot)) return;
 
             reticle.enabled = true;
             reticle.setPosition(pos);
@@ -584,23 +584,31 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              blob = createBlobShadowAt(pos, rot);
+              // Ombre : seulement pour le sol
+              if (PLACE_ON_FLOOR) {
+                blob = createBlobShadowAt(pos, rot);
+              }
 
+              // Aligner l’orientation “yaw” avec le plan détecté (sol ou mur)
               var e = new pc.Vec3();
               rot.getEulerAngles(e);
               var y0 = ((e.y % 360) + 360) % 360;
+              // sur mur : garder l’objet droit (pas d’inclinaison X/Z)
+              if (!PLACE_ON_FLOOR) { baseEulerX = 0; baseEulerZ = 0; }
               applyRotationY(y0);
 
               placedOnce = true;
               rotInput.disabled = false;
-              message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
+              message(PLACE_ON_FLOOR ?
+                "Objet placé. Glissez pour déplacer, tournez-le avec le slider →" :
+                "Objet placé contre le mur. Glissez pour déplacer sur le mur, tournez-le avec le slider →");
             }
           });
         }
       });
     });
 
-    // Drag XR continu
+    // Drag XR continu (suivant le mode)
     var isDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
@@ -615,9 +623,9 @@
 
             transientSource.on("result", function (pos, rot) {
               if (!isDragging) return;
-              if (!isHorizontalUpFacing(rot)) return;
+              if (!planeMatchesMode(rot)) return;
               modelRoot.setPosition(pos);
-              updateBlobPositionUnder(pos, rot);
+              if (PLACE_ON_FLOOR) updateBlobPositionUnder(pos, rot);
             });
 
             transientSource.once("remove", function () { isDragging = false; });
@@ -645,7 +653,7 @@
         if (reticle.enabled) {
           var p = reticle.getPosition();
           modelRoot.setPosition(p);
-          updateBlobPositionUnder(p, null);
+          if (PLACE_ON_FLOOR) updateBlobPositionUnder(p, null);
         }
       } else if (rotateMode && modelRoot.enabled) {
         var dx = e.x - lastMouseX;
@@ -667,7 +675,9 @@
     // É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…");
+      message(PLACE_ON_FLOOR ?
+        "Session AR démarrée. Visez le sol pour détecter un plan…" :
+        "Session AR démarrée. Visez un mur pour détecter un plan vertical…");
       reticle.enabled = true;
     });
     app.xr.on("end", function () {