Update viewer_ar.js

viewer_ar.js

@@ -3,6 +3,7 @@
    - 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)
+   - Blob Shadow (ombre de contact) sous l’objet
 */
 
 (() => {
@@ -70,7 +71,7 @@
   }
 
   // ===== 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()=>{ 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(){
@@ -96,7 +97,7 @@
     const onResize = () => app.resizeCanvas(); window.addEventListener("resize", onResize); app.on("destroy",()=>window.removeEventListener("resize",onResize));
     app.start();
 
-    // ===== Rendu / PBR defaults (évite l'objet noir) =====
+    // ===== 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
@@ -109,7 +110,7 @@
 
     const 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); // direction lisible par défaut
+    light.setLocalEulerAngles(45, 30, 0);
     app.root.addChild(light);
 
     // Réticule
@@ -120,6 +121,53 @@
     const modelRoot = new pc.Entity("ModelRoot"); modelRoot.enabled = false; app.root.addChild(modelRoot);
     let 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
+
+    function makeBlobTexture(app, size = 256) {
+      const 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
+      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
+      });
+      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
+      blobMat.blendType = pc.BLEND_PREMULTIPLIED;
+      blobMat.depthWrite = false;                   // pour ne pas masquer l'objet
+      blobMat.diffuseMap = tex;
+      blobMat.update();
+
+      const 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);
+
+      app.root.addChild(e);
+      return e;
+    }
+
     // Euler de base (évite inversions)
     let baseEulerX=0, baseEulerZ=0;
 
@@ -140,6 +188,16 @@
       updateKnobFromY(y);
     }
 
+    // Helper : met à jour aussi l’ombre quand on déplace l’objet
+    function updateBlobPositionUnder(pos, rotLikePlane = null) {
+      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);
+      }
+    }
+
     // 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; }
@@ -147,16 +205,17 @@
       modelRoot.addChild(instance);
       modelRoot.setLocalScale(1,1,1);
 
-      // Fix matériaux (évite l'objet noir si diffuse ≠ 1 / IBL off)
+      // 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);
           }
-          if ('useSkybox' in m) m.useSkybox = true; // exploite l'ambiant/scene lighting
+          if ('useSkybox' in m) m.useSkybox = true;
           m.update();
         }
       }
@@ -221,7 +280,6 @@
       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}`); } }
       });
@@ -253,6 +311,9 @@
               modelRoot.enabled = true;
               modelRoot.setPosition(pos);
 
+              // Crée l’ombre de contact au même endroit/orientation
+              blob = createBlobShadowAt(pos, rot);
+
               const e = new pc.Vec3(); rot.getEulerAngles(e);
               // normalise yaw initiale 0..360
               const y0 = ((e.y % 360)+360)%360;
@@ -284,6 +345,7 @@
               if (!isDragging) return;
               if (!isHorizontalUpFacing(rot)) return;
               modelRoot.setPosition(pos);
+              updateBlobPositionUnder(pos, rot);   // <— l’ombre suit le modèle
             });
 
             transientSource.once("remove", () => { isDragging = false; });
@@ -296,7 +358,19 @@
     // 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) modelRoot.setPosition(reticle.getPosition()); } else if(rotateMode && modelRoot.enabled){ const dx=e.x-lastMouseX; lastMouseX=e.x; applyRotationY(rotationYDeg + dx*ROTATE_SENSITIVITY); }});
+    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); 
+      }
+    });
     app.mouse.on("mouseup",()=>{ isDragging=false; rotateMode=false; });
     window.addEventListener("contextmenu",(e)=>e.preventDefault());