Update viewer_ar.js

viewer_ar.js

@@ -1,19 +1,83 @@
-// script_ar.js
+/* script_ar.js — AR PlayCanvas + GLB HuggingFace
+   - Chargeur PlayCanvas robuste (ESM -> UMD avec fallbacks + timeout)
+   - WebXR AR Hit Test, placement auto, drag + rotation Y
+   - Aucune dépendance externe autre que PlayCanvas et le GLB
+*/
+
 (() => {
-  const PLAYCANVAS_CDN = "https://cdn.playcanvas.com/playcanvas-stable.min.js";
+  // =========================
+  // 1) Paramètres principaux
+  // =========================
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
-  // ============ Utils DOM ============
-  const ensureCanvas = () => {
-    let canvas = document.getElementById("application-canvas");
-    if (!canvas) {
-      canvas = document.createElement("canvas");
-      canvas.id = "application-canvas";
-      document.body.appendChild(canvas);
-    }
-    return canvas;
+  // =========================
+  // 2) Chargeur PlayCanvas robuste
+  // =========================
+  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"
+    ]
   };
 
+  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;
+
+    const tryESM = async () => {
+      for (const url of PC_URLS.esm) {
+        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 */ }
+      }
+      throw new Error("ESM failed");
+    };
+
+    const tryUMD = async () => {
+      for (const url of PC_URLS.umd) {
+        try {
+          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"));
+              document.head.appendChild(s);
+            }),
+            timeout(loadTimeoutMs)
+          ]);
+          if (window.pc && typeof window.pc.Application === "function") return window.pc;
+        } catch (_) { /* continue */ }
+      }
+      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();
+    }
+  }
+
+  // =========================
+  // 3) UI & utilitaires
+  // =========================
   const css = `
     .pc-ar-msg {
       position: fixed; left: 50%; transform: translateX(-50%);
@@ -21,16 +85,18 @@
       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, 600px);
+      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;
     }
   `;
   const styleTag = document.createElement("style");
   styleTag.textContent = css;
   document.head.appendChild(styleTag);
 
-  const message = (msg) => {
+  function message(msg) {
     let el = document.querySelector(".pc-ar-msg");
     if (!el) {
       el = document.createElement("div");
@@ -38,38 +104,49 @@
       document.body.appendChild(el);
     }
     el.textContent = msg;
-  };
-
-  // ============ Loader PlayCanvas ============
-  const loadPcIfNeeded = () =>
-    new Promise((resolve, reject) => {
-      if (window.pc) return resolve();
-      const s = document.createElement("script");
-      s.src = PLAYCANVAS_CDN;
-      s.async = true;
-      s.onload = () => resolve();
-      s.onerror = () => reject(new Error("Échec du chargement de PlayCanvas"));
-      document.head.appendChild(s);
-    });
+  }
 
-  // ============ Main ============
-  loadPcIfNeeded()
-    .then(() => init())
-    .catch((e) => {
-      console.error(e);
-      message("Impossible de charger PlayCanvas.");
-    });
+  function ensureCanvas() {
+    let canvas = document.getElementById("application-canvas");
+    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);
+    }
+    return canvas;
+  }
 
-  function init() {
+  // =========================
+  // 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;
+    }
+    // PlayCanvas dispo -> démarrer
+    initARApp();
+  })();
+
+  // =========================
+  // 5) App AR PlayCanvas
+  // =========================
+  function initARApp() {
+    const pc = window.pc; // alias
     const canvas = ensureCanvas();
     window.focus();
 
-    // Crée l'app PlayCanvas (fond transparent pour l'AR)
     const app = new pc.Application(canvas, {
       mouse: new pc.Mouse(canvas),
       touch: new pc.TouchDevice(canvas),
       keyboard: new pc.Keyboard(window),
-      graphicsDeviceOptions: { alpha: true },
+      graphicsDeviceOptions: { alpha: true }
     });
 
     app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
@@ -82,26 +159,25 @@
 
     app.start();
 
-    // Caméra
+    // --- Camera & light ---
     const camera = new pc.Entity("Camera");
     camera.addComponent("camera", {
       clearColor: new pc.Color(0, 0, 0, 0),
-      farClip: 10000,
+      farClip: 10000
     });
     app.root.addChild(camera);
 
-    // Une lumière douce (utile en fallback / pré-AR)
     const light = new pc.Entity("Light");
     light.addComponent("light", {
       type: "spot",
       range: 30,
-      intensity: 1.2,
-      castShadows: false,
+      intensity: 1.1,
+      castShadows: false
     });
     light.setLocalPosition(0, 10, 0);
     app.root.addChild(light);
 
-    // Réticule (anneau) pour visualiser l’emplacement proposé par le hit-test
+    // --- Reticle (anneau) ---
     const reticleMat = new pc.StandardMaterial();
     reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0);
     reticleMat.opacity = 0.85;
