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 via SLIDER (DOM Overlay)
+   - WebXR AR Hit Test, placement auto, drag + rotation Y via SLIDER
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -91,31 +91,29 @@
       user-select: none;
       pointer-events: none;
     }
-    /* Racine DOM Overlay (tout ce qui doit rester visible en AR doit être descendant) */
-    #xr-overlay-root {
-      position: fixed;
-      inset: 0;
-      z-index: 10000;          /* au-dessus du canvas XR */
-      pointer-events: none;    /* par défaut, mais les enfants peuvent réactiver */
-    }
     /* --- UI Slider (DOM overlay) --- */
     .ar-ui {
-      position: absolute;
+      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; /* capter interactions pendant AR */
+      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; }
+    .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;
@@ -140,7 +138,10 @@
       background: rgba(255,255,255,.6);
       border-radius: 4px;
     }
-    .ar-ui .val { font-size: 11px; opacity: 0.85; }
+    .ar-ui .val {
+      font-size: 11px;
+      opacity: 0.85;
+    }
   `;
   const styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -161,6 +162,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);
@@ -168,19 +170,9 @@
     return canvas;
   }
 
-  function ensureOverlayRoot() {
-    let root = document.getElementById("xr-overlay-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "xr-overlay-root";
-      document.body.appendChild(root);
-    }
-    return root;
-  }
-
-  // Crée le panneau slider DANS la racine d’overlay
-  function ensureSliderUI(overlayRoot) {
-    let panel = overlayRoot.querySelector(".ar-ui");
+  // 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";
@@ -189,7 +181,7 @@
       <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>
     `;
-    overlayRoot.appendChild(panel);
+    document.body.appendChild(panel);
     return panel;
   }
 
@@ -204,6 +196,7 @@
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
+    // PlayCanvas dispo -> démarrer
     initARApp();
   })();
 
@@ -211,10 +204,9 @@
   // 5) App AR PlayCanvas
   // =========================
   function initARApp() {
-    const pc = window.pc;
+    const pc = window.pc; // alias
     const canvas = ensureCanvas();
-    const overlayRoot = ensureOverlayRoot();   // <-- racine DOM overlay
-    const uiPanel = ensureSliderUI(overlayRoot);
+    const uiPanel = ensureSliderUI();
     const rotYInput = uiPanel.querySelector("#ar-rotY");
     const rotYVal = uiPanel.querySelector("#ar-rotY-val");
 
@@ -287,6 +279,7 @@
       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)}°`;
     };
@@ -303,6 +296,8 @@
         receiveShadows: false
       });
       modelRoot.addChild(instance);
+
+      // Ajuste si besoin selon ton modèle
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
       modelLoaded = true;
@@ -315,16 +310,16 @@
       return;
     }
 
-    // --- Démarrage AR (DOM Overlay assuré) ---
+    // --- 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, {
-        // IMPORTANT : tout élément DOM que tu veux voir en AR doit être descendant de 'overlayRoot'
-        domOverlay: { root: overlayRoot },
-        requiredFeatures: ["hit-test", "dom-overlay"],  // on exige le DOM overlay
+        // 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}`);
@@ -366,11 +361,13 @@
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
+              // Conserver yaw initiale détectée
               const euler = new pc.Vec3();
               rot.getEulerAngles(euler);
               rotationYDeg = norm360(euler.y);
               applyRotationY(rotationYDeg);
               placedOnce = true;
+              // activer le slider
               rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
@@ -379,24 +376,22 @@
       });
     });
 
-    // --- Déplacement (drag) via input XR ---
+    // --- Interactions (déplacement & rotation souris seulement) ---
     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 lastMouseX = 0;
+    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;
@@ -404,25 +399,20 @@
             });
 
             transientSource.once("remove", () => {
-              activeTransientSources.delete(transientSource);
-              if (activeTransientSources.size === 0) isDragging = false;
+              isDragging = false;
             });
           }
         });
       });
 
       inputSource.on("selectend", () => {
-        cancelAllTransientHitTests();
+        isDragging = false;
       });
     });
 
     // ❌ Rotation tactile 2 doigts — SUPPRIMÉE
 
-    // Souris : déplacement (clic gauche) & rotation (clic droit ou Shift+clic gauche)
-    let rotateMode = false;
-    let lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
-
+    // 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;
 
@@ -454,6 +444,7 @@
       rotateMode = false;
     });
 
+    // Empêcher menu contextuel (utile pour la rotation au clic droit)
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
     // --- Slider rotation (DOM overlay) ---
@@ -466,8 +457,6 @@
 
     // --- Événements AR globaux ---
     app.xr.on("start", () => {
-      // s'assurer que l'overlay (et donc le slider) reste visible en AR
-      overlayRoot.style.display = "block";
       message("Session AR démarrée. Visez le sol pour détecter un plan…");
       reticle.enabled = true;
     });
@@ -477,8 +466,7 @@
       reticle.enabled = false;
       isDragging = false;
       rotateMode = false;
-      rotYInput.disabled = !placedOnce;
-      // on garde l'overlay affiché hors AR aussi
+      rotYInput.disabled = true;
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {