Update viewer_ar.js

viewer_ar.js

@@ -1,6 +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
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -222,13 +223,17 @@
       return;
     }
 
-    // --- Démarrage AR ---
+    // --- Démarrage AR (MODIF: activer DOM Overlay & features) ---
     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)
         callback: (err) => {
           if (err) message(`Échec du démarrage AR : ${err.message}`);
         }
@@ -279,7 +284,7 @@
     });
 
     // =========================
-    // --- Interactions + DEBUG
+    // --- Interactions
     // =========================
     let isDragging = false;          // déplacement du modèle
     let rotateMode = false;          // rotation 2 doigts (tactile) ou souris
@@ -296,13 +301,6 @@
       isDragging = false;
     }
 
-    // ===== Rotation 2 doigts (incrémentale) =====
-    let lastTwoFingerAngle = null; // radians
-    const RAD2DEG = 180 / Math.PI;
-
-    // --- DEBUG: alerte une seule fois au début d'un geste 2 doigts ---
-    let rotationAlertShown = false;
-
     // Déplacement (input XR) — ne démarre que si pas de 2 doigts
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
@@ -332,78 +330,75 @@
       });
     });
 
-    // ===== Gestes tactiles (avec alerte debug) =====
-    if (app.touch) {
-      const touches = new Map(); // id -> {x,y}
-
-      const twoFingerAngle = () => {
-        if (touches.size < 2) return null;
-        const it = touches.values();
-        const a = it.next().value;
-        const b = it.next().value;
-        return Math.atan2(b.y - a.y, b.x - a.x);
-      };
-
-      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) {
-          multiTouchActive = true;
-          rotateMode = true;
-          cancelAllTransientHitTests();
-          lastTwoFingerAngle = twoFingerAngle();
-
-          // --- DEBUG ALERT ---
-          if (!rotationAlertShown) {
-            rotationAlertShown = true;
-            console.log("[AR] Rotation 2 doigts détectée — touches:", Array.from(touches.keys()), "count:", touches.size);
-            try { alert("Rotation à 2 doigts détectée"); } catch(_) {}
-          }
-        }
-      });
-
-      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 });
-        }
+    // =========================
+    // --- Gestes tactiles NATIFS via DOM Overlay (MODIF)
+    // =========================
+    // 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;
 
-        if (rotateMode && multiTouchActive && modelRoot.enabled && touches.size >= 2) {
-          const ang = twoFingerAngle();
-          if (ang !== null && lastTwoFingerAngle !== null) {
-            let delta = ang - lastTwoFingerAngle; // radians
-            if (delta > Math.PI) delta -= 2 * Math.PI;
-            if (delta < -Math.PI) delta += 2 * Math.PI;
+    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);
+    }
 
-            const eul = modelRoot.getEulerAngles();
-            modelRoot.setEulerAngles(eul.x, eul.y + (delta * RAD2DEG), eul.z);
+    // 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);
 
-            lastTwoFingerAngle = ang;
-          }
+        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(_) {}
         }
-      });
+      }
+    };
+
+    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;
 
-      app.touch.on("touchend", (e) => {
-        for (const t of e.changedTouches) touches.delete(t.id);
+          const eul = modelRoot.getEulerAngles();
+          modelRoot.setEulerAngles(eul.x, eul.y + (delta * RAD2DEG), eul.z);
 
-        if (touches.size < 2) {
-          rotateMode = false;
-          multiTouchActive = false;
-          lastTwoFingerAngle = null;
-          rotationAlertShown = false; // reset pour le prochain geste
+          lastTwoFingerAngle = ang;
         }
-      });
+        // empêcher le scroll/zoom navigateur & gestes par défaut
+        e.preventDefault();
+      }
+    };
 
-      app.touch.on("touchcancel", () => {
-        touches.clear();
+    const onTouchEnd = (e) => {
+      if (!app.xr.active) return;
+      if (e.touches.length < 2) {
         rotateMode = false;
         multiTouchActive = false;
         lastTwoFingerAngle = null;
-        rotationAlertShown = false; // reset
-        cancelAllTransientHitTests();
-      });
-    }
+        rotationAlertShown = false;
+      }
+    };
 
-    // Souris : déplacement (clic gauche maintenu) & rotation (clic droit ou Shift+clic gauche)
+    // 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 });
+
+    // =========================
+    // Souris (pour desktop)
+    // =========================
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
 
@@ -453,6 +448,12 @@
       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) => {