Update deplacement_dans_env/viewer_pr_env.js

deplacement_dans_env/viewer_pr_env.js

@@ -1,69 +1,43 @@
-// viewer_pr_env.js — robuste v2 (multi‑CDN PlayCanvas import)
-// ============================================================================
-// - Boot non-bloquant : l'app démarre tout de suite (caméra au root)
-// - Import PlayCanvas **robuste** : ESM multi‑CDN (esm.run → jsDelivr → unpkg)
-//   puis fallback **UMD** (playcanvas.js) si ESM bloqué par CSP/iframe
-// - Ammo (WASM) en parallèle, timeout + double API (promise/callback)
-// - Colliders mesh ajoutés après 1ʳᵉ frame (postrender)
-// - Player capsule créé seulement si Ammo OK, puis caméra reparentée
-// - GSplat/GLB chargés avec logs + timeout ; DPR dynamique ; logs jalons
-// - Ne charge pas le script de contrôle caméra (à ajouter côté scène)
-// ============================================================================
+// viewer.js
+// ==============================
 
 /* -------------------------------------------
-   Error surface (avant tout)
--------------------------------------------- */
-window.addEventListener('error', (e) => {
-  console.error('[BOOT] Uncaught error:', e.message || e.error, e);
-});
-window.addEventListener('unhandledrejection', (e) => {
-  console.error('[BOOT] Unhandled promise rejection:', e.reason);
-});
-console.log('[BOOT] JS boot reached');
-
-/* -------------------------------------------
-   State (module / instance)
+   Utils
 -------------------------------------------- */
-let pc;
-export let app = null;
-export let cameraEntity = null;
-export let playerEntity = null; // capsule dynamique (rigidbody)
-export let envEntity = null;    // GLB (environnement)
-export let modelEntity = null;  // GSplat principal (.sog)
-
-let viewerInitialized = false;
-let resizeObserver = null;
-let resizeTimeout = null;
 
-// Config / paramètres courants
-let sogUrl, glbUrl, presentoirUrl;
-let color_bg_hex, color_bg;
-let espace_expo_bool;
-
-// Camera spawn
-let chosenCameraX, chosenCameraY, chosenCameraZ;
-
-// DPR / perf
-let maxDevicePixelRatio = 1.75;
-let interactDpr = 1.0;
-let idleRestoreDelay = 350;
-let idleTimer = null;
-
-// Physique
-let ammoBaseUrl = 'https://playcanvas.github.io/examples/lib/ammo/'; // surchargable par config
-let wantPhysics = true; // souhait ; peut être désactivé si Ammo KO
-let gravityVec = null; // défini via config
+// (Conservé pour compat, même si .sog n'en a pas besoin)
+async function loadImageAsTexture(url, app) {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = function () {
+      const tex = new pc.Texture(app.graphicsDevice, {
+        width: img.width,
+        height: img.height,
+        format: pc.PIXELFORMAT_R8_G8_B8_A8
+      });
+      tex.setSource(img);
+      resolve(tex);
+    };
+    img.onerror = reject;
+    img.src = url;
+  });
+}
 
