Update viewer_ar.js

viewer_ar.js

@@ -1,12 +1,13 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Hit-test AR (horizontaux uniquement) + placement + drag
-   - Slider custom (360° en haut → 0° en bas), knob centré, rail plein
+   - Slider custom robuste (Pointer Events only) — 360° en haut, 0° en bas
    - Bloque toute interaction scène quand on tape la box grise du slider
 */
 
 (() => {
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
+  // ===== PlayCanvas (version verrouillée) =====
   const PC_VERSION = "2.11.7";
   const PC_URLS = {
     esm: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.mjs`],
@@ -21,6 +22,7 @@
     try{ return esmFirst ? await tryESM() : await tryUMD(); }catch{ return esmFirst ? await tryUMD() : await tryESM(); }
   }
 
+  // ===== UI / Overlay =====
   const css = `
     .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: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);backdrop-filter:blur(4px);pointer-events:none}
     #xr-overlay-root{position:fixed;inset:0;z-index:9999;pointer-events:none}
@@ -29,16 +31,16 @@
 
     .ar-ui .label{font-size:12px;text-align:center;opacity:.95}
 
-    /* Grande zone tactile (box grise) */
+    /* Box grise cliquable (grande hitbox) */
     .rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;pointer-events:auto}
 
-    /* Rail PLEIN (de haut en bas), centré */
+    /* Rail plein, centré */
     .rotY-rail{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:rgba(255,255,255,.35);border-radius:2px}
 
-    /* Knob custom bien centré */
+    /* Knob centré */
     .rotY-knob{position:absolute;left:50%;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(-50%,-50%);top:50%;will-change:top;touch-action:none}
 
