Update viewer_ar.js

viewer_ar.js

@@ -1,8 +1,8 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Version PC verrouillée
    - WebXR AR Hit Test, placement auto, drag
-   - Rotation Y via SLIDER (DOM Overlay) avec large zone tactile
-   - Aucune dépendance externe autre que PlayCanvas et le GLB
+   - Rotation Y via SLIDER (DOM Overlay) — hitbox large, thumb centré
+   - Pas de wrap à 360° (clamp 0..360)
 */
 
 (() => {
@@ -14,16 +14,13 @@
   // =========================
   // 2) Chargeur PlayCanvas ROBUSTE (version verrouillée)
   // =========================
-  const PC_VERSION = "2.11.7"; // même version pour ESM et UMD
+  const PC_VERSION = "2.11.7";
   const PC_URLS = {
     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) {
-    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;
 
@@ -67,7 +64,7 @@
     .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;
+      background: rgba(0,0,0,.65); color: #fff; border-radius: 12px;
       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);
@@ -76,48 +73,55 @@
     #xr-overlay-root {
       position: fixed; inset: 0; z-index: 9999; pointer-events: none;
     }
+    /* ----- Panneau + slider (plus compact) ----- */
     .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;
+      background: rgba(0,0,0,0.55); color: #fff; padding: 12px 10px;
+      border-radius: 16px; width: 56px;
       font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-      pointer-events: auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 10px;
-      box-shadow: 0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(4px);
+      pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
+      box-shadow: 0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(6px);
       touch-action: none;
     }
-    .ar-ui .label { font-size: 12px; text-align: center; opacity: 0.9; }
+    .ar-ui .label { font-size: 12px; text-align: center; opacity: 0.95; }
 
-    /* GRAND WRAPPER TACTILE (hitbox) */
+    /* Grande zone tactile verticale */
     .rotY-wrap {
       position: relative;
-      width: 60px;           /* largeur tactile confortable */
-      height: 260px;         /* hauteur tactile confortable */
+      width: 48px;              /* plus étroit */
+      height: 200px;            /* plus court */
       display: flex; align-items: center; justify-content: center;
       touch-action: none;
     }
-    /* Rail visuel (optionnel) */
+    /* Rail visuel centré */
     .rotY-rail {
-      position: absolute; width: 6px; height: 80%;
-      background: rgba(255,255,255,.35); border-radius: 3px;
+      position: absolute; width: 4px; height: 86%;
+      background: rgba(255,255,255,.35); border-radius: 2px;
+      left: 50%; transform: translateX(-50%);
     }
 
-    /* Slider réel, tourné, mais on ne dépend PAS de son hitbox */
+    /* Slider réel, visuel seulement (on pilote via rotY-wrap) */
     .ar-ui input[type="range"].rotY {
       -webkit-appearance: none;
       position: relative;
-      width: 220px; height: 32px;
+      width: 160px; height: 22px;               /* plus petit */
       transform: rotate(-90deg);
+      transform-origin: center;                  /* centre le thumb après rotation */
       outline: none; background: transparent; touch-action: none;
-      pointer-events: none; /* <- on lit sa valeur mais on ne compte pas sur sa hitbox */
+      pointer-events: none;                      /* on ne s'appuie pas sur sa hitbox */
+      display: block;
     }
     .ar-ui input[type="range"].rotY::-webkit-slider-thumb {
-      -webkit-appearance: none; appearance: none; width: 26px; height: 26px; 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;                 /* bouton rond plus petit */
+      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: 4px; background: rgba(255,255,255,.6); border-radius: 2px;
     }
 