-/* -------------------------------------------
-   Utils
--------------------------------------------- */
-const stamp = () => new Date().toISOString().slice(11,19);
-const step = (label, extra) => console.log(`[${stamp()}] [VIEWER] ${label}`, extra ?? '');
+// Patch global Image -> force CORS
+(function () {
+  const OriginalImage = window.Image;
+  window.Image = function (...args) {
+    const img = new OriginalImage(...args);
+    img.crossOrigin = "anonymous";
+    return img;
+  };
+})();
 
 function hexToRgbaArray(hex) {
   try {
-    hex = String(hex || '').replace('#', '');
-    if (hex.length === 6) hex += 'FF';
+    hex = String(hex || "").replace("#", "");
+    if (hex.length === 6) hex += "FF";
     if (hex.length !== 8) return [1, 1, 1, 1];
     const num = parseInt(hex, 16);
     return [
@@ -73,151 +47,137 @@ function hexToRgbaArray(hex) {
       (num & 0xff) / 255
     ];
   } catch (e) {
-    console.warn('[viewer] hexToRgbaArray error:', e);
+    console.warn("hexToRgbaArray error:", e);
     return [1, 1, 1, 1];
   }
 }
 
-function traverse(entity, cb) {
-  cb(entity);
-  if (entity.children && entity.children.length) {
-    entity.children.forEach((c) => traverse(c, cb));
+// Parcours récursif d'une hiérarchie d'entités
+function traverse(entity, callback) {
+  callback(entity);
+  if (entity.children) {
+    entity.children.forEach((child) => traverse(child, callback));
   }
 }
 
-function isMobileUA() {
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-  const isAndroid = /Android/i.test(navigator.userAgent);
-  return isIOS || isAndroid;
-}
-
-async function importPlayCanvasRobust(timeoutMs = 6000) {
-  const sourcesESM = [
-    'https://esm.run/playcanvas',
-    'https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.mjs',
-    'https://unpkg.com/playcanvas@latest/build/playcanvas.mjs'
-  ];
+/* -------------------------------------------
+   Chargement unique de ctrl_camera_pr_env.js
+-------------------------------------------- */
 
-  // Essais ESM
-  for (const url of sourcesESM) {
-    try {
-      console.log('[PC-IMPORT] Try ESM:', url);
-      const mod = await Promise.race([
-        import(/* @vite-ignore */ url),
-        new Promise((_, rej) => setTimeout(() => rej(new Error('ESM timeout')), timeoutMs))
-      ]);
-      if (mod) {
-        console.log('[PC-IMPORT] ESM OK:', url);
-        return mod; // module ESM
-      }
-    } catch (e) {
-      console.warn('[PC-IMPORT] ESM failed:', url, e);
-    }
+async function ensureOrbitScriptsLoaded() {
+  if (window.__PLY_ORBIT_LOADED__) return;
+  if (window.__PLY_ORBIT_LOADING__) {
+    await window.__PLY_ORBIT_LOADING__;
+    return;
   }
 
-  // Fallback UMD
-  const sourcesUMD = [
-    'https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.js',
-    'https://unpkg.com/playcanvas@latest/build/playcanvas.js'
-  ];
-  for (const url of sourcesUMD) {
-    try {
-      console.log('[PC-IMPORT] Try UMD:', url);
-      await new Promise((resolve, reject) => {
-        const s = document.createElement('script');
-        s.src = url; s.async = true; s.onload = resolve; s.onerror = reject;
-        document.head.appendChild(s);
-      });
-      if (window.pc) { console.log('[PC-IMPORT] UMD OK:', url); return window.pc; }
-    } catch (e) {
-      console.warn('[PC-IMPORT] UMD failed:', url, e);
-    }
-  }
-  throw new Error('PlayCanvas import failed on all sources');
-}
+  window.__PLY_ORBIT_LOADING__ = new Promise((resolve, reject) => {
+    const s = document.createElement("script");
+    // IMPORTANT : charger le script free-camera + collisions (pas l'ancienne orbit-camera)
+    s.src = "https://mikafil-viewer-sgos.static.hf.space/deplacement_dans_env/ctrl_camera_pr_env.js";
+    s.async = true;
+    s.onload = () => {
+      window.__PLY_ORBIT_LOADED__ = true;
+      resolve();
+    };
+    s.onerror = (e) => {
+      console.error("[viewer.js] Failed to load ctrl_camera_pr_env.js", e);
+      reject(e);
+    };
+    document.head.appendChild(s);
+  });
 
-async function loadAmmoWithTimeout(baseUrl, timeoutMs = 4000) {
-  try {
-    pc.WasmModule.setConfig('Ammo', {
-      glueUrl: `${baseUrl}ammo.wasm.js`,
-      wasmUrl: `${baseUrl}ammo.wasm.wasm`,
-      fallbackUrl: `${baseUrl}ammo.js`
-    });
-  } catch (e) {
-    console.warn('[Ammo] setConfig failed (ignored):', e);
-  }
+  await window.__PLY_ORBIT_LOADING__;
+}
 
-  // 1) API Promise
-  try {
-    const maybePromise = pc.WasmModule.getInstance('Ammo', `${baseUrl}ammo.wasm.js`);
-    if (maybePromise && typeof maybePromise.then === 'function') {
-      step('Ammo: waiting (promise API)…');
-      await Promise.race([
-        maybePromise,
-        new Promise((_, rej) => setTimeout(() => rej(new Error('Ammo load timeout (promise)')), timeoutMs))
-      ]);
-      step('Ammo: ready (promise API)');
-      return true;
-    }
-  } catch (e) {
-    console.warn('[Ammo] promise API failed:', e);
-  }
+/* -------------------------------------------
+   State (par module = par instance importée)
+-------------------------------------------- */
 
-  // 2) API callback
-  let resolved = false;
-  try {
-    step('Ammo: waiting (callback API)…');
-    await Promise.race([
-      new Promise((resolve) => pc.WasmModule.getInstance('Ammo', () => { resolved = true; resolve(); })),
-      new Promise((_, rej) => setTimeout(() => rej(new Error('Ammo load timeout (callback)')), timeoutMs))
-    ]);
-    if (resolved) { step('Ammo: ready (callback API)'); return true; }
-  } catch (e) {
-    console.warn('[Ammo] callback API failed:', e);
-  }
+let pc;
+export let app = null;
+let cameraEntity = null;
+let modelEntity = null;
+let envEntity = null;          // <<< GLB instancié (focusEntity collisions)
+let viewerInitialized = false;
+let resizeObserver = null;
+let resizeTimeout = null;
 
-  console.warn('[viewer] Ammo not available — physics disabled.');
-  return false;
-}
+// paramètres courants de l'instance
+let chosenCameraX, chosenCameraY, chosenCameraZ;
+let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minY;
+let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
+let presentoirScaleX, presentoirScaleY, presentoirScaleZ;
+let sogUrl, glbUrl, presentoirUrl;
+let color_bg_hex, color_bg, espace_expo_bool;
 
-function safeGetEl(id, label) {
-  const el = document.getElementById(id);
-  if (!el) console.warn(`[viewer] Missing DOM #${id} (${label})`);
-  return el;
-}
+// perf dynamique
+let maxDevicePixelRatio = 1.75;   // plafond par défaut (configurable)
+let interactDpr = 1.0;            // DPR pendant interaction
+let idleRestoreDelay = 350;       // ms avant de restaurer le DPR
+let idleTimer = null;
 
 /* -------------------------------------------
-   Initialisation principale
+   Initialisation
 -------------------------------------------- */
-export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) { console.warn('[viewer] initializeViewer called twice — ignored'); return; }
-  step('A: initializeViewer begin', { instanceId });
-
-  // ---- Lecture config ----
-  const mobile = isMobileUA();
 
-  sogUrl = config.sog_url || config.sogs_json_url || null;
-  glbUrl = (config.glb_url !== undefined) ? config.glb_url : null;
-  presentoirUrl = (config.presentoir_url !== undefined) ? config.presentoir_url : null;
+export async function initializeViewer(config, instanceId) {
+  if (viewerInitialized) return;
 
-  color_bg_hex = config.canvas_background !== undefined ? config.canvas_background : '#FFFFFF';
-  espace_expo_bool = config.espace_expo_bool !== undefined ? !!config.espace_expo_bool : false;
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+
+  // --- Configuration ---
+  // Nouveau format .sog (et compat si seul sogs_json_url est présent)
+  sogUrl = config.sog_url || config.sogs_json_url;
+
+  glbUrl =
+    config.glb_url !== undefined
+      ? config.glb_url
+      : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb";
+
+  presentoirUrl =
+    config.presentoir_url !== undefined
+      ? config.presentoir_url
+      : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb";
+
+  minZoom = parseFloat(config.minZoom || "1");
+  maxZoom = parseFloat(config.maxZoom || "20");
+  minAngle = parseFloat(config.minAngle || "-2000");
+  maxAngle = parseFloat(config.maxAngle || "2000");
+  minAzimuth = config.minAzimuth !== undefined ? parseFloat(config.minAzimuth) : -360;
+  maxAzimuth = config.maxAzimuth !== undefined ? parseFloat(config.maxAzimuth) : 360;
+  minY = config.minY !== undefined ? parseFloat(config.minY) : 0;
+
+  modelX = config.modelX !== undefined ? parseFloat(config.modelX) : 0;
+  modelY = config.modelY !== undefined ? parseFloat(config.modelY) : 0;
+  modelZ = config.modelZ !== undefined ? parseFloat(config.modelZ) : 0;
+  modelScale = config.modelScale !== undefined ? parseFloat(config.modelScale) : 1;
+  modelRotationX = config.modelRotationX !== undefined ? parseFloat(config.modelRotationX) : 0;
+  modelRotationY = config.modelRotationY !== undefined ? parseFloat(config.modelRotationY) : 0;
+  modelRotationZ = config.modelRotationZ !== undefined ? parseFloat(config.modelRotationZ) : 0;
+
+  presentoirScaleX = config.presentoirScaleX !== undefined ? parseFloat(config.presentoirScaleX) : 0;
+  presentoirScaleY = config.presentoirScaleY !== undefined ? parseFloat(config.presentoirScaleY) : 0;
+  presentoirScaleZ = config.presentoirScaleZ !== undefined ? parseFloat(config.presentoirScaleZ) : 0;
+
+  const cameraX = config.cameraX !== undefined ? parseFloat(config.cameraX) : 0;
+  const cameraY = config.cameraY !== undefined ? parseFloat(config.cameraY) : 2;
+  const cameraZ = config.cameraZ !== undefined ? parseFloat(config.cameraZ) : 5;
+
+  const cameraXPhone = config.cameraXPhone !== undefined ? parseFloat(config.cameraXPhone) : cameraX;
+  const cameraYPhone = config.cameraYPhone !== undefined ? parseFloat(config.cameraYPhone) : cameraY;
+  const cameraZPhone = config.cameraZPhone !== undefined ? parseFloat(config.cameraZPhone) : cameraZ * 1.5;
+
+  color_bg_hex = config.canvas_background !== undefined ? config.canvas_background : "#FFFFFF";
+  espace_expo_bool = config.espace_expo_bool !== undefined ? config.espace_expo_bool : false;
   color_bg = hexToRgbaArray(color_bg_hex);
 
-  // Camera spawn — valeurs par défaut
-  const camX = config.cameraX !== undefined ? parseFloat(config.cameraX) : 0;
-  const camY = config.cameraY !== undefined ? parseFloat(config.cameraY) : 1.6;
-  const camZ = config.cameraZ !== undefined ? parseFloat(config.cameraZ) : 4.0;
+  chosenCameraX = isMobile ? cameraXPhone : cameraX;
+  chosenCameraY = isMobile ? cameraYPhone : cameraY;
+  chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  const camXPhone = config.cameraXPhone !== undefined ? parseFloat(config.cameraXPhone) : camX;
-  const camYPhone = config.cameraYPhone !== undefined ? parseFloat(config.cameraYPhone) : camY;
-  const camZPhone = config.cameraZPhone !== undefined ? parseFloat(config.cameraZPhone) : camZ * 1.5;
-
-  chosenCameraX = mobile ? camXPhone : camX;
-  chosenCameraY = mobile ? camYPhone : camY;
-  chosenCameraZ = mobile ? camZPhone : camZ;
-
-  // DPR / perf
+  // Options perf configurables
   if (config.maxDevicePixelRatio !== undefined) {
     maxDevicePixelRatio = Math.max(0.75, parseFloat(config.maxDevicePixelRatio) || maxDevicePixelRatio);
   }
@@ -228,87 +188,119 @@ export async function initializeViewer(config, instanceId) {
     idleRestoreDelay = Math.max(120, parseInt(config.idleRestoreDelayMs, 10) || idleRestoreDelay);
   }
 
-  // Physique (souhait)
-  if (config.ammoBaseUrl) ammoBaseUrl = String(config.ammoBaseUrl).endsWith('/') ? config.ammoBaseUrl : (config.ammoBaseUrl + '/');
-  wantPhysics = config.usePhysics === false ? false : true; // par défaut true
-  const freeFly = !!config.freeFly; // si true => pas de gravité
-  gravityVec = freeFly ? new pc.Vec3(0, 0, 0) : new pc.Vec3(0, -9.81, 0);
-
-  // ---- Canvas / DOM ----
-  const canvasId = 'canvas-' + instanceId;
-  const progressId = 'progress-dialog-' + instanceId;
-  const containerId = 'viewer-container-' + instanceId;
-  const progressDialog = safeGetEl(progressId, 'progress');
-  const viewerContainer = safeGetEl(containerId, 'container');
-  if (!viewerContainer) throw new Error('Viewer container not found');
+  // --- Prépare le canvas unique à cette instance ---
+  const canvasId = "canvas-" + instanceId;
+  const progressDialog = document.getElementById("progress-dialog-" + instanceId);
+  const viewerContainer = document.getElementById("viewer-container-" + instanceId);
 
   const old = document.getElementById(canvasId);
   if (old) old.remove();
 
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.id = canvasId;
-  canvas.className = 'ply-canvas';
-  canvas.style.width = '100%';
-  canvas.style.height = '100%';
-  canvas.setAttribute('tabindex', '0');
-  if (progressDialog) viewerContainer.insertBefore(canvas, progressDialog);
-  else viewerContainer.appendChild(canvas);
-
-  // Interaction UI de base (prévenir scroll)
-  canvas.style.touchAction = 'none';
-  canvas.style.webkitTouchCallout = 'none';
-  canvas.addEventListener('gesturestart', (e) => e.preventDefault());
-  canvas.addEventListener('gesturechange', (e) => e.preventDefault());
-  canvas.addEventListener('gestureend', (e) => e.preventDefault());
-  canvas.addEventListener('dblclick', (e) => e.preventDefault());
-  canvas.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
-
-  // Focus au survol pour capter le clavier
+  canvas.className = "ply-canvas";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.setAttribute("tabindex", "0");
+  viewerContainer.insertBefore(canvas, progressDialog);
+
+  // interactions de base
+  canvas.style.touchAction = "none";
+  canvas.style.webkitTouchCallout = "none";
+  canvas.addEventListener("gesturestart", (e) => e.preventDefault());
+  canvas.addEventListener("gesturechange", (e) => e.preventDefault());
+  canvas.addEventListener("gestureend", (e) => e.preventDefault());
+  canvas.addEventListener("dblclick", (e) => e.preventDefault());
+  canvas.addEventListener(
+    "touchstart",
+    (e) => {
+      if (e.touches.length > 1) e.preventDefault();
+    },
+    { passive: false }
+  );
+  canvas.addEventListener(
+    "wheel",
+    (e) => {
+      e.preventDefault();
+    },
+    { passive: false }
+  );
+
+  // Bloque le scroll page uniquement quand le pointeur est sur le canvas
+  const scrollKeys = new Set([
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "PageUp",
+    "PageDown",
+    "Home",
+    "End",
+    " ",
+    "Space",
+    "Spacebar"
+  ]);
   let isPointerOverCanvas = false;
   const focusCanvas = () => canvas.focus({ preventScroll: true });
-  const onPointerEnter = () => { isPointerOverCanvas = true; focusCanvas(); };
-  const onPointerLeave = () => { isPointerOverCanvas = false; if (document.activeElement === canvas) canvas.blur(); };
-  const onCanvasBlur   = () => { isPointerOverCanvas = false; };
-
-  canvas.addEventListener('pointerenter', onPointerEnter);
-  canvas.addEventListener('pointerleave', onPointerLeave);
-  canvas.addEventListener('mouseenter', onPointerEnter);
-  canvas.addEventListener('mouseleave', onPointerLeave);
-  canvas.addEventListener('mousedown', focusCanvas);
-  canvas.addEventListener('touchstart', focusCanvas, { passive: true });
-  canvas.addEventListener('blur', onCanvasBlur);
-
-  // Empêche les touches scroll pendant survol
-  const scrollKeys = new Set(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','PageUp','PageDown','Home','End',' ','Space','Space','Spacebar']);
-  const onKeyDownCapture = (e) => { if (!isPointerOverCanvas) return; if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) e.preventDefault(); };
-  window.addEventListener('keydown', onKeyDownCapture, true);
-
-  if (progressDialog) progressDialog.style.display = 'block';
-
-  // ---- Import PlayCanvas (robuste) ----
-  if (!pc) {
-    step('B: importing PlayCanvas (robust)…');
-    try {
-      const modOrPc = await importPlayCanvasRobust( mobile ? 8000 : 6000 );
-      pc = modOrPc && modOrPc.Application ? modOrPc : (window.pc || modOrPc);
-      window.pc = pc; // debug convenience
-      step('B+: PlayCanvas imported OK');
-    } catch (e) {
-      console.error('[PC-IMPORT] FAILED:', e);
-      throw e; // surface d’erreurs l’affichera
+
+  const onPointerEnter = () => {
+    isPointerOverCanvas = true;
+    focusCanvas();
+  };
+  const onPointerLeave = () => {
+    isPointerOverCanvas = false;
+    if (document.activeElement === canvas) canvas.blur();
+  };
+  const onCanvasBlur = () => {
+    isPointerOverCanvas = false;
+  };
+
+  canvas.addEventListener("pointerenter", onPointerEnter);
+  canvas.addEventListener("pointerleave", onPointerLeave);
+  canvas.addEventListener("mouseenter", onPointerEnter);
+  canvas.addEventListener("mouseleave", onPointerLeave);
+  canvas.addEventListener("mousedown", focusCanvas);
+  canvas.addEventListener(
+    "touchstart",
+    () => {
+      focusCanvas();
+    },
+    { passive: false }
+  );
+  canvas.addEventListener("blur", onCanvasBlur);
+
+  const onKeyDownCapture = (e) => {
+    if (!isPointerOverCanvas) return;
+    if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) {
+      e.preventDefault();
     }
+  };
+  window.addEventListener("keydown", onKeyDownCapture, true);
+
+  progressDialog.style.display = "block";
+
+  // --- Charge PlayCanvas lib ESM (une par module/instance) ---
+  if (!pc) {
+    pc = await import("https://esm.run/playcanvas");
+    window.pc = pc; // utiles pour tooltips.js
   }
 
-  // ---- Crée l’Application (démarrage non-bloquant) ----
-  step('C: createGraphicsDevice');
-  const device = await pc.createGraphicsDevice(canvas, { deviceTypes: ['webgl2', 'webgl1'], antialias: false });
+  // --- Crée l'Application ---
+  const device = await pc.createGraphicsDevice(canvas, {
+    deviceTypes: ["webgl2"],
+    glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+    twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+    antialias: false
+  });
+
+  // Cap DPR pour limiter le coût CPU/GPU
   device.maxPixelRatio = Math.min(window.devicePixelRatio || 1, maxDevicePixelRatio);
 
   const opts = new pc.AppOptions();
   opts.graphicsDevice = device;
-  opts.mouse   = new pc.Mouse(canvas);
-  opts.touch   = new pc.TouchDevice(canvas);
-  opts.keyboard= new pc.Keyboard(canvas);
+  opts.mouse = new pc.Mouse(canvas);
+  opts.touch = new pc.TouchDevice(canvas);
+  opts.keyboard = new pc.Keyboard(canvas);
   opts.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
@@ -318,31 +310,14 @@ export async function initializeViewer(config, instanceId) {
     pc.CollisionComponentSystem,
     pc.RigidbodyComponentSystem
   ];
+  // GSplatHandler gère nativement les .sog
   opts.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler, pc.GSplatHandler];
 
   app = new pc.Application(canvas, opts);
   app.setCanvasFillMode(pc.FILLMODE_NONE);
   app.setCanvasResolution(pc.RESOLUTION_AUTO);
-  app.scene.gravity = gravityVec || new pc.Vec3(0, -9.81, 0);
 
-  // Démarrer la boucle tout de suite (rendu garanti)
-  step('D: app.start()');
-  app.start();
-  step('D+: app started');
-
-  // Caméra fallback — toujours visible même si Ammo KO
-  step('E: create fallback camera');
-  cameraEntity = new pc.Entity('camera');
-  cameraEntity.addComponent('camera', {
-    clearColor: new pc.Color(color_bg),
-    nearClip: 0.03,
-    farClip: 500
-  });
-  cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-  app.root.addChild(cameraEntity);
-  cameraEntity.lookAt(new pc.Vec3(0,1,0));
-
-  // Resize observé (debounce)
+  // --- Debounce resize (moins de rafales) ---
   resizeObserver = new ResizeObserver((entries) => {
     if (!entries || !entries.length) return;
     if (resizeTimeout) clearTimeout(resizeTimeout);
@@ -352,111 +327,112 @@ export async function initializeViewer(config, instanceId) {
   });
   resizeObserver.observe(viewerContainer);
 
-  window.addEventListener('resize', () => {
+  window.addEventListener("resize", () => {
     if (resizeTimeout) clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(() => {
       app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
     }, 60);
   });
 
-  app.on('destroy', () => {
-    try { resizeObserver.disconnect(); } catch {}
+  // Nettoyage complet
+  app.on("destroy", () => {
+    try {
+      resizeObserver.disconnect();
+    } catch {}
     if (opts.keyboard && opts.keyboard.detach) opts.keyboard.detach();
-    window.removeEventListener('keydown', onKeyDownCapture, true);
-
-    canvas.removeEventListener('pointerenter', onPointerEnter);
-    canvas.removeEventListener('pointerleave', onPointerLeave);
-    canvas.removeEventListener('mouseenter', onPointerEnter);
-    canvas.removeEventListener('mouseleave', onPointerLeave);
-    canvas.removeEventListener('mousedown', focusCanvas);
-    canvas.removeEventListener('touchstart', focusCanvas);
-    canvas.removeEventListener('blur', onCanvasBlur);
+    window.removeEventListener("keydown", onKeyDownCapture, true);
+
+    canvas.removeEventListener("pointerenter", onPointerEnter);
+    canvas.removeEventListener("pointerleave", onPointerLeave);
+    canvas.removeEventListener("mouseenter", onPointerEnter);
+    canvas.removeEventListener("mouseleave", onPointerLeave);
+    canvas.removeEventListener("mousedown", focusCanvas);
+    canvas.removeEventListener("touchstart", focusCanvas);
+    canvas.removeEventListener("blur", onCanvasBlur);
   });
 
-  // ---- Charger assets SOG + GLB (tolérant) ----
-  const assets = [];
-  let sogAsset = null, glbAsset = null;
+  // --- Enregistre et charge les assets en 1 phase pour SOG + GLB (focusEntity prêt avant la caméra) ---
+  const sogAsset = new pc.Asset("gsplat", "gsplat", { url: sogUrl });
+  const glbAsset = new pc.Asset("glb", "container", { url: glbUrl });
+  app.assets.add(sogAsset);
+  app.assets.add(glbAsset);
 
-  if (sogUrl) { sogAsset = new pc.Asset('gsplat', 'gsplat', { url: sogUrl }); app.assets.add(sogAsset); assets.push(sogAsset); }
-  if (glbUrl) { glbAsset = new pc.Asset('glb', 'container', { url: glbUrl }); app.assets.add(glbAsset); assets.push(glbAsset); }
+  // Assure la free-cam + collisions
+  await ensureOrbitScriptsLoaded();
 
-  step('F: requesting assets', { sog: !!sogUrl, glb: !!glbUrl });
-
-  await new Promise((resolve) => {
-    if (!assets.length) return resolve();
-    const loader = new pc.AssetListLoader(assets, app.assets);
-    let done = false;
-    const finish = (label) => { if (!done) { done = true; step('F+: assets loaded (' + label + ')'); resolve(); } };
-    loader.on('error', (e) => { console.warn('[viewer] Asset load error:', e); finish('with errors'); });
-    loader.load(() => finish('ok'));
-    setTimeout(() => { if (!done) { console.warn('[viewer] Asset load timeout — continuing'); finish('timeout'); } }, 10000);
+  // ---------- CHARGEMENT SOG + GLB AVANT CREATION CAMERA ----------
+  await new Promise((resolve, reject) => {
+    const loader = new pc.AssetListLoader([sogAsset, glbAsset], app.assets);
+    loader.load(() => resolve());
+    loader.on('error', reject);
   });
 
-  if (progressDialog) { progressDialog.style.display = 'none'; step('G: progress hidden'); }
-
-  // ---- Crée le modèle GSplat (optionnel) ----
-  if (sogAsset) {
-    modelEntity = new pc.Entity('model');
-    modelEntity.addComponent('gsplat', { asset: sogAsset });
-    app.root.addChild(modelEntity);
-    step('H: gsplat entity created');
-  }
-
-  // ---- Instancier le GLB d’environnement ----
-  envEntity = glbAsset && glbAsset.resource ? glbAsset.resource.instantiateRenderEntity() : null;
-  if (envEntity) { envEntity.name = 'ENV_GLTF'; app.root.addChild(envEntity); step('I: env GLB instanced'); }
-  else { console.warn('[viewer] No environment GLB — physics will be skipped.'); }
-
-  // ---- Matériau "fond uni" si pas d'espace expo ----
-  if (!espace_expo_bool && envEntity) {
-    const matSol = new pc.StandardMaterial();
-    matSol.blendType = pc.BLEND_NONE;
-    matSol.emissive = new pc.Color(color_bg);
-    matSol.emissiveIntensity = 1;
-    matSol.useLighting = false;
-    matSol.update();
-    traverse(envEntity, (node) => {
-      if (node.render && node.render.meshInstances) {
-        for (const mi of node.render.meshInstances) mi.material = matSol;
-      }
-    });
-    step('I+: env recolored (flat)');
-  }
-
-  // ---- Physique : chargement Ammo en parallèle, colliders après 1ère frame ----
-  if (wantPhysics) {
-    (async () => {
-      try {
-        const ok = await loadAmmoWithTimeout(ammoBaseUrl, isMobileUA() ? 8000 : 5000).catch(() => false);
-        if (!ok) { step('P: Ammo unavailable — rendering without physics'); return; }
-
-        if (envEntity) {
-          app.once('postrender', () => {
-            const applyStaticMesh = (e) => {
-              if (e.render && !e.collision) { try { e.addComponent('collision', { type: 'mesh' }); } catch (err) { console.warn('[phys] add collision failed:', err); } }
-              if (!e.rigidbody) { try { e.addComponent('rigidbody', { type: 'static', friction: 0.6, restitution: 0.0 }); } catch (err) { console.warn('[phys] add rigidbody failed:', err); } }
-              else if (e.rigidbody && e.rigidbody.type !== 'static') { e.rigidbody.type = 'static'; }
-            };
-            const stack=[envEntity];
-            while (stack.length){ const n=stack.pop(); applyStaticMesh(n); n.children?.forEach(c=>stack.push(c)); }
-            step('P+: static mesh colliders ready');
-          });
-        }
-
-        createPlayerCapsuleAndAttachCamera(app, config);
-        step('Q: physics ON (player created)');
-      } catch (e) {
-        console.warn('[phys] init failed:', e);
-      }
-    })();
+  app.start(); // démarre l'update loop dès que possible
+  progressDialog.style.display = "none";
+
+  // --- Modèle principal (GSplat via .sog) ---
+  modelEntity = new pc.Entity("model");
+  modelEntity.addComponent("gsplat", { asset: sogAsset });
+  modelEntity.setLocalPosition(modelX, modelY, modelZ);
+  modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+  modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+  app.root.addChild(modelEntity);
+
+  // --- Instancier le GLB d’environnement (collision) ---
+  envEntity = glbAsset.resource ? glbAsset.resource.instantiateRenderEntity() : null;
+  if (envEntity) {
+    envEntity.name = "ENV_GLTF";
+    app.root.addChild(envEntity);
+    // NOTE : évite de changer l'échelle ici, sauf si nécessaire. Si tu DOIS :
+    // envEntity.setLocalScale(1,1,1); // garde l'échelle d'import cohérente
   } else {
-    step('P: physics disabled by config (usePhysics=false)');
+    console.warn("[viewer.js] GLB resource missing: collisions will fallback on GSplat (aucun mesh).");
   }
 
-  // Ajuster taille initiale
+  // --- Caméra + scripts d’input (free-cam nommée 'orbitCamera' pour compat) ---
+  cameraEntity = new pc.Entity("camera");
+  cameraEntity.addComponent("camera", {
+    clearColor: new pc.Color(color_bg),
+    nearClip: 0.001,
+    farClip: 100
+  });
+  cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+  cameraEntity.lookAt(modelEntity.getPosition());
+  cameraEntity.addComponent("script");
+
+  // >>> focusEntity = GLB en priorité (sinon fallback gsplat) <<<
+  cameraEntity.script.create("orbitCamera", {
+    attributes: {
+      focusEntity: envEntity || modelEntity,
+      // Attributs hérités pour compat, mais seront interprétés par la free-cam
+      inertiaFactor: 0.2,
+      distanceMax: maxZoom,
+      distanceMin: minZoom,
+      pitchAngleMax: maxAngle,
+      pitchAngleMin: minAngle,
+      yawAngleMax: maxAzimuth,
+      yawAngleMin: minAzimuth,
+      minY: minY,
+      frameOnStart: false
+    }
+  });
+  cameraEntity.script.create("orbitCameraInputMouse");
+  cameraEntity.script.create("orbitCameraInputTouch");
+  cameraEntity.script.create("orbitCameraInputKeyboard", {
+    attributes: {
+      forwardSpeed: 1.2,
+      strafeSpeed: 1.2
+    }
+  });
+  app.root.addChild(cameraEntity);
+
+  // Taille initiale
   app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-  // DPR dynamique : réduit pendant interaction
+  // IMPORTANT : si la free-cam est active, ne pas "forcer" un reset d'orbite.
+  app.once("update", () => resetViewerCamera());
+
+  // ---------- Perf dynamique : DPR temporairement réduit pendant interaction ----------
   const setDpr = (val) => {
     const clamped = Math.max(0.5, Math.min(val, maxDevicePixelRatio));
     if (app.graphicsDevice.maxPixelRatio !== clamped) {
@@ -464,6 +440,7 @@ export async function initializeViewer(config, instanceId) {
       app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
     }
   };
+
   const bumpInteraction = () => {
     setDpr(interactDpr);
     if (idleTimer) clearTimeout(idleTimer);
@@ -471,73 +448,142 @@ export async function initializeViewer(config, instanceId) {
       setDpr(Math.min(window.devicePixelRatio || 1, maxDevicePixelRatio));
     }, idleRestoreDelay);
   };
-  ['mousedown', 'mousemove', 'mouseup', 'wheel', 'touchstart', 'touchmove', 'keydown']
-    .forEach((ev) => canvas.addEventListener(ev, bumpInteraction, { passive: true }));
 
-  viewerInitialized = true;
-  step('Z: initializeViewer done', { physicsRequested: wantPhysics });
-}
+  const interactionEvents = ["mousedown", "mousemove", "mouseup", "wheel", "touchstart", "touchmove", "keydown"];
+  interactionEvents.forEach((ev) => {
+    canvas.addEventListener(ev, bumpInteraction, { passive: true });
+  });
 
-/* -------------------------------------------
-   Helpers: création Player capsule + cam
--------------------------------------------- */
-function createPlayerCapsuleAndAttachCamera(app, config) {
-  if (playerEntity && playerEntity.rigidbody) { step('Q+: player already exists'); return; }
+  // ---------- CHARGEMENT DIFFÉRÉ : présentoir et tooltips ----------
+  setTimeout(async () => {
+    try {
+      const presentoirAsset = new pc.Asset("presentoir", "container", { url: presentoirUrl });
+      app.assets.add(presentoirAsset);
+      await new Promise((resolve) => {
+        const loader2 = new pc.AssetListLoader([presentoirAsset], app.assets);
+        loader2.load(() => resolve());
+      });
 
-  playerEntity = new pc.Entity('Player');
-  const capsuleRadius = config.capsuleRadius !== undefined ? parseFloat(config.capsuleRadius) : 0.30;
-  const capsuleHeight = config.capsuleHeight !== undefined ? parseFloat(config.capsuleHeight) : 1.60;
+      const presentoirEntity =
+        presentoirAsset.resource ? presentoirAsset.resource.instantiateRenderEntity() : null;
+      if (presentoirEntity) {
+        presentoirEntity.setLocalScale(presentoirScaleX, presentoirScaleY, presentoirScaleZ);
+        app.root.addChild(presentoirEntity);
+      }
 
-  try { playerEntity.addComponent('collision', { type: 'capsule', radius: capsuleRadius, height: capsuleHeight }); }
-  catch (e) { console.warn('[phys] add capsule collision failed:', e); }
+      // Si pas d'espace expo : recolore GLB & présentoir pour fond uni
+      if (!espace_expo_bool) {
+        const matSol = new pc.StandardMaterial();
+        matSol.blendType = pc.BLEND_NONE;
+        matSol.emissive = new pc.Color(color_bg);
+        matSol.emissiveIntensity = 1;
+        matSol.useLighting = false;
+        matSol.update();
+
+        if (presentoirEntity) {
+          traverse(presentoirEntity, (node) => {
+            if (node.render && node.render.meshInstances) {
+              for (const mi of node.render.meshInstances) mi.material = matSol;
+            }
+          });
+        }
 
-  try {
-    playerEntity.addComponent('rigidbody', {
-      type: 'dynamic',
-      mass: 70,
-      friction: 0.45,
-      restitution: 0.0,
-      linearDamping: 0.15,
-      angularDamping: 0.999
-    });
-    playerEntity.rigidbody.angularFactor = new pc.Vec3(0, 0, 0);
-  } catch (e) { console.warn('[phys] add rigidbody failed:', e); }
-
-  playerEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-  app.root.addChild(playerEntity);
-
-  const eyes = config.eyesOffsetY !== undefined ? parseFloat(config.eyesOffsetY) : Math.max(0.1, capsuleHeight * 0.9);
-  try {
-    cameraEntity.reparent(playerEntity);
-    cameraEntity.setLocalPosition(0, eyes, 0);
-    cameraEntity.setLocalEulerAngles(0, 0, 0);
-  } catch (e) { console.warn('[phys] camera reparent failed:', e); }
+        if (envEntity) {
+          traverse(envEntity, (node) => {
+            if (node.render && node.render.meshInstances) {
+              for (const mi of node.render.meshInstances) mi.material = matSol;
+            }
+          });
+        }
+      }
+
+      // Tooltips (optionnels)
+      try {
+        if (config.tooltips_url) {
+          import("./tooltips.js")
+            .then((tooltipsModule) => {
+              tooltipsModule.initializeTooltips({
+                app,
+                cameraEntity,
+                modelEntity,
+                tooltipsUrl: config.tooltips_url,
+                defaultVisible: !!config.showTooltipsDefault,
+                moveDuration: config.tooltipMoveDuration || 0.6
+              });
+            })
+            .catch(() => { /* optional */ });
+        }
+      } catch (e) { /* optional */ }
+    } catch (e) {
+      console.warn("[viewer.js] Deferred assets load failed:", e);
+    }
+  }, 0);
 
-  const freeFly = !!config.freeFly;
-  app.scene.gravity = freeFly ? new pc.Vec3(0,0,0) : new pc.Vec3(0,-9.81,0);
+  viewerInitialized = true;
 }
 
 /* -------------------------------------------
-   API helper : repositionner caméra/joueur
+   Reset caméra (API)
 -------------------------------------------- */
-export function resetViewerCamera(x, y, z) {
-  if (!app || !cameraEntity) { console.warn('[viewer] resetViewerCamera: app/camera missing'); return; }
-  const nx = (x !== undefined) ? parseFloat(x) : chosenCameraX;
-  const ny = (y !== undefined) ? parseFloat(y) : chosenCameraY;
-  const nz = (z !== undefined) ? parseFloat(z) : chosenCameraZ;
 
-  if (playerEntity && playerEntity.rigidbody) {
-    try {
-      playerEntity.rigidbody.teleport(nx, ny, nz, playerEntity.getRotation());
-      playerEntity.rigidbody.linearVelocity = pc.Vec3.ZERO.clone();
-      playerEntity.rigidbody.angularVelocity = pc.Vec3.ZERO.clone();
-      step('resetViewerCamera: teleported player', { nx, ny, nz });
-    } catch (e) {
-      console.warn('[viewer] teleport failed, fallback to camera setPosition:', e);
-      cameraEntity.setPosition(nx, ny, nz);
+export function resetViewerCamera() {
+  try {
+    if (!cameraEntity || !modelEntity || !app) return;
+    const camScript = cameraEntity.script && cameraEntity.script.orbitCamera;
+    if (!camScript) return;
+
+    const modelPos = modelEntity.getPosition();
+
+    // Si c'est une FREE-CAM (notre script), ne pas toucher à des champs d'orbite.
+    // On se contente éventuellement de réaligner le regard.
+    const looksLikeOrbit =
+      ("pivotPoint" in camScript) ||
+      ("_distance" in camScript) ||
+      ("_updatePosition" in camScript);
+
+    if (!looksLikeOrbit) {
+      // Free camera : juste orienter vers le modèle si souhaité
+      cameraEntity.lookAt(modelPos);
+      return;
     }
-  } else {
-    cameraEntity.setPosition(nx, ny, nz);
-    step('resetViewerCamera: camera moved (no player)', { nx, ny, nz });
+
+    // --- Cas d'une vraie orbit-camera (compat héritée) ---
+    const orbitCam = camScript;
+
+    const tempEnt = new pc.Entity();
+    tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+    tempEnt.lookAt(modelPos);
+
+    const dist = new pc.Vec3()
+      .sub2(new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ), modelPos)
+      .length();
+
+    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+    cameraEntity.lookAt(modelPos);
+
+    orbitCam.pivotPoint = modelPos.clone();
+    orbitCam._targetDistance = dist;
+    orbitCam._distance = dist;
+
+    const rot = tempEnt.getRotation();
+    const fwd = new pc.Vec3();
+    rot.transformVector(pc.Vec3.FORWARD, fwd);
+
+    const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
+    const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
+    const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
+    const fNoYaw = new pc.Vec3();
+    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
+    const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
+
+    orbitCam._targetYaw = yaw;
+    orbitCam._yaw = yaw;
+    orbitCam._targetPitch = pitch;
+    orbitCam._pitch = pitch;
+    if (orbitCam._updatePosition) orbitCam._updatePosition();
+
+    tempEnt.destroy();
+  } catch (e) {
+    console.error("[viewer.js] resetViewerCamera error:", e);
   }
 }