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" + rotation mur)
+   - config.json : { "glb_url": "...", "usdz_url": "...", "sol": true|false }
+   - sol = true  → plans horizontaux (sol) + rotation autour de l’axe vertical (Y)
+   - sol = false → plans verticaux (mur) + rotation autour d’un axe horizontal perpendiculaire au mur
+   - iOS : Quick Look (USDZ) — l’utilisateur place l’objet sur sol/mur
+   - Android/Desktop : WebXR AR + bouton "Lancer l’AR" + slider de rotation
 */
 
 (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;
@@ -279,21 +278,23 @@
     var cfg = await loadConfigJson(cfgUrl);
     var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url) ?
                   cfg.glb_url :
-                  null;
+                  "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
     var USDZ_URL = (cfg && typeof cfg.usdz_url === "string" && cfg.usdz_url) ?
                    cfg.usdz_url :
                    null;
 
-    // NEW: 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 (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." : "sur un mur (faites-le glisser sur la surface).")
+        );
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
@@ -376,6 +377,12 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
+    // Mode mur / sol
+    var wallMode = !PLACE_ON_FLOOR;
+    var wallAxis = new pc.Vec3(1, 0, 0);   // axe horizontal perpendiculaire au mur
+    var wallBaseRot = new pc.Quat();
+    var wallAngleDeg = 0;
+
     // Ombre blob (uniquement pour le sol)
     var blob = null;
     var BLOB_SIZE = 0.4;
@@ -434,19 +441,42 @@
     // 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) {
-      var t = 1 - (yDeg / 360);
+    function updateSliderUI(angleDeg) {
+      var t = 1 - (angleDeg / 360);
       rotKnob.style.top = String(t * 100) + "%";
-      rotInput.value = String(Math.round(yDeg));
-      rotVal.textContent = String(Math.round(yDeg)) + "°";
+      rotInput.value = String(Math.round(angleDeg));
+      rotVal.textContent = String(Math.round(angleDeg)) + "°";
+    }
+
+    function setWallRotationFromSlider(angleDeg) {
+      wallAngleDeg = angleDeg;
+      var qExtra = new pc.Quat();
+      qExtra.setFromAxisAngle(wallAxis, angleDeg);
+      var q = new pc.Quat();
+      q.mul2(qExtra, wallBaseRot); // rotation autour de l’axe horizontal normal au mur
+      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);
     }
-    function applyRotationY(deg) {
-      var y = clamp360(deg);
-      rotationYDeg = y;
-      modelRoot.setEulerAngles(baseEulerX, y, baseEulerZ);
-      updateKnobFromY(y);
+
+    function getCurrentAngle() {
+      return wallMode ? wallAngleDeg : rotationYDeg;
     }
 
     function updateBlobPositionUnder(pos, rotLikePlane) {
@@ -486,22 +516,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)
     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)
@@ -524,12 +557,12 @@
       draggingTrack = true;
       activePointerId = (e.pointerId != null) ? e.pointerId : 1;
       if (rotTrack.setPointerCapture) { try { rotTrack.setPointerCapture(activePointerId); } catch (er) {} }
-      applyRotationY(degFromPointer(e));
+      applySliderRotation(degFromPointer(e));
       e.preventDefault(); e.stopPropagation();
     }
     function onPointerMoveCapture(e) {
       if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
-      applyRotationY(degFromPointer(e));
+      applySliderRotation(degFromPointer(e));
       e.preventDefault(); e.stopPropagation();
     }
     function endDrag(e) {
@@ -562,12 +595,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 +616,45 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Ombre : seulement pour le sol
-              if (PLACE_ON_FLOOR) {
+              if (!wallMode) {
                 blob = createBlobShadowAt(pos, rot);
+                var e = new pc.Vec3();
+                rot.getEulerAngles(e);
+                var y0 = ((e.y % 360) + 360) % 360;
+                applySliderRotation(y0);
+              } else {
+                // Mode mur : aligner l’objet avec le mur et préparer l’axe horizontal perpendiculaire
+                modelRoot.setRotation(rot);
+                wallBaseRot.copy(modelRoot.getRotation());
+
+                var upLocal = new pc.Vec3(0, 1, 0);
+                var normalWorld = new pc.Vec3();
+                rot.transformVector(upLocal, normalWorld);
+                // on projette sur le plan XZ pour avoir un axe horizontal
+                normalWorld.y = 0;
+                if (normalWorld.lengthSq() < 1e-4) {
+                  normalWorld.set(0, 0, 1);
+                }
+                normalWorld.normalize();
+                wallAxis.copy(normalWorld);
+
+                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(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 +671,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 +699,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);
+        applySliderRotation(getCurrentAngle() + dx * ROTATE_SENSITIVITY);
       }
     });
     app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
@@ -667,17 +713,18 @@
     // Slider (accessibilité clavier)
     rotInput.disabled = true;
     rotInput.addEventListener("input", function (e) {
-      if (!modelRoot.enabled) return;
       var v = parseFloat(e.target.value || "0");
-      applyRotationY(v);
+      applySliderRotation(v);
     }, { passive: true });
 
     // É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 () {