Update viewer_ar.js

viewer_ar.js

@@ -1,13 +1,13 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Hit-test AR (horizontaux uniquement) + placement + drag
-   - 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
+   - Slider custom (360° en haut → 0° en bas), knob centré, rail plein
+   - Tap sur la box grise capturé en phase CAPTURE => l’objet ne se déplace jamais
 */
 
 (() => {
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
-  // ===== PlayCanvas (version verrouillée) =====
+  // ===== PlayCanvas version fixée =====
   const PC_VERSION = "2.11.7";
   const PC_URLS = {
     esm: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.mjs`],
@@ -31,16 +31,16 @@
 
     .ar-ui .label{font-size:12px;text-align:center;opacity:.95}
 
-    /* Box grise cliquable (grande hitbox) */
+    /* Grande zone tactile */
     .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, centré */
-    .rotY-rail{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:rgba(255,255,255,.35);border-radius:2px}
+    /* Rail PLEIN (haut->bas), centré */
+    .rotY-rail{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:rgba(255,255,255,.35);border-radius:2px;pointer-events:none}
 
-    /* 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}
+    /* Knob custom 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;pointer-events:none}
 
-    /* Input range caché (valeur/accès clavier) */
+    /* 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}
   `;
@@ -107,7 +107,7 @@
     const modelRoot = new pc.Entity("ModelRoot"); modelRoot.enabled = false; app.root.addChild(modelRoot);
     let modelLoaded=false, placedOnce=false;
 
-    // Euler de base
+    // Euler de base (évite inversions)
     let baseEulerX=0, baseEulerZ=0;
 
     // Rotation Y (clamp 0..360) — 360 en haut, 0 en bas
@@ -115,7 +115,7 @@
     const clamp360 = d => Math.max(0, Math.min(360, d));
 
     function updateKnobFromY(yDeg){
-      const t = 1 - (yDeg / 360);  // y=360 -> haut ; y=0 -> bas
+      const t = 1 - (yDeg / 360);        // 360 -> top(0%), 0 -> bottom(100%)
       rotKnob.style.top = `${t*100}%`;
       rotYInput.value = String(Math.round(yDeg));
       rotYVal.textContent = `${Math.round(yDeg)}°`;
@@ -143,64 +143,54 @@
 
     if (!app.xr.supported){ message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ===== Slider robuste : Pointer Events only =====
-    let uiInteracting=false, draggingWrap=false, activePointerId=null;
+    // ===== Gestion fiable du slider : Pointer Events en CAPTURE =====
+    let uiInteracting=false;
+    let draggingWrap=false;
+    let 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);
-
-    const onGlobalPointerUpCapture = () => {
-      if (!draggingWrap) uiInteracting = false;
-    };
-    document.addEventListener("pointerup", onGlobalPointerUpCapture, true);
-
-    // 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});
-    });
+    const insideWrap = (target) => rotWrap.contains(target);
 
-    // Drag sur la box grise
-    function valueFromWrapEvent(ev){
+    const getDegFromPointer = (e) => {
       const rect = rotWrap.getBoundingClientRect();
-      const y = ev.clientY;
+      const y = e.clientY ?? (e.touches && e.touches[0] && e.touches[0].clientY) ?? 0;
       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;                        // 360 en haut -> 0 en bas
-    }
+      return (1 - t) * 360; // inversion : haut=360, bas=0
+    };
 
-    function beginWrapDrag(e){
+    // pointerdown CAPTURE → on “prend la main” AVANT PlayCanvas
+    const onPointerDownCapture = (e) => {
+      if (!insideWrap(e.target)) return;
       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);
+      activePointerId = e.pointerId ?? 1;
+      try { rotWrap.setPointerCapture?.(activePointerId); } catch {}
+      applyRotationY(getDegFromPointer(e));
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const onPointerMoveCapture = (e) => {
+      if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
+      applyRotationY(getDegFromPointer(e));
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const endDrag = (e) => {
+      if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
       draggingWrap = false;
-      activePointerId = null;
       uiInteracting = false;
-      try { rotWrap.releasePointerCapture(e.pointerId); } catch(_) {}
-    }
+      try { rotWrap.releasePointerCapture?.(activePointerId); } catch {}
+      activePointerId = null;
+      e.preventDefault();
+      e.stopPropagation();
+    };
 
-    // 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});
+    document.addEventListener("pointerdown", onPointerDownCapture, { capture: true, passive: false });
+    document.addEventListener("pointermove", onPointerMoveCapture,   { capture: true, passive: false });
+    document.addEventListener("pointerup",   endDrag,                 { capture: true, passive: false });
+    document.addEventListener("pointercancel", endDrag,               { capture: true, passive: false });
 
     // --- Démarrage AR
     const activateAR = () => {
@@ -219,21 +209,17 @@
     app.keyboard.on("keydown", (evt)=>{ if (evt.key===pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
     // ====== Filtre HORIZONTAL uniquement ======
-    const TMP_IN = new pc.Vec3(0,1,0);
-    const TMP_OUT = new pc.Vec3();
-    function isHorizontalUpFacing(rot, minDot = 0.75){
-      rot.transformVector(TMP_IN, TMP_OUT);
-      return TMP_OUT.y >= minDot;
-    }
+    const TMP_IN = new pc.Vec3(0,1,0), TMP_OUT = new pc.Vec3();
+    function isHorizontalUpFacing(rot, minDot = 0.75){ rot.transformVector(TMP_IN, TMP_OUT); return TMP_OUT.y >= minDot; }
 
-    // Hit Test global
+    // Hit Test
     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) => {
-            if (!isHorizontalUpFacing(rot)) return;   // horizontaux uniquement
+            if (!isHorizontalUpFacing(rot)) return;
 
             reticle.enabled = true;
             reticle.setPosition(pos);
@@ -244,8 +230,7 @@
               modelRoot.setPosition(pos);
 
               const e = new pc.Vec3(); rot.getEulerAngles(e);
-              const y0 = ((e.y % 360) + 360) % 360;
-              applyRotationY(y0);
+              applyRotationY(((e.y % 360)+360)%360);
 
               placedOnce = true;
               rotYInput.disabled = false;
@@ -256,7 +241,50 @@
       });
     });
 
-    // Déplacement XR — ignoré si on touche le slider
+    // Déplacement XR (drag) — ignoré si UI active
     let isDragging=false;
     app.xr.input.on("add", (inputSource) => {
-      inputSource.on("selectstart", () =>
+      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 (ignore si UI)
+    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 (accessibilité 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…");
+  }
+})();