Update viewer_ar.js

viewer_ar.js

@@ -25,7 +25,9 @@
     ]
   };
 
-  function timeout(ms) { return new Promise((_, rej) => setTimeout(() => rej(new Error("timeout")), ms)); }
+  function timeout(ms) {
+    return new Promise((_, rej) => setTimeout(() => rej(new Error("timeout")), ms));
+  }
 
   async function loadPlayCanvasRobust({ esmFirst = true, loadTimeoutMs = 15000 } = {}) {
     if (window.pc && typeof window.pc.Application === "function") return window.pc;
@@ -35,8 +37,11 @@
         try {
           const mod = await Promise.race([import(/* @vite-ignore */ url), timeout(loadTimeoutMs)]);
           const namespace = mod?.pc || mod?.default || mod;
-          if (namespace?.Application) { if (!window.pc) window.pc = namespace; return window.pc; }
-        } catch (_) {}
+          if (namespace?.Application) {
+            if (!window.pc) window.pc = namespace;
+            return window.pc;
+          }
+        } catch (_) { /* continue */ }
       }
       throw new Error("ESM failed");
     };
@@ -47,20 +52,27 @@
           await Promise.race([
             new Promise((res, rej) => {
               const s = document.createElement("script");
-              s.src = url; s.async = true;
-              s.onload = () => res(); s.onerror = () => rej(new Error("script error"));
+              s.src = url;
+              s.async = true;
+              s.onload = () => res();
+              s.onerror = () => rej(new Error("script error"));
               document.head.appendChild(s);
             }),
             timeout(loadTimeoutMs)
           ]);
           if (window.pc && typeof window.pc.Application === "function") return window.pc;
-        } catch (_) {}
+        } catch (_) { /* continue */ }
       }
       throw new Error("UMD failed");
     };
 
-    if (esmFirst) { try { return await tryESM(); } catch (_) {} return await tryUMD(); }
-    else { try { return await tryUMD(); } catch (_) {} return await tryESM(); }
+    if (esmFirst) {
+      try { return await tryESM(); } catch (_) { /* fallback */ }
+      return await tryUMD();
+    } else {
+      try { return await tryUMD(); } catch (_) { /* fallback */ }
+      return await tryESM();
+    }
   }
 
   // =========================
@@ -73,55 +85,100 @@
       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;
-      max-width: min(90vw, 640px); box-shadow: 0 6px 20px rgba(0,0,0,.25);
-      backdrop-filter: blur(4px); user-select: none; pointer-events: none;
+      max-width: min(90vw, 640px);
+      box-shadow: 0 6px 20px rgba(0,0,0,.25);
+      backdrop-filter: blur(4px);
+      user-select: none;
+      pointer-events: none;
     }
-    /* Racine DOM Overlay : tout ce qui doit rester visible en AR doit être descendant */
+    /* Racine DOM Overlay (tout ce qui doit rester visible en AR doit être descendant) */
     #xr-overlay-root {
