Update viewer.js

viewer.js

@@ -144,23 +144,44 @@ export async function initializeViewer(config, instanceId) {
   canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
   canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
 
-  // --- Clavier : empêcher le scroll de la page quand le pointeur est au-dessus du viewer ---
+  // --- Clavier : bloquer le scroll seulement quand le pointeur est au-dessus du canvas ---
   const scrollKeys = new Set([
-    'ArrowUp','ArrowDown','ArrowLeft','ArrowRight',
-    'PageUp','PageDown','Home','End',' ','Space','Spacebar'
+    '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; };
 
+  const onPointerEnter = () => {
+    isPointerOverCanvas = true;
+    focusCanvas();
+  };
+
+  const onPointerLeave = () => {
+    isPointerOverCanvas = false;
+    // rendre immédiatement le scroll à la page sans recliquer
+    if (document.activeElement === canvas) {
+      canvas.blur();
+    }
+  };
+
+  // Fallback souris si pointer events indisponibles
   canvas.addEventListener('pointerenter', onPointerEnter);
   canvas.addEventListener('pointerleave', onPointerLeave);
+  canvas.addEventListener('mouseenter', onPointerEnter);
+  canvas.addEventListener('mouseleave', onPointerLeave);
+
+  // Forcer le focus quand on interagit
   canvas.addEventListener('mousedown', focusCanvas);
   canvas.addEventListener('touchstart', () => { focusCanvas(); }, { passive: false });
 
-  // Capture au niveau fenêtre pour bloquer le scroll, mais laisser PlayCanvas recevoir l'event
+  // Si le canvas perd le focus (Alt+Tab, click ailleurs…), on arrête de bloquer
+  const onCanvasBlur = () => { isPointerOverCanvas = false; };
+  canvas.addEventListener('blur', onCanvasBlur);
+
+  // Capture au niveau fenêtre pour bloquer le scroll, mais seulement si pointeur dessus
   const onKeyDownCapture = (e) => {
     if (!isPointerOverCanvas) return;
     if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) {
@@ -170,12 +191,8 @@ export async function initializeViewer(config, instanceId) {
   };
   window.addEventListener('keydown', onKeyDownCapture, true);
 
-  // Ceinture et bretelles: si le canvas a le focus, on bloque ici aussi
-  const onCanvasKey = (e) => {
-    if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) e.preventDefault();
-  };
-  canvas.addEventListener('keydown', onCanvasKey);
-  canvas.addEventListener('keyup', onCanvasKey);
+  // ⚠️ IMPORTANT : on ne bloque plus keydown/keyup sur le canvas lui-même.
+  // Ça évite de devoir “recliquer” pour retrouver le scroll.
 
   progressDialog.style.display = 'block';
 
@@ -233,12 +250,14 @@ export async function initializeViewer(config, instanceId) {
     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('keydown', onCanvasKey);
-    canvas.removeEventListener('keyup', onCanvasKey);
+    canvas.removeEventListener('blur', onCanvasBlur);
   });
 
   // Assets after app exists
@@ -323,8 +342,8 @@ export async function initializeViewer(config, instanceId) {
     cameraEntity.script.create('orbitCameraInputTouch');
     cameraEntity.script.create('orbitCameraInputKeyboard', {
       attributes: {
-        forwardSpeed: 1.2, // vitesses relatives à la distance (vertical)
-        strafeSpeed: 1.2   // gauche/droite
+        forwardSpeed: 1.2, // vertical (relatif à la distance)
+        strafeSpeed: 1.2   // gauche/droite (relatif à la distance)
       }
     });
     app.root.addChild(cameraEntity);