Update viewer_ar.js

viewer_ar.js

@@ -6,86 +6,170 @@
    - Blob Shadow (ombre de contact) sous l’objet
 */
 
-(() => {
+(function () {
   const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
 
   // ===== 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`],
-    umd: [`https://cdn.jsdelivr.net/npm/playcanvas@${PC_VERSION}/build/playcanvas.min.js`]
+    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?.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(); }
+  function timeout(ms) {
+    return new Promise(function (_res, rej) {
+      setTimeout(function () { rej(new Error("timeout")); }, ms);
+    });
   }
 
-  // ===== 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,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}
-
-    /* Grande zone tactile (box grise) */
-    .rotY-wrap{position:relative;width:48px;height:200px;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:visible;pointer-events:auto}
-
-    /* Rail PLEIN (de haut en bas), centré */
-    .rotY-rail{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:rgba(255,255,255,.35);border-radius:2px;pointer-events:none}
-
-    /* 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;touch-action:none;pointer-events:none}
+  async function loadPlayCanvasRobust(opts) {
+    opts = opts || {};
+    var esmFirst = (typeof opts.esmFirst === "boolean") ? opts.esmFirst : true;
+    var loadTimeoutMs = (typeof opts.loadTimeoutMs === "number") ? opts.loadTimeoutMs : 15000;
+
+    if (window.pc && window.pc.Application) return window.pc;
+
+    async function tryESM() {
+      for (var i = 0; i < PC_URLS.esm.length; i++) {
+        var url = PC_URLS.esm[i];
+        try {
+          var mod = await Promise.race([import(/* @vite-ignore */ url), timeout(loadTimeoutMs)]);
+          var ns = (mod && (mod.pc || mod["default"])) || mod;
+          if (ns && ns.Application) {
+            if (!window.pc) window.pc = ns;
+            return window.pc;
+          }
+        } catch (e) {
+          // continue
+        }
+      }
+      throw new Error("ESM failed");
+    }
 
