Update index.js

index.js

@@ -1,10 +1,9 @@
 (function() {
-  // --- Outer scope variables for camera state and previous position ---
+  // --- Outer scope variables for camera state ---
   let cameraInstance = null;
   let controlsInstance = null;
   let initialCameraPosition = null;
   let initialCameraRotation = null;
-  let prevCameraPos = null;
 
   // Helper: Get query parameters from THIS script’s src URL.
   function getScriptQueryParam(param) {
@@ -30,7 +29,8 @@
   var maxAngle = parseFloat(getScriptQueryParam("maxAngle") || "360");
 
   // Optional parameters for translation limits.
-  // Defaults: for example, -10 to 10 for each axis.
+  // For this example, you can pass minX, maxX, minY, maxY, minZ, maxZ.
+  // If not provided, default to some values (e.g., -10 to 10).
   var minX = parseFloat(getScriptQueryParam("minX") || "-10");
   var maxX = parseFloat(getScriptQueryParam("maxX") || "10");
   var minY = parseFloat(getScriptQueryParam("minY") || "-10");
@@ -160,7 +160,6 @@
   document.head.appendChild(styleEl);
 
   // Create the widget container and set its inner HTML.
-  // Added new reset button with id "reset-camera-btn" displaying the 🗘 emoji.
   var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container';
   widgetContainer.innerHTML = `
@@ -185,7 +184,6 @@
       </div>
     </div>
   `;
-  // Append widgetContainer to the current script's parent so it appears in place.
   document.currentScript.parentNode.appendChild(widgetContainer);
 
   // Grab element references.
@@ -208,40 +206,32 @@
 
   // --- Button Event Handlers ---
 
-  // When the preview image is clicked, hide it, show the viewer, and initialize the 3D viewer.
   gifPreview.addEventListener('click', function() {
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
     initializeViewer();
   });
 
-  // Close button: hide the viewer and show the preview.
   closeBtn.addEventListener('click', function() {
-    // Exit fullscreen if active.
     if (document.fullscreenElement === widgetContainer) {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       }
     }
-    // Remove fake-fullscreen class (for iOS) if present.
     widgetContainer.classList.remove('fake-fullscreen');
     viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
   });
 
-  // Fullscreen toggle: use native Fullscreen API if available; otherwise, for iOS, toggle a CSS-based fullscreen.
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      // Toggle fake fullscreen via CSS on iOS.
       if (!widgetContainer.classList.contains('fake-fullscreen')) {
         widgetContainer.classList.add('fake-fullscreen');
       } else {
         widgetContainer.classList.remove('fake-fullscreen');
       }
-      // Update icon based on state.
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
-      // Non-iOS: use standard Fullscreen API.
       if (!document.fullscreenElement) {
         if (widgetContainer.requestFullscreen) {
           widgetContainer.requestFullscreen();
@@ -260,7 +250,6 @@
     }
   });
 
-  // Update the fullscreen button icon on fullscreen change (for non-iOS browsers).
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';
@@ -269,17 +258,14 @@
     }
   });
 
-  // Help (instructions) toggle: show/hide the instructions.
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
 
-  // Reset Camera button: restore the camera to its initial state.
   resetCameraBtn.addEventListener('click', function() {
     console.log("Reset camera button clicked.");
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
-      // Reset camera's position and rotation using clone().
       cameraInstance.position = initialCameraPosition.clone();
       cameraInstance.rotation = initialCameraRotation.clone();
       if (typeof cameraInstance.update === 'function') {
@@ -293,25 +279,17 @@
 
   // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
-    // Dynamically import the gsplat library.
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
-
-    // Display the progress dialog.
     progressDialog.style.display = 'block';
-
-    // Create renderer, scene, camera, and controls.
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
     const camera = new SPLAT.Camera();
     const controls = new SPLAT.OrbitControls(camera, canvas);
 
-    // Store the camera and controls and capture their initial state using clone().
     cameraInstance = camera;
     controlsInstance = controls;
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();
-    // Initialize previous camera position as the initial state.
-    prevCameraPos = camera.position.clone();
 
     canvas.style.background = "#FEFEFD";
     controls.maxZoom = maxZoom;
@@ -321,7 +299,6 @@
 
     controls.update();
 
-    // Load the PLY model from the provided URL.
     try {
       await SPLAT.PLYLoader.LoadAsync(
         plyUrl,
@@ -330,39 +307,31 @@
           progressIndicator.value = progress * 100;
         }
       );
-      // Hide the progress dialog once the model is loaded.
       progressDialog.style.display = 'none';
     } catch (error) {
       console.error("Error loading PLY file:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
     }
 
-    // Render loop and resize handling.
-    const handleResize = () => {
-      renderer.setSize(canvas.clientWidth, canvas.clientHeight);
-    };
+    // A simple clamp function.
+    function clamp(val, min, max) {
+      return Math.min(Math.max(val, min), max);
+    }
 
     const frame = () => {
-      // Save the current camera position
-      let currentPos = camera.position.clone();
       controls.update();
-
-      // Check if any axis exceeds its allowed limits.
-      if (currentPos.x < minX || currentPos.x > maxX ||
-          currentPos.y < minY || currentPos.y > maxY ||
-          currentPos.z < minZ || currentPos.z > maxZ) {
-        // Restore previous allowed position.
-        camera.position = prevCameraPos.clone();
-        // Optionally, you could also update controlsInstance target here if accessible.
-      } else {
-        // Otherwise, update prevCameraPos.
-        prevCameraPos = camera.position.clone();
-      }
-
+      // Clamp each axis individually.
+      camera.position.x = clamp(camera.position.x, minX, maxX);
+      camera.position.y = clamp(camera.position.y, minY, maxY);
+      camera.position.z = clamp(camera.position.z, minZ, maxZ);
       renderer.render(scene, camera);
       requestAnimationFrame(frame);
     };
 
+    const handleResize = () => {
+      renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    };
+
     handleResize();
     window.addEventListener("resize", handleResize);
     requestAnimationFrame(frame);