-      position: fixed; inset: 0; z-index: 10000; pointer-events: none;
+      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 --- */
+    /* --- UI Slider (DOM overlay) --- */
     .ar-ui {
-      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
-      background: rgba(0,0,0,0.55); color: #fff; padding: 12px 10px; border-radius: 12px;
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      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; 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);
+      pointer-events: auto; /* capter 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);
+      backdrop-filter: blur(4px);
     }
     .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; width: 220px; height: 28px; transform: rotate(-90deg);
-      outline: none; background: transparent; touch-action: none;
+      -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);
+      -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;
+      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);
+  const styleTag = document.createElement("style");
+  styleTag.textContent = css;
+  document.head.appendChild(styleTag);
 
   function message(msg) {
     let el = document.querySelector(".pc-ar-msg");
-    if (!el) { el = document.createElement("div"); el.className = "pc-ar-msg"; document.body.appendChild(el); }
+    if (!el) {
+      el = document.createElement("div");
+      el.className = "pc-ar-msg";
+      document.body.appendChild(el);
+    }
     el.textContent = msg;
   }
 
   function ensureCanvas() {
     let canvas = document.getElementById("application-canvas");
-    if (!canvas) { canvas = document.createElement("canvas"); canvas.id = "application-canvas"; canvas.style.width = "100%"; canvas.style.height = "100%"; document.body.appendChild(canvas); }
+    if (!canvas) {
+      canvas = document.createElement("canvas");
+      canvas.id = "application-canvas";
+      canvas.style.width = "100%";
+      canvas.style.height = "100%";
+      document.body.appendChild(canvas);
+    }
     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); }
+    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");
     if (panel) return panel;
@@ -140,8 +197,13 @@
   // 4) Lancement
   // =========================
   (async () => {
-    try { await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 }); }
-    catch (e) { console.error("Chargement PlayCanvas échoué ->", e); message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard."); return; }
+    try {
+      await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
+    } catch (e) {
+      console.error("Chargement PlayCanvas échoué ->", e);
+      message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
+      return;
+    }
     initARApp();
   })();
 
@@ -151,7 +213,7 @@
   function initARApp() {
     const pc = window.pc;
     const canvas = ensureCanvas();
-    const overlayRoot = ensureOverlayRoot();                   // ← racine DOM overlay
+    const overlayRoot = ensureOverlayRoot();   // <-- racine DOM overlay
     const uiPanel = ensureSliderUI(overlayRoot);
     const rotYInput = uiPanel.querySelector("#ar-rotY");
     const rotYVal = uiPanel.querySelector("#ar-rotY-val");
@@ -172,43 +234,55 @@
     const onResize = () => app.resizeCanvas();
     window.addEventListener("resize", onResize);
     app.on("destroy", () => window.removeEventListener("resize", onResize));
+
     app.start();
 
     // --- Camera & light ---
     const camera = new pc.Entity("Camera");
-    camera.addComponent("camera", { clearColor: new pc.Color(0, 0, 0, 0), farClip: 10000 });
+    camera.addComponent("camera", {
+      clearColor: new pc.Color(0, 0, 0, 0),
+      farClip: 10000
+    });
     app.root.addChild(camera);
 
     const light = new pc.Entity("Light");
-    light.addComponent("light", { type: "spot", range: 30, intensity: 1.1, castShadows: false });
+    light.addComponent("light", {
+      type: "spot",
+      range: 30,
+      intensity: 1.1,
+      castShadows: false
+    });
     light.setLocalPosition(0, 10, 0);
     app.root.addChild(light);
 
-    // --- Reticle ---
+    // --- Reticle (anneau) ---
     const reticleMat = new pc.StandardMaterial();
-    reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0); reticleMat.opacity = 0.85; reticleMat.blendType = pc.BLEND_NORMAL; reticleMat.update();
+    reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0);
+    reticleMat.opacity = 0.85;
+    reticleMat.blendType = pc.BLEND_NORMAL;
+    reticleMat.update();
+
     const reticle = new pc.Entity("Reticle");
     reticle.addComponent("render", { type: "torus", material: reticleMat });
-    reticle.setLocalScale(0.12, 0.005, 0.12); reticle.enabled = false; app.root.addChild(reticle);
+    reticle.setLocalScale(0.12, 0.005, 0.12);
+    reticle.enabled = false;
+    app.root.addChild(reticle);
 
-    // --- Modèle GLB ---
+    // --- Conteneur modèle GLB ---
     const modelRoot = new pc.Entity("ModelRoot");
-    modelRoot.enabled = false; app.root.addChild(modelRoot);
+    modelRoot.enabled = false;
+    app.root.addChild(modelRoot);
 
-    let modelLoaded = false, placedOnce = false;
+    let modelLoaded = false;
+    let placedOnce = false;
 
-    app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
-      if (err) { console.error(err); message("Échec du chargement du modèle GLB."); return; }
-      const instance = asset.resource.instantiateRenderEntity({ castShadows: false, receiveShadows: false });
-      modelRoot.addChild(instance);
-      modelRoot.setLocalScale(0.2, 0.2, 0.2);
-      modelLoaded = true;
-      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
-    });
-
-    // === Rotation Y via slider ===
+    // État rotation Y (en degrés, 0..360)
     let rotationYDeg = 0;
-    const norm360 = (deg) => { let d = deg % 360; if (d < 0) d += 360; return d; };
+    const norm360 = (deg) => {
+      let d = deg % 360;
+      if (d < 0) d += 360;
+      return d;
+    };
     const applyRotationY = (deg) => {
       rotationYDeg = norm360(deg);
       const eul = modelRoot.getEulerAngles();
@@ -217,47 +291,87 @@
       rotYVal.textContent = `${Math.round(rotationYDeg)}°`;
     };
 
-    // === Démarrage AR — CORRIGÉ ===
-    function activateAR() {
-      if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
-
-      // 1) déclarer la racine DOM overlay AVANT de démarrer la session
-      app.xr.domOverlay.root = overlayRoot;   // <-- clé : c’est ainsi que PlayCanvas enregistre l’overlay
-
-      // (optionnel) feedback support
-      if (!app.xr.domOverlay.supported) {
-        console.warn("DOM Overlay non supporté par l’UA — le slider peut ne pas apparaître en AR.");
+    // --- Chargement GLB ---
+    app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
+      if (err) {
+        console.error(err);
+        message("Échec du chargement du modèle GLB.");
+        return;
       }
+      const instance = asset.resource.instantiateRenderEntity({
+        castShadows: false,
+        receiveShadows: false
+      });
+      modelRoot.addChild(instance);
+      modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
-      // 2) démarrer l’AR via l’API PlayCanvas (et non camera.camera.startXr)
-      app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);
+      modelLoaded = true;
+      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
+    });
+
+    // --- Vérifs WebXR ---
+    if (!app.xr.supported) {
+      message("WebXR n’est pas supporté sur cet appareil.");
+      return;
     }
 
-    // Tap / clic → start AR
-    app.mouse.on("mousedown", () => { if (!app.xr.active) activateAR(); });
+    // --- Démarrage AR (DOM Overlay assuré) ---
+    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
+        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();
+    });
     if (app.touch) {
       app.touch.on("touchend", (evt) => {
         if (!app.xr.active) activateAR();
-        evt.event.preventDefault(); evt.event.stopPropagation();
+        evt.event.preventDefault();
+        evt.event.stopPropagation();
       });
     }
 
     // ESC → quitter
-    app.keyboard.on("keydown", (evt) => { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
+    app.keyboard.on("keydown", (evt) => {
+      if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end();
+    });
 
-    // Hit Test global (réglage réticule + 1er placement)
+    // --- Hit Test global (réglage réticule + 1er placement) ---
     app.xr.hitTest.on("available", () => {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
         callback: (err, hitSource) => {
-          if (err) { message("Le AR hit test n’a pas pu démarrer."); return; }
+          if (err) {
+            message("Le AR hit test n’a pas pu démarrer.");
+            return;
+          }
           hitSource.on("result", (pos, rot) => {
-            reticle.enabled = true; reticle.setPosition(pos); reticle.setRotation(rot);
+            reticle.enabled = true;
+            reticle.setPosition(pos);
+            reticle.setRotation(rot);
+
             if (modelLoaded && !placedOnce) {
-              modelRoot.enabled = true; modelRoot.setPosition(pos);
-              const euler = new pc.Vec3(); rot.getEulerAngles(euler);
-              rotationYDeg = norm360(euler.y); applyRotationY(rotationYDeg);
-              placedOnce = true; rotYInput.disabled = false;
+              modelRoot.enabled = true;
+              modelRoot.setPosition(pos);
+              const euler = new pc.Vec3();
+              rot.getEulerAngles(euler);
+              rotationYDeg = norm360(euler.y);
+              applyRotationY(rotationYDeg);
+              placedOnce = true;
+              rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
@@ -265,12 +379,13 @@
       });
     });
 
-    // Déplacement (drag) via input XR
+    // --- Déplacement (drag) via input XR ---
     let isDragging = false;
     const activeTransientSources = new Set();
     function cancelAllTransientHitTests() {
       activeTransientSources.forEach(src => { try { src.remove && src.remove(); } catch(_) {} });
-      activeTransientSources.clear(); isDragging = false;
+      activeTransientSources.clear();
+      isDragging = false;
     }
 
     app.xr.input.on("add", (inputSource) => {
@@ -279,64 +394,110 @@
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
-            if (err) return; isDragging = true; activeTransientSources.add(transientSource);
-            transientSource.on("result", (pos) => { if (isDragging) modelRoot.setPosition(pos); });
-            transientSource.once("remove", () => { activeTransientSources.delete(transientSource); if (activeTransientSources.size === 0) isDragging = false; });
+            if (err) return;
+            isDragging = true;
+            activeTransientSources.add(transientSource);
+
+            transientSource.on("result", (pos /*, rot */) => {
+              if (!isDragging) return;
+              modelRoot.setPosition(pos);
+            });
+
+            transientSource.once("remove", () => {
+              activeTransientSources.delete(transientSource);
+              if (activeTransientSources.size === 0) isDragging = false;
+            });
           }
         });
       });
-      inputSource.on("selectend", () => { cancelAllTransientHitTests(); });
+
+      inputSource.on("selectend", () => {
+        cancelAllTransientHitTests();
+      });
     });
 
+    // ❌ Rotation tactile 2 doigts — SUPPRIMÉE
+
     // Souris : déplacement (clic gauche) & rotation (clic droit ou Shift+clic gauche)
-    let rotateMode = false, lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25;
+    let rotateMode = false;
+    let lastMouseX = 0;
+    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
 
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
-      if (e.button === 0 && !e.shiftKey) isDragging = true;
-      else if (e.button === 2 || (e.button === 0 && e.shiftKey)) { rotateMode = true; lastMouseX = e.x; }
+
+      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) { if (reticle.enabled) modelRoot.setPosition(reticle.getPosition()); }
-      else if (rotateMode && modelRoot.enabled) { const dx = e.x - lastMouseX; lastMouseX = e.x; applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY); }
+
+      if (isDragging) {
+        if (reticle.enabled) {
+          const pos = reticle.getPosition();
+          modelRoot.setPosition(pos);
+        }
+      } else if (rotateMode && modelRoot.enabled) {
+        const dx = e.x - lastMouseX;
+        lastMouseX = e.x;
+        applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
+      }
+    });
+
+    app.mouse.on("mouseup", () => {
+      isDragging = false;
+      rotateMode = false;
     });
 