-    /* 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}
-  `;
-  const styleTag = document.createElement("style"); styleTag.textContent = css; document.head.appendChild(styleTag);
+    async function tryUMD() {
+      for (var j = 0; j < PC_URLS.umd.length; j++) {
+        var url2 = PC_URLS.umd[j];
+        try {
+          await Promise.race([
+            new Promise(function (res, rej) {
+              var s = document.createElement("script");
+              s.src = url2;
+              s.async = true;
+              s.onload = function () { res(); };
+              s.onerror = function () { rej(new Error("script error")); };
+              document.head.appendChild(s);
+            }),
+            timeout(loadTimeoutMs)
+          ]);
+          if (window.pc && window.pc.Application) return window.pc;
+        } catch (e) {
+          // continue
+        }
+      }
+      throw new Error("UMD failed");
+    }
 
-  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();
+    try {
+      if (esmFirst) return await tryESM();
+      return await tryUMD();
+    } catch (e) {
+      if (esmFirst) return await tryUMD();
+      return await tryESM();
+    }
+  }
 
-  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; }
+  // ===== UI / Overlay =====
+  var 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,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}",
+    ".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}"
+  ].join("\n");
+  var styleTag = document.createElement("style");
+  styleTag.textContent = css;
+  document.head.appendChild(styleTag);
+
+  function ensureOverlayRoot() {
+    var r = document.getElementById("xr-overlay-root");
+    if (!r) {
+      r = document.createElement("div");
+      r.id = "xr-overlay-root";
+      document.body.appendChild(r);
+    }
+    return r;
+  }
+  var overlayRoot = ensureOverlayRoot();
+
+  function message(msg) {
+    var 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() {
+    var 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;
-    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>
-        <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>`;
+  function ensureSliderUI() {
+    var 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>' +
+      '  <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>';
     overlayRoot.appendChild(p);
     return p;
   }
 
   // ===== Boot =====
-  (async()=>{ try{ await loadPlayCanvasRobust({esmFirst:true,loadTimeoutMs=15000}); }catch(e){ console.error("Chargement PlayCanvas échoué ->",e); message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard."); return; } initARApp(); })();
+  (async function () {
+    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 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");
+  function initARApp() {
+    var pc = window.pc;
+    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");
 
     window.focus();
 
-    const app = new pc.Application(canvas, {
+    var app = new pc.Application(canvas, {
       mouse: new pc.Mouse(canvas),
       touch: new pc.TouchDevice(canvas),
       keyboard: new pc.Keyboard(window),
@@ -94,72 +178,89 @@
     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));
+    var onResize = function () { app.resizeCanvas(); };
+    window.addEventListener("resize", onResize);
+    app.on("destroy", function () { window.removeEventListener("resize", onResize); });
     app.start();
 
     // ===== Rendu / PBR defaults =====
     app.scene.gammaCorrection = pc.GAMMA_SRGB;
-    app.scene.toneMapping     = pc.TONEMAP_ACES;
-    app.scene.exposure        = 1;                    // ajuste 0.9–1.8 si besoin
-    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 (directionnelle par défaut)
-    const camera = new pc.Entity("Camera");
-    camera.addComponent("camera", { clearColor: new pc.Color(0,0,0,0), farClip: 10000 }); 
+    // Camera + 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);
 
-    const light = new pc.Entity("Light");
-    light.addComponent("light", { type: "directional", intensity: 1.0, castShadows: true, color: new pc.Color(1,1,1) });
+    var light = new pc.Entity("Light");
+    light.addComponent("light", { type: "directional", intensity: 1.0, castShadows: true, color: new pc.Color(1, 1, 1) });
     light.setLocalEulerAngles(45, 30, 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);
+    var 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();
+
+    var 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;
+    var modelRoot = new pc.Entity("ModelRoot");
+    modelRoot.enabled = false;
+    app.root.addChild(modelRoot);
+    var modelLoaded = false, placedOnce = false;
 
     // ===== Blob Shadow =====
-    let blob = null;                           // entité plane de l’ombre
-    const BLOB_SIZE = 0.7;                     // diamètre approx. de l’ombre (m)
-    const BLOB_OFFSET_Y = 0.005;               // petit décalage au-dessus du sol pour éviter le z-fighting
+    var blob = null;                    // entité plane de l’ombre
+    var BLOB_SIZE = 0.7;
+    var BLOB_OFFSET_Y = 0.005;
 
-    function makeBlobTexture(app, size = 256) {
-      const cvs = document.createElement('canvas');
+    function makeBlobTexture(app, size) {
+      size = size || 256;
+      var cvs = document.createElement('canvas');
       cvs.width = cvs.height = size;
-      const ctx = cvs.getContext('2d');
-      const r = size * 0.45;
-      const grd = ctx.createRadialGradient(size/2, size/2, r*0.2, size/2, size/2, r);
-      grd.addColorStop(0, 'rgba(0,0,0,0.35)');   // centre sombre
-      grd.addColorStop(1, 'rgba(0,0,0,0.0)');    // bords transparents
+      var ctx = cvs.getContext('2d');
+      var r = size * 0.45;
+      var grd = ctx.createRadialGradient(size / 2, size / 2, r * 0.2, size / 2, size / 2, r);
+      grd.addColorStop(0, 'rgba(0,0,0,0.35)');
+      grd.addColorStop(1, 'rgba(0,0,0,0.0)');
       ctx.fillStyle = grd;
       ctx.fillRect(0, 0, size, size);
 
-      const tex = new pc.Texture(app.graphicsDevice, {
-        width: size, height: size, format: pc.PIXELFORMAT_R8_G8_B8_A8,
-        mipmaps: true, magFilter: pc.FILTER_LINEAR, minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR
+      var tex = new pc.Texture(app.graphicsDevice, {
+        width: size,
+        height: size,
+        format: pc.PIXELFORMAT_R8_G8_B8_A8,
+        mipmaps: true,
+        magFilter: pc.FILTER_LINEAR,
+        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR
       });
       tex.setSource(cvs);
       return tex;
     }
 
     function createBlobShadowAt(pos, rot) {
-      const tex = makeBlobTexture(app, 256);
-      const blobMat = new pc.StandardMaterial();
-      blobMat.diffuse.set(0,0,0);
-      blobMat.opacity = 1.0;                        // la transparence vient de la texture
+      var tex = makeBlobTexture(app, 256);
+      var blobMat = new pc.StandardMaterial();
+      blobMat.diffuse = new pc.Color(0, 0, 0);
+      blobMat.opacity = 1.0;
       blobMat.blendType = pc.BLEND_PREMULTIPLIED;
-      blobMat.depthWrite = false;                   // pour ne pas masquer l'objet
+      blobMat.depthWrite = false;
       blobMat.diffuseMap = tex;
       blobMat.update();
 
-      const e = new pc.Entity("BlobShadow");
+      var e = new pc.Entity("BlobShadow");
       e.addComponent("render", { type: "plane", castShadows: false, receiveShadows: false });
       e.render.material = blobMat;
 
-      // place légèrement au-dessus du sol, orienté comme le plan détecté (horizontal)
       e.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
       e.setRotation(rot);
       e.setLocalScale(BLOB_SIZE, 1, BLOB_SIZE);
@@ -168,155 +269,170 @@
       return e;
     }
 
-    // Euler de base (évite inversions)
-    let baseEulerX=0, baseEulerZ=0;
+    // Euler base
+    var baseEulerX = 0, baseEulerZ = 0;
 
-    // Rotation Y (clamp 0..360) — 360 en haut, 0 en bas
-    let rotationYDeg = 0;
-    const clamp360 = d => Math.max(0, Math.min(360, d));
+    // Rotation via slider
+    var rotationYDeg = 0;
+    function clamp360(d) { return Math.max(0, Math.min(360, d)); }
 
-    function updateKnobFromY(yDeg){
-      const t = 1 - (yDeg / 360);        // 360 -> top(0%), 0 -> bottom(100%)
-      rotKnob.style.top = `${t*100}%`;
+    function updateKnobFromY(yDeg) {
+      var t = 1 - (yDeg / 360);
+      rotKnob.style.top = String(t * 100) + "%";
       rotYInput.value = String(Math.round(yDeg));
-      rotYVal.textContent = `${Math.round(yDeg)}°`;
+      rotYVal.textContent = String(Math.round(yDeg)) + "°";
     }
-    function applyRotationY(deg){
-      const y = clamp360(deg);
+    function applyRotationY(deg) {
+      var y = clamp360(deg);
       rotationYDeg = y;
       modelRoot.setEulerAngles(baseEulerX, y, baseEulerZ);
       updateKnobFromY(y);
     }
 
-    // Helper : met à jour aussi l’ombre quand on déplace l’objet
-    function updateBlobPositionUnder(pos, rotLikePlane = null) {
+    function updateBlobPositionUnder(pos, rotLikePlane) {
       if (!blob) return;
-      // on suit la position XY du modèle, et on s'aligne sur la rotation du plan si fournie
       blob.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
-      if (rotLikePlane) {
-        blob.setRotation(rotLikePlane);
-      }
+      if (rotLikePlane) blob.setRotation(rotLikePlane);
     }
 
-    // Chargement GLB + "fix matériaux"
-    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:true, receiveShadows:false });
+    // Chargement GLB
+    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 (au cas où) : s’assure d’un rendu PBR correct
-      const renders = instance.findComponents('render');
-      for (const r of renders) {
-        r.castShadows = true;  // l’objet projette des ombres (utile si tu actives de vraies ombres)
-        for (const mi of r.meshInstances) {
-          const m = mi.material;
-          if (!m) continue;
-          if (m.diffuse && (m.diffuse.r !== 1 || m.diffuse.g !== 1 || m.diffuse.b !== 1)) {
-            m.diffuse.set(1,1,1);
+      modelRoot.setLocalScale(1, 1, 1);
+
+      // Fix matériaux
+      var renders = instance.findComponents('render');
+      for (var ri = 0; ri < renders.length; ri++) {
+        var r = renders[ri];
+        r.castShadows = true;
+        for (var mi = 0; mi < r.meshInstances.length; mi++) {
+          var mat = r.meshInstances[mi].material;
+          if (!mat) continue;
+          if (mat.diffuse && (mat.diffuse.r !== 1 || mat.diffuse.g !== 1 || mat.diffuse.b !== 1)) {
+            mat.diffuse.set(1, 1, 1);
           }
-          if ('useSkybox' in m) m.useSkybox = true;
-          m.update();
+          if (typeof mat.useSkybox !== "undefined") mat.useSkybox = true;
+          mat.update();
         }
       }
 
-      const initE = modelRoot.getEulerAngles();
+      var initE = modelRoot.getEulerAngles();
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       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; }
+    if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
     // ===== Slider fiable : Pointer Events en CAPTURE =====
-    let uiInteracting=false;
-    let draggingWrap=false;
-    let activePointerId=null;
-
-    const insideWrap = (target) => rotWrap.contains(target);
-    const degFromPointer = (e) => {
-      const rect = rotWrap.getBoundingClientRect();
-      const y = (e.clientY != null) ? 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
-    };
-
-    const onPointerDownCapture = (e) => {
+    var uiInteracting = false;
+    var draggingWrap = false;
+    var activePointerId = null;
+
+    function insideWrap(target) { return rotWrap.contains(target); }
+    function degFromPointer(e) {
+      var rect = rotWrap.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;
+    }
+
+    function onPointerDownCapture(e) {
       if (!insideWrap(e.target)) return;
       uiInteracting = true;
       draggingWrap = true;
-      activePointerId = e.pointerId ?? 1;
-      try { rotWrap.setPointerCapture?.(activePointerId); } catch {}
+      activePointerId = (e.pointerId != null) ? e.pointerId : 1;
+      if (rotWrap.setPointerCapture) {
+        try { rotWrap.setPointerCapture(activePointerId); } catch (er) {}
+      }
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
-    };
-    const onPointerMoveCapture = (e) => {
-      if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
+    }
+    function onPointerMoveCapture(e) {
+      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
-    };
-    const endDrag = (e) => {
-      if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
+    }
+    function endDrag(e) {
+      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
       draggingWrap = false;
       uiInteracting = false;
-      try { rotWrap.releasePointerCapture?.(activePointerId); } catch {}
+      if (rotWrap.releasePointerCapture) {
+        try { rotWrap.releasePointerCapture(activePointerId); } catch (er) {}
+      }
       activePointerId = null;
       e.preventDefault();
       e.stopPropagation();
-    };
+    }
 
     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 (sans light-estimation)
-    const activateAR = () => {
-      if (!app.xr.isAvailable(pc.XRTYPE_AR)){ message("AR immersive indisponible sur cet appareil."); return; }
+    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
+    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");
       camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
-        requiredFeatures: ["hit-test","dom-overlay"],
+        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}`); } }
+        callback: function (err) {
+          if (err) {
+            console.error("Échec du démarrage AR :", err);
+            message("Échec du démarrage AR : " + (err.message || err));
+          }
+        }
+      });
+    }
+    app.mouse.on("mousedown", function () { if (!app.xr.active && !uiInteracting) activateAR(); });
+    if (app.touch) {
+      app.touch.on("touchend", function (evt) {
+        if (!app.xr.active && !uiInteracting) activateAR();
+        evt.event.preventDefault();
+        evt.event.stopPropagation();
       });
-    };
-    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.keyboard.on("keydown", function (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), TMP_OUT = new pc.Vec3();
-    function isHorizontalUpFacing(rot, minDot = 0.75){ rot.transformVector(TMP_IN, TMP_OUT); return TMP_OUT.y >= minDot; }
+    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;
+      rot.transformVector(TMP_IN, TMP_OUT);
+      return TMP_OUT.y >= minDot;
+    }
 
     // Hit Test global (réticule + 1er placement)
-    app.xr.hitTest.on("available", () => {
+    app.xr.hitTest.on("available", function () {
       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
+        callback: function (err, hitSource) {
+          if (err) { message("Le AR hit test n’a pas pu démarrer."); return; }
+          hitSource.on("result", function (pos, rot) {
+            if (!isHorizontalUpFacing(rot)) return;
 
             reticle.enabled = true;
             reticle.setPosition(pos);
             reticle.setRotation(rot);
 
-            if (modelLoaded && !placedOnce){
+            if (modelLoaded && !placedOnce) {
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Crée l’ombre de contact au même endroit/orientation
+              // Ombre de contact au placement initial
               blob = createBlobShadowAt(pos, rot);
 
-              const e = new pc.Vec3(); rot.getEulerAngles(e);
-              // normalise yaw initiale 0..360
-              const y0 = ((e.y % 360)+360)%360;
+              var e = new pc.Vec3();
+              rot.getEulerAngles(e);
+              var y0 = ((e.y % 360) + 360) % 360;
               applyRotationY(y0);
 
               placedOnce = true;
@@ -329,62 +445,80 @@
     });
 
     // Déplacement XR (drag) — ignoré si UI active
-    let isDragging=false;
-    app.xr.input.on("add", (inputSource) => {
-      inputSource.on("selectstart", () => {
+    var isDragging = false;
+    app.xr.input.on("add", function (inputSource) {
+      inputSource.on("selectstart", function () {
         if (uiInteracting) return;
         if (!placedOnce || !modelLoaded) return;
 
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
-          callback: (err, transientSource) => {
+          callback: function (err, transientSource) {
             if (err) return;
             isDragging = true;
 
-            transientSource.on("result", (pos, rot) => {
+            transientSource.on("result", function (pos, rot) {
               if (!isDragging) return;
               if (!isHorizontalUpFacing(rot)) return;
               modelRoot.setPosition(pos);
-              updateBlobPositionUnder(pos, rot);   // <— l’ombre suit le modèle
+              updateBlobPositionUnder(pos, rot);
             });
 
-            transientSource.once("remove", () => { isDragging = false; });
+            transientSource.once("remove", function () { isDragging = false; });
           }
         });
       });
-      inputSource.on("selectend", () => { isDragging = false; });
+      inputSource.on("selectend", function () { 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) { 
-          const p = reticle.getPosition(); 
-          modelRoot.setPosition(p); 
-          updateBlobPositionUnder(p);  // <— suit aussi en drag souris via réticule
-        } 
-      } else if(rotateMode && modelRoot.enabled){ 
-        const dx=e.x-lastMouseX; lastMouseX=e.x; 
-        applyRotationY(rotationYDeg + dx*ROTATE_SENSITIVITY); 
+    // Desktop : rotation souris (ignore si UI)
+    var rotateMode = false, lastMouseX = 0;
+    var ROTATE_SENSITIVITY = 0.25;
+    app.mouse.on("mousedown", function (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("mouseup",()=>{ isDragging=false; rotateMode=false; });
-    window.addEventListener("contextmenu",(e)=>e.preventDefault());
+    app.mouse.on("mousemove", function (e) {
+      if (!app.xr.active || !placedOnce || uiInteracting) return;
+      if (isDragging) {
+        if (reticle.enabled) {
+          var p = reticle.getPosition();
+          modelRoot.setPosition(p);
+          updateBlobPositionUnder(p, null);
+        }
+      } else if (rotateMode && modelRoot.enabled) {
+        var dx = e.x - lastMouseX;
+        lastMouseX = e.x;
+        applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
+      }
+    });
+    app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
+    window.addEventListener("contextmenu", function (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});
+    rotYInput.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",()=>{ 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…"); });
+    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; });
+    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é.");
+      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é.");
+    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…");
   }
 })();