Update viewer_ar.js

viewer_ar.js

@@ -25,9 +25,7 @@
     ]
   };
 
-  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;
@@ -37,11 +35,8 @@
         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 (_) { /* continue */ }
+          if (namespace?.Application) { if (!window.pc) window.pc = namespace; return window.pc; }
+        } catch (_) {}
       }
       throw new Error("ESM failed");
     };
@@ -52,27 +47,20 @@
           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 (_) { /* continue */ }
+        } catch (_) {}
       }
       throw new Error("UMD failed");
     };
 
-    if (esmFirst) {
-      try { return await tryESM(); } catch (_) { /* fallback */ }
-      return await tryUMD();
-    } else {
-      try { return await tryUMD(); } catch (_) { /* fallback */ }
-      return await tryESM();
-    }
+    if (esmFirst) { try { return await tryESM(); } catch (_) {} return await tryUMD(); }
+    else { try { return await tryUMD(); } catch (_) {} return await tryESM(); }
   }
 
   // =========================
@@ -85,100 +73,55 @@
       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;          /* au-dessus du canvas XR */
-      pointer-events: none;    /* par défaut, mais les enfants peuvent réactiver */
+      position: fixed; inset: 0; z-index: 10000; pointer-events: none;
     }
-    /* --- UI Slider (DOM overlay) --- */
+    /* --- UI Slider --- */
     .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; /* 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);
+      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; }
-    /* Slider vertical (on le tourne) */
     .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;
+      -webkit-appearance: none; 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;
+      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;
@@ -197,13 +140,8 @@
   // 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();
   })();
 
@@ -213,7 +151,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");
@@ -234,55 +172,43 @@
     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 (anneau) ---
+    // --- Reticle ---
     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);
 
-    // --- Conteneur modèle GLB ---
+    // --- 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;
-    let placedOnce = false;
+    let modelLoaded = false, placedOnce = false;
 
-    // État rotation Y (en degrés, 0..360)
+    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 ===
     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();
@@ -291,87 +217,47 @@
       rotYVal.textContent = `${Math.round(rotationYDeg)}°`;
     };
 
-    // --- 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);
+    // === Démarrage AR — CORRIGÉ ===
+    function activateAR() {
+      if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
 
-      modelLoaded = true;
-      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
-    });
+      // 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
 
-    // --- Vérifs WebXR ---
-    if (!app.xr.supported) {
-      message("WebXR n’est pas supporté sur cet appareil.");
-      return;
-    }
-
-    // --- Démarrage AR (DOM Overlay assuré) ---
-    const activateAR = () => {
-      if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
-        message("AR immersive indisponible sur cet appareil.");
-        return;
+      // (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.");
       }
-      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();
-    });
+      // 2) démarrer l’AR via l’API PlayCanvas (et non camera.camera.startXr)
+      app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);
+    }
+
+    // Tap / clic → start 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 →");
             }
           });
@@ -379,13 +265,12 @@
       });
     });
 
-    // --- 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) => {
@@ -394,110 +279,64 @@
         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;
-              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) => { if (isDragging) 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;
-    let lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
+    let rotateMode = false, lastMouseX = 0;
+    const ROTATE_SENSITIVITY = 0.25;
 
     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) {
-          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;
+      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); }
     });
 
+    app.mouse.on("mouseup", () => { isDragging = false; rotateMode = false; });
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
-    // --- 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 });
+    // Slider rotation
+    rotYInput.disabled = true;
+    rotYInput.addEventListener("input", (e) => { if (modelRoot.enabled) applyRotationY(parseFloat(e.target.value || "0")); }, { passive: true });
 
-    // --- Événements AR globaux ---
+    // Événements AR
     app.xr.on("start", () => {
-      // s'assurer que l'overlay (et donc le slider) reste visible en AR
-      overlayRoot.style.display = "block";
+      // 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.");
+      }
       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;
-      // on garde l'overlay affiché hors AR aussi
+      reticle.enabled = false; isDragging = false; rotateMode = false; rotYInput.disabled = !placedOnce;
     });
 
     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…");
   }
 })();