Update viewer.js

viewer.js

@@ -17,8 +17,7 @@ async function loadImageAsTexture(url, app) {
         img.onerror = reject;
         img.src = url;
     });
-}  
-
+}
 
 // --- Patch all window.Image to force crossOrigin="anonymous" ---
 (function() {
@@ -26,7 +25,6 @@ async function loadImageAsTexture(url, app) {
   window.Image = function(...args) {
     const img = new OriginalImage(...args);
     img.crossOrigin = "anonymous";
-    // Optionally log image loading for debugging
     return img;
   };
 })();
@@ -103,7 +101,7 @@ export async function initializeViewer(config, instanceId) {
 
   presentoirScaleX = (config.presentoirScaleX !== undefined) ? parseFloat(config.presentoirScaleX) : 0;
   presentoirScaleY = (config.presentoirScaleY !== undefined) ? parseFloat(config.presentoirScaleY) : 0;
-  presentoirScaleZ = (config.presentoirScaleZ !== undefined) ? parseFloat(config.presentoirScaleZ) : 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;
@@ -146,6 +144,39 @@ 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 ---
+  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; };
+
+  canvas.addEventListener('pointerenter', onPointerEnter);
+  canvas.addEventListener('pointerleave', onPointerLeave);
+  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
+  const onKeyDownCapture = (e) => {
+    if (!isPointerOverCanvas) return;
+    if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) {
+      e.preventDefault(); // bloque le scroll page
+      // ne pas stopPropagation: PlayCanvas doit recevoir les touches
+    }
+  };
+  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);
+
   progressDialog.style.display = 'block';
 
   if (!pc) {
@@ -166,7 +197,7 @@ export async function initializeViewer(config, instanceId) {
   opts.graphicsDevice = device;
   opts.mouse = new pc.Mouse(canvas);
   opts.touch = new pc.TouchDevice(canvas);
-  opts.keyboard = new pc.Keyboard(canvas); 
+  opts.keyboard = new pc.Keyboard(canvas);
   opts.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
@@ -195,9 +226,19 @@ export async function initializeViewer(config, instanceId) {
   resizeObserver.observe(viewerContainer);
 
   window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+
+  // Nettoyage complet à la destruction
   app.on('destroy', () => {
     resizeObserver.disconnect();
-    if (opts.keyboard) opts.keyboard.detach && opts.keyboard.detach();
+    if (opts.keyboard && opts.keyboard.detach) opts.keyboard.detach();
+
+    window.removeEventListener('keydown', onKeyDownCapture, true);
+    canvas.removeEventListener('pointerenter', onPointerEnter);
+    canvas.removeEventListener('pointerleave', onPointerLeave);
+    canvas.removeEventListener('mousedown', focusCanvas);
+    canvas.removeEventListener('touchstart', focusCanvas);
+    canvas.removeEventListener('keydown', onCanvasKey);
+    canvas.removeEventListener('keyup', onCanvasKey);
   });
 
   // Assets after app exists
@@ -205,20 +246,16 @@ export async function initializeViewer(config, instanceId) {
     sogs: new pc.Asset('gsplat', 'gsplat', { url: sogsUrl }),
     orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-sgos.static.hf.space/orbit-camera.js" }),
     glb: new pc.Asset('glb', 'container', { url: glbUrl }),
-    presentoir: new pc.Asset('presentoir', 'container', {url: presentoirUrl}),
+    presentoir: new pc.Asset('presentoir', 'container', { url: presentoirUrl }),
   };
 
-
-  // /!\ ======================================== /!\
-  //const grilleTex = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/textures/grille_cadrillee_4k.jpg', app);
-  // /!\ ======================================== /!\
   for (const key in assets) app.assets.add(assets[key]);
 
-   const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
   loader.load(() => {
     app.start();
     progressDialog.style.display = 'none';
-    
+
     modelEntity = new pc.Entity('model');
     modelEntity.addComponent('gsplat', { asset: assets.sogs });
     modelEntity.setLocalPosition(modelX, modelY, modelZ);
@@ -229,24 +266,22 @@ export async function initializeViewer(config, instanceId) {
     const glbEntity = assets.glb.resource.instantiateRenderEntity();
     app.root.addChild(glbEntity);
 
-    const presentoirEntity =assets.presentoir.resource.instantiateRenderEntity();
+    const presentoirEntity = assets.presentoir.resource.instantiateRenderEntity();
     presentoirEntity.setLocalScale(presentoirScaleX, presentoirScaleY, presentoirScaleZ);
     app.root.addChild(presentoirEntity);
 
-    if(!espace_expo_bool){
-
+    if (!espace_expo_bool) {
       let matSol = new pc.StandardMaterial();
       matSol.blendType = pc.BLEND_NONE;
       matSol.emissive = new pc.Color(color_bg);
       matSol.emissiveIntensity = 1;
-      //matSol.emissiveMap = grilleTex;
       matSol.useLighting = false;
       matSol.update();
 
       traverse(presentoirEntity, node => {
         if (node.render && node.render.meshInstances) {
           for (let mi of node.render.meshInstances) {
-              mi.material = matSol;
+            mi.material = matSol;
           }
         }
       });
@@ -254,15 +289,16 @@ export async function initializeViewer(config, instanceId) {
       traverse(glbEntity, node => {
         if (node.render && node.render.meshInstances) {
           for (let mi of node.render.meshInstances) {
-              mi.material = matSol;
+            mi.material = matSol;
           }
         }
       });
     }
-    
+
     cameraEntity = new pc.Entity('camera');
-    cameraEntity.addComponent('camera', 
-      { clearColor: new pc.Color(color_bg),
+    cameraEntity.addComponent('camera',
+      {
+        clearColor: new pc.Color(color_bg),
         nearClip: 0.001,
         farClip: 100
       });
@@ -287,10 +323,8 @@ export async function initializeViewer(config, instanceId) {
     cameraEntity.script.create('orbitCameraInputTouch');
     cameraEntity.script.create('orbitCameraInputKeyboard', {
       attributes: {
-        forwardSpeed: 1.2,     // vitesses relatives à la distance
-        strafeSpeed: 1.2,
-        fastMultiplier: 2.5,   // Shift
-        slowMultiplier: 0.5    // Ctrl
+        forwardSpeed: 1.2, // vitesses relatives à la distance (vertical)
+        strafeSpeed: 1.2   // gauche/droite
       }
     });
     app.root.addChild(cameraEntity);
@@ -310,12 +344,10 @@ export async function initializeViewer(config, instanceId) {
             defaultVisible: !!config.showTooltipsDefault,
             moveDuration: config.tooltipMoveDuration || 0.6
           });
-        }).catch(e => {
-          // Tooltips optional: fail silently if missing
-        });
+        }).catch(() => { /* optional */ });
       }
     } catch (e) {
-      // Tooltips optional, fail silently
+      // optional
     }
 
     viewerInitialized = true;