Update viewer_ar.js

viewer_ar.js

@@ -1,6 +1,6 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Chargeur PlayCanvas robuste (ESM -> UMD avec fallbacks + timeout)
-   - WebXR AR Hit Test, placement auto, drag + rotation Y
+   - WebXR AR Hit Test, placement auto, drag + rotation Y via SLIDER
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -91,6 +91,57 @@
       user-select: none;
       pointer-events: none;
     }
+    /* --- UI Slider (DOM overlay) --- */
+    .ar-ui {
+      position: fixed;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10000;
+      background: rgba(0,0,0,0.55);
+      color: #fff;
+      padding: 12px 10px;
+      border-radius: 12px;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      pointer-events: auto;
+      width: 56px;
+      display: flex; flex-direction: column; align-items: center; gap: 8px;
+      box-shadow: 0 6px 18px rgba(0,0,0,.25);
+      backdrop-filter: blur(4px);
+    }
+    .ar-ui .label {
+      font-size: 12px;
+      text-align: center;
+      opacity: 0.9;
+    }
+    /* Slider vertical (on le tourne) */
+    .ar-ui input[type="range"].rotY {
+      -webkit-appearance: none;
+      width: 220px; /* longueur avant rotation */
+      height: 28px;
+      transform: rotate(-90deg);
+      outline: none;
+      background: transparent;
+      touch-action: none;
+    }
+    .ar-ui input[type="range"].rotY::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 20px; height: 20px;
+      border-radius: 50%;
+      background: #fff;
+      border: none;
+      box-shadow: 0 2px 8px rgba(0,0,0,.35);
+    }
+    .ar-ui input[type="range"].rotY::-webkit-slider-runnable-track {
+      height: 6px;
+      background: rgba(255,255,255,.6);
+      border-radius: 4px;
+    }
+    .ar-ui .val {
+      font-size: 11px;
+      opacity: 0.85;
+    }
   `;
   const styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -119,6 +170,21 @@
     return canvas;
   }
 
+  // Crée le panneau slider (DOM overlay)
+  function ensureSliderUI() {
+    let panel = document.querySelector(".ar-ui");
+    if (panel) return panel;
+    panel = document.createElement("div");
+    panel.className = "ar-ui";
+    panel.innerHTML = `
+      <div class="label">Rotation</div>
+      <input class="rotY" id="ar-rotY" type="range" min="0" max="360" step="1" value="0" />
+      <div class="val" id="ar-rotY-val">0°</div>
+    `;
+    document.body.appendChild(panel);
+    return panel;
+  }
+
   // =========================
   // 4) Lancement
   // =========================
@@ -140,6 +206,10 @@
   function initARApp() {
     const pc = window.pc; // alias
     const canvas = ensureCanvas();
+    const uiPanel = ensureSliderUI();
+    const rotYInput = uiPanel.querySelector("#ar-rotY");
+    const rotYVal = uiPanel.querySelector("#ar-rotY-val");
+
     window.focus();
 
     const app = new pc.Application(canvas, {
@@ -198,6 +268,22 @@
     let modelLoaded = false;
     let placedOnce = false;
 
+    // État rotation Y (en degrés, 0..360)
+    let rotationYDeg = 0;
+    const norm360 = (deg) => {
+      let d = deg % 360;
+      if (d < 0) d += 360;
+      return d;
+    };
+    const applyRotationY = (deg) => {
+      rotationYDeg = norm360(deg);
+      const eul = modelRoot.getEulerAngles();
+      modelRoot.setEulerAngles(eul.x, rotationYDeg, eul.z);
+      // sync UI
+      rotYInput.value = String(Math.round(rotationYDeg));
+      rotYVal.textContent = `${Math.round(rotationYDeg)}°`;
+    };
+
     // --- Chargement GLB ---
     app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
       if (err) {
@@ -231,6 +317,10 @@
         return;
       }
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
+        // DOM overlay pour pouvoir utiliser le slider en AR
+        domOverlay: { root: document.body },
+        requiredFeatures: ["hit-test", "dom-overlay"],
+        optionalFeatures: ["plane-detection"],
         callback: (err) => {
           if (err) message(`Échec du démarrage AR : ${err.message}`);
         }
@@ -271,23 +361,25 @@
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
-              // Conserver uniquement la yaw (rotation Y)
+              // Conserver yaw initiale détectée
               const euler = new pc.Vec3();
               rot.getEulerAngles(euler);
-              modelRoot.setEulerAngles(0, euler.y, 0);
+              rotationYDeg = norm360(euler.y);
+              applyRotationY(rotationYDeg);
               placedOnce = true;
-              message("Objet placé. Glissez pour déplacer, 2 doigts / clic droit pour tourner.");
+              // activer le slider
+              rotYInput.disabled = false;
+              message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
         }
       });
     });
 
-    // --- Interactions ---
+    // --- Interactions (déplacement & rotation souris seulement) ---
     let isDragging = false;
     let rotateMode = false;
-    let lastAvgX = 0;   // rotation tactile (2 doigts)
-    let lastMouseX = 0; // rotation souris
+    let lastMouseX = 0;
     const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
 
     // Déplacement (input XR : maintien/drag)
@@ -318,49 +410,9 @@
       });
     });
 
-    // Rotation tactile (2 doigts → glisser horizontal)
-    if (app.touch) {
-      let touches = new Map();
-      const getAvgX = () => {
-        if (touches.size === 0) return 0;
-        let s = 0;
-        touches.forEach((t) => (s += t.x));
-        return s / touches.size;
-      };
-
-      app.touch.on("touchstart", (e) => {
-        for (const t of e.touches) touches.set(t.id, { x: t.x, y: t.y });
-        if (touches.size >= 2) {
-          rotateMode = true;
-          lastAvgX = getAvgX();
-        }
-      });
-
-      app.touch.on("touchmove", (e) => {
-        for (const t of e.touches) {
-          if (touches.has(t.id)) touches.set(t.id, { x: t.x, y: t.y });
-        }
-        if (rotateMode && modelRoot.enabled) {
-          const avgX = getAvgX();
-          const dx = avgX - lastAvgX;
-          lastAvgX = avgX;
-          const euler = modelRoot.getEulerAngles();
-          modelRoot.setEulerAngles(euler.x, euler.y + dx * ROTATE_SENSITIVITY, euler.z);
-        }
-      });
+    // ❌ Rotation tactile 2 doigts — SUPPRIMÉE
 
-      app.touch.on("touchend", (e) => {
-        for (const t of e.changedTouches) touches.delete(t.id);
-        if (touches.size < 2) rotateMode = false;
-      });
-
-      app.touch.on("touchcancel", () => {
-        touches.clear();
-        rotateMode = false;
-      });
-    }
-
-    // Souris : déplacement (clic gauche maintenu) & rotation (clic droit ou Shift+clic gauche)
+    // Souris : déplacement (clic gauche) & rotation (clic droit ou Shift+clic gauche) — conservée
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
 
@@ -376,7 +428,6 @@
       if (!app.xr.active || !placedOnce) return;
 
       if (isDragging) {
-        // On s’aligne sur le réticule (alimenté en continu par le hit test)
         if (reticle.enabled) {
           const pos = reticle.getPosition();
           modelRoot.setPosition(pos);
@@ -384,8 +435,7 @@
       } else if (rotateMode && modelRoot.enabled) {
         const dx = e.x - lastMouseX;
         lastMouseX = e.x;
-        const euler = modelRoot.getEulerAngles();
-        modelRoot.setEulerAngles(euler.x, euler.y + dx * ROTATE_SENSITIVITY, euler.z);
+        applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
       }
     });
 
@@ -397,6 +447,14 @@
     // Empêcher menu contextuel (utile pour la rotation au clic droit)
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
+    // --- Slider rotation (DOM overlay) ---
+    rotYInput.disabled = true; // activé au 1er placement
+    rotYInput.addEventListener("input", (e) => {
+      if (!modelRoot.enabled) return;
+      const deg = parseFloat(e.target.value || "0");
+      applyRotationY(deg);
+    }, { passive: true });
+
     // --- Événements AR globaux ---
     app.xr.on("start", () => {
       message("Session AR démarrée. Visez le sol pour détecter un plan…");
@@ -408,6 +466,7 @@
       reticle.enabled = false;
       isDragging = false;
       rotateMode = false;
+      rotYInput.disabled = true;
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {