Update viewer_ar.js

viewer_ar.js

@@ -1,7 +1,7 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Chargeur PlayCanvas robuste (ESM -> UMD avec fallbacks + timeout)
-   - WebXR AR Hit Test, placement auto, drag + rotation Y (2 doigts)
-   - DOM Overlay activé pour capter les touches en AR
+   - WebXR AR Hit Test, placement auto, drag (déplacement) + rotation Y via SLIDER
+   - DOM Overlay activé pour utiliser le slider en AR
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -92,6 +92,57 @@
       user-select: none;
       pointer-events: none;
     }
+    /* Panneau 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; /* important: capter les interactions en AR */
+      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 via rotation (meilleure compatibilité) */
+    .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,22 @@
     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
   // =========================
@@ -139,6 +206,10 @@
   function initARApp() {
     const pc = window.pc;
     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, {
@@ -197,6 +268,26 @@
     let modelLoaded = false;
     let placedOnce = false;
 
+    // État rotation Y (en degrés, 0..360)
+    let rotationYDeg = 0;
+
+    // Helpers
+    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);
+      // Synchronise l’UI si besoin
+      if (rotYInput && rotYVal) {
+        rotYInput.value = String(Math.round(rotationYDeg));
+        rotYVal.textContent = `${Math.round(rotationYDeg)}°`;
+      }
+    };
+
     // --- Chargement GLB ---
     app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
       if (err) {
@@ -209,8 +300,6 @@
         receiveShadows: false
       });
       modelRoot.addChild(instance);
-
-      // Ajuste si besoin selon ton modèle
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
       modelLoaded = true;
@@ -223,17 +312,16 @@
       return;
     }
 
-    // --- Démarrage AR (MODIF: activer DOM Overlay & features) ---
+    // --- Démarrage AR (DOM Overlay pour slider) ---
     const activateAR = () => {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
         message("AR immersive indisponible sur cet appareil.");
         return;
       }
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
-        // IMPORTANT: activer l'overlay DOM pour recevoir les events tactiles en AR
-        domOverlay: { root: document.body },               // <-- MODIF
-        requiredFeatures: ["hit-test", "dom-overlay"],     // <-- MODIF (hit-test déjà géré mais ok)
-        optionalFeatures: ["plane-detection"],             // <-- MODIF (facultatif)
+        domOverlay: { root: document.body },               // permet d’utiliser le slider en AR
+        requiredFeatures: ["hit-test", "dom-overlay"],
+        optionalFeatures: ["plane-detection"],
         callback: (err) => {
           if (err) message(`Échec du démarrage AR : ${err.message}`);
         }
@@ -272,11 +360,13 @@
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
+              // Initialise l'orientation Y à celle du plan détecté
               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.");
+              message("Objet placé. Déplacez-le en glissant, tournez-le avec le slider →");
             }
           });
         }
@@ -284,27 +374,19 @@
     });
 
     // =========================
-    // --- Interactions
+    // --- Déplacement (drag) via input XR
     // =========================
-    let isDragging = false;          // déplacement du modèle
-    let rotateMode = false;          // rotation 2 doigts (tactile) ou souris
-    let multiTouchActive = false;    // >= 2 doigts
-    let lastMouseX = 0;
-
-    // Hit-tests transitoires à annuler quand on passe à 2 doigts
+    let isDragging = false;
     const activeTransientSources = new Set();
     function cancelAllTransientHitTests() {
-      activeTransientSources.forEach(src => {
-        try { src.remove && src.remove(); } catch(_) {}
-      });
+      activeTransientSources.forEach(src => { try { src.remove && src.remove(); } catch(_) {} });
       activeTransientSources.clear();
       isDragging = false;
     }
 
-    // Déplacement (input XR) — ne démarre que si pas de 2 doigts
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
-        if (!placedOnce || !modelLoaded || multiTouchActive) return;
+        if (!placedOnce || !modelLoaded) return;
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
@@ -313,7 +395,7 @@
             activeTransientSources.add(transientSource);
 
             transientSource.on("result", (pos /*, rot */) => {
-              if (!isDragging || rotateMode || multiTouchActive) return;
+              if (!isDragging) return;
               modelRoot.setPosition(pos);
             });
 
@@ -331,104 +413,51 @@
     });
 
     // =========================
-    // --- Gestes tactiles NATIFS via DOM Overlay (MODIF)
+    // --- Slider rotation (UI)
     // =========================
