Update js_scripts/index.js

js_scripts/index.js

@@ -177,6 +177,18 @@ const currentScriptTag = document.currentScript;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   
+  // Flag to track if mouse is over the viewer
+  let isMouseOverViewer = false;
+  
+  // Add mouse hover tracking for the viewer container
+  viewerContainer.addEventListener('mouseenter', function() {
+    isMouseOverViewer = true;
+  });
+  
+  viewerContainer.addEventListener('mouseleave', function() {
+    isMouseOverViewer = false;
+  });
+  
   // Set help instructions based on device type.
   if (isMobile) {
     menuContent.innerHTML = `
@@ -276,7 +288,7 @@ const currentScriptTag = document.currentScript;
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
   
-  // --- Camera Reset Function - FIXED TO PRESERVE CAMERA MOVEMENT ---
+  // --- Camera Reset Function ---
   function resetCamera() {
     if (!cameraEntity || !modelEntity || !app) return;
     
@@ -288,7 +300,7 @@ const currentScriptTag = document.currentScript;
       // Store model position
       const modelPos = modelEntity.getPosition();
       
-      // 1. We'll create a temporary entity to help us calculate new values
+      // 1. Create a temporary entity to help calculate new values
       const tempEntity = new pc.Entity();
       tempEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       tempEntity.lookAt(modelPos);
@@ -303,36 +315,33 @@ const currentScriptTag = document.currentScript;
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelPos);
       
-      // 4. Create and apply a new transform for the orbit camera
+      // 4. Update the orbit camera's pivot point
       orbitCam.pivotPoint = new pc.Vec3(modelPos.x, modelPos.y, modelPos.z);
       
-      // 5. Set the distance and remove inertia
+      // 5. Set the distance
       orbitCam._targetDistance = distance;
       orbitCam._distance = distance;
       
-      // 6. Reset internal yaw and pitch values (this is critical)
-      // Get the current camera rotation
+      // 6. Calculate and set yaw and pitch from the camera's rotation
       const rotation = tempEntity.getRotation();
       const tempForward = new pc.Vec3();
       rotation.transformVector(pc.Vec3.FORWARD, tempForward);
       
-      // Calculate yaw from the forward vector
       const yaw = Math.atan2(-tempForward.x, -tempForward.z) * pc.math.RAD_TO_DEG;
       
-      // Calculate pitch
       const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
       const rotWithoutYaw = new pc.Quat().mul2(yawQuat, rotation);
       const forwardWithoutYaw = new pc.Vec3();
       rotWithoutYaw.transformVector(pc.Vec3.FORWARD, forwardWithoutYaw);
       const pitch = Math.atan2(forwardWithoutYaw.y, -forwardWithoutYaw.z) * pc.math.RAD_TO_DEG;
       
-      // Set yaw and pitch directly on the internal variables
+      // Set yaw and pitch directly on internal variables
       orbitCam._targetYaw = yaw;
       orbitCam._yaw = yaw;
       orbitCam._targetPitch = pitch;
       orbitCam._pitch = pitch;
       
-      // 7. Force an update of the camera position
+      // Force update
       if (typeof orbitCam._updatePosition === 'function') {
         orbitCam._updatePosition();
       }
@@ -370,6 +379,27 @@ 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();
+      
+      // 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);
+      } 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);
+      }
+    }
+  }, { passive: false });
+  
   // --- Initialize the 3D PLY Viewer using PlayCanvas ---
   async function initializeViewer() {
     progressDialog.style.display = 'block';
@@ -430,7 +460,7 @@ const currentScriptTag = document.currentScript;
       // Load required assets
       const assets = {
         model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
-        orbit: new pc.Asset('script', 'script', { url: `https://bilca-module-de-visualisation.static.hf.space/camera-controls/orbit-camera.js` })
+        orbit: new pc.Asset('script', 'script', { url: `https://bilca-visionneur-play-canva-2.static.hf.space/orbit-camera.js` })
       };
       
       // Create asset loader with progress tracking
@@ -511,7 +541,32 @@ const currentScriptTag = document.currentScript;
           }
         });
         
-        // Initialize the orbit controller to match our direct coordinates
+        // Create input controllers but don't add mouse wheel handling - we handle that at document level
+        cameraEntity.script.create('orbitCameraInputMouse', {
+          attributes: {
+            orbitSensitivity: isMobile ? 0.6 : 0.3,
+            distanceSensitivity: isMobile ? 0.5 : 0.4
+          }
+        });
+        
+        // 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
+          cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
+        }
+        
+        // Add touch input controller
+        cameraEntity.script.create('orbitCameraInputTouch', {
+          attributes: {
+            orbitSensitivity: 0.6,
+            distanceSensitivity: 0.5
+          }
+        });
+        
+        // Initialize the orbit controller
         setTimeout(() => {
           if (cameraEntity.script.orbitCamera) {
             // Calculate distance from camera to model
@@ -528,20 +583,6 @@ const currentScriptTag = document.currentScript;
           }
         }, 100);
         
-        // Add input controllers
-        cameraEntity.script.create('orbitCameraInputMouse', {
-          attributes: {
-            orbitSensitivity: isMobile ? 0.6 : 0.3,
-            distanceSensitivity: isMobile ? 0.5 : 0.4
-          }
-        });
-        cameraEntity.script.create('orbitCameraInputTouch', {
-          attributes: {
-            orbitSensitivity: 0.6,
-            distanceSensitivity: 0.5
-          }
-        });
-        
         app.root.addChild(cameraEntity);
         
         // Initial resize to match container