Update viewer_ar_ios.js

viewer_ar_ios.js

@@ -1,3 +1,4 @@
+<script>
 /* viewer_ar_ios.js — AR PlayCanvas + GLB/USDZ via config.json
    - Lit config.json (data-config) => { "glb_url": "...", "usdz_url": "..." }
    - iOS : AR Quick Look (USDZ) avec #allowsContentScaling=0 (pas de zoom)
@@ -106,17 +107,24 @@
   }
 
   // ============ UI / Overlay commun ============
+  // (On garde un style minimal intégré pour le message ; si tu utilises un CSS externe,
+  // tu peux déplacer ces règles dans ce fichier.)
   var css = [
-    ".pc-ar-msg{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10002;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:24px;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}",
+    /* Toast (bas) */
+    ".pc-ar-msg{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10002;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}",
+    /* Variante centrée + plus grande pour le message “Modèle chargé …” */
+    ".pc-ar-msg.pc-ar-msg--centerBig{top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:18px;padding:14px 18px;max-width:min(90vw,720px)}",
+
     "#xr-overlay-root{position:fixed;inset:0;z-index:10001;pointer-events:none}",
 
+    /* --- NE PAS MODIFIER : panneau Rotation --- */
     ".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:22px;text-align:center;opacity:.95}",
+    ".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:22px;opacity:.95}",
+    ".ar-ui .val{font-size:12px;opacity:.95}",
 
     /* iOS Quick Look button */
     "#ios-quicklook-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:10003;display:inline-block;pointer-events:auto}",
@@ -137,14 +145,25 @@
   }
   var overlayRoot = ensureOverlayRoot();
 
-  function message(msg) {
+  // ------ Système de message : toast (bas) ou centré agrandi ------
+  function getMessageEl() {
     var el = overlayRoot.querySelector(".pc-ar-msg");
     if (!el) {
       el = document.createElement("div");
       el.className = "pc-ar-msg";
       overlayRoot.appendChild(el);
     }
-    el.textContent = msg;
+    return el;
+  }
+  function messageToast(text) {
+    var el = getMessageEl();
+    el.classList.remove("pc-ar-msg--centerBig");
+    el.textContent = text;
+  }
+  function messageCenterBig(text) {
+    var el = getMessageEl();
+    el.classList.add("pc-ar-msg--centerBig");
+    el.textContent = text;
   }
 
   // iOS Quick Look URL (empêche le pinch to scale)
@@ -174,7 +193,7 @@
     img.alt = "Voir en AR";
     img.src =
       "data:image/svg+xml;charset=utf-8," +
-      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="160" height="44"><rect rx="8" ry="8" width="160" height="44" fill="black"/><text x="80" y="28" font-size="24" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
+      encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="180" height="48"><rect rx="10" ry="10" width="180" height="48" fill="black"/><text x="90" y="30" font-size="16" text-anchor="middle" fill="white" font-family="system-ui, -apple-system, Segoe UI, Roboto">Voir en AR</text></svg>');
 
     anchor.appendChild(img);
     document.body.appendChild(anchor);
@@ -230,6 +249,7 @@
     return canvas;
   }
 
