Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,9 +1,10 @@
-/* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json (+ "sol" + mode mur)
-   - 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
+/* 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 () {
@@ -115,7 +116,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;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}",
     "#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}",
@@ -168,7 +169,7 @@
     }
   }
 
-  // iOS : bouton Quick Look
+  // 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;
@@ -283,18 +284,16 @@
                    cfg.usdz_url :
                    null;
 
-    // lecture de "sol" (par défaut true)
+    // 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
+    // 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 » puis placez-le " +
-          (PLACE_ON_FLOOR ? "sur le sol." : "sur un mur (faites-le glisser sur la surface).")
-        );
+        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.");
       }
@@ -377,11 +376,6 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // Mode mur / sol
-    var wallMode = !PLACE_ON_FLOOR;
-    var wallBaseRot = new pc.Quat(); // orientation de base alignée à la normale du mur
-    var wallAngleDeg = 0;            // angle autour de l’axe local Y
-
     // Ombre blob (uniquement pour le sol)
     var blob = null;
     var BLOB_SIZE = 0.4;
@@ -439,45 +433,20 @@
 
     // Rotation via slider
     var baseEulerX = 0, baseEulerZ = 0;
-    var rotationYDeg = 0; // pour le mode sol
-
+    var rotationYDeg = 0;
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
 
-    function updateSliderUI(angleDeg) {
-      var t = 1 - (angleDeg / 360);
+    function updateKnobFromY(yDeg) {
+      var t = 1 - (yDeg / 360);
       rotKnob.style.top = String(t * 100) + "%";
-      rotInput.value = String(Math.round(angleDeg));
-      rotVal.textContent = String(Math.round(angleDeg)) + "°";
-    }
-
-    // Rotation murale : angle autour de l’axe local Y (pointe ↔ base)
-    function setWallRotationFromSlider(angleDeg) {
-      wallAngleDeg = angleDeg;
-      var qLocal = new pc.Quat();
-      qLocal.setFromAxisAngle(new pc.Vec3(0, 1, 0), angleDeg);
-      var q = new pc.Quat();
-      // finale : base * rotation_locale_Y
-      q.mul2(wallBaseRot, qLocal);
-      modelRoot.setRotation(q);
-    }
-
-    function applySliderRotation(deg) {
-      var a = clamp360(deg);
-      if (!modelRoot.enabled) {
-        updateSliderUI(a);
-        return;
-      }
-      if (!wallMode) {
-        rotationYDeg = a;
-        modelRoot.setEulerAngles(baseEulerX, a, baseEulerZ);
-      } else {
-        setWallRotationFromSlider(a);
-      }
-      updateSliderUI(a);
+      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);
+      updateKnobFromY(y);
     }
 
     function updateBlobPositionUnder(pos, rotLikePlane) {
@@ -517,25 +486,22 @@
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ----- Détection orientation des plans -----
+    // ----- 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;
+      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 wallMode ? isVerticalFacing(rot) : isHorizontalUpFacing(rot);
+      return PLACE_ON_FLOOR ? isHorizontalUpFacing(rot) : isVerticalFacing(rot);
     }
 
     // Slider (pointer capture)
@@ -558,12 +524,12 @@
       draggingTrack = true;
       activePointerId = (e.pointerId != null) ? e.pointerId : 1;
       if (rotTrack.setPointerCapture) { try { rotTrack.setPointerCapture(activePointerId); } catch (er) {} }
-      applySliderRotation(degFromPointer(e));
+      applyRotationY(degFromPointer(e));
       e.preventDefault(); e.stopPropagation();
     }
     function onPointerMoveCapture(e) {
       if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
-      applySliderRotation(degFromPointer(e));
+      applyRotationY(degFromPointer(e));
       e.preventDefault(); e.stopPropagation();
     }
     function endDrag(e) {
@@ -596,11 +562,12 @@
       });
     }
 
+    // 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],
@@ -617,72 +584,31 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              if (!wallMode) {
-                // --- MODE SOL ---
+              // Ombre : seulement pour le sol
+              if (PLACE_ON_FLOOR) {
                 blob = createBlobShadowAt(pos, rot);
-                var e = new pc.Vec3();
-                rot.getEulerAngles(e);
-                var y0 = ((e.y % 360) + 360) % 360;
-                applySliderRotation(y0);
-              } else {
-                // --- MODE MUR ---
-                // 1) normale du plan en monde
-                var planeNormal = new pc.Vec3();
-                rot.transformVector(new pc.Vec3(0, 1, 0), planeNormal);
-                planeNormal.normalize();
-
-                // 2) on force la normale à pointer vers la caméra
-                var camPos = camera.getPosition();
-                var toCam = new pc.Vec3();
-                toCam.sub2(camPos, pos);
-                toCam.normalize();
-                if (planeNormal.dot(toCam) < 0) {
-                  planeNormal.scale(-1); // on flip la normale pour qu’elle sorte vers la caméra
-                }
-
-                // 3) construire un repère orthonormé : Y = normale, X/Z quelconques mais ⟂
-                var ref = new pc.Vec3(0, 1, 0);
-                if (Math.abs(planeNormal.y) > 0.9) {
-                  ref.set(1, 0, 0); // si la normale est trop verticale, on change le ref
-                }
-
-                var xAxis = new pc.Vec3();
-                xAxis.cross(ref, planeNormal).normalize(); // X ⟂ normale
-                var zAxis = new pc.Vec3();
-                zAxis.cross(xAxis, planeNormal).normalize(); // Z = X × Y
-
-                // 4) construire la matrice (colonnes = X, Y, Z) puis le quaternion
-                var m = new pc.Mat4();
-                m.set(
-                  xAxis.x, planeNormal.x, zAxis.x, 0,
-                  xAxis.y, planeNormal.y, zAxis.y, 0,
-                  xAxis.z, planeNormal.z, zAxis.z, 0,
-                  0,       0,             0,       1
-                );
-                var baseQ = new pc.Quat();
-                baseQ.setFromMat4(m);
-
-                modelRoot.setRotation(baseQ);
-                wallBaseRot.copy(baseQ);
-
-                // angle initial = 0 → pointe toujours "vers dehors"
-                applySliderRotation(0);
               }
 
+              // 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(
-                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 →"
-              );
+              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 () {
@@ -699,7 +625,7 @@
               if (!isDragging) return;
               if (!planeMatchesMode(rot)) return;
               modelRoot.setPosition(pos);
-              if (!wallMode) updateBlobPositionUnder(pos, rot);
+              if (PLACE_ON_FLOOR) updateBlobPositionUnder(pos, rot);
             });
 
             transientSource.once("remove", function () { isDragging = false; });
@@ -727,12 +653,12 @@
         if (reticle.enabled) {
           var p = reticle.getPosition();
           modelRoot.setPosition(p);
-          if (!wallMode) updateBlobPositionUnder(p, null);
+          if (PLACE_ON_FLOOR) updateBlobPositionUnder(p, null);
         }
       } else if (rotateMode && modelRoot.enabled) {
         var dx = e.x - lastMouseX;
         lastMouseX = e.x;
-        applySliderRotation(getCurrentAngle() + dx * ROTATE_SENSITIVITY);
+        applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
       }
     });
     app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
@@ -741,18 +667,17 @@
     // Slider (accessibilité clavier)
     rotInput.disabled = true;
     rotInput.addEventListener("input", function (e) {
+      if (!modelRoot.enabled) return;
       var v = parseFloat(e.target.value || "0");
-      applySliderRotation(v);
+      applyRotationY(v);
     }, { passive: true });
 
     // Événements AR (feedback + visibilité bouton)
     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(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 () {