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
+   - WebXR AR Hit Test, placement auto, drag + rotation Y via SLIDER (DOM Overlay)
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -79,9 +79,10 @@
   // 3) UI & utilitaires
   // =========================
   const css = `
+    /* Messages in-overlay */
     .pc-ar-msg {
       position: fixed; left: 50%; transform: translateX(-50%);
-      bottom: 16px; z-index: 9999; padding: 10px 14px;
+      bottom: 16px; z-index: 2; padding: 10px 14px;
       background: rgba(0,0,0,.65); color: #fff; border-radius: 8px;
       font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       font-size: 14px; line-height: 1.3; text-align: center;
@@ -91,19 +92,25 @@
       user-select: none;
       pointer-events: none;
     }
+    /* Racine DOM Overlay : tout ce qui doit rester visible en AR doit être descendant d’ici */
+    #xr-overlay-root {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;           /* au-dessus du canvas XR */
+      pointer-events: none;    /* les enfants réactivent si besoin */
+    }
     /* --- UI Slider (DOM overlay) --- */
     .ar-ui {
-      position: fixed;
+      position: absolute;
       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;
+      pointer-events: auto; /* capter les interactions pendant AR */
       width: 56px;
       display: flex; flex-direction: column; align-items: center; gap: 8px;
       box-shadow: 0 6px 18px rgba(0,0,0,.25);
@@ -114,45 +121,47 @@
       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;
+      width: 220px; 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);
+      -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;
+      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;
   document.head.appendChild(styleTag);
 
+  // Racine d'overlay (toujours présente)
+  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;
+  }
+  const overlayRoot = ensureOverlayRoot();
+
+  // Message -> dans l'overlay (pour rester visible en AR)
   function message(msg) {
-    let el = document.querySelector(".pc-ar-msg");
+    let el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
       el = document.createElement("div");
       el.className = "pc-ar-msg";
-      document.body.appendChild(el);
+      overlayRoot.appendChild(el);
     }
     el.textContent = msg;
   }
@@ -162,7 +171,6 @@
     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,9 +178,9 @@
     return canvas;
   }
 
-  // Crée le panneau slider (DOM overlay)
+  // Crée le panneau slider (DANS la racine overlay)
   function ensureSliderUI() {
-    let panel = document.querySelector(".ar-ui");
+    let panel = overlayRoot.querySelector(".ar-ui");
     if (panel) return panel;
     panel = document.createElement("div");
     panel.className = "ar-ui";
@@ -181,7 +189,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>
     `;
-    document.body.appendChild(panel);
+    overlayRoot.appendChild(panel);
     return panel;
   }
 
@@ -196,7 +204,6 @@
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
-    // PlayCanvas dispo -> démarrer
     initARApp();
   })();
 
@@ -310,20 +317,21 @@
       return;
     }
 
-    // --- Démarrage AR ---
+    // --- Démarrage AR — avec DOM Overlay correctement enregistré ---
     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, {
-        // DOM overlay pour pouvoir utiliser le slider en AR
-        domOverlay: { root: document.body },
+
+      // 1) Enregistrer la racine DOM overlay AVANT le start
+      app.xr.domOverlay.root = document.getElementById("xr-overlay-root");
+
+      // 2) Démarrer via l’API PlayCanvas, en passant les features (dont dom-overlay)
+      app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         requiredFeatures: ["hit-test", "dom-overlay"],
         optionalFeatures: ["plane-detection"],
-        callback: (err) => {
-          if (err) message(`Échec du démarrage AR : ${err.message}`);
-        }
+        domOverlay: { root: app.xr.domOverlay.root }
       });
     };
 
@@ -457,6 +465,8 @@
 
     // --- Événements AR globaux ---
     app.xr.on("start", () => {
+      // overlay présent pendant la session ?
+      console.log("[XR] start — domOverlay.supported:", app.xr.domOverlay.supported, "available:", app.xr.domOverlay.available);
       message("Session AR démarrée. Visez le sol pour détecter un plan…");
       reticle.enabled = true;
     });