@@ -111,45 +187,44 @@
     const reticle = new pc.Entity("Reticle");
     reticle.addComponent("render", { type: "torus", material: reticleMat });
     reticle.setLocalScale(0.12, 0.005, 0.12);
-    reticle.enabled = false; // activé quand AR démarre
+    reticle.enabled = false;
     app.root.addChild(reticle);
 
-    // Conteneur du modèle GLB
+    // --- Conteneur modèle GLB ---
     const modelRoot = new pc.Entity("ModelRoot");
-    modelRoot.enabled = false; // activé après chargement + 1er placement
+    modelRoot.enabled = false;
     app.root.addChild(modelRoot);
 
     let modelLoaded = false;
     let placedOnce = false;
 
-    // Chargement GLB (Container)
+    // --- Chargement GLB ---
     app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
       if (err) {
         console.error(err);
         message("Échec du chargement du modèle GLB.");
         return;
       }
-      // Instancie le contenu GLB
       const instance = asset.resource.instantiateRenderEntity({
         castShadows: false,
-        receiveShadows: false,
+        receiveShadows: false
       });
       modelRoot.addChild(instance);
 
-      // Mise à l’échelle raisonnable si le modèle est énorme/petit
-      // (ajuste si besoin)
+      // Ajuste si besoin selon ton modèle
       modelRoot.setLocalScale(0.2, 0.2, 0.2);
 
       modelLoaded = true;
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
-    // ======== Gestion AR / Hit Test ========
+    // --- Vérifs WebXR ---
     if (!app.xr.supported) {
       message("WebXR n’est pas supporté sur cet appareil.");
       return;
     }
 
+    // --- Démarrage AR ---
     const activateAR = () => {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
         message("AR immersive indisponible sur cet appareil.");
@@ -157,14 +232,12 @@
       }
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         callback: (err) => {
-          if (err) {
-            message(`Échec du démarrage AR : ${err.message}`);
-          }
-        },
+          if (err) message(`Échec du démarrage AR : ${err.message}`);
+        }
       });
     };
 
-    // Démarrer AR au premier tap/clic
+    // Premier tap / clic → démarrer AR
     app.mouse.on("mousedown", () => {
       if (!app.xr.active) activateAR();
     });
@@ -176,12 +249,12 @@
       });
     }
 
-    // ESC pour quitter
+    // ESC → quitter
     app.keyboard.on("keydown", (evt) => {
       if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end();
     });
 
-    // Hit test global (pour le réticule et le premier placement auto)
+    // --- 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],
@@ -195,75 +268,64 @@
             reticle.setPosition(pos);
             reticle.setRotation(rot);
 
-            // Premier placement auto du modèle d��s que possible
             if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
-              // Conserver uniquement la yaw (rotation Y) issue du plan
+              // Conserver uniquement la yaw (rotation Y)
               const euler = new pc.Vec3();
               rot.getEulerAngles(euler);
               modelRoot.setEulerAngles(0, euler.y, 0);
               placedOnce = true;
-              message("Objet placé. ⚠️ Glissez pour déplacer, pincez/2 doigts pour tourner.");
+              message("Objet placé. Glissez pour déplacer, 2 doigts / clic droit pour tourner.");
             }
           });
-        },
+        }
       });
     });
 
-    // État & helpers d’interaction
+    // --- Interactions ---
     let isDragging = false;
-    let activeInputSource = null;
     let rotateMode = false;
-    let lastAvgX = 0; // pour rotation à 2 doigts
-    let lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25; // degrés par pixel env.
+    let lastAvgX = 0;   // rotation tactile (2 doigts)
+    let lastMouseX = 0; // rotation souris
+    const ROTATE_SENSITIVITY = 0.25; // degrés / pixel approx.
 