-    /* Input range caché (pour accessibilité/valeur) */
+    /* Input range caché (valeur/accès clavier) */
     .ar-ui input[type="range"].rotY{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
     .ar-ui .val{font-size:12px;opacity:.95}
   `;
@@ -105,16 +107,15 @@
     const modelRoot = new pc.Entity("ModelRoot"); modelRoot.enabled = false; app.root.addChild(modelRoot);
     let modelLoaded=false, placedOnce=false;
 
-    // Euler de base (évite les inversions)
+    // Euler de base
     let baseEulerX=0, baseEulerZ=0;
 
     // Rotation Y (clamp 0..360) — 360 en haut, 0 en bas
     let rotationYDeg = 0;
     const clamp360 = d => Math.max(0, Math.min(360, d));
 
-    // Met à jour modèle + UI (⚠ inversion : 360 en haut)
     function updateKnobFromY(yDeg){
-      const t = 1 - (yDeg / 360);     // y=360 -> t=0 (haut), y=0 -> t=1 (bas)
+      const t = 1 - (yDeg / 360);  // y=360 -> haut ; y=0 -> bas
       rotKnob.style.top = `${t*100}%`;
       rotYInput.value = String(Math.round(yDeg));
       rotYVal.textContent = `${Math.round(yDeg)}°`;
@@ -142,51 +143,64 @@
 
     if (!app.xr.supported){ message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ===== Empêcher les “fuites” : activer uiInteracting en CAPTURE sur la box grise =====
-    let uiInteracting=false, draggingWrap=false;
-    const stop = e => { e.stopPropagation(); e.preventDefault(); };
-
-    // Capture globale : si on clique/touche la box grise, on active uiInteracting IMMÉDIATEMENT
-    const isInsideWrap = (target) => rotWrap.contains(target);
-    const onGlobalPointerDownCapture = (e) => { if (isInsideWrap(e.target)) uiInteracting = true; };
-    const onGlobalTouchStartCapture  = (e) => { if (isInsideWrap(e.target)) uiInteracting = true; };
+    // ===== Slider robuste : Pointer Events only =====
+    let uiInteracting=false, draggingWrap=false, activePointerId=null;
 
+    // Marquer TOUT DE SUITE si on tape dans la box grise (phase capture)
+    const onGlobalPointerDownCapture = (e) => {
+      if (rotWrap.contains(e.target)) uiInteracting = true;
+    };
     document.addEventListener("pointerdown", onGlobalPointerDownCapture, true);
-    document.addEventListener("touchstart",  onGlobalTouchStartCapture,  true);
 
-    // Et on nettoie à la fin du geste
-    const onGlobalPointerUpCapture = () => { if (!draggingWrap) uiInteracting = false; };
-    const onGlobalTouchEndCapture  = () => { if (!draggingWrap) uiInteracting = false; };
+    const onGlobalPointerUpCapture = () => {
+      if (!draggingWrap) uiInteracting = false;
+    };
     document.addEventListener("pointerup", onGlobalPointerUpCapture, true);
-    document.addEventListener("touchend",  onGlobalTouchEndCapture,  true);
 
-    // Bloque la propagation normale depuis le panneau / knob / input
-    ["pointerdown","pointermove","pointerup","pointercancel","touchstart","touchmove","touchend","touchcancel","mousedown","mousemove","mouseup","wheel","click"].forEach(evt=>{
+    // Bloque la propagation depuis le panneau/knob/input (bubbling)
+    const stop = e => { e.stopPropagation(); e.preventDefault(); };
+    ["pointerdown","pointermove","pointerup","pointercancel","mousedown","mousemove","mouseup","wheel","click"].forEach(evt=>{
       ui.addEventListener(evt, stop, {passive:false});
       rotYInput.addEventListener(evt, stop, {passive:false});
       rotKnob.addEventListener(evt, stop, {passive:false});
     });
 
-    // Drag custom sur le wrapper vertical — 360 en haut, 0 en bas
+    // Drag sur la box grise
     function valueFromWrapEvent(ev){
       const rect = rotWrap.getBoundingClientRect();
-      const clientY = (ev.touches && ev.touches[0]) ? ev.touches[0].clientY : ev.clientY;
-      const ratio = (clientY - rect.top) / rect.height;   // 0 en haut → 1 en bas
+      const y = ev.clientY;
+      const ratio = (y - rect.top) / rect.height; // 0 en haut -> 1 en bas
       const t = Math.max(0, Math.min(1, ratio));
-      return (1 - t) * 360;                                // inversion : haut=360, bas=0
+      return (1 - t) * 360;                        // 360 en haut -> 0 en bas
     }
-    function beginWrapDrag(e){ 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{} }
 
+    function beginWrapDrag(e){
+      uiInteracting = true;
+      draggingWrap = true;
+      activePointerId = e.pointerId;
+      stop(e);
+      try { rotWrap.setPointerCapture(e.pointerId); } catch(_) {}
+      applyRotationY(valueFromWrapEvent(e));
+    }
+    function moveWrapDrag(e){
+      if (!draggingWrap || e.pointerId !== activePointerId) return;
+      stop(e);
+      applyRotationY(valueFromWrapEvent(e));
+    }
+    function endWrapDrag(e){
+      if (e.pointerId !== activePointerId) return;
+      stop(e);
+      draggingWrap = false;
+      activePointerId = null;
+      uiInteracting = false;
+      try { rotWrap.releasePointerCapture(e.pointerId); } catch(_) {}
+    }
+
+    // Pointer events uniquement (fiable Android/Chrome)
     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});
 
     // --- Démarrage AR
     const activateAR = () => {
@@ -230,7 +244,6 @@
               modelRoot.setPosition(pos);
 
               const e = new pc.Vec3(); rot.getEulerAngles(e);
-              // normalise 0..360 (puis UI inversée affichera 360 en haut)
               const y0 = ((e.y % 360) + 360) % 360;
               applyRotationY(y0);
 
@@ -243,50 +256,7 @@
       });
     });
 
-    // Déplacement XR (drag) — ignoré si on interagit avec la box grise
+    // Déplacement XR — ignoré si on touche le slider
     let isDragging=false;
     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) => {
-            if (err) return;
-            isDragging = true;
-
-            transientSource.on("result", (pos, rot) => {
-              if (!isDragging) return;
-              if (!isHorizontalUpFacing(rot)) return;
-              modelRoot.setPosition(pos);
-            });
-
-            transientSource.once("remove", () => { isDragging = false; });
-          }
-        });
-      });
-      inputSource.on("selectend", () => { isDragging = false; });
-    });
-
-    // Desktop : rotation souris conservée
-    let rotateMode=false, lastMouseX=0; const ROTATE_SENSITIVITY=0.25;
-    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); }});
-    app.mouse.on("mouseup",()=>{ isDragging=false; rotateMode=false; });
-    window.addEventListener("contextmenu",(e)=>e.preventDefault());
-
-    // Slider (au cas où via clavier)
-    rotYInput.disabled = true;
-    rotYInput.addEventListener("input",(e)=>{ if(!modelRoot.enabled) return; applyRotationY(parseFloat(e.target.value||"0")); },{passive:true});
-
-    // AR events
-    app.xr.on("start",()=>{ 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}`,(a)=>{ if(!a) 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(!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…");
-  }
-})();
+      inputSource.on("selectstart", () =>