+  // ---------- Panneau “Rotation” (inchangé) ----------
   function ensureSliderUI() {
     var p = overlayRoot.querySelector(".ar-ui");
     if (p) return p;
@@ -261,9 +281,9 @@
     if (isIOS()) {
       if (USDZ_URL) {
         ensureQuickLookButton(USDZ_URL);
-        message("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
+        messageToast("iOS détecté : utilisez le bouton « Voir en AR » (AR Quick Look).");
       } else {
-        message("iOS détecté, mais aucun 'usdz_url' dans config.json.");
+        messageToast("iOS détecté, mais aucun 'usdz_url' dans config.json.");
       }
       return;
     }
@@ -272,7 +292,7 @@
       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.");
+      messageToast("Impossible de charger PlayCanvas (réseau/CDN). Réessaie plus tard.");
       return;
     }
     initARApp(GLB_URL);
@@ -281,15 +301,18 @@
   // ============ App Android/Desktop (WebXR) ============
   function initARApp(GLB_URL) {
     var pc = window.pc;
+
+    // Canvas + UI
     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");
+    var sliderPanel = ensureSliderUI(); // (anciennement 'ui', plus explicite)
+    var rotTrack = sliderPanel.querySelector("#ar-rotY-wrap");     // (anciennement rotWrap)
+    var rotThumb = sliderPanel.querySelector("#ar-rotY-knob");     // (anciennement rotKnob)
+    var rotRangeInput = sliderPanel.querySelector("#ar-rotY");     // (anciennement rotYInput)
+    var rotValueLabel = sliderPanel.querySelector("#ar-rotY-val"); // (anciennement rotYVal)
 
     window.focus();
 
+    // --- Application PlayCanvas ---
     var app = new pc.Application(canvas, {
       mouse: new pc.Mouse(canvas),
       touch: new pc.TouchDevice(canvas),
@@ -305,23 +328,23 @@
     app.on("destroy", function () { window.removeEventListener("resize", onResize); });
     app.start();
 
-    // Rendu / PBR defaults
+    // --- Rendu / PBR defaults ---
     app.scene.gammaCorrection = pc.GAMMA_SRGB;
     app.scene.toneMapping = pc.TONEMAP_ACES;
     app.scene.exposure = 1;
     app.scene.ambientLight = new pc.Color(1, 1, 1);
 
-    // Camera + lumière
+    // --- Caméra + lumière directionnelle ---
     var camera = new pc.Entity("Camera");
     camera.addComponent("camera", { clearColor: new pc.Color(0, 0, 0, 0), farClip: 10000 });
     app.root.addChild(camera);
 
-    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);
+    var mainLight = new pc.Entity("Light");
+    mainLight.addComponent("light", { type: "directional", intensity: 1.0, castShadows: true, color: new pc.Color(1, 1, 1) });
+    mainLight.setLocalEulerAngles(45, 30, 0);
+    app.root.addChild(mainLight);
 
-    // Réticule
+    // --- Réticule ---
     var reticleMat = new pc.StandardMaterial();
     reticleMat.diffuse = new pc.Color(0.2, 0.8, 1.0);
     reticleMat.opacity = 0.85;
@@ -334,14 +357,15 @@
     reticle.enabled = false;
     app.root.addChild(reticle);
 
-    // Modèle
+    // --- Conteneur modèle ---
     var modelRoot = new pc.Entity("ModelRoot");
     modelRoot.enabled = false;
     app.root.addChild(modelRoot);
+
     var modelLoaded = false, placedOnce = false;
 
-    // ===== Blob Shadow =====
-    var blob = null;
+    // ===== Ombre de contact “blob” =====
+    var blobShadowEntity = null;
     var BLOB_SIZE = 0.4;
     var BLOB_OFFSET_Y = 0.005;
 
@@ -404,9 +428,9 @@
 
     function updateKnobFromY(yDeg) {
       var t = 1 - (yDeg / 360);
-      rotKnob.style.top = String(t * 100) + "%";
-      rotYInput.value = String(Math.round(yDeg));
-      rotYVal.textContent = String(Math.round(yDeg)) + "°";
+      rotThumb.style.top = String(t * 100) + "%";
+      rotRangeInput.value = String(Math.round(yDeg));
+      rotValueLabel.textContent = String(Math.round(yDeg)) + "°";
     }
     function applyRotationY(deg) {
       var y = clamp360(deg);
@@ -416,14 +440,14 @@
     }
 
     function updateBlobPositionUnder(pos, rotLikePlane) {
-      if (!blob) return;
-      blob.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
-      if (rotLikePlane) blob.setRotation(rotLikePlane);
+      if (!blobShadowEntity) return;
+      blobShadowEntity.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
+      if (rotLikePlane) blobShadowEntity.setRotation(rotLikePlane);
     }
 
     // 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; }
+      if (err) { console.error(err); messageToast("É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);
@@ -448,19 +472,21 @@
       baseEulerX = initE.x; baseEulerZ = initE.z;
 
       modelLoaded = true;
-      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
+
+      // >>> ICI : message centré et plus grand <<<
+      messageCenterBig("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) { messageToast("WebXR n’est pas supporté sur cet appareil."); return; }
 
-    // Slider fiable (pointer events en capture)
-    var uiInteracting = false;
-    var draggingWrap = false;
+    // ---------- Slider fiable (pointer events en capture) ----------
+    var isUIInteracting = false;
+    var isTrackDragging = false;
     var activePointerId = null;
 
-    function insideWrap(target) { return rotWrap.contains(target); }
+    function insideTrack(target) { return rotTrack.contains(target); }
     function degFromPointer(e) {
-      var rect = rotWrap.getBoundingClientRect();
+      var rect = rotTrack.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));
@@ -468,29 +494,29 @@
     }
 
     function onPointerDownCapture(e) {
-      if (!insideWrap(e.target)) return;
-      uiInteracting = true;
-      draggingWrap = true;
+      if (!insideTrack(e.target)) return;
+      isUIInteracting = true;
+      isTrackDragging = true;
       activePointerId = (e.pointerId != null) ? e.pointerId : 1;
-      if (rotWrap.setPointerCapture) {
-        try { rotWrap.setPointerCapture(activePointerId); } catch (er) {}
+      if (rotTrack.setPointerCapture) {
+        try { rotTrack.setPointerCapture(activePointerId); } catch (er) {}
       }
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     }
     function onPointerMoveCapture(e) {
-      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
+      if (!isTrackDragging || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
       applyRotationY(degFromPointer(e));
       e.preventDefault();
       e.stopPropagation();
     }
     function endDrag(e) {
-      if (!draggingWrap || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
-      draggingWrap = false;
-      uiInteracting = false;
-      if (rotWrap.releasePointerCapture) {
-        try { rotWrap.releasePointerCapture(activePointerId); } catch (er) {}
+      if (!isTrackDragging || ((e.pointerId != null ? e.pointerId : 1) !== activePointerId)) return;
+      isTrackDragging = false;
+      isUIInteracting = false;
+      if (rotTrack.releasePointerCapture) {
+        try { rotTrack.releasePointerCapture(activePointerId); } catch (er) {}
       }
       activePointerId = null;
       e.preventDefault();
@@ -504,7 +530,7 @@
 
     // --- Démarrage AR (Android/Desktop)
     function activateAR() {
-      if (!app.xr.isAvailable(pc.XRTYPE_AR)) { message("AR immersive indisponible sur cet appareil."); return; }
+      if (!app.xr.isAvailable(pc.XRTYPE_AR)) { messageToast("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, {
@@ -513,15 +539,16 @@
         callback: function (err) {
           if (err) {
             console.error("Échec du démarrage AR :", err);
-            message("Échec du démarrage AR : " + (err.message || err));
+            messageToast("Échec du démarrage AR : " + (err.message || err));
           }
         }
       });
     }
-    app.mouse.on("mousedown", function () { if (!app.xr.active && !uiInteracting) activateAR(); });
+    // Tap écran → démarre l'AR (si pas sur le slider)
+    app.mouse.on("mousedown", function () { if (!app.xr.active && !isUIInteracting) activateAR(); });
     if (app.touch) {
       app.touch.on("touchend", function (evt) {
-        if (!app.xr.active && !uiInteracting) activateAR();
+        if (!app.xr.active && !isUIInteracting) activateAR();
         evt.event.preventDefault();
         evt.event.stopPropagation();
       });
@@ -541,7 +568,7 @@
       app.xr.hitTest.start({
         entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
         callback: function (err, hitSource) {
-          if (err) { message("Le AR hit test n’a pas pu démarrer."); return; }
+          if (err) { messageToast("Le AR hit test n’a pas pu démarrer."); return; }
           hitSource.on("result", function (pos, rot) {
             if (!isHorizontalUpFacing(rot)) return;
 
@@ -554,7 +581,7 @@
               modelRoot.setPosition(pos);
 
               // Ombre de contact
-              blob = createBlobShadowAt(pos, rot);
+              blobShadowEntity = createBlobShadowAt(pos, rot);
 
               var e = new pc.Vec3();
               rot.getEulerAngles(e);
@@ -562,8 +589,10 @@
               applyRotationY(y0);
 
               placedOnce = true;
-              rotYInput.disabled = false;
-              message("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
+              rotRangeInput.disabled = false;
+
+              // Après placement, on repasse aux toasts bas classiques
+              messageToast("Objet placé. Glissez pour déplacer, tournez-le avec le slider →");
             }
           });
         }
@@ -571,80 +600,81 @@
     });
 
     // Déplacement XR (drag) — ignoré si UI active
-    var isDragging = false;
+    var isModelDragging = false;
     app.xr.input.on("add", function (inputSource) {
       inputSource.on("selectstart", function () {
-        if (uiInteracting) return;
+        if (isUIInteracting) return;
         if (!placedOnce || !modelLoaded) return;
 
         inputSource.hitTestStart({
           entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
           callback: function (err, transientSource) {
             if (err) return;
-            isDragging = true;
+            isModelDragging = true;
 
             transientSource.on("result", function (pos, rot) {
-              if (!isDragging) return;
+              if (!isModelDragging) return;
               if (!isHorizontalUpFacing(rot)) return;
               modelRoot.setPosition(pos);
               updateBlobPositionUnder(pos, rot);
             });
 
-            transientSource.once("remove", function () { isDragging = false; });
+            transientSource.once("remove", function () { isModelDragging = false; });
           }
         });
       });
-      inputSource.on("selectend", function () { isDragging = false; });
+      inputSource.on("selectend", function () { isModelDragging = false; });
     });
 
     // Desktop : rotation souris (ignore si UI)
-    var rotateMode = false, lastMouseX = 0;
+    var isRotateMode = false, lastMouseX = 0;
     var ROTATE_SENSITIVITY = 0.25;
     app.mouse.on("mousedown", function (e) {
-      if (!app.xr.active || !placedOnce || uiInteracting) return;
+      if (!app.xr.active || !placedOnce || isUIInteracting) return;
       if (e.button === 0 && !e.shiftKey) {
-        isDragging = true;
+        isModelDragging = true;
       } else if (e.button === 2 || (e.button === 0 && e.shiftKey)) {
-        rotateMode = true;
+        isRotateMode = true;
         lastMouseX = e.x;
       }
     });
     app.mouse.on("mousemove", function (e) {
-      if (!app.xr.active || !placedOnce || uiInteracting) return;
-      if (isDragging) {
+      if (!app.xr.active || !placedOnce || isUIInteracting) return;
+      if (isModelDragging) {
         if (reticle.enabled) {
           var p = reticle.getPosition();
           modelRoot.setPosition(p);
           updateBlobPositionUnder(p, null);
         }
-      } else if (rotateMode && modelRoot.enabled) {
+      } else if (isRotateMode && modelRoot.enabled) {
         var dx = e.x - lastMouseX;
         lastMouseX = e.x;
         applyRotationY(rotationYDeg + dx * ROTATE_SENSITIVITY);
       }
     });
-    app.mouse.on("mouseup", function () { isDragging = false; rotateMode = false; });
+    app.mouse.on("mouseup", function () { isModelDragging = false; isRotateMode = false; });
     window.addEventListener("contextmenu", function (e) { e.preventDefault(); });
 
     // Slider (accessibilité clavier)
-    rotYInput.disabled = true;
-    rotYInput.addEventListener("input", function (e) {
+    rotRangeInput.disabled = true;
+    rotRangeInput.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", 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("start", function () { messageToast("Session AR démarrée. Visez le sol pour détecter un plan…"); reticle.enabled = true; });
+    app.xr.on("end", function () { messageToast("Session AR terminée."); reticle.enabled = false; isModelDragging = false; isRotateMode = false; rotRangeInput.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 (!a) messageToast("AR immersive indisponible.");
+      else if (!app.xr.hitTest.supported) messageToast("AR Hit Test non supporté.");
+      else messageToast(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é.");
-    else message("Chargement du modèle…");
+    if (!app.xr.isAvailable(pc.XRTYPE_AR)) messageToast("AR immersive indisponible.");
+    else if (!app.xr.hitTest.supported) messageToast("AR Hit Test non supporté.");
+    else messageToast("Chargement du modèle…");
   }
 })();
+</script>