-    // Déplacement avec un input source XR (touch en AR)
+    // Déplacement (input XR : maintien/drag)
     app.xr.input.on("add", (inputSource) => {
-      // Sélection (tap et maintien)
       inputSource.on("selectstart", () => {
         if (!placedOnce || !modelLoaded) return;
 
-        // Démarre un hit test TRANSITOIRE lié à la source pour suivre le doigt
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
             if (err) return;
             isDragging = true;
-            activeInputSource = { source: inputSource, ht: transientSource };
 
-            transientSource.on("result", (pos, rot) => {
+            transientSource.on("result", (pos /*, rot */) => {
               if (!isDragging) return;
-              // Déplacer sur le plan détecté
               modelRoot.setPosition(pos);
             });
 
             transientSource.once("remove", () => {
-              if (activeInputSource && activeInputSource.ht === transientSource) {
-                isDragging = false;
-                activeInputSource = null;
-              }
+              isDragging = false;
             });
-          },
+          }
         });
       });
 
       inputSource.on("selectend", () => {
         isDragging = false;
-        activeInputSource = null;
       });
     });
 
-    // ======== Gestes Tactiles pour rotation (2 doigts) ========
+    // Rotation tactile (2 doigts → glisser horizontal)
     if (app.touch) {
       let touches = new Map();
-
       const getAvgX = () => {
         if (touches.size === 0) return 0;
-        let sum = 0;
-        touches.forEach((t) => (sum += t.x));
-        return sum / touches.size;
+        let s = 0;
+        touches.forEach((t) => (s += t.x));
+        return s / touches.size;
       };
 
       app.touch.on("touchstart", (e) => {
@@ -282,7 +344,6 @@
           const avgX = getAvgX();
           const dx = avgX - lastAvgX;
           lastAvgX = avgX;
-          // Appliquer rotation Y
           const euler = modelRoot.getEulerAngles();
           modelRoot.setEulerAngles(euler.x, euler.y + dx * ROTATE_SENSITIVITY, euler.z);
         }
@@ -299,12 +360,11 @@
       });
     }
 
-    // ======== Souris (déplacement = clic gauche maintenu; rotation = clic droit ou Shift+clic) ========
+    // Souris : déplacement (clic gauche maintenu) & rotation (clic droit ou Shift+clic gauche)
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce) return;
 
       if (e.button === 0 && !e.shiftKey) {
-        // drag pour déplacement : on démarre un hit-test à partir du centre de l’écran à chaque move
         isDragging = true;
       } else if (e.button === 2 || (e.button === 0 && e.shiftKey)) {
         rotateMode = true;
@@ -315,10 +375,8 @@
     app.mouse.on("mousemove", (e) => {
       if (!app.xr.active || !placedOnce) return;
 
-      if (isDragging && app.xr.hitTest.supported) {
-        // Créer un hit test ponctuel lié au pointeur n’est pas direct via souris.
-        // Astuce : on projette un point écran -> monde en AR via hit test global du reticle
-        // Ici, on se sert du reticle déjà alimenté par le hit test continu pour repositionner rapidement.
+      if (isDragging) {
+        // On s’aligne sur le réticule (alimenté en continu par le hit test)
         if (reticle.enabled) {
           const pos = reticle.getPosition();
           modelRoot.setPosition(pos);
@@ -336,10 +394,10 @@
       rotateMode = false;
     });
 
-    // Empêcher le menu contextuel sur clic droit (utile pour la rotation)
+    // Empêcher menu contextuel (utile pour la rotation au clic droit)
     window.addEventListener("contextmenu", (e) => e.preventDefault());
 
-    // ======== Événements AR globaux ========
+    // --- Événements AR globaux ---
     app.xr.on("start", () => {
       message("Session AR démarrée. Visez le sol pour détecter un plan…");
       reticle.enabled = true;
@@ -350,7 +408,6 @@
       reticle.enabled = false;
       isDragging = false;
       rotateMode = false;
-      activeInputSource = null;
     });
 
     app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {
@@ -363,7 +420,7 @@
       }
     });
 
-    // Messages initiaux
+    // Message initial
     if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
       message("AR immersive indisponible.");
     } else if (!app.xr.hitTest.supported) {