-    app.mouse.on("mouseup", () => { isDragging = false; rotateMode = false; });
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
-    // Slider rotation
-    rotYInput.disabled = true;
-    rotYInput.addEventListener("input", (e) => { if (modelRoot.enabled) applyRotationY(parseFloat(e.target.value || "0")); }, { passive: true });
+    // --- Slider rotation (DOM overlay) ---
+    rotYInput.disabled = true; // activé au 1er placement
+    rotYInput.addEventListener("input", (e) => {
+      if (!modelRoot.enabled) return;
+      const deg = parseFloat(e.target.value || "0");
+      applyRotationY(deg);
+    }, { passive: true });
 
-    // Événements AR
+    // --- Événements AR globaux ---
     app.xr.on("start", () => {
-      // overlay disponible ?
-      if (app.xr.domOverlay.available) {
-        // rien à faire : overlayRoot est déjà l’UI parent (slider visible)
-      } else {
-        console.warn("DOM Overlay non disponible pendant la session.");
-      }
+      // 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;
     });
 
     app.xr.on("end", () => {
       message("Session AR terminée.");
-      reticle.enabled = false; isDragging = false; rotateMode = false; rotYInput.disabled = !placedOnce;
+      reticle.enabled = false;
+      isDragging = false;
+      rotateMode = false;
+      rotYInput.disabled = !placedOnce;
+      // on garde l'overlay affiché hors AR aussi
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {
-      if (!available) message("AR immersive indisponible.");
-      else if (!app.xr.hitTest.supported) message("AR Hit Test non supporté.");
-      else message(modelLoaded ? "Touchez l’écran pour démarrer l’AR." : "Chargement du modèle…");
+      if (!available) {
+        message("AR immersive indisponible.");
+      } else if (!app.xr.hitTest.supported) {
+        message("AR Hit Test non supporté.");
+      } else {
+        message(modelLoaded ? "Touchez l’écran pour démarrer l’AR." : "Chargement du modèle…");
+      }
     });
 
     // Message initial
-    if (!app.xr.isAvailable(pc.XRTYPE_AR)) message("AR immersive indisponible.");
-    else if (!app.xr.hitTest.supported) message("AR Hit Test non supporté.");
-    else message("Chargement du modèle…");
+    if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
+      message("AR immersive indisponible.");
+    } else if (!app.xr.hitTest.supported) {
+      message("AR Hit Test non supporté.");
+    } else {
+      message("Chargement du modèle…");
+    }
   }
 })();