Update viewer_ar.js

viewer_ar.js

@@ -1,13 +1,12 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
-   - Version PC verrouillée
-   - WebXR AR Hit Test (HORIZONTAL UNIQUEMENT), placement auto, drag
-   - Rotation Y via SLIDER custom (knob centré, rail plein, 0→360 sans wrap)
+   - Hit-test AR (horizontaux uniquement) + placement + drag
+   - Slider custom (360° en haut → 0° en bas), knob centré, rail plein
+   - 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 chargé en version fixe =====
   const PC_VERSION = "2.11.7";
   const PC_URLS = {
     esm: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.mjs`],
@@ -22,7 +21,6 @@
     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}
@@ -31,16 +29,16 @@
 
     .ar-ui .label{font-size:12px;text-align:center;opacity:.95}
 
-    /* Grande zone tactile */
-    .rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible}
+    /* Grande zone tactile (box grise) */
+    .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é */
     .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é */
-    .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}
+    .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é (on s'en sert seulement pour valeur/keyboard) */
+    /* Input range caché (pour accessibilité/valeur) */
     .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}
   `;
@@ -68,10 +66,8 @@
     return p;
   }
 
-  // ===== Boot =====
   (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; } initARApp(); })();
 
-  // ===== App =====
   function initARApp(){
     const pc = window.pc;
     const canvas = ensureCanvas();
@@ -112,14 +108,14 @@
     // Euler de base (évite les inversions)
     let baseEulerX=0, baseEulerZ=0;
 
-    // Rotation Y (clamp 0..360)
+    // 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 (knob plein rail)
+    // Met à jour modèle + UI (⚠ inversion : 360 en haut)
     function updateKnobFromY(yDeg){
-      const t = yDeg / 360;              // 0 en haut (0°) → 1 en bas (360°)
-      rotKnob.style.top = `${t*100}%`;   // knob va de haut en bas
+      const t = 1 - (yDeg / 360);     // y=360 -> t=0 (haut), y=0 -> t=1 (bas)
+      rotKnob.style.top = `${t*100}%`;
       rotYInput.value = String(Math.round(yDeg));
       rotYVal.textContent = `${Math.round(yDeg)}°`;
     }
@@ -144,28 +140,42 @@
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
-    // WebXR dispo ?
     if (!app.xr.supported){ message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ——— UI: empêcher les événements d'aller à la scène
+    // ===== 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; };
+
+    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; };
+    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=>{
       ui.addEventListener(evt, stop, {passive:false});
       rotYInput.addEventListener(evt, stop, {passive:false});
       rotKnob.addEventListener(evt, stop, {passive:false});
-      rotWrap.addEventListener(evt, (evt==="pointerdown"||evt==="touchstart"||evt==="mousedown")?(()=>{}):stop, {passive:false});
     });
 
-    // Drag custom sur le wrapper vertical
+    // Drag custom sur le wrapper vertical — 360 en haut, 0 en bas
     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 ratio = (clientY - rect.top) / rect.height;   // 0 en haut → 1 en bas
       const t = Math.max(0, Math.min(1, ratio));
-      return t * 360;                                       // 0..360
+      return (1 - t) * 360;                                // inversion : haut=360, bas=0
     }
-    function beginWrapDrag(e){ uiInteracting=true; draggingWrap=true; stop(e); rotWrap.setPointerCapture?.(e.pointerId||1); applyRotationY(valueFromWrapEvent(e)); }
+    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{} }
 
@@ -178,7 +188,7 @@
     rotWrap.addEventListener("touchend",     endWrapDrag,   {passive:false});
     rotWrap.addEventListener("touchcancel",  endWrapDrag,   {passive:false});
 
-    // ——— Démarrage AR
+    // --- Démarrage AR
     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");
@@ -195,25 +205,21 @@
     app.keyboard.on("keydown", (evt)=>{ if (evt.key===pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
     // ====== Filtre HORIZONTAL uniquement ======
-    const V_UP = new pc.Vec3(0,1,0);
     const TMP_IN = new pc.Vec3(0,1,0);
     const TMP_OUT = new pc.Vec3();
-
-    function isHorizontalUpFacing(rot, minDot = 0.75){   // ~> <= ~41°
-      rot.transformVector(TMP_IN, TMP_OUT);             // normale du plan (Y local → monde)
-      // on veut une normale orientée vers +Y (sol/table), pas murs/plafond
+    function isHorizontalUpFacing(rot, minDot = 0.75){
+      rot.transformVector(TMP_IN, TMP_OUT);
       return TMP_OUT.y >= minDot;
     }
 
-    // --- Hit Test global (réticule + 1er placement)
+    // Hit Test global
     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) => {
-            // filtre: uniquement horizontaux up-facing
-            if (!isHorizontalUpFacing(rot)) return;
+            if (!isHorizontalUpFacing(rot)) return;   // horizontaux uniquement
 
             reticle.enabled = true;
             reticle.setPosition(pos);
@@ -223,9 +229,10 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Yaw initiale normalisée (sans wrap) + maj UI
               const e = new pc.Vec3(); rot.getEulerAngles(e);
-              applyRotationY(clamp360((e.y % 360 + 360) % 360));
+              // normalise 0..360 (puis UI inversée affichera 360 en haut)
+              const y0 = ((e.y % 360) + 360) % 360;
+              applyRotationY(y0);
 
               placedOnce = true;
               rotYInput.disabled = false;
@@ -236,7 +243,7 @@
       });
     });
 
-    // --- Déplacement XR (drag) — ignore si UI
+    // Déplacement XR (drag) — ignoré si on interagit avec la box grise
     let isDragging=false;
     app.xr.input.on("add", (inputSource) => {
       inputSource.on("selectstart", () => {
@@ -251,7 +258,7 @@
 
             transientSource.on("result", (pos, rot) => {
               if (!isDragging) return;
-              if (!isHorizontalUpFacing(rot)) return; // <- rejet vertical
+              if (!isHorizontalUpFacing(rot)) return;
               modelRoot.setPosition(pos);
             });
 
@@ -262,14 +269,14 @@
       inputSource.on("selectend", () => { isDragging = false; });
     });
 
-    // --- Desktop : rotation souris conservée
+    // 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 (si changé via clavier)
+    // 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});
 
@@ -278,7 +285,6 @@
     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…"); });
 
-    // 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…");