-    .ar-ui .val { font-size: 12px; opacity: 0.9; }
+    .ar-ui .val { font-size: 12px; opacity: 0.95; }
   `;
   const styleTag = document.createElement("style");
   styleTag.textContent = css;
@@ -125,11 +129,7 @@
 
   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;
   }
   const overlayRoot = ensureOverlayRoot();
@@ -137,23 +137,13 @@
   // Messages dans l'overlay
   function message(msg) {
     let el = overlayRoot.querySelector(".pc-ar-msg");
-    if (!el) {
-      el = document.createElement("div");
-      el.className = "pc-ar-msg";
-      overlayRoot.appendChild(el);
-    }
+    if (!el) { el = document.createElement("div"); el.className = "pc-ar-msg"; overlayRoot.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;
   }
 
@@ -178,13 +168,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();
   })();
 
@@ -216,60 +201,46 @@
     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.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.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;
 
-    // Rotation Y (0..360)
+    // Rotation Y (clamp 0..360 — pas de wrap)
     let rotationYDeg = 0;
-    const norm360 = (deg) => { let d = deg % 360; return d < 0 ? d + 360 : d; };
+    const clamp360 = (deg) => Math.max(0, Math.min(360, deg));
     const applyRotationY = (deg) => {
-      rotationYDeg = norm360(deg);
+      const clamped = clamp360(deg);
+      rotationYDeg = clamped;
       const eul = modelRoot.getEulerAngles();
-      modelRoot.setEulerAngles(eul.x, rotationYDeg, eul.z);
-      rotYInput.value = String(Math.round(rotationYDeg));
-      rotYVal.textContent = `${Math.round(rotationYDeg)}°`;
+      modelRoot.setEulerAngles(eul.x, clamped, eul.z);
+      rotYInput.value = String(Math.round(clamped));
+      rotYVal.textContent = `${Math.round(clamped)}°`;
     };
 
-    // --- Chargement GLB ---
+    // 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 });
@@ -279,70 +250,52 @@
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
-    // --- Vérifs WebXR ---
+    // Vérifs WebXR
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
     // ====== Anti-fuite d'événements UI + grande hitbox ======
-    let uiInteracting = false;
-    let draggingWrap = false;
-
+    let uiInteracting = false, draggingWrap = false;
     const stop = (e) => { e.stopPropagation(); e.preventDefault(); };
 
-    // 1) Empêcher toute propagation depuis le panneau
+    // Bloque toute propagation depuis le panneau/slider
     ["pointerdown","pointermove","pointerup","pointercancel","touchstart","touchmove","touchend","touchcancel","mousedown","mousemove","mouseup","wheel","click"].forEach(evt => {
       uiPanel.addEventListener(evt, stop, { passive: false });
       rotYInput.addEventListener(evt, stop, { passive: false });
     });
 
-    // 2) Drag custom sur le GRAND WRAPPER vertical
+    // Drag custom sur le wrapper (vertical)
     function valueFromWrapEvent(ev) {
       const rect = rotWrap.getBoundingClientRect();
       const clientY = (ev.touches && ev.touches[0]) ? ev.touches[0].clientY : ev.clientY;
-      const ratio = 1 - ((clientY - rect.top) / rect.height); // 1 en haut, 0 en bas
-      const clamped = Math.max(0, Math.min(1, ratio));
-      return clamped * 360;
-    }
-
-    function beginWrapDrag(e) {
-      uiInteracting = true; draggingWrap = true; stop(e);
-      rotWrap.setPointerCapture?.(e.pointerId || 1);
-      applyRotationY(valueFromWrapEvent(e));
-    }
-    function moveWrapDrag(e) {
-      if (!draggingWrap) return; stop(e);
-      applyRotationY(valueFromWrapEvent(e));
-    }
-    function endWrapDrag(e) {
-      if (!draggingWrap) return; stop(e);
-      draggingWrap = false; uiInteracting = false;
-      try { rotWrap.releasePointerCapture?.(e.pointerId || 1); } catch(_) {}
+      const ratio = 1 - ((clientY - rect.top) / rect.height);      // 1 en haut, 0 en bas
+      const clamped01 = Math.max(0, Math.min(1, ratio));
+      return clamped01 * 360;                                       // 0 .. 360 (sans wrap)
     }
+    function beginWrapDrag(e) { uiInteracting = true; draggingWrap = true; stop(e); rotWrap.setPointerCapture?.(e.pointerId || 1); applyRotationY(valueFromWrapEvent(e)); }
+    function moveWrapDrag(e)  { if (!draggingWrap) return; stop(e); applyRotationY(valueFromWrapEvent(e)); }
+    function endWrapDrag(e)   { if (!draggingWrap) return; stop(e); draggingWrap = false; uiInteracting = false; try { rotWrap.releasePointerCapture?.(e.pointerId || 1); } catch(_) {} }
 
     rotWrap.addEventListener("pointerdown", beginWrapDrag, { passive: false });
     rotWrap.addEventListener("pointermove", moveWrapDrag,   { passive: false });
     rotWrap.addEventListener("pointerup",   endWrapDrag,    { passive: false });
     rotWrap.addEventListener("pointercancel", endWrapDrag,  { passive: false });
+    rotWrap.addEventListener("touchstart", beginWrapDrag,   { passive: false });
+    rotWrap.addEventListener("touchmove",  moveWrapDrag,    { passive: false });
+    rotWrap.addEventListener("touchend",   endWrapDrag,     { passive: false });
+    rotWrap.addEventListener("touchcancel",endWrapDrag,     { passive: false });
 
-    rotWrap.addEventListener("touchstart", beginWrapDrag, { passive: false });
-    rotWrap.addEventListener("touchmove",  moveWrapDrag,  { passive: false });
-    rotWrap.addEventListener("touchend",   endWrapDrag,   { passive: false });
-    rotWrap.addEventListener("touchcancel",endWrapDrag,   { passive: false });
-
-    // --- Démarrage AR (CameraComponent.startXr + DOM Overlay) ---
+    // Démarrage AR (CameraComponent.startXr + DOM Overlay)
     const activateAR = () => {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
       app.xr.domOverlay.root = document.getElementById("xr-overlay-root");
-
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         requiredFeatures: ["hit-test", "dom-overlay"],
         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}`); }