-    // On n'utilise PAS app.touch ici : on écoute le canvas en DOM Overlay XR
-    const RAD2DEG = 180 / Math.PI;
-    let lastTwoFingerAngle = null;
-    let rotationAlertShown = false;
-
-    function getAngleTwoTouches(touches) {
-      if (touches.length < 2) return null;
-      const t0 = touches[0], t1 = touches[1];
-      return Math.atan2(t1.clientY - t0.clientY, t1.clientX - t0.clientX);
-    }
-
-    // Démarre un geste : si 2 doigts, activer rotation et couper la translation
-    const onTouchStart = (e) => {
-      if (!app.xr.active) return; // on s'intéresse seulement au mode AR
-      if (e.touches.length >= 2) {
-        multiTouchActive = true;
-        rotateMode = true;
-        cancelAllTransientHitTests();
-        lastTwoFingerAngle = getAngleTwoTouches(e.touches);
-
-        if (!rotationAlertShown) {
-          rotationAlertShown = true;
-          console.log("[AR] Rotation 2 doigts détectée — touches:", e.touches.length);
-          try { alert("Rotation à 2 doigts détectée"); } catch(_) {}
-        }
-      }
+    // Désactivé tant que l’objet n’est pas placé
+    rotYInput.disabled = true;
+
+    rotYInput.addEventListener("input", (e) => {
+      if (!modelRoot.enabled) return;
+      const deg = parseFloat(e.target.value || "0");
+      applyRotationY(deg);
+    }, { passive: true });
+
+    // Active le slider après le 1er placement
+    const enableSliderIfReady = () => {
+      rotYInput.disabled = !(modelLoaded && placedOnce);
     };
+    const observer = new MutationObserver(enableSliderIfReady);
+    observer.observe(uiPanel, { attributes: true, childList: true, subtree: true });
 
-    const onTouchMove = (e) => {
-      if (!app.xr.active) return;
-      if (rotateMode && multiTouchActive && modelRoot.enabled && e.touches.length >= 2) {
-        const ang = getAngleTwoTouches(e.touches);
-        if (ang !== null && lastTwoFingerAngle !== null) {
-          let delta = ang - lastTwoFingerAngle;
-          if (delta > Math.PI) delta -= 2 * Math.PI;
-          if (delta < -Math.PI) delta += 2 * Math.PI;
-
-          const eul = modelRoot.getEulerAngles();
-          modelRoot.setEulerAngles(eul.x, eul.y + (delta * RAD2DEG), eul.z);
-
-          lastTwoFingerAngle = ang;
-        }
-        // empêcher le scroll/zoom navigateur & gestes par défaut
-        e.preventDefault();
-      }
-    };
-
-    const onTouchEnd = (e) => {
-      if (!app.xr.active) return;
-      if (e.touches.length < 2) {
-        rotateMode = false;
-        multiTouchActive = false;
-        lastTwoFingerAngle = null;
-        rotationAlertShown = false;
-      }
-    };
-
-    // IMPORTANT : listeners non-passifs pour pouvoir appeler preventDefault
-    canvas.addEventListener("touchstart", onTouchStart, { passive: false });
-    canvas.addEventListener("touchmove",  onTouchMove,  { passive: false });
-    canvas.addEventListener("touchend",   onTouchEnd,   { passive: false });
-    canvas.addEventListener("touchcancel", onTouchEnd,  { passive: false });
+    // Assure l’état après placement
+    const checkInterval = setInterval(() => {
+      enableSliderIfReady();
+      if (modelLoaded && placedOnce) clearInterval(checkInterval);
+    }, 200);
 
     // =========================
-    // Souris (pour desktop)
+    // Souris (rotation via slider uniquement → on ne capture plus le clic droit)
+    // On garde seulement le drag (clic gauche) comme fallback desktop
     // =========================
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
-
-      if (e.button === 0 && !e.shiftKey) {
-        if (!multiTouchActive) isDragging = true;
-      } else if (e.button === 2 || (e.button === 0 && e.shiftKey)) {
-        rotateMode = true;
-        lastMouseX = e.x;
+      if (e.button === 0) {
+        isDragging = true;
       }
     });
 
     app.mouse.on("mousemove", (e) => {
       if (!app.xr.active || !placedOnce) return;
-
-      if (isDragging && !rotateMode && !multiTouchActive) {
-        if (reticle.enabled) {
-          const pos = reticle.getPosition();
-          modelRoot.setPosition(pos);
-        }
-      } else if (rotateMode && modelRoot.enabled) {
-        const dx = e.x - lastMouseX;
-        lastMouseX = e.x;
-        const euler = modelRoot.getEulerAngles();
-        modelRoot.setEulerAngles(euler.x, euler.y + dx * 0.25, euler.z);
+      if (isDragging && reticle.enabled) {
+        const pos = reticle.getPosition();
+        modelRoot.setPosition(pos);
       }
     });
 
     app.mouse.on("mouseup", () => {
       isDragging = false;
-      rotateMode = false;
     });
 
     window.addEventListener("contextmenu", (e) => e.preventDefault());
@@ -443,17 +472,7 @@
       message("Session AR terminée.");
       reticle.enabled = false;
       isDragging = false;
-      rotateMode = false;
-      multiTouchActive = false;
-      lastTwoFingerAngle = null;
-      rotationAlertShown = false;
       cancelAllTransientHitTests();
-
-      // Nettoyage des listeners DOM (au cas où)
-      canvas.removeEventListener("touchstart", onTouchStart);
-      canvas.removeEventListener("touchmove",  onTouchMove);
-      canvas.removeEventListener("touchend",   onTouchEnd);
-      canvas.removeEventListener("touchcancel", onTouchEnd);
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {