Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,8 +1,13 @@
-/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json (+ "sol")
+/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json (+ "sol" + mode mur stable)
    - 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 et oriente l’objet lui-même
+   - sol = false → plans verticaux (mur) :
+       * Y local = normale du mur
+       * Z local = direction plafond (Up monde) projetée dans le plan du mur
+       * rotation utilisateur = autour de Y local (normale)
+       * PENDANT une translation : orientation verrouillée (pas de twist parasite)
+       * À la fin d’une translation : on recalcule la base par rapport AU NOUVEAU MUR
+   - iOS : AR Quick Look (USDZ)
    - Android/Desktop : WebXR AR + bouton "Lancer l’AR" + slider de rotation
 */
 
@@ -300,8 +305,8 @@
         } else {
           message(
             "Modèle chargé. Appuyez sur « Lancer l’AR ». Sur iOS (Quick Look), l’objet ne peut pas être " +
-            "automatiquement aligné au mur comme sur Android : placez-le et orientez-le manuellement " +
-            "contre le mur (pointe vers vous, base sur le mur)."
+            "automatiquement aligné au mur : placez-le et orientez-le manuellement " +
+            "contre le mur (Z vers le plafond)."
           );
         }
       } else {
@@ -386,10 +391,75 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
+    // --- Helpers vecteurs/quaternions stables ---
+    var UP = new pc.Vec3(0, 1, 0);
+    function projOnPlane(v, n) {
+      var d = v.dot(n);
+      return new pc.Vec3(v.x - d*n.x, v.y - d*n.y, v.z - d*n.z);
+    }
+    function normalizeOr(v, fallback) {
+      var len = v.length();
+      if (len > 1e-6) { v.scale(1/len); return v; }
+      return fallback.clone ? fallback.clone() : new pc.Vec3(fallback.x, fallback.y, fallback.z);
+    }
+    function buildWallBasisFromNormal(N) {
+      var Y = N.clone().normalize();                 // Y = normale du mur
+      var Z = projOnPlane(UP, Y);                    // Z = Up projeté (vers plafond)
+      if (Z.lengthSq() < 1e-8) Z = projOnPlane(new pc.Vec3(0,0,1), Y);
+      Z.normalize();
+      var X = new pc.Vec3(); X.cross(Z, Y).normalize(); // X = Z × Y
+      Z.cross(Y, X).normalize();                         // Re-orthonormalise
+      return { X: X, Y: Y, Z: Z };
+    }
+    function quatFromBasis(X, Y, Z) {
+      // colonnes = X,Y,Z
+      var m00 = X.x, m01 = Y.x, m02 = Z.x;
+      var m10 = X.y, m11 = Y.y, m12 = Z.y;
+      var m20 = X.z, m21 = Y.z, m22 = Z.z;
+
+      var t = m00 + m11 + m22;
+      var q = new pc.Quat();
+      if (t > 0) {
+        var s = Math.sqrt(t + 1.0) * 2;
+        q.w = 0.25 * s;
+        q.x = (m21 - m12) / s;
+        q.y = (m02 - m20) / s;
+        q.z = (m10 - m01) / s;
+      } else if (m00 > m11 && m00 > m22) {
+        var s = Math.sqrt(1.0 + m00 - m11 - m22) * 2;
+        q.w = (m21 - m12) / s;
+        q.x = 0.25 * s;
+        q.y = (m01 + m10) / s;
+        q.z = (m02 + m20) / s;
+      } else if (m11 > m22) {
+        var s2 = Math.sqrt(1.0 + m11 - m00 - m22) * 2;
+        q.w = (m02 - m20) / s2;
+        q.x = (m01 + m10) / s2;
+        q.y = 0.25 * s2;
+        q.z = (m12 + m21) / s2;
+      } else {
+        var s3 = Math.sqrt(1.0 + m22 - m00 - m11) * 2;
+        q.w = (m10 - m01) / s3;
+        q.x = (m02 + m20) / s3;
+        q.y = (m12 + m21) / s3;
+        q.z = 0.25 * s3;
+      }
+      q.normalize();
+      return q;
+    }
+    function computeWallBaseFromRot(rot) {
+      // Y monde = rot * (0,1,0) = normale du mur
+      var N = new pc.Vec3();
+      rot.transformVector(new pc.Vec3(0, 1, 0), N);
+      N.normalize();
+      var basis = buildWallBasisFromNormal(N);
+      return quatFromBasis(basis.X, basis.Y, basis.Z); // Y=normale, Z=plafond
+    }
+
     // Mode mur / sol
     var wallMode = !PLACE_ON_FLOOR;
-    var wallBaseRot = new pc.Quat(); // orientation de base alignée au mur
-    var wallAngleDeg = 0;
+    var wallBaseRot = new pc.Quat(); // base (mur) : Y=normale, Z=plafond
+    var wallAngleDeg = 0;            // yaw utilisateur autour de Y local
 
     // Ombre blob (sol uniquement)
     var blob = null;
@@ -446,29 +516,21 @@
       return e;
     }
 
-    // Rotation via slider
+    // Rotation via slider (sol: Euler Y, mur: twist autour de Y local)
     var baseEulerX = 0, baseEulerZ = 0;
     var rotationYDeg = 0;
-
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
-
     function updateKnobFromY(yDeg) {
       var t = 1 - (yDeg / 360);
       rotKnob.style.top = String(t * 100) + "%";
       rotInput.value = String(Math.round(yDeg));
       rotVal.textContent = String(Math.round(yDeg)) + "°";
     }
-
-    function getCurrentAngle() {
-      return wallMode ? wallAngleDeg : rotationYDeg;
-    }
+    function getCurrentAngle() { return wallMode ? wallAngleDeg : rotationYDeg; }
 
     function applyRotationY(deg) {
       var y = clamp360(deg);
-      if (!modelRoot.enabled) {
-        updateKnobFromY(y);
-        return;
-      }
+      if (!modelRoot.enabled) { updateKnobFromY(y); return; }
 
       if (!wallMode) {
         rotationYDeg = y;
@@ -476,12 +538,11 @@
       } else {
         wallAngleDeg = y;
         var qLocal = new pc.Quat();
-        qLocal.setFromAxisAngle(pc.Vec3.UP, y); // rotation locale autour de Y
+        qLocal.setFromAxisAngle(pc.Vec3.UP, y); // rotation autour de Y local (avant base)
         var qFinal = new pc.Quat();
-        qFinal.mul2(wallBaseRot, qLocal);       // base (mur) puis rotation locale Y
+        qFinal.mul2(wallBaseRot, qLocal);       // base mur (Y=normale, Z=up projeté) puis yaw utilisateur
         modelRoot.setRotation(qFinal);
       }
-
       updateKnobFromY(y);
     }
 
@@ -517,7 +578,7 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-      message("Modèle chargé. Appuyez sur « L’ARancer l’AR ».");
+      message("Modèle chargé. Appuyez sur « Lancer l’AR ».");
     });
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
@@ -525,25 +586,26 @@
     // ----- 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 → axe Y du hit-test presque horizontal
     function isVerticalFacing(rot, maxAbsY) {
       maxAbsY = (typeof maxAbsY === "number") ? maxAbsY : 0.35;
       rot.transformVector(TMP_IN, TMP_OUT);
       return Math.abs(TMP_OUT.y) <= maxAbsY;
     }
-
     function planeMatchesMode(rot) {
       return wallMode ? isVerticalFacing(rot) : isHorizontalUpFacing(rot);
     }
 
-    // Slider (pointer capture)
+    // --- Translation sans rotation parasite ---
+    var isDragging = false;
+    var dragLockedRot = new pc.Quat();  // orientation figée pendant le drag
+    var lastHitRot = new pc.Quat();     // dernière rotation de hit (pour snap en fin de drag)
+
+    // Slider (pointer capture UI)
     var uiInteracting = false;
     var draggingTrack = false;
     var activePointerId = null;
@@ -602,10 +664,9 @@
     }
 
     var startBtn = ensureARStartButton(activateAR);
-
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test principal (pour le reticle + premier placement)
+    // Hit-test principal (reticle + PREMIER placement)
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
@@ -631,16 +692,16 @@
                 applyRotationY(y0);
               } else {
                 // --- MODE MUR (première pose) ---
-                modelRoot.setRotation(rot); // Y local = normale du mur
-                wallBaseRot.copy(rot);
-                applyRotationY(0);          // angle initial = 0
+                wallBaseRot.copy(computeWallBaseFromRot(rot)); // Y=normale, Z=plafond
+                modelRoot.setRotation(wallBaseRot);
+                applyRotationY(0); // yaw initial = 0
               }
 
               placedOnce = true;
               rotInput.disabled = false;
               message(
                 wallMode
-                  ? "Objet placé contre le mur. Glissez pour déplacer sur un autre mur, tournez-le avec le slider →"
+                  ? "Objet placé contre le mur (Y=normale, Z→plafond). Glissez pour déplacer, tournez avec le slider →"
                   : "Objet placé. Glissez pour déplacer, tournez-le avec le slider →"
               );
             }
