Create viewer_ar.js

viewer_ar.js

@@ -0,0 +1,375 @@
+// script_ar.js
+(() => {
+  const PLAYCANVAS_CDN = "https://cdn.playcanvas.com/playcanvas-stable.min.js";
+  const GLB_URL = "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/AR/tests/fraisier.glb";
+
+  // ============ Utils DOM ============
+  const ensureCanvas = () => {
+    let canvas = document.getElementById("application-canvas");
+    if (!canvas) {
+      canvas = document.createElement("canvas");
+      canvas.id = "application-canvas";
+      document.body.appendChild(canvas);
+    }
+    return canvas;
+  };
+
+  const css = `
+    .pc-ar-msg {
+      position: fixed; left: 50%; transform: translateX(-50%);
+      bottom: 16px; z-index: 9999; padding: 10px 14px;
+      background: rgba(0,0,0,.65); color: #fff; border-radius: 8px;
+      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, 600px);
+      box-shadow: 0 6px 20px rgba(0,0,0,.25);
+      backdrop-filter: blur(4px);
+    }
+  `;
+  const styleTag = document.createElement("style");
+  styleTag.textContent = css;
+  document.head.appendChild(styleTag);
+
+  const message = (msg) => {
+    let el = document.querySelector(".pc-ar-msg");
+    if (!el) {
+      el = document.createElement("div");
+      el.className = "pc-ar-msg";
+      document.body.appendChild(el);
+    }
+    el.textContent = msg;
+  };
+
+  // ============ Loader PlayCanvas ============
+  const loadPcIfNeeded = () =>
+    new Promise((resolve, reject) => {
+      if (window.pc) return resolve();
+      const s = document.createElement("script");
+      s.src = PLAYCANVAS_CDN;
+      s.async = true;
+      s.onload = () => resolve();
+      s.onerror = () => reject(new Error("Échec du chargement de PlayCanvas"));
+      document.head.appendChild(s);
+    });
+
+  // ============ Main ============
+  loadPcIfNeeded()
+    .then(() => init())
+    .catch((e) => {
+      console.error(e);
+      message("Impossible de charger PlayCanvas.");
+    });
+
+  function init() {
+    const canvas = ensureCanvas();
+    window.focus();
+
+    // Crée l'app PlayCanvas (fond transparent pour l'AR)
+    const app = new pc.Application(canvas, {
+      mouse: new pc.Mouse(canvas),
+      touch: new pc.TouchDevice(canvas),
+      keyboard: new pc.Keyboard(window),
+      graphicsDeviceOptions: { alpha: true },
+    });
+
+    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+    app.setCanvasResolution(pc.RESOLUTION_AUTO);
+    app.graphicsDevice.maxPixelRatio = window.devicePixelRatio || 1;
+
+    const onResize = () => app.resizeCanvas();
+    window.addEventListener("resize", onResize);
+    app.on("destroy", () => window.removeEventListener("resize", onResize));
+
+    app.start();
+
+    // Caméra
+    const camera = new pc.Entity("Camera");
+    camera.addComponent("camera", {
+      clearColor: new pc.Color(0, 0, 0, 0),
+      farClip: 10000,
+    });
+    app.root.addChild(camera);
+
+    // Une lumière douce (utile en fallback / pré-AR)
+    const light = new pc.Entity("Light");
+    light.addComponent("light", {
+      type: "spot",
+      range: 30,
+      intensity: 1.2,
+      castShadows: false,
+    });
+    light.setLocalPosition(0, 10, 0);
+    app.root.addChild(light);
+
+    // Réticule (anneau) pour visualiser l’emplacement proposé par le hit-test
+    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();
+
+    const reticle = new pc.Entity("Reticle");
+    reticle.addComponent("render", { type: "torus", material: reticleMat });
+    reticle.setLocalScale(0.12, 0.005, 0.12);
+    reticle.enabled = false; // activé quand AR démarre
+    app.root.addChild(reticle);
+
+    // Conteneur du modèle GLB
+    const modelRoot = new pc.Entity("ModelRoot");
+    modelRoot.enabled = false; // activé après chargement + 1er placement
+    app.root.addChild(modelRoot);
+
+    let modelLoaded = false;
+    let placedOnce = false;
+
+    // Chargement GLB (Container)
+    app.assets.loadFromUrl(GLB_URL, "container", (err, asset) => {
+      if (err) {
+        console.error(err);
+        message("Échec du chargement du modèle GLB.");
+        return;
+      }
+      // Instancie le contenu GLB
+      const instance = asset.resource.instantiateRenderEntity({
+        castShadows: false,
+        receiveShadows: false,
+      });
+      modelRoot.addChild(instance);
+
+      // Mise à l’échelle raisonnable si le modèle est énorme/petit
+      // (ajuste si besoin)
+      modelRoot.setLocalScale(0.2, 0.2, 0.2);
+
+      modelLoaded = true;
+      message("Modèle chargé. Touchez l’écran pour démarrer l’AR.");
+    });
+
+    // ======== Gestion AR / Hit Test ========
+    if (!app.xr.supported) {
+      message("WebXR n’est pas supporté sur cet appareil.");
+      return;
+    }
+
+    const activateAR = () => {
+      if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
+        message("AR immersive indisponible sur cet appareil.");
+        return;
+      }
+      camera.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR, {
+        callback: (err) => {
+          if (err) {
+            message(`Échec du démarrage AR : ${err.message}`);
+          }
+        },
+      });
+    };
+
+    // Démarrer AR au premier tap/clic
+    app.mouse.on("mousedown", () => {
+      if (!app.xr.active) activateAR();
+    });
+    if (app.touch) {
+      app.touch.on("touchend", (evt) => {
+        if (!app.xr.active) activateAR();
+        evt.event.preventDefault();
+        evt.event.stopPropagation();
+      });
+    }
+
+    // ESC pour quitter
+    app.keyboard.on("keydown", (evt) => {
+      if (evt.key === pc.KEY_ESCAPE && app.xr.active) app.xr.end();
+    });
+
+    // Hit test global (pour le réticule et le premier placement auto)
+    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) => {
+            reticle.enabled = true;
+            reticle.setPosition(pos);
+            reticle.setRotation(rot);
+
+            // Premier placement auto du modèle dès que possible
+            if (modelLoaded && !placedOnce) {
+              modelRoot.enabled = true;
+              modelRoot.setPosition(pos);
+              // Conserver uniquement la yaw (rotation Y) issue du plan
+              const euler = new pc.Vec3();
+              rot.getEulerAngles(euler);
+              modelRoot.setEulerAngles(0, euler.y, 0);
+              placedOnce = true;
+              message("Objet placé. ⚠️ Glissez pour déplacer, pincez/2 doigts pour tourner.");
+            }
+          });
+        },
+      });
+    });
+
+    // État & helpers d’interaction
+    let isDragging = false;
+    let activeInputSource = null;
+    let rotateMode = false;
+    let lastAvgX = 0; // pour rotation à 2 doigts
+    let lastMouseX = 0;
+    const ROTATE_SENSITIVITY = 0.25; // degrés par pixel env.
+
+    // Déplacement avec un input source XR (touch en AR)
+    app.xr.input.on("add", (inputSource) => {
+      // Sélection (tap et maintien)
+      inputSource.on("selectstart", () => {
+        if (!placedOnce || !modelLoaded) return;
+
+        // Démarre un hit test TRANSITOIRE lié à la source pour suivre le doigt
+        inputSource.hitTestStart({
+          entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
+          callback: (err, transientSource) => {
+            if (err) return;
+            isDragging = true;
+            activeInputSource = { source: inputSource, ht: transientSource };
+
+            transientSource.on("result", (pos, rot) => {
+              if (!isDragging) return;
+              // Déplacer sur le plan détecté
+              modelRoot.setPosition(pos);
+            });
+
+            transientSource.once("remove", () => {
+              if (activeInputSource && activeInputSource.ht === transientSource) {
+                isDragging = false;
+                activeInputSource = null;
+              }
+            });
+          },
+        });
+      });
+
+      inputSource.on("selectend", () => {
+        isDragging = false;
+        activeInputSource = null;
+      });
+    });
+
+    // ======== Gestes Tactiles pour rotation (2 doigts) ========
+    if (app.touch) {
+      let touches = new Map();
+
+      const getAvgX = () => {
+        if (touches.size === 0) return 0;
+        let sum = 0;
+        touches.forEach((t) => (sum += t.x));
+        return sum / touches.size;
+      };
+
+      app.touch.on("touchstart", (e) => {
+        for (const t of e.touches) touches.set(t.id, { x: t.x, y: t.y });
+        if (touches.size >= 2) {
+          rotateMode = true;
+          lastAvgX = getAvgX();
+        }
+      });
+
+      app.touch.on("touchmove", (e) => {
+        for (const t of e.touches) {
+          if (touches.has(t.id)) touches.set(t.id, { x: t.x, y: t.y });
+        }
+        if (rotateMode && modelRoot.enabled) {
+          const avgX = getAvgX();
+          const dx = avgX - lastAvgX;
+          lastAvgX = avgX;
+          // Appliquer rotation Y
+          const euler = modelRoot.getEulerAngles();
+          modelRoot.setEulerAngles(euler.x, euler.y + dx * ROTATE_SENSITIVITY, euler.z);
+        }
+      });
+
+      app.touch.on("touchend", (e) => {
+        for (const t of e.changedTouches) touches.delete(t.id);
+        if (touches.size < 2) rotateMode = false;
+      });
+
+      app.touch.on("touchcancel", () => {
+        touches.clear();
+        rotateMode = false;
+      });
+    }
+
+    // ======== Souris (déplacement = clic gauche maintenu; rotation = clic droit ou Shift+clic) ========
+    app.mouse.on("mousedown", (e) => {
+      if (!app.xr.active || !placedOnce) return;
+
+      if (e.button === 0 && !e.shiftKey) {
+        // drag pour déplacement : on démarre un hit-test à partir du centre de l’écran à chaque move
+        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) return;
+
+      if (isDragging && app.xr.hitTest.supported) {
+        // Créer un hit test ponctuel lié au pointeur n’est pas direct via souris.
+        // Astuce : on projette un point écran -> monde en AR via hit test global du reticle
+        // Ici, on se sert du reticle déjà alimenté par le hit test continu pour repositionner rapidement.
+        if (reticle.enabled) {
+          const pos = reticle.getPosition();
+          modelRoot.setPosition(pos);
+        }
+      } else if (rotateMode && modelRoot.enabled) {
+        const dx = e.x - lastMouseX;
+        lastMouseX = e.x;
+        const euler = modelRoot.getEulerAngles();
+        modelRoot.setEulerAngles(euler.x, euler.y + dx * ROTATE_SENSITIVITY, euler.z);
+      }
+    });
+
+    app.mouse.on("mouseup", () => {
+      isDragging = false;
+      rotateMode = false;
+    });
+
+    // Empêcher le menu contextuel sur clic droit (utile pour la rotation)
+    window.addEventListener("contextmenu", (e) => e.preventDefault());
+
+    // ======== Événements AR globaux ========
+    app.xr.on("start", () => {
+      message("Session AR démarrée. Visez le sol pour détecter un plan…");
+      reticle.enabled = true;
+    });
+
+    app.xr.on("end", () => {
+      message("Session AR terminée.");
+      reticle.enabled = false;
+      isDragging = false;
+      rotateMode = false;
+      activeInputSource = null;
+    });
+
+    app.xr.on(`available:${pc.XRTYPE_AR}`, (available) => {
+      if (!available) {
+        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…");
+      }
+    });
+
+    // Messages initiaux
+    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…");
+    }
+  }
+})();