Update js_scripts/index.js

js_scripts/index.js

@@ -379,26 +379,36 @@ const currentScriptTag = document.currentScript;
     }
   });
   
-  // --- Handle wheel events at the document level ---
-  // This allows normal scrolling when mouse is not over the viewer
-  document.addEventListener('wheel', function(event) {
-    // Only prevent default if mouse is over viewer
-    // This allows normal page scrolling otherwise
-    if (isMouseOverViewer && cameraEntity && cameraEntity.script && cameraEntity.script.orbitCameraInputMouse) {
-      event.preventDefault();
+  // --- Prevent app from hijacking all wheel events ---
+  const handleWheel = function(event) {
+    // Check if mouse is over the viewer
+    if (!isMouseOverViewer) {
+      // Allow normal page scrolling
+      return true;
+    }
+    
+    // Otherwise apply zooming, but prevent default only for viewer area
+    event.stopPropagation();
+    
+    if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
+      const camera = cameraEntity.camera;
+      const orbitCamera = cameraEntity.script.orbitCamera;
+      const sensitivity = cameraEntity.script.orbitCameraInputMouse ? 
+                          cameraEntity.script.orbitCameraInputMouse.distanceSensitivity || 0.4 : 0.4;
       
-      // Manually handle the zoom
-      if (cameraEntity.camera.projection === pc.PROJECTION_PERSPECTIVE) {
-        const sensitivity = cameraEntity.script.orbitCameraInputMouse.distanceSensitivity || 0.4;
-        const distance = cameraEntity.script.orbitCamera.distance;
-        cameraEntity.script.orbitCamera.distance -= event.deltaY * 0.01 * sensitivity * (distance * 0.1);
+      if (camera.projection === pc.PROJECTION_PERSPECTIVE) {
+        orbitCamera.distance -= event.deltaY * 0.01 * sensitivity * (orbitCamera.distance * 0.1);
       } else {
-        const sensitivity = cameraEntity.script.orbitCameraInputMouse.distanceSensitivity || 0.4;
-        const orthoHeight = cameraEntity.script.orbitCamera.orthoHeight;
-        cameraEntity.script.orbitCamera.orthoHeight -= event.deltaY * 0.01 * sensitivity * (orthoHeight * 0.1);
+        orbitCamera.orthoHeight -= event.deltaY * 0.01 * sensitivity * (orbitCamera.orthoHeight * 0.1);
       }
+      
+      event.preventDefault();
     }
-  }, { passive: false });
+  };
+  
+  // --- Listen for wheel events at the viewer level, not document level ---
+  viewerContainer.addEventListener('wheel', handleWheel, { passive: false });
+  canvas.addEventListener('wheel', handleWheel, { passive: false });
   
   // --- Initialize the 3D PLY Viewer using PlayCanvas ---
   async function initializeViewer() {
@@ -421,8 +431,8 @@ const currentScriptTag = document.currentScript;
       // Create app
       const createOptions = new pc.AppOptions();
       createOptions.graphicsDevice = device;
-      createOptions.mouse = new pc.Mouse(document.body);
-      createOptions.touch = new pc.TouchDevice(document.body);
+      createOptions.mouse = new pc.Mouse(canvas); // Use canvas, not document.body
+      createOptions.touch = new pc.TouchDevice(canvas); // Use canvas, not document.body
       createOptions.componentSystems = [
         pc.RenderComponentSystem,
         pc.CameraComponentSystem,
@@ -541,7 +551,7 @@ const currentScriptTag = document.currentScript;
           }
         });
         
-        // Create input controllers but don't add mouse wheel handling - we handle that at document level
+        // Create input controllers but don't add mouse wheel handling - we handle that separately
         cameraEntity.script.create('orbitCameraInputMouse', {
           attributes: {
             orbitSensitivity: isMobile ? 0.6 : 0.3,
@@ -551,10 +561,7 @@ const currentScriptTag = document.currentScript;
         
         // Disable wheel event in the orbit camera input
         if (cameraEntity.script.orbitCameraInputMouse) {
-          // Store the original function
-          const originalOnWheel = cameraEntity.script.orbitCameraInputMouse.onMouseWheel;
-          
-          // Replace with empty function - we handle wheel at document level
+          // Override mouse wheel to do nothing - we handle wheel events separately
           cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
         }