Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,10 +1,9 @@
-/* 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)
+/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json (+ "sol")
+   - config.json : { "glb_url": "...", "usdz_url": "...", "sol": true|false }
+   - sol = true  → plans horizontaux (sol) + rotation autour de l’axe local Y (haut)
+   - sol = false → plans verticaux (mur) + rotation autour de l’axe local Y aligné à la normale du mur
+   - iOS : AR Quick Look (USDZ) — l’utilisateur place l’objet sur sol/mur
+   - Android/Desktop : WebXR AR + bouton "Lancer l’AR" + slider de rotation + ombre blob (sol uniquement)
 */
 
 (function () {
@@ -116,7 +115,7 @@
     "#ar-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: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)}",
-    "#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{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}",
     "#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}",
@@ -169,7 +168,7 @@
     }
   }
 
-  // iOS : bouton Quick Look (l’utilisateur peut glisser l’objet sur un mur si souhaité)
+  // iOS : bouton Quick Look
   function ensureQuickLookButton(USDZ_URL) {
     var btn = document.getElementById("ar-ios-quicklook-button");
     if (btn) return btn;
@@ -284,16 +283,18 @@
                    cfg.usdz_url :
                    null;
 
-    // NEW: lecture de "sol" (par défaut true)
+    // 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)
+    // iOS → Quick Look
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
-        message("Modèle chargé. Appuyez sur « Lancer l’AR » puis placez-le " +
-                (PLACE_ON_FLOOR ? "sur le sol." : "sur un mur (faites-le glisser)."));
+        message(
+          "Modèle chargé. Appuyez sur « Lancer l’AR » puis placez-le " +
+          (PLACE_ON_FLOOR ? "sur le sol." : "contre un mur.")
+        );
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
@@ -376,7 +377,12 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // Ombre blob (uniquement pour le sol)
+    // Mode mur / sol
+    var wallMode = !PLACE_ON_FLOOR;
+    var wallBaseRot = new pc.Quat(); // orientation de base alignée au mur
+    var wallAngleDeg = 0;
+
+    // Ombre blob (sol uniquement)
     var blob = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
@@ -434,6 +440,7 @@
     // Rotation via slider
     var baseEulerX = 0, baseEulerZ = 0;
     var rotationYDeg = 0;
+
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
 
     function updateKnobFromY(yDeg) {
@@ -442,10 +449,30 @@
       rotInput.value = String(Math.round(yDeg));
       rotVal.textContent = String(Math.round(yDeg)) + "°";
     }
+
+    function getCurrentAngle() {
+      return wallMode ? wallAngleDeg : rotationYDeg;
+    }
+
     function applyRotationY(deg) {
       var y = clamp360(deg);
-      rotationYDeg = y;
-      modelRoot.setEulerAngles(baseEulerX, y, baseEulerZ);
+      if (!modelRoot.enabled) {
+        updateKnobFromY(y);
+        return;
+      }
+
+      if (!wallMode) {
+        rotationYDeg = y;
+        modelRoot.setEulerAngles(baseEulerX, y, baseEulerZ);
+      } else {
+        wallAngleDeg = y;
+        var qLocal = new pc.Quat();
+        qLocal.setFromAxisAngle(new pc.Vec3(0, 1, 0), y); // rotation locale autour de Y
+        var qFinal = new pc.Quat();
+        qFinal.mul2(wallBaseRot, qLocal); // base (mur) puis rotation locale Y
+        modelRoot.setRotation(qFinal);
+      }
+
       updateKnobFromY(y);
     }
 
@@ -486,22 +513,25 @@
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ----- Détection d’orientation de plan -----
+    // ----- Détection orientation des plans -----
     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)
+
+    // Mur : normal horizontale → axe Y du hit-test presque horizontal
     function isVerticalFacing(rot, maxAbsY) {
-      maxAbsY = (typeof maxAbsY === "number") ? maxAbsY : 0.35; // tolérance
+      maxAbsY = (typeof maxAbsY === "number") ? maxAbsY : 0.35;
       rot.transformVector(TMP_IN, TMP_OUT);
       return Math.abs(TMP_OUT.y) <= maxAbsY;
     }
+
     function planeMatchesMode(rot) {
-      return PLACE_ON_FLOOR ? isHorizontalUpFacing(rot) : isVerticalFacing(rot);
+      return wallMode ? isVerticalFacing(rot) : isHorizontalUpFacing(rot);
     }
 
     // Slider (pointer capture)
@@ -562,12 +592,11 @@
       });
     }
 
-    // Bouton start Android/Desktop
     var startBtn = ensureARStartButton(activateAR);
 
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test (sol ⇧ vs mur ⇨)
+    // Hit-test (sol vs mur)
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
@@ -584,31 +613,37 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Ombre : seulement pour le sol
-              if (PLACE_ON_FLOOR) {
+              if (!wallMode) {
+                // --- MODE SOL ---
                 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);
+                var e = new pc.Vec3();
+                rot.getEulerAngles(e);
+                var y0 = ((e.y % 360) + 360) % 360;
+                applyRotationY(y0);
+              } else {
+                // --- MODE MUR ---
+                // on aligne directement l’objet sur la rotation du hit-test
+                // (axe local Y du modèle = normale du mur)
+                modelRoot.setRotation(rot);
+                wallBaseRot.copy(rot);
+                applyRotationY(0); // angle initial = 0
+              }
 
               placedOnce = true;
               rotInput.disabled = false;
-              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 →");
+              message(
+                wallMode
+                  ? "Objet placé contre le mur. Glissez pour déplacer sur le mur, tournez-le avec le slider →"
+                  : "Objet placé. Glissez pour déplacer, tournez-le avec le slider →"
+              );
             }
           });
         }
       });
     });
 
-    // Drag XR continu (suivant le mode)
+    // Drag XR continu
     var isDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
@@ -625,7 +660,7 @@
               if (!isDragging) return;
               if (!planeMatchesMode(rot)) return;
               modelRoot.setPosition(pos);
-              if (PLACE_ON_FLOOR) updateBlobPositionUnder(pos, rot);
+              if (!wallMode) updateBlobPositionUnder(pos, rot);
             });
 
             transientSource.once("remove", function () { isDragging = false; });
@@ -653,12 +688,12 @@
         if (reticle.enabled) {
           var p = reticle.getPosition();
           modelRoot.setPosition(p);
-          if (PLACE_ON_FLOOR) updateBlobPositionUnder(p, null);
+          if (!wallMode) updateBlobPositionUnder(p, null);
         }
       } else if (rotateMode && modelRoot.enabled) {
         var dx = e.x - lastMouseX;
         lastMouseX = e.x;
-        applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
+        applyRotationY(getCurrentAngle() + dx * ROTATE_SENSITIVITY);
       }
     });
     app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
@@ -667,7 +702,6 @@
     // Slider (accessibilité clavier)
     rotInput.disabled = true;
     rotInput.addEventListener("input", function (e) {
-      if (!modelRoot.enabled) return;
       var v = parseFloat(e.target.value || "0");
       applyRotationY(v);
     }, { passive: true });
@@ -675,9 +709,11 @@
     // Événements AR (feedback + visibilité bouton)
     app.xr.on("start", function () {
       if (startBtn) startBtn.style.display = "none";
-      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…");
+      message(
+        wallMode
+          ? "Session AR démarrée. Visez un mur pour détecter un plan vertical…"
+          : "Session AR démarrée. Visez le sol pour détecter un plan…"
+      );
       reticle.enabled = true;
     });
     app.xr.on("end", function () {