Update viewer_ar.js

viewer_ar.js

@@ -1,325 +1,187 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
    - Version PC verrouillée
    - WebXR AR Hit Test, placement auto, drag
-   - Rotation Y via SLIDER (DOM Overlay) — hitbox large, thumb centré
-   - Pas de wrap à 360° (clamp 0..360)
+   - Rotation Y via SLIDER (DOM Overlay), sans inversion 0→360
 */
 
 (() => {
-  // =========================
-  // 1) Paramètres principaux
-  // =========================
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
-  // =========================
-  // 2) Chargeur PlayCanvas ROBUSTE (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`],
     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)); }
-  async function loadPlayCanvasRobust({ esmFirst = true, loadTimeoutMs = 15000 } = {}) {
-    if (window.pc && typeof window.pc.Application === "function") 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 namespace = mod?.pc || mod?.default || mod;
-          if (namespace?.Application) { if (!window.pc) window.pc = namespace; return window.pc; }
-        } 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 && typeof window.pc.Application === "function") return window.pc;
-        } catch (_) {}
-      }
-      throw new Error("UMD failed");
-    };
-
-    if (esmFirst) { try { return await tryESM(); } catch (_) {} return await tryUMD(); }
-    else { try { return await tryUMD(); } catch (_) {} return await tryESM(); }
+  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");};
+    try{ return esmFirst ? await tryESM() : await tryUMD(); }catch{ return esmFirst ? await tryUMD() : await tryESM(); }
   }
 
-  // =========================
-  // 3) UI & utilitaires (DOM 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); user-select: none; pointer-events: none;
-    }
-    #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: 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: 0.95; }
-
-    /* Grande zone tactile verticale */
-    .rotY-wrap {
-      position: relative;
-      width: 48px;              /* plus étroit */
-      height: 200px;            /* plus court */
-      display: flex; align-items: center; justify-content: center;
-      touch-action: none;
-    }
-    /* Rail visuel centré */
-    .rotY-rail {
-      position: absolute; width: 4px; height: 86%;
-      background: rgba(255,255,255,.35); border-radius: 2px;
-      left: 50%; transform: translateX(-50%);
-    }
-
-    /* Slider réel, visuel seulement (on pilote via rotY-wrap) */
-    .ar-ui input[type="range"].rotY {
-      -webkit-appearance: none;
-      position: relative;
-      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 ne s'appuie pas sur sa hitbox */
-      display: block;
-    }
-    .ar-ui input[type="range"].rotY::-webkit-slider-thumb {
-      -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: 4px; background: rgba(255,255,255,.6); border-radius: 2px;
-    }
-
-    .ar-ui .val { font-size: 12px; opacity: 0.95; }
+    .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 .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}
+    .ar-ui .val{font-size:12px;opacity:.95}
   `;
-  const styleTag = document.createElement("style");
-  styleTag.textContent = css;
-  document.head.appendChild(styleTag);
-
-  function ensureOverlayRoot() {
-    let root = document.getElementById("xr-overlay-root");
-    if (!root) { root = document.createElement("div"); root.id = "xr-overlay-root"; document.body.appendChild(root); }
-    return root;
-  }
-  const overlayRoot = ensureOverlayRoot();
+  const styleTag=document.createElement("style");styleTag.textContent=css;document.head.appendChild(styleTag);
 
-  // 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); }
-    el.textContent = msg;
-  }
+  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 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); }
-    return canvas;
-  }
+  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 ensureSliderUI() {
-    let panel = overlayRoot.querySelector(".ar-ui");
-    if (panel) return panel;
-    panel = document.createElement("div");
-    panel.className = "ar-ui";
-    panel.innerHTML = `
+  function ensureSliderUI(){
+    let p=overlayRoot.querySelector(".ar-ui"); if(p) return p;
+    p=document.createElement("div"); p.className="ar-ui";
+    p.innerHTML=`
       <div class="label">Rotation</div>
       <div class="rotY-wrap" id="ar-rotY-wrap">
         <div class="rotY-rail"></div>
-        <input class="rotY" id="ar-rotY" type="range" min="0" max="360" step="1" value="0" />
+        <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>
-    `;
-    overlayRoot.appendChild(panel);
-    return panel;
+      <div class="val" id="ar-rotY-val">0°</div>`;
+    overlayRoot.appendChild(p);
+    return p;
   }
 
-  // =========================
-  // 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; }
-    initARApp();
-  })();
-
-  // =========================
-  // 5) App AR PlayCanvas
-  // =========================
-  function initARApp() {
-    const pc = window.pc;
-    const canvas = ensureCanvas();
-    const uiPanel = ensureSliderUI();
-
-    const rotYInput = uiPanel.querySelector("#ar-rotY");
-    const rotYVal   = uiPanel.querySelector("#ar-rotY-val");
-    const rotWrap   = uiPanel.querySelector("#ar-rotY-wrap");
+  (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();})();
 
-    window.focus();
+  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 app = new pc.Application(canvas, {
-      mouse: new pc.Mouse(canvas),
-      touch: new pc.TouchDevice(canvas),
-      keyboard: new pc.Keyboard(window),
-      graphicsDeviceOptions: { alpha: true }
-    });
+    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}});
     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 & light ---
-    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);
-
-    // --- 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 GLB ---
-    const modelRoot = new pc.Entity("ModelRoot");
-    modelRoot.enabled = false; app.root.addChild(modelRoot);
-
-    let modelLoaded = false, placedOnce = false;
-
-    // Rotation Y (clamp 0..360 — pas de wrap)
-    let rotationYDeg = 0;
-    const clamp360 = (deg) => Math.max(0, Math.min(360, deg));
-    const applyRotationY = (deg) => {
-      const clamped = clamp360(deg);
-      rotationYDeg = clamped;
-      const eul = modelRoot.getEulerAngles();
-      modelRoot.setEulerAngles(eul.x, clamped, eul.z);
-      rotYInput.value = String(Math.round(clamped));
-      rotYVal.textContent = `${Math.round(clamped)}°`;
-    };
+    // 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);
+
+    // Modèle
+    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;
+
+    // Rotation Y (clamp 0..360, pas de wrap)
+    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
+    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)}°`;
+    }
 
     // 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);
-      modelLoaded = true;
+      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;
       message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
     });
 
-    // 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, draggingWrap = false;
-    const stop = (e) => { e.stopPropagation(); e.preventDefault(); };
+    if(!app.xr.supported){message("WebXR n’est pas supporté sur cet appareil.");return;}
 
-    // 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 });
+    // Anti-fuite événements UI + grande hitbox
+    let uiInteracting=false, draggingWrap=false;
+    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});
     });
-
-    // 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 clamped01 = Math.max(0, Math.min(1, ratio));
-      return clamped01 * 360;                                       // 0 .. 360 (sans wrap)
+    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)
     }
-    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 (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}`); } }
+    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();});
 
-    // 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) => {
-        if (!app.xr.active && !uiInteracting) activateAR();
-        evt.event.preventDefault(); evt.event.stopPropagation();
-      });
-    }
+    // 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);
 
-    // ESC → quitter
-    app.keyboard.on("keydown", (evt) => { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
+            if(modelLoaded && !placedOnce){
+              modelRoot.enabled=true; modelRoot.setPosition(pos);
 
-    // 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);
-            if (modelLoaded && !placedOnce) {
-              modelRoot.enabled = true; modelRoot.setPosition(pos);
-              const euler = new pc.Vec3(); rot.getEulerAngles(euler);
-              applyRotationY(Math.max(0, Math.min(360, euler.y)));  // clamp initial
-              placedOnce = true; rotYInput.disabled = false;
+              // Yaw initiale normalisée 0..360 (pas de wrap négatif)
+              const e = new pc.Vec3(); rot.getEulerAngles(e);
+              const y0 = clamp360(to0to360(e.y));
+              applyRotationY(y0);
+
+              placedOnce=true; rotYInput.disabled=false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
@@ -327,54 +189,41 @@
       });
     });
 
-    // Interactions (déplacement & rotation souris)
-    let isDragging = false, rotateMode = false, lastMouseX = 0;
-    const ROTATE_SENSITIVITY = 0.25;
-
-    // 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;
+    // Déplacement XR (ignore si UI)
+    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) => { if (isDragging) modelRoot.setPosition(pos); });
-            transientSource.once("remove", () => { isDragging = false; });
+          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;});
           }
         });
       });
-      inputSource.on("selectend", () => { isDragging = false; });
+      inputSource.on("selectend",()=>{isDragging=false;});
     });
 
-    // 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); }
-    });
-    app.mouse.on("mouseup", () => { isDragging = false; rotateMode = false; });
-    window.addEventListener("contextmenu", (e) => e.preventDefault());
+    // (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;});
+    window.addEventListener("contextmenu",(e)=>e.preventDefault());
 
-    // 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 });
+    // 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});
 
-    // É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…"); });
+    // É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…"); });
 
-    // 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é.");
+    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…");
   }
 })();