Update viewer_ar.js

viewer_ar.js

@@ -1,4 +1,5 @@
-/* script_ar.js — AR PlayCanvas + GLB HuggingFace
+/* script_ar.js — AR PlayCanvas + GLB HuggingFace (GLB via config.json)
+   - Lit config.json (data-config) => { "glb_url": "..." }
    - Hit-test AR (HORIZONTAUX uniquement) + placement + drag (XR)
    - Slider custom Yaw (360° en haut → 0° en bas), knob centré, rail plein
    - Blocage total des interactions scène quand on touche le slider
@@ -7,14 +8,22 @@
 */
 
 (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"]
-  };
+  // ===== Récup config.json depuis data-config =====
+  function findConfigUrl() {
+    var el = document.currentScript || null;
+    if (!el) {
+      var scripts = document.getElementsByTagName('script');
+      for (var i = scripts.length - 1; i >= 0; i--) {
+        if (scripts[i].getAttribute && scripts[i].getAttribute('data-config')) {
+          el = scripts[i];
+          break;
+        }
+      }
+    }
+    if (!el) return null;
+    var url = el.getAttribute('data-config');
+    return url || null;
+  }
 
   function timeout(ms) {
     return new Promise(function (_res, rej) {
@@ -22,6 +31,26 @@
     });
   }
 
+  async function loadConfigJson(url) {
+    if (!url) return null;
+    try {
+      var resp = await fetch(url, { cache: 'no-store' });
+      if (!resp.ok) throw new Error("HTTP " + resp.status);
+      var json = await resp.json();
+      return json;
+    } catch (e) {
+      console.error("Erreur chargement config.json:", e);
+      return null;
+    }
+  }
+
+  // ===== PlayCanvas version fixée =====
+  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"]
+  };
+
   async function loadPlayCanvasRobust(opts) {
     opts = opts || {};
     var esmFirst = (typeof opts.esmFirst === "boolean") ? opts.esmFirst : true;
@@ -39,9 +68,7 @@
             if (!window.pc) window.pc = ns;
             return window.pc;
           }
-        } catch (e) {
-          // continue
-        }
+        } catch (e) { /* continue */ }
       }
       throw new Error("ESM failed");
     }
@@ -62,9 +89,7 @@
             timeout(loadTimeoutMs)
           ]);
           if (window.pc && window.pc.Application) return window.pc;
-        } catch (e) {
-          // continue
-        }
+        } catch (e) { /* continue */ }
       }
       throw new Error("UMD failed");
     }
@@ -145,8 +170,16 @@
     return p;
   }
 
-  // ===== Boot =====
+  // ===== Boot : charge config.json => GLB_URL => PlayCanvas => App =====
   (async function () {
+    // 1) Lire la config (glb_url)
+    var cfgUrl = findConfigUrl();
+    var cfg = await loadConfigJson(cfgUrl);
+    var GLB_URL = (cfg && typeof cfg.glb_url === "string" && cfg.glb_url) ?
+                  cfg.glb_url :
+                  "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae_no_metallic.glb";
+
+    // 2) Charger PlayCanvas
     try {
       await loadPlayCanvasRobust({ esmFirst: true, loadTimeoutMs: 15000 });
     } catch (e) {
@@ -154,11 +187,13 @@
       message("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
-    initARApp();
+
+    // 3) Lancer l'app avec l'URL lue
+    initARApp(GLB_URL);
   })();
 
   // ===== App =====
-  function initARApp() {
+  function initARApp(GLB_URL) {
     var pc = window.pc;
     var canvas = ensureCanvas();
     var ui = ensureSliderUI();
@@ -223,19 +258,19 @@
     var BLOB_SIZE = 0.4;
     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);
+      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.5)'); // centre sombre
-      grd.addColorStop(1, 'rgba(0,0,0,0.0)');  // bords transparents
+      grd.addColorStop(1, 'rgba(0,0,0,0.0)'); // bords transparents
       ctx.fillStyle = grd;
       ctx.fillRect(0, 0, size, size);
-    
-      const tex = new pc.Texture(app.graphicsDevice, {
+
+      var tex = new pc.Texture(app.graphicsDevice, {
         width: size,
         height: size,
         format: pc.PIXELFORMAT_R8_G8_B8_A8,
@@ -247,44 +282,32 @@
       return tex;
     }
 
-
     function createBlobShadowAt(pos, rot) {
-      const tex = makeBlobTexture(app, 256);
-    
-      const blobMat = new pc.StandardMaterial();
-      // Couleur noire (ombre)
-      blobMat.diffuse.set(0, 0, 0);
-    
-      // >>> CLÉ : utiliser l’alpha de la texture pour la transparence
+      var tex = makeBlobTexture(app, 256);
+
+      var blobMat = new pc.StandardMaterial();
+      blobMat.diffuse = new pc.Color(0, 0, 0);
       blobMat.opacity = 1.0;
-      blobMat.opacityMap = tex;              // on se sert du canal A
+      blobMat.opacityMap = tex;              // utilise alpha pour la transparence
       blobMat.opacityMapChannel = 'a';
-    
-      // Pas besoin d’éclairage sur une “ombre peinte”
       blobMat.useLighting = false;
-    
-      // Mélange standard + pas d’écriture dans le depth (évite de masquer le modèle)
-      blobMat.blendType = pc.BLEND_NORMAL;   // (si halos bizarres, essayer PREMULTIPLIED)
+      blobMat.blendType = pc.BLEND_NORMAL;
       blobMat.depthWrite = false;
-    
-      // Optionnel: adoucir un poil le tri/transpa
-      blobMat.alphaTest = 0;                 // on ne découpe pas “dur”, on laisse le gradient
+      blobMat.alphaTest = 0;
       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 pour éviter le z-fighting
+
       e.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
-      e.setRotation(rot);                    // suit le plan horizontal détecté
+      e.setRotation(rot);
       e.setLocalScale(BLOB_SIZE, 1, BLOB_SIZE);
-    
+
       app.root.addChild(e);
       return e;
     }
 
-
     // Euler base
     var baseEulerX = 0, baseEulerZ = 0;
 
@@ -311,14 +334,14 @@
       if (rotLikePlane) blob.setRotation(rotLikePlane);
     }
 
-    // Chargement GLB
+    // Chargement 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
+      // Fix matériaux (anti-objets trop sombres)
       var renders = instance.findComponents('render');
       for (var ri = 0; ri < renders.length; ri++) {
         var r = renders[ri];