@@ -649,13 +710,15 @@
       });
     });
 
-    // Drag XR continu (déplacement après placement)
-    var isDragging = false;
+    // Drag XR continu (déplacements suivants, sans rotation parasite)
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
         if (uiInteracting) return;
         if (!placedOnce || !modelLoaded) return;
 
+        // Verrouille l'orientation courante pendant la translation
+        dragLockedRot.copy(modelRoot.getRotation());
+
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: function (err, transientSource) {
@@ -666,15 +729,27 @@
               if (!isDragging) return;
               if (!planeMatchesMode(rot)) return;
 
+              // Mémorise la dernière orientation de plan rencontrée
+              lastHitRot.copy(rot);
+
+              // Déplace uniquement
               modelRoot.setPosition(pos);
 
               if (!wallMode) {
-                // sol : on ne change que la position, l'orientation reste pilotée par le slider
                 updateBlobPositionUnder(pos, rot);
               } else {
-                // mur : à CHAQUE déplacement on ré-aligne la base sur le plan courant,
-                // puis on ré-applique l'angle du slider autour de Y
-                wallBaseRot.copy(rot);              // Y local = normale du mur courant
+                // En mode mur : PAS de rotation pendant le drag
+                modelRoot.setRotation(dragLockedRot);
+              }
+            });
+
+            // Fin du drag : snap propre au NOUVEAU mur (si on est en mode mur)
+            transientSource.once("remove", function () {
+              isDragging = false;
+              if (wallMode) {
+                // Recalcule la base avec le dernier mur touché
+                wallBaseRot.copy(computeWallBaseFromRot(lastHitRot));
+                // Ré-applique le yaw utilisateur autour de Y local (normale du NOUVEAU mur)
                 var qLocal = new pc.Quat();
                 qLocal.setFromAxisAngle(pc.Vec3.UP, wallAngleDeg);
                 var qFinal = new pc.Quat();
@@ -682,12 +757,13 @@
                 modelRoot.setRotation(qFinal);
               }
             });
-
-            transientSource.once("remove", function () { isDragging = false; });
           }
         });
       });
-      inputSource.on("selectend", function () { isDragging = false; });
+
+      inputSource.on("selectend", function () {
+        isDragging = false;
+      });
     });
 
     // Desktop : rotation à la souris (clic droit ou Shift+clic gauche)
@@ -697,6 +773,7 @@
       if (!app.xr.active || !placedOnce || uiInteracting) return;
       if (e.button === 0 && !e.shiftKey) {
         isDragging = true;
+        dragLockedRot.copy(modelRoot.getRotation());
       } else if (e.button === 2 || (e.button === 0 && e.shiftKey)) {
         rotateMode = true;
         lastMouseX = e.x;
@@ -709,6 +786,7 @@
           var p = reticle.getPosition();
           modelRoot.setPosition(p);
           if (!wallMode) updateBlobPositionUnder(p, null);
+          else modelRoot.setRotation(dragLockedRot);
         }
       } else if (rotateMode && modelRoot.enabled) {
         var dx = e.x - lastMouseX;
@@ -716,7 +794,14 @@
         applyRotationY(getCurrentAngle() + dx * ROTATE_SENSITIVITY);
       }
     });
-    app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
+    app.mouse.on("mouseup", function () {
+      if (isDragging) {
+        // En desktop on n'a pas lastHitRot : on garde l'orientation verrouillée
+        // (optionnel : on pourrait lancer un hit-test unique ici pour "snap", selon l'intégration)
+      }
+      isDragging = false;
+      rotateMode = false;
+    });
     window.addEventListener("contextmenu", function (e) { e.preventDefault(); });
 
     // Slider (accessibilité clavier)
@@ -726,14 +811,12 @@
       applyRotationY(v);
     }, { passive: true });
 
-    // Événements AR (feedback + visibilité bouton)
+    // Événements AR
     app.xr.on("start", function () {
       if (startBtn) startBtn.style.display = "none";
-      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…"
-      );
+      message(wallMode
+        ? "Session AR démarrée. Visez un mur (Y=normale, Z du modèle sera vers le plafond)…"
+        : "Session AR démarrée. Visez le sol pour détecter un plan…");
       reticle.enabled = true;
     });
     app.xr.on("end", function () {
@@ -741,7 +824,6 @@
       message("Session AR terminée.");
       reticle.enabled = false;
       isDragging = false;
-      rotateMode = false;
       rotInput.disabled = true;
     });
     app.xr.on("available:" + pc.XRTYPE_AR, function (a) {