-        }
+        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 (ignorer si UI en cours)
+    // Tap / clic → start AR (ignore si sur l'UI)
     app.mouse.on("mousedown", () => { if (!app.xr.active && !uiInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", (evt) => {
@@ -354,23 +307,18 @@
     // ESC → quitter
     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 (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; }
           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);
+              modelRoot.enabled = true; modelRoot.setPosition(pos);
               const euler = new pc.Vec3(); rot.getEulerAngles(euler);
-              rotationYDeg = (euler.y % 360 + 360) % 360;
-              applyRotationY(rotationYDeg);
+              applyRotationY(Math.max(0, Math.min(360, euler.y)));  // clamp initial
               placedOnce = true; rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
@@ -379,18 +327,15 @@
       });
     });
 
-    // --- Interactions (déplacement & rotation souris) ---
-    let isDragging = false;
-    let rotateMode = false;
-    let lastMouseX = 0;
+    // Interactions (déplacement & rotation souris)
+    let isDragging = false, rotateMode = false, lastMouseX = 0;
     const ROTATE_SENSITIVITY = 0.25;
 
-    // Déplacement (input XR : maintien/drag) — IGNORE si UI en cours
+    // Déplacement (XR input) — ignoré si UI en cours
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
         if (uiInteracting) return;
         if (!placedOnce || !modelLoaded) return;
-
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: (err, transientSource) => {
@@ -401,56 +346,31 @@
           }
         });
       });
-
       inputSource.on("selectend", () => { isDragging = false; });
     });
 
-    // Souris : déplacement (gauche) & rotation (droit ou Shift+gauche) — IGNORE si UI en cours
+    // Souris (desktop)
     app.mouse.on("mousedown", (e) => {
       if (!app.xr.active || !placedOnce || uiInteracting) return;
       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 || uiInteracting) 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);
-      }
+      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;
-      applyRotationY(parseFloat(e.target.value || "0"));
-    }, { passive: true });
-
-    // --- Événements AR globaux ---
-    app.xr.on("start", () => {
-      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;
-    });
+    // Slider (événement input si jamais utilisé via clavier)
+    rotYInput.disabled = true;
+    rotYInput.addEventListener("input", (e) => { if (!modelRoot.enabled) return; applyRotationY(parseFloat(e.target.value || "0")); }, { passive: true });
 
-    app.xr.on("end", () => {
-      message("Session AR terminée.");
-      reticle.enabled = false;
-      isDragging = false;
-      rotateMode = false;
-      rotYInput.disabled = true;
-    });
-
-    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…");
-    });
+    // Événements AR globaux
+    app.xr.on("start", () => { 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; });
+    app.xr.on("end", () => { message("Session AR terminée."); reticle.enabled = false; isDragging = false; rotateMode = false; rotYInput.disabled = true; });
+    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…"); });
 
     // Message initial
     if (!app.xr.isAvailable(pc.XRTYPE_AR)) message("AR immersive indisponible.");