Update viewer_ar.js

viewer_ar.js

@@ -1,7 +1,6 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Chargeur PlayCanvas robuste (ESM -> UMD avec fallbacks + timeout)
-   - WebXR AR Hit Test, placement auto, drag (déplacement) + rotation Y via SLIDER
-   - DOM Overlay activé pour utiliser le slider en AR
+   - WebXR AR Hit Test, placement auto, drag + rotation Y
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -92,57 +91,6 @@
       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;
@@ -163,6 +111,7 @@
     if (!canvas) {
       canvas = document.createElement("canvas");
       canvas.id = "application-canvas";
+      // optionnel: force plein écran si aucun style
       canvas.style.width = "100%";
       canvas.style.height = "100%";
       document.body.appendChild(canvas);
@@ -170,22 +119,6 @@
     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
   // =========================
@@ -197,6 +130,7 @@
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
+    // PlayCanvas dispo -> démarrer
     initARApp();
   })();
 
@@ -204,12 +138,8 @@
   // 5) App AR PlayCanvas
   // =========================
   function initARApp() {
-    const pc = window.pc;
+    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, {
@@ -268,26 +198,6 @@
     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) {
@@ -300,6 +210,8 @@
         receiveShadows: false
       });
       modelRoot.addChild(instance);
+
+      // Ajuste si besoin selon ton modèle
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
       modelLoaded = true;
@@ -312,22 +224,20 @@
       return;
     }
 
-    // --- Démarrage AR (DOM Overlay pour slider) ---
+    // --- Démarrage AR ---
     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, {
-        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}`);
         }
       });
     };
 
+    // Premier tap / clic → démarrer AR
     app.mouse.on("mousedown", () => {
       if (!app.xr.active) activateAR();
     });
@@ -339,6 +249,7 @@
       });
     }
 
+    // ESC → quitter
     app.keyboard.on("keydown", (evt) => {
       if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end();
     });
@@ -360,39 +271,35 @@
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
-              // Initialise l'orientation Y à celle du plan détecté
+              // Conserver uniquement la yaw (rotation Y)
               const euler = new pc.Vec3();
               rot.getEulerAngles(euler);
-              rotationYDeg = norm360(euler.y);
-              applyRotationY(rotationYDeg);
+              modelRoot.setEulerAngles(0, euler.y, 0);
               placedOnce = true;
-              message("Objet placé. Déplacez-le en glissant, tournez-le avec le slider →");
+              message("Objet placé. Glissez pour déplacer, 2 doigts / clic droit pour tourner.");
             }
           });
         }
       });
     });
 
-    // =========================
-    // --- Déplacement (drag) via input XR
-    // =========================
+    // --- Interactions ---
     let isDragging = false;
-    const activeTransientSources = new Set();
-    function cancelAllTransientHitTests() {
-      activeTransientSources.forEach(src => { try { src.remove && src.remove(); } catch(_) {} });
-      activeTransientSources.clear();
-      isDragging = false;
-    }
+    let rotateMode = false;
+    let lastAvgX = 0;   // rotation tactile (2 doigts)
+    let lastMouseX = 0; // rotation souris
+    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
 
+    // Déplacement (input XR : maintien/drag)
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
         if (!placedOnce || !modelLoaded) return;
+
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
             if (err) return;
             isDragging = true;
-            activeTransientSources.add(transientSource);
 
             transientSource.on("result", (pos /*, rot */) => {
               if (!isDragging) return;
@@ -400,66 +307,94 @@
             });
 
             transientSource.once("remove", () => {
-              activeTransientSources.delete(transientSource);
-              if (activeTransientSources.size === 0) isDragging = false;
+              isDragging = false;
             });
           }
         });
       });
 
       inputSource.on("selectend", () => {
-        cancelAllTransientHitTests();
+        isDragging = false;
       });
     });
 
-    // =========================
-    // --- Slider rotation (UI)
-    // =========================
-    // 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 });
-
-    // Assure l’état après placement
-    const checkInterval = setInterval(() => {
-      enableSliderIfReady();
-      if (modelLoaded && placedOnce) clearInterval(checkInterval);
-    }, 200);
-
-    // =========================
-    // Souris (rotation via slider uniquement → on ne capture plus le clic droit)
-    // On garde seulement le drag (clic gauche) comme fallback desktop
-    // =========================
+    // 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);
+        }
+      });
+
+      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)
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
-      if (e.button === 0) {
+
+      if (e.button === 0 && !e.shiftKey) {
         isDragging = true;
+      } else if (e.button === 2 || (e.button === 0 && e.shiftKey)) {
+        rotateMode = true;
+        lastMouseX = e.x;
       }
     });
 
     app.mouse.on("mousemove", (e) => {
       if (!app.xr.active || !placedOnce) return;
-      if (isDragging && reticle.enabled) {
-        const pos = reticle.getPosition();
-        modelRoot.setPosition(pos);
+
+      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);
+        }
+      } 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);
       }
     });
 
     app.mouse.on("mouseup", () => {
       isDragging = false;
+      rotateMode = false;
     });
 
+    // Empêcher menu contextuel (utile pour la rotation au clic droit)
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
     // --- Événements AR globaux ---
@@ -472,7 +407,7 @@
       message("Session AR terminée.");
       reticle.enabled = false;
       isDragging = false;
-      cancelAllTransientHitTests();
+      rotateMode = false;
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {