Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,21 +1,25 @@
 /* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json
    - Lit config.json (data-config) => { "glb_url": "...", "usdz_url": "..." }
    - iOS : AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom)
-   - Android/Desktop : WebXR AR (horizontaux uniquement) + slider yaw + blob shadow
+   - Android/Desktop : WebXR AR (plans horizontaux uniquement) + curseur de rotation (yaw) + blob shadow
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Monté dans un conteneur choisi (data-mount="#ar-mount") pour Squarespace
 */
 
 (function () {
-  // ============ Utils: script tag / config / platform ============
+  // ==========================
+  // Utilitaires généraux
+  // ==========================
+
+  // Récupère de façon robuste le <script> courant (compatible pages CMS)
   function getCurrentScript() {
-    // robuste même si currentScript n'est pas dispo
     return document.currentScript || (function () {
       var scripts = document.getElementsByTagName('script');
       return scripts[scripts.length - 1] || null;
     })();
   }
 
+  // URL du fichier config.json passée via data-config sur le <script>
   function findConfigUrl() {
     var el = getCurrentScript();
     if (!el) return null;
@@ -23,16 +27,19 @@
     return url || null;
   }
 
+  // Détection iOS (pour Quick Look)
   function isIOS() {
     return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   }
 
+  // Petit helper timeout pour sécuriser des chargements
   function timeout(ms) {
     return new Promise(function (_res, rej) {
       setTimeout(function () { rej(new Error("timeout")); }, ms);
     });
   }
 
+  // Charge config.json (chemins GLB/USDZ)
   async function loadConfigJson(url) {
     if (!url) return null;
     try {
@@ -46,13 +53,16 @@
     }
   }
 
-  // ============ PlayCanvas version fixée (Android/Desktop) ============
+  // ==========================
+  // PlayCanvas (Android/Desktop)
+  // ==========================
   var PC_VERSION = "2.11.7";
   var 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"]
   };
 
+  // Charge PlayCanvas de façon robuste (ESM puis fallback UMD)
   async function loadPlayCanvasRobust(opts) {
     opts = opts || {};
     var esmFirst = (typeof opts.esmFirst === "boolean") ? opts.esmFirst : true;
@@ -105,49 +115,74 @@
     }
   }
 
-  // ============ UI / Overlay commun ============
+  // ==========================
+  // Overlay / UI (styles intégrés)
+  // ==========================
+  // NOTE: on renomme les ids/classes pour être plus explicites :
+  // - #ar-overlay-root (ancien #xr-overlay-root)
+  // - .ar-rotation-panel (ancien .ar-ui)
+  // - #ar-rotation-track (ancien #ar-rotY-wrap)
+  // - #ar-rotation-knob  (ancien #ar-rotY-knob)
+  // - #ar-rotation-range (ancien #ar-rotY)
+  // - #ar-rotation-value (ancien #ar-rotY-val)
+  // - #ar-ios-quicklook-button (ancien #ios-quicklook-btn)
+
   var css = [
+    /* Conteneur overlay global (DOM Overlay WebXR + messages) */
+    "#ar-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
+
+    /* Toast (bas centre) utilisé pour la plupart des messages */
     ".pc-ar-msg{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10002;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:10001;pointer-events: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;overflow:visible;pointer-events:auto}",
+    /* Variante centrée + agrandie (pour “Modèle chargé. Touchez l’écran…”) */
+    ".pc-ar-msg.pc-ar-msg--centerBig{top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:20px;padding:16px 22px;max-width:min(90vw,760px)}",
+
+    /* ----- Panneau de rotation (ne pas modifier le texte 'Rotation') ----- */
+    ".ar-rotation-panel{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-rotation-panel .label{font-size:12px;text-align:center;opacity:.95}",
+    "#ar-rotation-track{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;pointer-events:auto}",
     ".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}",
-    ".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}",
-    ".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}",
+    "#ar-rotation-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#ar-rotation-range.rotY{position:absolute;opacity:0;pointer-events:none;width:0;height:0}",
+    "#ar-rotation-value{font-size:12px;opacity:.95}",
 
-    /* iOS Quick Look button */
-    "#ios-quicklook-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10003;display:inline-block;pointer-events:auto}",
-    "#ios-quicklook-btn img{display:block;height:44px;width:auto}"
+    /* ----- Bouton iOS Quick Look : centré et agrandi ----- */
+    "#ar-ios-quicklook-button{position:fixed;left:50%;transform:translateX(-50%);bottom:72px;z-index:10003;display:inline-block;pointer-events:auto}",
+    "#ar-ios-quicklook-button img{display:block;height:56px;width:auto}" // agrandi
   ].join("\n");
   var styleTag = document.createElement("style");
   styleTag.textContent = css;
   document.head.appendChild(styleTag);
 
+  // Crée/récupère le conteneur d’overlay global
   function ensureOverlayRoot() {
-    var r = document.getElementById("xr-overlay-root");
+    var r = document.getElementById("ar-overlay-root");
     if (!r) {
       r = document.createElement("div");
-      r.id = "xr-overlay-root";
+      r.id = "ar-overlay-root";
       document.body.appendChild(r);
     }
     return r;
   }
   var overlayRoot = ensureOverlayRoot();
 
-  function message(msg) {
+  // Système de message :
+  // - message() = toast par défaut (en bas)
+  // - si le texte correspond au message de démarrage, on centre + agrandit
+  function message(txt) {
     var el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
       el = document.createElement("div");
       el.className = "pc-ar-msg";
       overlayRoot.appendChild(el);
     }
-    el.textContent = msg;
+    // Style spécial si c’est le message de démarrage à agrandir/centrer
+    var isStartMsg = /Mod[eè]le charg[é|e]\. Touchez l[’'`]écran pour d[ée]marrer l’AR\./i.test(txt);
+    el.classList.toggle("pc-ar-msg--centerBig", isStartMsg);
+    el.textContent = txt;
   }
 
-  // iOS Quick Look URL (empêche le pinch to scale)
+  // Construit l’URL Quick Look empêchant le pinch-to-scale
   function buildQuickLookHref(usdzUrl) {
     try {
       var u = new URL(usdzUrl, window.location.href);
@@ -161,12 +196,13 @@
     }
   }
 
+  // Crée le bouton iOS Quick Look (ancre rel=ar) — centré/agrandi
   function ensureQuickLookButton(USDZ_URL) {
-    var btn = document.getElementById("ios-quicklook-btn");
+    var btn = document.getElementById("ar-ios-quicklook-button");
     if (btn) return btn;
 
     var anchor = document.createElement("a");
-    anchor.id = "ios-quicklook-btn";
+    anchor.id = "ar-ios-quicklook-button";
     anchor.setAttribute("rel", "ar");
     anchor.setAttribute("href", buildQuickLookHref(USDZ_URL));
 
@@ -174,30 +210,32 @@
     img.alt = "Voir en AR";
     img.src =
       "data:image/svg+xml;charset=utf-8," +
-      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="160" height="44"><rect rx="8" ry="8" width="160" height="44" fill="black"/><text x="80" y="28" font-size="14" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
+      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="56"><rect rx="12" ry="12" width="200" height="56" fill="black"/><text x="100" y="35" font-size="18" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
 
     anchor.appendChild(img);
     document.body.appendChild(anchor);
     return anchor;
   }
 
-  // ============ Canvas monté dans un conteneur contrôlé (Squarespace) ============
+  // ==========================
+  // Montage du canvas (Squarespace-friendly)
+  // ==========================
   function ensureCanvas() {
     var scriptEl = getCurrentScript();
     var mountSel = scriptEl && scriptEl.getAttribute('data-mount');
     var desiredHeight = (scriptEl && scriptEl.getAttribute('data-height')) || '70vh';
 
-    // Trouve le conteneur cible
+    // Trouve (ou fabrique) le conteneur d’accueil du canvas
     var mountEl = null;
     if (mountSel) mountEl = document.querySelector(mountSel);
     if (!mountEl) {
-      // fallback : tout en haut du body (pour éviter "sous le footer")
+      // Fallback : placé en haut de <body> pour éviter d’être “sous le footer”
       mountEl = document.createElement('div');
       mountEl.id = 'ar-mount-fallback';
       document.body.insertBefore(mountEl, document.body.firstChild);
     }
 
-    // Style du conteneur
+    // Style de base du conteneur
     var mountStyle = mountEl.style;
     if (!mountStyle.position) mountStyle.position = 'relative';
     mountStyle.width = mountStyle.width || '100%';
@@ -205,7 +243,7 @@
     mountStyle.touchAction = mountStyle.touchAction || 'manipulation';
     mountStyle.webkitTapHighlightColor = 'transparent';
 
-    // Réutilise ou crée le canvas
+    // Crée/réutilise le canvas
     var canvas = mountEl.querySelector('#application-canvas');
     if (!canvas) {
       canvas = document.createElement('canvas');
@@ -222,7 +260,7 @@
     cs.height = '100%';
     cs.display = 'block';
 
-    // Optionnel : ramener le viewport sur le viewer
+    // Optionnel : faire défiler vers la zone AR
     try {
       mountEl.scrollIntoView({ behavior: 'instant', block: 'start' });
     } catch (_) {}
@@ -230,24 +268,27 @@
     return canvas;
   }
 
-  function ensureSliderUI() {
-    var p = overlayRoot.querySelector(".ar-ui");
+  // Panneau “Rotation” vertical (slider personnalisé)
+  function ensureRotationPanel() {
+    var p = overlayRoot.querySelector(".ar-rotation-panel");
     if (p) return p;
     p = document.createElement("div");
-    p.className = "ar-ui";
+    p.className = "ar-rotation-panel";
     p.innerHTML =
       '<div class="label">Rotation</div>' +
-      '<div class="rotY-wrap" id="ar-rotY-wrap">' +
+      '<div id="ar-rotation-track" class="rotY-wrap">' + // (on garde la classe existante pour le rail)
       '  <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 id="ar-rotation-knob" class="rotY-knob"></div>' +
+      '  <input id="ar-rotation-range" class="rotY" type="range" min="0" max="360" step="1" value="0"/>' +
       '</div>' +
-      '<div class="val" id="ar-rotY-val">0°</div>';
+      '<div id="ar-rotation-value" class="val">0°</div>';
     overlayRoot.appendChild(p);
     return p;
   }
 
-  // ============ Boot : charge config, route iOS vs Android/Desktop ============
+  // ==========================
+  // Démarrage (config → iOS vs Android/Desktop)
+  // ==========================
   (async function () {
     var cfgUrl = findConfigUrl();
     var cfg = await loadConfigJson(cfgUrl);
@@ -258,16 +299,19 @@
                    cfg.usdz_url :
                    null;
 
+    // iOS → Quick Look
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
-        message("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
+        // Message centré + agrandi pour être bien visible au-dessus du bouton
+        message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
       } else {
         message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
       return;
     }
 
+    // Android/Desktop → PlayCanvas/WebXR
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -278,18 +322,23 @@
     initARApp(GLB_URL);
   })();
 
-  // ============ App Android/Desktop (WebXR) ============
+  // ==========================
+  // Application WebXR (Android/Desktop)
+  // ==========================
   function initARApp(GLB_URL) {
     var pc = window.pc;
+
+    // Canvas + panneau rotation
     var canvas = ensureCanvas();
-    var ui = ensureSliderUI();
-    var rotWrap = ui.querySelector("#ar-rotY-wrap");
-    var rotKnob = ui.querySelector("#ar-rotY-knob");
-    var rotYInput = ui.querySelector("#ar-rotY");
-    var rotYVal = ui.querySelector("#ar-rotY-val");
+    var rotationPanel = ensureRotationPanel();
+    var rotTrack = rotationPanel.querySelector("#ar-rotation-track");
+    var rotKnob  = rotationPanel.querySelector("#ar-rotation-knob");
+    var rotInput = rotationPanel.querySelector("#ar-rotation-range");
+    var rotVal   = rotationPanel.querySelector("#ar-rotation-value");
 
     window.focus();
 
+    // Application PlayCanvas
     var app = new pc.Application(canvas, {
       mouse: new pc.Mouse(canvas),
       touch: new pc.TouchDevice(canvas),
@@ -305,13 +354,13 @@
     app.on("destroy", function () { window.removeEventListener("resize", onResize); });
     app.start();
 
-    // Rendu / PBR defaults
+    // Réglages de rendu PBR “safe”
     app.scene.gammaCorrection = pc.GAMMA_SRGB;
-    app.scene.toneMapping = pc.TONEMAP_ACES;
-    app.scene.exposure = 1;
-    app.scene.ambientLight = new pc.Color(1, 1, 1);
+    app.scene.toneMapping     = pc.TONEMAP_ACES;
+    app.scene.exposure        = 1;
+    app.scene.ambientLight    = new pc.Color(1, 1, 1);
 
-    // Camera + lumière
+    // Caméra + lumière
     var camera = new pc.Entity("Camera");
     camera.addComponent("camera", { clearColor: new pc.Color(0, 0, 0, 0), farClip: 10000 });
     app.root.addChild(camera);
@@ -321,7 +370,7 @@
     light.setLocalEulerAngles(45, 30, 0);
     app.root.addChild(light);
 
-    // Réticule
+    // Réticule (visualise la cible du hit-test)
     var reticleMat = new pc.StandardMaterial();
     reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0);
     reticleMat.opacity = 0.85;
@@ -334,13 +383,13 @@
     reticle.enabled = false;
     app.root.addChild(reticle);
 
-    // Modèle
+    // Conteneur du modèle chargé
     var modelRoot = new pc.Entity("ModelRoot");
     modelRoot.enabled = false;
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // ===== Blob Shadow =====
+    // Ombre de contact (blob “peinte” sur un plan)
     var blob = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
@@ -395,18 +444,16 @@
       return e;
     }
 
-    // Euler de base (évite inversions)
+    // Rotation via slider (0..360). On mémorise X/Z pour éviter les “flip”.
     var baseEulerX = 0, baseEulerZ = 0;
-
-    // Rotation via slider (0..360, 360 en haut / 0 en bas)
     var rotationYDeg = 0;
     function clamp360(d) { return Math.max(0, Math.min(360, d)); }
 
     function updateKnobFromY(yDeg) {
       var t = 1 - (yDeg / 360);
       rotKnob.style.top = String(t * 100) + "%";
-      rotYInput.value = String(Math.round(yDeg));
-      rotYVal.textContent = String(Math.round(yDeg)) + "°";
+      rotInput.value = String(Math.round(yDeg));
+      rotVal.textContent = String(Math.round(yDeg)) + "°";
     }
     function applyRotationY(deg) {
       var y = clamp360(deg);
@@ -421,14 +468,14 @@
       if (rotLikePlane) blob.setRotation(rotLikePlane);
     }
 
-    // Chargement GLB (depuis config.json)
+    // Chargement du modèle GLB (depuis config.json)
     app.assets.loadFromUrl(GLB_URL, "container", function (err, asset) {
       if (err) { console.error(err); message("Échec du chargement du modèle GLB."); return; }
       var instance = asset.resource.instantiateRenderEntity({ castShadows: true, receiveShadows: false });
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(1, 1, 1);
 
-      // Fix matériaux simples
+      // Ajustements simples matériaux (évite rendu trop sombre sans IBL)
       var renders = instance.findComponents('render');
       for (var ri = 0; ri < renders.length; ri++) {
         var r = renders[ri];
@@ -448,49 +495,50 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
+      // >>> Message agrandi et centré (comme demandé)
       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; }
 
-    // Slider fiable (pointer events en capture)
+    // Gestion fiable du slider (capture des pointer events)
     var uiInteracting = false;
-    var draggingWrap = false;
+    var draggingTrack = false;
     var activePointerId = null;
 
-    function insideWrap(target) { return rotWrap.contains(target); }
+    function insideTrack(target) { return rotTrack.contains(target); }
     function degFromPointer(e) {
-      var rect = rotWrap.getBoundingClientRect();
+      var rect = rotTrack.getBoundingClientRect();
       var y = (e.clientY != null) ? e.clientY : ((e.touches && e.touches[0] && e.touches[0].clientY) || 0);
       var ratio = (y - rect.top) / rect.height;
       var t = Math.max(0, Math.min(1, ratio));
-      return (1 - t) * 360;
+      return (1 - t) * 360; // 360 en haut, 0 en bas
     }
 
     function onPointerDownCapture(e) {
-      if (!insideWrap(e.target)) return;
+      if (!insideTrack(e.target)) return;
       uiInteracting = true;
-      draggingWrap = true;
+      draggingTrack = true;
       activePointerId = (e.pointerId != null) ? e.pointerId : 1;
-      if (rotWrap.setPointerCapture) {
-        try { rotWrap.setPointerCapture(activePointerId); } catch (er) {}
+      if (rotTrack.setPointerCapture) {
+        try { rotTrack.setPointerCapture(activePointerId); } catch (er) {}
       }
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     }
     function onPointerMoveCapture(e) {
-      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
+      if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     }
     function endDrag(e) {
-      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
-      draggingWrap = false;
+      if (!draggingTrack || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
+      draggingTrack = false;
       uiInteracting = false;
-      if (rotWrap.releasePointerCapture) {
-        try { rotWrap.releasePointerCapture(activePointerId); } catch (er) {}
+      if (rotTrack.releasePointerCapture) {
+        try { rotTrack.releasePointerCapture(activePointerId); } catch (er) {}
       }
       activePointerId = null;
       e.preventDefault();
@@ -499,14 +547,14 @@
 
     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 });
+    document.addEventListener("pointerup",   endDrag,               { capture: true, passive: false });
+    document.addEventListener("pointercancel", endDrag,             { capture: true, passive: false });
 
-    // --- Démarrage AR (Android/Desktop)
+    // Démarrage AR (tap écran, hors slider)
     function activateAR() {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
       if (!app.xr.domOverlay) app.xr.domOverlay = {};
-      app.xr.domOverlay.root = document.getElementById("xr-overlay-root");
+      app.xr.domOverlay.root = document.getElementById("ar-overlay-root");
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
         requiredFeatures: ["hit-test", "dom-overlay"],
         domOverlay: { root: app.xr.domOverlay.root },
@@ -528,7 +576,7 @@
     }
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test HORIZONTAL uniquement
+    // Hit-test : détecte uniquement des surfaces quasi-horizontales (normale ~ +Y)
     var TMP_IN = new pc.Vec3(0, 1, 0), TMP_OUT = new pc.Vec3();
     function isHorizontalUpFacing(rot, minDot) {
       minDot = (typeof minDot === "number") ? minDot : 0.75;
@@ -536,7 +584,7 @@
       return TMP_OUT.y >= minDot;
     }
 
-    // Hit Test global
+    // Hit Test global (alimentation du réticule + premier placement)
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
@@ -553,7 +601,7 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Ombre de contact
+              // Ombre de contact au placement initial
               blob = createBlobShadowAt(pos, rot);
 
               var e = new pc.Vec3();
@@ -562,7 +610,7 @@
               applyRotationY(y0);
 
               placedOnce = true;
-              rotYInput.disabled = false;
+              rotInput.disabled = false;
               message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
@@ -570,7 +618,7 @@
       });
     });
 
-    // Déplacement XR (drag) — ignoré si UI active
+    // Déplacement XR continu (drag) — ignoré si UI active
     var isDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
@@ -597,7 +645,7 @@
       inputSource.on("selectend", function () { isDragging = false; });
     });
 
-    // Desktop : rotation souris (ignore si UI)
+    // Desktop : rotation à la souris (clic droit ou Shift+clic gauche)
     var rotateMode = false, lastMouseX = 0;
     var ROTATE_SENSITIVITY = 0.25;
     app.mouse.on("mousedown", function (e) {
@@ -627,16 +675,25 @@
     window.addEventListener("contextmenu", function (e) { e.preventDefault(); });
 
     // Slider (accessibilité clavier)
-    rotYInput.disabled = true;
-    rotYInput.addEventListener("input", function (e) {
+    rotInput.disabled = true;
+    rotInput.addEventListener("input", function (e) {
       if (!modelRoot.enabled) return;
       var v = parseFloat(e.target.value || "0");
       applyRotationY(v);
     }, { passive: true });
 
-    // AR events
-    app.xr.on("start", function () { message("Session AR démarrée. Visez le sol pour détecter un plan…"); reticle.enabled = true; });
-    app.xr.on("end", function () { message("Session AR terminée."); reticle.enabled = false; isDragging = false; rotateMode = false; rotYInput.disabled = true; });
+    // Événements AR (feedback utilisateur)
+    app.xr.on("start", function () {
+      message("Session AR démarrée. Visez le sol pour détecter un plan…");
+      reticle.enabled = true;
+    });
+    app.xr.on("end", function () {
+      message("Session AR terminée.");
+      reticle.enabled = false;
+      isDragging = false;
+      rotateMode = false;
+      rotInput.disabled = true;
+    });
     app.xr.on("available:" + pc.XRTYPE_AR, function (a) {
       if (!a) message("AR immersive indisponible.");
       else if (!app.xr.hitTest.supported) message("AR Hit Test non supporté.");
@@ -648,3 +705,4 @@
     else message("Chargement du modèle…");
   }
 })();
+