Update viewer_ar.js

viewer_ar.js

@@ -1,6 +1,7 @@
 /* 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)
+   - Version PC verrouillée
+   - WebXR AR Hit Test, placement auto, drag
+   - Rotation Y via SLIDER (DOM Overlay)
    - Aucune dépendance externe autre que PlayCanvas et le GLB
 */
 
@@ -11,18 +12,12 @@
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
   // =========================
-  // 2) Chargeur PlayCanvas robuste
+  // 2) Chargeur PlayCanvas ROBUSTE (version verrouillée)
   // =========================
+  const PC_VERSION = "2.11.7"; // même version pour ESM et UMD
   const PC_URLS = {
-    esm: [
-      "https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.min.mjs",
-      "https://cdn.jsdelivr.net/npm/playcanvas@2/build/playcanvas.min.mjs"
-    ],
-    umd: [
-      "https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.11.7/playcanvas.min.js",
-      "https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.min.js",
-      "https://cdn.jsdelivr.net/npm/playcanvas@2/build/playcanvas.min.js"
-    ]
+    esm: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.mjs`],
+    umd: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.js`]
   };
 
   function timeout(ms) {
@@ -41,7 +36,7 @@
             if (!window.pc) window.pc = namespace;
             return window.pc;
           }
-        } catch (_) { /* continue */ }
+        } catch (_) {}
       }
       throw new Error("ESM failed");
     };
@@ -61,77 +56,50 @@
             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 */ }
+      try { return await tryESM(); } catch (_) {}
       return await tryUMD();
     } else {
-      try { return await tryUMD(); } catch (_) { /* fallback */ }
+      try { return await tryUMD(); } catch (_) {}
       return await tryESM();
     }
   }
 
   // =========================
-  // 3) UI & utilitaires
+  // 3) UI & utilitaires (DOM Overlay)
   // =========================
   const css = `
-    /* Messages in-overlay */
     .pc-ar-msg {
       position: fixed; left: 50%; transform: translateX(-50%);
       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;
-      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 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 */
+      position: fixed; inset: 0; z-index: 9999; pointer-events: none;
     }
-    /* --- 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; /* 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);
-      backdrop-filter: blur(4px);
-    }
-    .ar-ui .label {
-      font-size: 12px;
-      text-align: center;
-      opacity: 0.9;
+      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 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; 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%;
+      -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 {
@@ -143,7 +111,6 @@
   styleTag.textContent = css;
   document.head.appendChild(styleTag);
 
-  // Racine d'overlay (toujours présente)
   function ensureOverlayRoot() {
     let root = document.getElementById("xr-overlay-root");
     if (!root) {
@@ -155,7 +122,6 @@
   }
   const overlayRoot = ensureOverlayRoot();
 
-  // Message -> dans l'overlay (pour rester visible en AR)
   function message(msg) {
     let el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
@@ -178,7 +144,6 @@
     return canvas;
   }
 
-  // Crée le panneau slider (DANS la racine overlay)
   function ensureSliderUI() {
     let panel = overlayRoot.querySelector(".ar-ui");
     if (panel) return panel;
@@ -211,7 +176,7 @@
   // 5) App AR PlayCanvas
   // =========================
   function initARApp() {
-    const pc = window.pc; // alias
+    const pc = window.pc;
     const canvas = ensureCanvas();
     const uiPanel = ensureSliderUI();
     const rotYInput = uiPanel.querySelector("#ar-rotY");
@@ -275,18 +240,13 @@
     let modelLoaded = false;
     let placedOnce = false;
 
-    // État rotation Y (en degrés, 0..360)
+    // Rotation Y (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; return d < 0 ? d + 360 : d; };
     const applyRotationY = (deg) => {
       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,8 +263,6 @@
         receiveShadows: false
       });
       modelRoot.addChild(instance);
-
-      // Ajuste si besoin selon ton modèle
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
       modelLoaded = true;
@@ -317,28 +275,31 @@
       return;
     }
 
-    // --- Démarrage AR — avec DOM Overlay correctement enregistré ---
+    // --- Démarrage AR (CameraComponent.startXr + DOM Overlay) ---
     const activateAR = () => {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
         message("AR immersive indisponible sur cet appareil.");
         return;
       }
 
-      // 1) Enregistrer la racine DOM overlay AVANT le start
+      // DOM overlay root (notre conteneur avec slider + messages)
       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, {
+      // Démarre via la Camera Component (plus compatible selon versions moteur)
+      camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         requiredFeatures: ["hit-test", "dom-overlay"],
-        optionalFeatures: ["plane-detection"],
-        domOverlay: { root: app.xr.domOverlay.root }
+        domOverlay: { root: app.xr.domOverlay.root },
+        callback: (err) => {
+          if (err) {
+            console.error("Échec du démarrage AR :", err);
+            message(`Échec du démarrage AR : ${err.message || err}`);
+          }
+        }
       });
     };
 
     // Premier tap / clic → démarrer AR
-    app.mouse.on("mousedown", () => {
-      if (!app.xr.active) activateAR();
-    });
+    app.mouse.on("mousedown", () => { if (!app.xr.active) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", (evt) => {
         if (!app.xr.active) activateAR();
@@ -348,19 +309,14 @@
     }
 
     // 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) ---
     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);
@@ -369,13 +325,11 @@
             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 →");
             }
@@ -384,79 +338,50 @@
       });
     });
 
-    // --- Interactions (déplacement & rotation souris seulement) ---
+    // --- Interactions (déplacement & rotation souris) ---
     let isDragging = false;
     let rotateMode = false;
     let lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
+    const ROTATE_SENSITIVITY = 0.25;
 
     // 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;
-
-            transientSource.on("result", (pos /*, rot */) => {
-              if (!isDragging) return;
-              modelRoot.setPosition(pos);
-            });
-
-            transientSource.once("remove", () => {
-              isDragging = false;
-            });
+            transientSource.on("result", (pos) => { if (isDragging) modelRoot.setPosition(pos); });
+            transientSource.once("remove", () => { isDragging = false; });
           }
         });
       });
-
-      inputSource.on("selectend", () => {
-        isDragging = false;
-      });
+      inputSource.on("selectend", () => { isDragging = false; });
     });
 
-    // ❌ Rotation tactile 2 doigts — SUPPRIMÉE
-
-    // Souris : déplacement (clic gauche) & rotation (clic droit ou Shift+clic gauche) — conservée
+    // Souris : déplacement (gauche) & rotation (droit ou Shift+gauche)
     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;
+      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;
-    });
-
-    // Empêcher menu contextuel (utile pour la rotation au clic droit)
+    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.disabled = true;
     rotYInput.addEventListener("input", (e) => {
       if (!modelRoot.enabled) return;
       const deg = parseFloat(e.target.value || "0");
@@ -465,7 +390,6 @@
 
     // --- É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;
@@ -480,22 +404,14 @@
     });
 
     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…");
   }
 })();