Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -4,7 +4,7 @@
    - Android/Desktop : WebXR AR (plans HORIZONTAUX uniquement) + slider yaw + blob shadow
    - Éclairage PBR par défaut (sans WebXR light estimation)
    - Bouton "Lancer l’AR" (Android & iOS)
-   - CSS EXTERNE via data-css (ou fallback), injecté AVANT création de l’UI
+   - CSS EXTERNE via data-css, **attendue avant création de l’UI**
    - Montable dans un conteneur dédié via data-mount et data-height (Squarespace-friendly)
 */
 
@@ -17,20 +17,34 @@
     })();
   }
 
-  // Injecte un <link rel="stylesheet"> dans CE document (évite doublons)
-  function ensureCssLink(href) {
-    if (!href) return;
-    var links = document.querySelectorAll('link[rel="stylesheet"]');
-    for (var i = 0; i < links.length; i++) {
-      try {
-        if (new URL(links[i].href).href === new URL(href, document.baseURI).href) return;
-      } catch (_) {}
-      if (links[i].href === href) return;
-    }
-    var linkEl = document.createElement('link');
-    linkEl.rel = 'stylesheet';
-    linkEl.href = href;
-    document.head.appendChild(linkEl);
+  // Injecte <link rel="stylesheet"> et **attend** son chargement
+  function ensureCssLinkAsync(href) {
+    return new Promise(function (resolve) {
+      if (!href) return resolve();
+
+      // Déjà injectée ?
+      var links = document.querySelectorAll('link[rel="stylesheet"]');
+      for (var i = 0; i < links.length; i++) {
+        try {
+          if (new URL(links[i].href, document.baseURI).href === new URL(href, document.baseURI).href) {
+            // Déjà présente : on considère chargée
+            return resolve();
+          }
+        } catch (_) {
+          if (links[i].href === href) return resolve();
+        }
+      }
+
+      var linkEl = document.createElement('link');
+      linkEl.rel = 'stylesheet';
+      linkEl.href = href;
+      linkEl.onload = function () { resolve(); };
+      linkEl.onerror = function () {
+        console.warn('[viewer_ar_ios] CSS failed to load:', href);
+        resolve(); // on continue quand même (pas de blocage)
+      };
+      document.head.appendChild(linkEl);
+    });
   }
 
   function findConfigUrl() {
@@ -204,7 +218,6 @@
       btn.id = 'ar-launch-btn';
       btn.type = 'button';
       btn.textContent = 'Lancer l’AR';
-      // Évite que le clic déclenche d’autres gestuelles
       btn.addEventListener('pointerdown', function (e) { e.stopPropagation(); }, { passive: true });
       btn.addEventListener('click', function (e) { e.stopPropagation(); }, false);
       document.body.appendChild(btn);
@@ -223,15 +236,16 @@
     return { btn: btn, anchor: anchor || null };
   }
 
-  // ========== Boot : charge CSS, config, branche iOS/Android ==========
+  // ========== Boot : charger **CSS**, puis config, puis brancher iOS/Android ==========
   (async function () {
-    // A) CSS externe depuis data-css (ou valeur par défaut)
     var scriptEl = getCurrentScript();
     var cssHref = (scriptEl && scriptEl.getAttribute('data-css'))
       || "https://huggingface.co/spaces/MikaFil/VR/resolve/main/css/style.css";
-    ensureCssLink(cssHref);
 
-    // B) Config.json
+    // 1) Charger la CSS et ATTENDRE le onload avant toute création d'UI
+    await ensureCssLinkAsync(cssHref);
+
+    // 2) Lire config.json
     var cfgUrl = findConfigUrl();
     var cfg = await loadConfigJson(cfgUrl);
     var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url)
@@ -239,12 +253,12 @@
       : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
     var USDZ_URL = (cfg && typeof cfg.usdz_url === "string" && cfg.usdz_url) ? cfg.usdz_url : null;
 
-    // C) Bouton + (iOS) ancre Quick Look
+    // 3) Construire les contrôles **après** CSS
     var controls = ensureLaunchControls(USDZ_URL);
     var launchBtn = controls.btn;
     var iosAnchor = controls.anchor;
 
-    // D) iOS → Quick Look (pas de WebXR)
+    // 4) iOS → Quick Look (pas de WebXR)
     if (isIOS()) {
       if (USDZ_URL) {
         message("iOS détecté : appuyez sur « Lancer l’AR » pour ouvrir Quick Look.");
@@ -259,7 +273,7 @@
       return;
     }
 
-    // E) Android/Desktop → PlayCanvas
+    // 5) Android/Desktop → PlayCanvas
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -340,7 +354,7 @@
     app.root.addChild(modelRoot);
     var modelLoaded = false, placedOnce = false;
 
-    // ===== Blob Shadow (ombre de contact peinte) =====
+    // ===== Blob Shadow =====
     var blob = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
@@ -424,7 +438,6 @@
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(1, 1, 1);
 
-      // Petits ajustements matériaux (éviter rendu trop sombre sans IBL)
       var renders = instance.findComponents('render');
       for (var ri = 0; ri < renders.length; ri++) {
         var r = renders[ri];
@@ -449,7 +462,7 @@
 
     if (!app.xr.supported) { message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // Slider fiable : pointer events en capture (et blocage des interactions scène)
+    // Slider fiable
     var uiInteracting = false, draggingWrap = false, activePointerId = null;
     function insideWrap(target) { return rotWrap.contains(target); }
     function degFromPointer(e) {
@@ -483,7 +496,7 @@
     document.addEventListener("pointerup", endDrag, { capture: true, passive: false });
     document.addEventListener("pointercancel", endDrag, { capture: true, passive: false });
 
-    // Démarrage AR (exposé pour le bouton "Lancer l’AR")
+    // Démarrage AR (exposé pour le bouton)
     function activateAR() {
       if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
       if (!app.xr.domOverlay) app.xr.domOverlay = {};
@@ -508,7 +521,7 @@
     }
     app.keyboard.on("keydown", function (evt) { if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end(); });
 
-    // Hit-test HORIZONTAL uniquement (normale proche +Y)
+    // Hit-test HORIZONTAL
     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;
@@ -516,7 +529,6 @@
       return TMP_OUT.y >= minDot;
     }
 
-    // Hit Test global
     app.xr.hitTest.on("available", function () {
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
@@ -532,7 +544,6 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
-              // Ombre de contact
               blob = createBlobShadowAt(pos, rot);
 
               var e = new pc.Vec3(); rot.getEulerAngles(e);
@@ -548,7 +559,7 @@
       });
     });
 
-    // Déplacement XR (drag) — ignoré si UI active
+    // Déplacement XR
     var isDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
@@ -575,7 +586,7 @@
       inputSource.on("selectend", function () { isDragging = false; });
     });
 
-    // Desktop : rotation à la souris (clic droit ou Shift+clic gauche)
+    // Desktop : rotation souris
     var rotateMode = false, lastMouseX = 0;
     var ROTATE_SENSITIVITY = 0.25;
     app.mouse.on("mousedown", function (e) {