Update viewer_ar.js

viewer_ar.js

@@ -1,11 +1,12 @@
 /* script_ar.js — AR PlayCanvas + GLB HuggingFace
-   - Hit-test AR (horizontaux uniquement) + placement + drag
-   - Slider custom (360° en haut → 0° en bas), knob centré, rail plein
-   - Tap sur la box grise capturé en phase CAPTURE => l’objet ne se déplace jamais
+   - 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
+   - Éclairage PBR par défaut (sans WebXR light estimation)
 */
 
 (() => {
-  const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/danae.glb";
+  const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
 
   // ===== PlayCanvas version fixée =====
   const PC_VERSION = "2.11.7";
@@ -31,13 +32,13 @@
 
     .ar-ui .label{font-size:12px;text-align:center;opacity:.95}
 
-    /* Grande zone tactile */
+    /* 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 (haut->bas), centré */
+    /* 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 centré */
+    /* 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}
 
     /* Input range caché (pour accessibilité/valeur) */
@@ -68,8 +69,10 @@
     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(); })();
 
+  // ===== App =====
   function initARApp(){
     const pc = window.pc;
     const canvas = ensureCanvas();
@@ -93,11 +96,21 @@
     const onResize = () => app.resizeCanvas(); window.addEventListener("resize", onResize); app.on("destroy",()=>window.removeEventListener("resize",onResize));
     app.start();
 
-    // Camera + lumière
+    // ===== Rendu / PBR defaults (évite l'objet noir) =====
+    app.scene.gammaCorrection = pc.GAMMA_SRGB;
+    app.scene.toneMapping     = pc.TONEMAP_ACES;
+    app.scene.exposure        = 1.25;                    // ajuste 0.9–1.8 si besoin
+    app.scene.ambientLight    = new pc.Color(0.35, 0.35, 0.35);
+
+    // 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 }); app.root.addChild(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: 10.1, castShadows: true }); light.setLocalPosition(0,10,0); app.root.addChild(light);
+    light.addComponent("light", { type: "directional", intensity: 2.0, castShadows: false, color: new pc.Color(1,1,1) });
+    light.setLocalEulerAngles(45, 30, 0); // direction lisible par défaut
+    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();
@@ -127,12 +140,26 @@
       updateKnobFromY(y);
     }
 
-    // Chargement GLB
+    // 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:false, receiveShadows:false });
       modelRoot.addChild(instance);
-      modelRoot.setLocalScale(1,1,1);
+      modelRoot.setLocalScale(0.2,0.2,0.2);
+
+      // Fix matériaux (évite l'objet noir si diffuse ≠ 1 / IBL off)
+      const renders = instance.findComponents('render');
+      for (const r of renders) {
+        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);
+          }
+          if ('useSkybox' in m) m.useSkybox = true; // exploite l'ambiant/scene lighting
+          m.update();
+        }
+      }
 
       const initE = modelRoot.getEulerAngles();
       baseEulerX = initE.x; baseEulerZ = initE.z;
@@ -143,40 +170,36 @@
 
     if (!app.xr.supported){ message("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // ===== Gestion fiable du slider : Pointer Events en CAPTURE =====
+    // ===== Slider fiable : Pointer Events en CAPTURE =====
     let uiInteracting=false;
     let draggingWrap=false;
     let activePointerId=null;
 
     const insideWrap = (target) => rotWrap.contains(target);
-
-    const getDegFromPointer = (e) => {
+    const degFromPointer = (e) => {
       const rect = rotWrap.getBoundingClientRect();
-      const y = e.clientY ?? (e.touches && e.touches[0] && e.touches[0].clientY) ?? 0;
+      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; // inversion : haut=360, bas=0
+      return (1 - t) * 360; // 360 en haut, 0 en bas
     };
 
-    // pointerdown CAPTURE → on “prend la main” AVANT PlayCanvas
     const onPointerDownCapture = (e) => {
       if (!insideWrap(e.target)) return;
       uiInteracting = true;
       draggingWrap = true;
       activePointerId = e.pointerId ?? 1;
       try { rotWrap.setPointerCapture?.(activePointerId); } catch {}
-      applyRotationY(getDegFromPointer(e));
+      applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     };
-
     const onPointerMoveCapture = (e) => {
       if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
-      applyRotationY(getDegFromPointer(e));
+      applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     };
-
     const endDrag = (e) => {
       if (!draggingWrap || (e.pointerId ?? 1) !== activePointerId) return;
       draggingWrap = false;
@@ -192,12 +215,13 @@
     document.addEventListener("pointerup",   endDrag,                 { capture: true, passive: false });
     document.addEventListener("pointercancel", endDrag,               { capture: true, passive: false });
 
-    // --- Démarrage AR
+    // --- Démarrage AR (sans light-estimation)
     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"],
+        // PAS de "light-estimation" ici (demandé)
         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}`); } }
       });
@@ -212,14 +236,14 @@
     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; }
 
-    // Hit Test
+    // Hit Test global (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) => {
-            if (!isHorizontalUpFacing(rot)) return;
+            if (!isHorizontalUpFacing(rot)) return;   // horizontaux uniquement
 
             reticle.enabled = true;
             reticle.setPosition(pos);
@@ -230,7 +254,9 @@
               modelRoot.setPosition(pos);
 
               const e = new pc.Vec3(); rot.getEulerAngles(e);
-              applyRotationY(((e.y % 360)+360)%360);
+              // normalise yaw initiale 0..360
+              const y0 = ((e.y % 360)+360)%360;
+              applyRotationY(y0);
 
               placedOnce = true;
               rotYInput.disabled = false;