Update js_scripts/index.js

js_scripts/index.js

@@ -24,14 +24,25 @@
     document.head.appendChild(linkEl);
   }
 
+  // --- Outer scope variables for camera state ---
+  let cameraInstance = null;
+  let controlsInstance = null;
+  let initialCameraPosition = null;
+  let initialCameraRotation = null;
+  let rendererInstance = null;
+  let sceneInstance = null;
+  let SPLAT = null; // We'll save the imported SPLAT module here.
+  let animFrameId = null;
+  let resizeHandler = null;
+  let hasInitializedViewer = false;
+  let loadedPlyModel = null;
+  
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
   
   // Read configuration values from the JSON file.
   const gifUrl = config.gif_url;
   const plyUrl = config.ply_url;
-  
-  // Camera constraint parameters
   const minZoom = parseFloat(config.minZoom || "0");
   const maxZoom = parseFloat(config.maxZoom || "20");
   const minAngle = parseFloat(config.minAngle || "0");
@@ -145,16 +156,6 @@
     `;
   }
   
-  // Global variables to track state
-  let SPLAT = null;
-  let cameraInstance = null;
-  let controlsInstance = null;
-  let rendererInstance = null;
-  let sceneInstance = null;
-  let animFrameId = null;
-  let isViewerInitialized = false;
-  let resizeHandler = null;
-  
   // If a gif_url is provided, set the preview image.
   // Otherwise, hide the preview container, show the viewer immediately,
   // and hide the "close" button since there's no preview to return to.
@@ -173,7 +174,6 @@
   
   // --- Button Event Handlers ---
   if (gifUrl) {
-    // When GIF is clicked, hide it and initialize the viewer
     gifPreview.addEventListener('click', function() {
       console.log("GIF preview clicked, showing 3D viewer");
       gifPreview.style.display = 'none';
@@ -182,7 +182,46 @@
     });
   }
   
-  // Close button handler - hide viewer and show GIF
+  // Function to clean up the viewer
+  function cleanupViewer() {
+    console.log("Cleaning up viewer resources...");
+    
+    // Stop animation frame
+    if (animFrameId) {
+      cancelAnimationFrame(animFrameId);
+      animFrameId = null;
+    }
+    
+    // Remove resize event handler
+    if (resizeHandler) {
+      window.removeEventListener("resize", resizeHandler);
+      resizeHandler = null;
+    }
+    
+    // Dispose controls
+    if (controlsInstance && typeof controlsInstance.dispose === 'function') {
+      try {
+        controlsInstance.dispose();
+        controlsInstance = null;
+      } catch (e) {
+        console.error("Error disposing controls:", e);
+      }
+    }
+    
+    // Clear references but preserve loaded objects
+    // We don't fully dispose the renderer to preserve WebGL context
+    rendererInstance = null;
+    sceneInstance = null;
+    cameraInstance = null;
+    initialCameraPosition = null;
+    initialCameraRotation = null;
+    
+    // Mark viewer as not initialized
+    hasInitializedViewer = false;
+    
+    console.log("Viewer cleanup complete - renderer and PLY model data preserved for fast reload");
+  }
+  
   closeBtn.addEventListener('click', function() {
     console.log("Close button clicked");
     
@@ -192,13 +231,12 @@
         document.exitFullscreen();
       }
     }
-    
     if (widgetContainer.classList.contains('fake-fullscreen')) {
       widgetContainer.classList.remove('fake-fullscreen');
       fullscreenToggle.textContent = '⇱';
     }
     
-    // Clean up the viewer resources
+    // Clean up the viewer
     cleanupViewer();
     
     // Hide viewer and show GIF
@@ -206,10 +244,8 @@
     gifPreview.style.display = 'block';
   });
   
-  // Fullscreen toggle handler
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      // iOS doesn't support proper fullscreen, so we use CSS
       if (!widgetContainer.classList.contains('fake-fullscreen')) {
         widgetContainer.classList.add('fake-fullscreen');
       } else {
@@ -218,7 +254,6 @@
       }
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
-      // Standard fullscreen API for other browsers
       if (!document.fullscreenElement) {
         if (widgetContainer.requestFullscreen) {
           widgetContainer.requestFullscreen();
@@ -252,57 +287,28 @@
     }
   });
   
-  // Help toggle button
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
   
-  // Reset camera button
-  resetCameraBtn.addEventListener('click', function() {
-    console.log("Reset camera button clicked");
-    resetCamera();
-  });
-  
-  // Handle Escape key for fullscreen exit
-  document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape' || e.key === 'Esc') {
-      let wasFullscreen = false;
-      if (document.fullscreenElement === widgetContainer) {
-        wasFullscreen = true;
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        }
-      }
-      if (widgetContainer.classList.contains('fake-fullscreen')) {
-        wasFullscreen = true;
-        widgetContainer.classList.remove('fake-fullscreen');
-        fullscreenToggle.textContent = '⇱';
-      }
-      if (wasFullscreen) {
-        resetCamera();
-      }
-    }
-  });
-  
   // --- Camera Reset Function ---
   function resetCamera() {
     console.log("Resetting camera to initial position");
-    
-    if (!SPLAT || !cameraInstance || !controlsInstance || !sceneInstance) {
-      console.log("Cannot reset camera - SPLAT not loaded or camera/controls not initialized");
+    if (!cameraInstance || !SPLAT) {
+      console.log("Cannot reset camera - missing camera instance");
       return;
     }
     
     try {
-      // Dispose the current controls
+      // Create a new camera to reset its position
+      cameraInstance = new SPLAT.Camera();
+      
+      // Dispose previous controls if they exist
       if (controlsInstance && typeof controlsInstance.dispose === 'function') {
         controlsInstance.dispose();
       }
       
-      // Reset camera to default position
-      cameraInstance = new SPLAT.Camera();
-      
       // Create new controls
       controlsInstance = new SPLAT.OrbitControls(
         cameraInstance,
@@ -329,77 +335,41 @@
       // Update controls
       controlsInstance.update();
       
-      console.log("Camera reset complete");
-      
+      console.log("Camera reset successful");
     } catch (error) {
       console.error("Error resetting camera:", error);
     }
   }
   
-  // Clean up all viewer resources
-  function cleanupViewer() {
-    console.log("Cleaning up viewer resources...");
-    
-    // Stop animation frame
-    if (animFrameId) {
-      cancelAnimationFrame(animFrameId);
-      animFrameId = null;
-    }
-    
-    // Remove resize handler
-    if (resizeHandler) {
-      window.removeEventListener('resize', resizeHandler);
-      resizeHandler = null;
-    }
-    
-    // Dispose controls
-    if (controlsInstance && typeof controlsInstance.dispose === 'function') {
-      try {
-        controlsInstance.dispose();
-      } catch (e) {
-        console.warn("Error disposing controls:", e);
+  resetCameraBtn.addEventListener('click', async function() {
+    console.log("Reset camera button clicked");
+    resetCamera();
+  });
+  
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      let wasFullscreen = false;
+      if (document.fullscreenElement === widgetContainer) {
+        wasFullscreen = true;
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
       }
-      controlsInstance = null;
-    }
-    
-    // Dispose renderer
-    if (rendererInstance && typeof rendererInstance.dispose === 'function') {
-      try {
-        rendererInstance.dispose();
-      } catch (e) {
-        console.warn("Error disposing renderer:", e);
+      if (widgetContainer.classList.contains('fake-fullscreen')) {
+        wasFullscreen = true;
+        widgetContainer.classList.remove('fake-fullscreen');
+        fullscreenToggle.textContent = '⇱';
       }
-      rendererInstance = null;
-    }
-    
-    // Clear scene
-    sceneInstance = null;
-    
-    // Clear camera
-    cameraInstance = null;
-    
-    // Reset WebGL context
-    if (canvas) {
-      const ctx = canvas.getContext('webgl') || canvas.getContext('webgl2');
-      if (ctx && ctx.getExtension('WEBGL_lose_context')) {
-        try {
-          ctx.getExtension('WEBGL_lose_context').loseContext();
-        } catch (e) {
-          console.warn("Error releasing WebGL context:", e);
-        }
+      if (wasFullscreen) {
+        resetCamera();
       }
     }
-    
-    // Mark viewer as not initialized
-    isViewerInitialized = false;
-    
-    console.log("Viewer cleanup complete");
-  }
+  });
   
   // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
     // Skip initialization if already initialized
-    if (isViewerInitialized) {
+    if (hasInitializedViewer) {
       console.log("Viewer already initialized, skipping initialization");
       return;
     }
@@ -413,26 +383,26 @@
       if (!SPLAT) {
         console.log("Loading SPLAT library...");
         SPLAT = await import("https://bilca-gsplat-library.static.hf.space/dist/index.js");
-        console.log("SPLAT library loaded successfully:", SPLAT);
+        console.log("SPLAT library loaded successfully");
       }
       
-      // Create renderer
+      // Create new renderer or clear existing one
       console.log("Creating WebGL renderer...");
       rendererInstance = new SPLAT.WebGLRenderer(canvas);
-      console.log("Renderer created:", rendererInstance);
       
-      // Create scene
+      // Create new scene
       console.log("Creating scene...");
       sceneInstance = new SPLAT.Scene();
-      console.log("Scene created:", sceneInstance);
       
       // Create camera
       console.log("Creating camera...");
       cameraInstance = new SPLAT.Camera();
-      console.log("Camera created:", cameraInstance);
+      
+      // Store initial camera state
+      initialCameraPosition = cameraInstance.position.clone();
+      initialCameraRotation = cameraInstance.rotation.clone();
       
       // Set canvas background
-      console.log("Setting canvas background...");
       canvas.style.background = config.canvas_background || "#FEFEFD";
       
       // Create controls
@@ -460,73 +430,78 @@
       controlsInstance.panSpeed = isMobile ? 0.5 : 1.2;
       
       controlsInstance.update();
-      console.log("Orbit controls created and configured:", controlsInstance);
       
       // Handle resize
-      console.log("Setting up resize handler...");
       const handleResize = () => {
         if (rendererInstance) {
           rendererInstance.setSize(canvas.clientWidth, canvas.clientHeight);
         }
       };
       
-      // Initial resize
+      // Set up resize handler
       handleResize();
-      
-      // Add resize event listener
       resizeHandler = handleResize;
-      window.addEventListener('resize', resizeHandler);
-      console.log("Resize handler set up");
+      window.addEventListener("resize", resizeHandler);
+      
+      // Load PLY file if not already loaded or reload it
+      console.log("Loading or reusing PLY model...");
       
-      // Load PLY file
-      console.log("Loading PLY file:", plyUrl);
       try {
-        await SPLAT.PLYLoader.LoadAsync(
+        // Always load fresh PLY data
+        console.log(`Loading PLY file from ${plyUrl}`);
+        loadedPlyModel = await SPLAT.PLYLoader.LoadAsync(
           plyUrl,
           sceneInstance,
           (progress) => {
             progressIndicator.value = progress * 100;
-            console.log(`Loading progress: ${Math.round(progress * 100)}%`);
           }
         );
-        console.log("PLY file loaded successfully");
-        progressDialog.style.display = 'none';
-        
-        // Check if scene has content
-        console.log("Checking scene content...");
-        if (sceneInstance && sceneInstance.getChildren) {
-          const children = sceneInstance.getChildren();
-          console.log("Scene children:", children);
-          console.log("Scene children count:", children ? children.length : 0);
-        }
-        
+        console.log("PLY file loaded successfully, model:", loadedPlyModel);
       } catch (error) {
         console.error("Error loading PLY file:", error);
         progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
         return;
       }
       
+      // Hide progress dialog
+      progressDialog.style.display = 'none';
+      
+      // Debug: Check scene content
+      console.log("Scene contents:", sceneInstance);
+      if (sceneInstance && typeof sceneInstance.getChildren === 'function') {
+        const children = sceneInstance.getChildren();
+        console.log("Scene children:", children);
+        if (children && children.length === 0) {
+          console.warn("Warning: Scene has no children!");
+        }
+      } else {
+        console.log("Cannot check scene children - getChildren method not available");
+      }
+      
       // Start animation loop
       console.log("Starting animation loop...");
-      const animate = () => {
-        if (controlsInstance && sceneInstance && cameraInstance && rendererInstance) {
-          controlsInstance.update();
-          rendererInstance.render(sceneInstance, cameraInstance);
-          animFrameId = requestAnimationFrame(animate);
+      function animate() {
+        if (!controlsInstance || !sceneInstance || !cameraInstance || !rendererInstance) {
+          console.log("Animation stopped - resources cleaned up");
+          return;
         }
-      };
+        
+        controlsInstance.update();
+        rendererInstance.render(sceneInstance, cameraInstance);
+        animFrameId = requestAnimationFrame(animate);
+      }
       
+      // Start the animation
       animFrameId = requestAnimationFrame(animate);
-      console.log("Animation loop started with frame ID:", animFrameId);
       
       // Mark viewer as initialized
-      isViewerInitialized = true;
+      hasInitializedViewer = true;
       console.log("PLY viewer initialization complete");
       
     } catch (error) {
       console.error("Error initializing PLY viewer:", error);
       progressDialog.innerHTML = `<p style="color: red">Error initializing viewer: ${error.message}</p>`;
-      cleanupViewer();
+      hasInitializedViewer = false;
     }
   }
 })();