Update viewer_ar.js

viewer_ar.js

@@ -1,12 +1,13 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Version PC verrouillée
-   - WebXR AR Hit Test, placement auto, drag
-   - Rotation Y via SLIDER (DOM Overlay), sans inversion 0→360
+   - WebXR AR Hit Test (HORIZONTAL UNIQUEMENT), placement auto, drag
+   - Rotation Y via SLIDER custom (knob centré, rail plein, 0→360 sans wrap)
 */
 
 (() => {
   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`],
@@ -15,32 +16,42 @@
 
   function timeout(ms){return new Promise((_,rej)=>setTimeout(()=>rej(new Error("timeout")),ms));}
   async function loadPlayCanvasRobust({esmFirst=true,loadTimeoutMs=15000}={}){
-    if(window.pc?.Application) return window.pc;
-    const tryESM=async()=>{for(const url of PC_URLS.esm){try{const mod=await Promise.race([import(url),timeout(loadTimeoutMs)]);const ns=mod?.pc||mod?.default||mod; if(ns?.Application){return (window.pc=ns);}}catch{}} 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?.Application) return window.pc;}catch{}} throw new Error("UMD failed");};
+    if (window.pc?.Application) 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 ns=mod?.pc||mod?.default||mod; if(ns?.Application){ return (window.pc=ns);} }catch{}} 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?.Application) return window.pc; }catch{}} throw new Error("UMD failed"); };
     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}
-    .ar-ui{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:rgba(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;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{position:absolute;right:12px;top:50%;transform:translateY(-50%);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;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:.95}
-    .rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none}
-    .rotY-rail{position:absolute;width:4px;height:86%;background:rgba(255,255,255,.35);border-radius:2px;left:50%;transform:translateX(-50%)}
-    .ar-ui input[type="range"].rotY{-webkit-appearance:none;position:relative;width:160px;height:22px;transform:rotate(-90deg);transform-origin:center;outline:none;background:transparent;touch-action:none;pointer-events:none;display:block}
-    .ar-ui input[type="range"].rotY::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;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:4px;background:rgba(255,255,255,.6);border-radius:2px}
+
+    /* Grande zone tactile */
+    .rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible}
+
+    /* 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}
+
+    /* Input range caché (on s'en sert seulement pour valeur/keyboard) */
+    .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}
   `;
-  const styleTag=document.createElement("style");styleTag.textContent=css;document.head.appendChild(styleTag);
+  const styleTag = document.createElement("style"); styleTag.textContent = css; document.head.appendChild(styleTag);
 
-  function ensureOverlayRoot(){let r=document.getElementById("xr-overlay-root"); if(!r){r=document.createElement("div");r.id="xr-overlay-root";document.body.appendChild(r);} return r;}
-  const overlayRoot=ensureOverlayRoot();
+  function ensureOverlayRoot(){ let r=document.getElementById("xr-overlay-root"); if(!r){ r=document.createElement("div"); r.id="xr-overlay-root"; document.body.appendChild(r);} return r; }
+  const overlayRoot = ensureOverlayRoot();
 
-  function message(msg){let el=overlayRoot.querySelector(".pc-ar-msg"); if(!el){el=document.createElement("div");el.className="pc-ar-msg";overlayRoot.appendChild(el);} el.textContent=msg;}
+  function message(msg){ let el=overlayRoot.querySelector(".pc-ar-msg"); if(!el){el=document.createElement("div");el.className="pc-ar-msg";overlayRoot.appendChild(el);} el.textContent=msg; }
 
-  function ensureCanvas(){let c=document.getElementById("application-canvas"); if(!c){c=document.createElement("canvas");c.id="application-canvas";c.style.width="100%";c.style.height="100%";document.body.appendChild(c);} return c;}
+  function ensureCanvas(){ let c=document.getElementById("application-canvas"); if(!c){ c=document.createElement("canvas"); c.id="application-canvas"; c.style.width="100%"; c.style.height="100%"; document.body.appendChild(c);} return c; }
 
   function ensureSliderUI(){
     let p=overlayRoot.querySelector(".ar-ui"); if(p) return p;
@@ -49,6 +60,7 @@
       <div class="label">Rotation</div>
       <div class="rotY-wrap" id="ar-rotY-wrap">
         <div class="rotY-rail"></div>
+        <div class="rotY-knob" id="ar-rotY-knob"></div>
         <input class="rotY" id="ar-rotY" type="range" min="0" max="360" step="1" value="0"/>
       </div>
       <div class="val" id="ar-rotY-val">0°</div>`;
@@ -56,132 +68,167 @@
     return p;
   }
 
-  (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();})();
+  // ===== 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();
-    const ui=ensureSliderUI();
-    const rotYInput=ui.querySelector("#ar-rotY");
-    const rotYVal=ui.querySelector("#ar-rotY-val");
-    const rotWrap=ui.querySelector("#ar-rotY-wrap");
+    const pc = window.pc;
+    const canvas = ensureCanvas();
+    const ui = ensureSliderUI();
+    const rotWrap = ui.querySelector("#ar-rotY-wrap");
+    const rotKnob = ui.querySelector("#ar-rotY-knob");
+    const rotYInput = ui.querySelector("#ar-rotY");
+    const rotYVal = ui.querySelector("#ar-rotY-val");
 
     window.focus();
 
-    const app=new pc.Application(canvas,{mouse:new pc.Mouse(canvas),touch:new pc.TouchDevice(canvas),keyboard:new pc.Keyboard(window),graphicsDeviceOptions:{alpha:true}});
+    const app = new pc.Application(canvas, {
+      mouse: new pc.Mouse(canvas),
+      touch: new pc.TouchDevice(canvas),
+      keyboard: new pc.Keyboard(window),
+      graphicsDeviceOptions: { alpha: true }
+    });
     app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
-    app.graphicsDevice.maxPixelRatio=window.devicePixelRatio||1;
-    const onResize=()=>app.resizeCanvas(); window.addEventListener("resize",onResize); app.on("destroy",()=>window.removeEventListener("resize",onResize));
+    app.graphicsDevice.maxPixelRatio = window.devicePixelRatio || 1;
+    const onResize = () => app.resizeCanvas(); window.addEventListener("resize", onResize); app.on("destroy",()=>window.removeEventListener("resize",onResize));
     app.start();
 
-    // Camera & lumière
-    const camera=new pc.Entity("Camera");
-    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.setLocalPosition(0,10,0); app.root.addChild(light);
+    // Camera + lumière
+    const camera = new pc.Entity("Camera");
+    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.setLocalPosition(0,10,0); app.root.addChild(light);
 
     // Réticule
-    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();
-    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);
+    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();
+    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);
 
     // Modèle
-    const modelRoot=new pc.Entity("ModelRoot"); modelRoot.enabled=false; app.root.addChild(modelRoot);
+    const modelRoot = new pc.Entity("ModelRoot"); modelRoot.enabled = false; app.root.addChild(modelRoot);
     let modelLoaded=false, placedOnce=false;
 
-    // ✅ Base X/Z figées pour éviter les inversions d’Euler
-    let baseEulerX = 0, baseEulerZ = 0;
+    // Euler de base (évite les inversions)
+    let baseEulerX=0, baseEulerZ=0;
 
-    // Rotation Y (clamp 0..360, pas de wrap)
-    let rotationYDeg=0;
+    // Rotation Y (clamp 0..360)
+    let rotationYDeg = 0;
     const clamp360 = d => Math.max(0, Math.min(360, d));
-    const to0to360 = d => { let a = d % 360; if (a < 0) a += 360; return a; };
 
-    // ✅ n'utilise plus getEulerAngles() en continu
+    // met à jour modèle + UI (knob plein rail)
+    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
+      rotYInput.value = String(Math.round(yDeg));
+      rotYVal.textContent = `${Math.round(yDeg)}°`;
+    }
     function applyRotationY(deg){
       const y = clamp360(deg);
       rotationYDeg = y;
       modelRoot.setEulerAngles(baseEulerX, y, baseEulerZ);
-      rotYInput.value = String(Math.round(y));
-      rotYVal.textContent = `${Math.round(y)}°`;
+      updateKnobFromY(y);
     }
 
     // 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});
+    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 });
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(0.2,0.2,0.2);
 
-      // mémorise la base X/Z une fois (au repos, avant AR)
       const initE = modelRoot.getEulerAngles();
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
-      modelLoaded=true;
+      modelLoaded = true;
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
-    if(!app.xr.supported){message("WebXR n’est pas supporté sur cet appareil.");return;}
+    // WebXR dispo ?
+    if (!app.xr.supported){ message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // Anti-fuite événements UI + grande hitbox
+    // ——— UI: empêcher les événements d'aller à la scène
     let uiInteracting=false, draggingWrap=false;
-    const stop=e=>{e.stopPropagation();e.preventDefault();};
+    const stop = e => { e.stopPropagation(); e.preventDefault(); };
     ["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});
+      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
     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); // haut=1, bas=0
-      const t=Math.max(0,Math.min(1,ratio));
-      return t*360; // 0..360 (linéaire, sans inversion)
+      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 t = Math.max(0, Math.min(1, ratio));
+      return t * 360;                                       // 0..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{}}
-
-    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=()=>{
-      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}`);}}
+    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});
+
+    // ——— 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");
+      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}`); } }
       });
     };
-    app.mouse.on("mousedown",()=>{if(!app.xr.active && !uiInteracting) activateAR();});
-    if(app.touch){app.touch.on("touchend",(evt)=>{if(!app.xr.active && !uiInteracting) activateAR(); evt.event.preventDefault();evt.event.stopPropagation();});}
-    app.keyboard.on("keydown",(evt)=>{if(evt.key===pc.KEY_ESCAPE && app.xr.active) app.xr.end();});
+    app.mouse.on("mousedown", ()=>{ if(!app.xr.active && !uiInteracting) activateAR(); });
+    if (app.touch){
+      app.touch.on("touchend", (evt)=>{ if(!app.xr.active && !uiInteracting) activateAR(); evt.event.preventDefault(); evt.event.stopPropagation(); });
+    }
+    app.keyboard.on("keydown", (evt)=>{ if (evt.key===pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit Test & 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);
+    // ====== 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();
 
-            if(modelLoaded && !placedOnce){
-              modelRoot.enabled=true; modelRoot.setPosition(pos);
+    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
+      return TMP_OUT.y >= minDot;
+    }
 
-              // Yaw initiale normalisée 0..360 (pas de wrap négatif)
+    // --- Hit Test global (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) => {
+            // filtre: uniquement horizontaux up-facing
+            if (!isHorizontalUpFacing(rot)) return;
+
+            reticle.enabled = true;
+            reticle.setPosition(pos);
+            reticle.setRotation(rot);
+
+            if (modelLoaded && !placedOnce){
+              modelRoot.enabled = true;
+              modelRoot.setPosition(pos);
+
+              // Yaw initiale normalisée (sans wrap) + maj UI
               const e = new pc.Vec3(); rot.getEulerAngles(e);
-              const y0 = clamp360(to0to360(e.y));
-              applyRotationY(y0);
+              applyRotationY(clamp360((e.y % 360 + 360) % 360));
 
-              placedOnce=true; rotYInput.disabled=false;
+              placedOnce = true;
+              rotYInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
@@ -189,39 +236,49 @@
       });
     });
 
-    // Déplacement XR (ignore si UI)
+    // --- Déplacement XR (drag) — ignore si UI
     let isDragging=false;
-    app.xr.input.on("add",(inputSource)=>{
-      inputSource.on("selectstart",()=>{
-        if(uiInteracting) return;
-        if(!placedOnce || !modelLoaded) return;
+    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,ts)=>{ if(err) return; isDragging=true;
-            ts.on("result",(pos)=>{ if(isDragging) modelRoot.setPosition(pos); });
-            ts.once("remove",()=>{isDragging=false;});
+          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; // <- rejet vertical
+              modelRoot.setPosition(pos);
+            });
+
+            transientSource.once("remove", () => { isDragging = false; });
           }
         });
       });
-      inputSource.on("selectend",()=>{isDragging=false;});
+      inputSource.on("selectend", () => { isDragging = false; });
     });
 
-    // (Desktop) rotation à la 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;});
+    // --- 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;
+    // --- Slider (si changé via clavier)
+    rotYInput.disabled = true;
     rotYInput.addEventListener("input",(e)=>{ if(!modelRoot.enabled) return; applyRotationY(parseFloat(e.target.value||"0")); },{passive:true});
 
-    // Événements AR
-    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}`,(avail)=>{ if(!avail) 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…"); });
+    // 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…"); });
 
+    // 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…");