Update js_scripts/index.js

js_scripts/index.js

@@ -24,16 +24,14 @@
     document.head.appendChild(linkEl);
   }
 
-  // --- Outer scope variables for viewer state ---
-  let SPLAT = null;
-  let viewerActive = false;
-  
   // 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");
@@ -147,6 +145,16 @@
     `;
   }
   
+  // 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.
@@ -158,22 +166,23 @@
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
     closeBtn.style.display = 'none';
-    // Need to load the PLY without a GIF preview
     setTimeout(() => {
-      loadAndStartViewer();
+      initializeViewer();
     }, 100);
   }
   
   // --- 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';
       viewerContainer.style.display = 'block';
-      loadAndStartViewer();
+      initializeViewer();
     });
   }
   
+  // Close button handler - hide viewer and show GIF
   closeBtn.addEventListener('click', function() {
     console.log("Close button clicked");
     
@@ -183,28 +192,33 @@
         document.exitFullscreen();
       }
     }
+    
     if (widgetContainer.classList.contains('fake-fullscreen')) {
       widgetContainer.classList.remove('fake-fullscreen');
       fullscreenToggle.textContent = '⇱';
     }
     
-    // Stop the viewer
-    stopViewer();
+    // Clean up the viewer resources
+    cleanupViewer();
     
-    // Show GIF and hide viewer
+    // Hide viewer and show GIF
     viewerContainer.style.display = 'none';
     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 {
         widgetContainer.classList.remove('fake-fullscreen');
+        resetCamera();
       }
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
+      // Standard fullscreen API for other browsers
       if (!document.fullscreenElement) {
         if (widgetContainer.requestFullscreen) {
           widgetContainer.requestFullscreen();
@@ -229,25 +243,28 @@
       fullscreenToggle.textContent = '⇲';
       widgetContainer.style.height = '100%';
       widgetContainer.style.paddingBottom = '0';
+      resetCamera();
     } else {
       fullscreenToggle.textContent = '⇱';
       widgetContainer.style.height = '0';
       widgetContainer.style.paddingBottom = aspectPercent;
+      resetCamera();
     }
   });
   
+  // 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.");
-    if (window.viewer && typeof window.viewer.resetCamera === 'function') {
-      window.viewer.resetCamera();
-    }
+    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;
@@ -262,261 +279,106 @@
         widgetContainer.classList.remove('fake-fullscreen');
         fullscreenToggle.textContent = '⇱';
       }
+      if (wasFullscreen) {
+        resetCamera();
+      }
     }
   });
   
-  // --- Load SPLAT Library and Initialize the 3D PLY Viewer ---
-  async function loadAndStartViewer() {
-    // Don't reinitialize if already active
-    if (viewerActive) {
-      console.log("Viewer already active, skipping initialization");
+  // --- 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");
       return;
     }
     
-    console.log("Initializing PLY viewer...");
-    progressDialog.style.display = 'block';
-    progressIndicator.value = 0;
-    
     try {
-      // Only load the SPLAT library once
-      if (!SPLAT) {
-        SPLAT = await import("https://bilca-gsplat-library.static.hf.space/dist/index.js");
+      // Dispose the current controls
+      if (controlsInstance && typeof controlsInstance.dispose === 'function') {
+        controlsInstance.dispose();
       }
       
-      // Create a fresh viewer instance
-      window.viewer = {
-        // Properties
-        renderer: null,
-        scene: null,
-        camera: null,
-        controls: null,
-        animFrameId: null,
-        resizeObserver: null,
-        initialCameraPosition: null,
-        initialCameraRotation: null,
-        
-        // Initialize the viewer
-        async init() {
-          // Create renderer and scene
-          this.renderer = new SPLAT.WebGLRenderer(canvas);
-          this.scene = new SPLAT.Scene();
-          
-          // Create camera
-          this.camera = new SPLAT.Camera();
-          
-          // Store initial camera state
-          this.initialCameraPosition = this.camera.position.clone();
-          this.initialCameraRotation = this.camera.rotation.clone();
-          
-          // Create controls
-          this.controls = new SPLAT.OrbitControls(
-            this.camera,
-            canvas,
-            0.5,
-            0.5,
-            5,
-            true,
-            new SPLAT.Vector3(),
-            chosenInitAlpha,
-            chosenInitBeta,
-            chosenInitRadius
-          );
-          
-          // Set control constraints
-          this.controls.maxZoom = maxZoom;
-          this.controls.minZoom = minZoom;
-          this.controls.minAngle = minAngle;
-          this.controls.maxAngle = maxAngle;
-          this.controls.minAzimuth = minAzimuth;
-          this.controls.maxAzimuth = maxAzimuth;
-          this.controls.panSpeed = isMobile ? 0.5 : 1.2;
-          
-          // Set canvas background
-          canvas.style.background = config.canvas_background || "#FEFEFD";
-          
-          // Handle resize
-          this.handleResize();
-          
-          // Set up resize observer
-          this.resizeObserver = new ResizeObserver(() => {
-            this.handleResize();
-          });
-          this.resizeObserver.observe(canvas);
-          
-          // Update controls
-          this.controls.update();
-          
-          // Load the PLY file
-          try {
-            await SPLAT.PLYLoader.LoadAsync(
-              plyUrl,
-              this.scene,
-              (progress) => {
-                progressIndicator.value = progress * 100;
-              }
-            );
-            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>`;
-            return false;
-          }
-          
-          // Start rendering
-          this.startRenderLoop();
-          return true;
-        },
-        
-        // Handle resize
-        handleResize() {
-          if (this.renderer) {
-            this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
-          }
-        },
-        
-        // Start the render loop
-        startRenderLoop() {
-          // Animation frame loop
-          const renderFrame = () => {
-            if (this.controls && this.scene && this.camera && this.renderer) {
-              this.controls.update();
-              this.renderer.render(this.scene, this.camera);
-              this.animFrameId = requestAnimationFrame(renderFrame);
-            }
-          };
-          
-          this.animFrameId = requestAnimationFrame(renderFrame);
-        },
-        
-        // Reset camera to initial position
-        resetCamera() {
-          if (!this.camera || !this.initialCameraPosition || !this.initialCameraRotation) {
-            console.log("Cannot reset camera - missing camera instance or initial positions");
-            return;
-          }
-          
-          try {
-            // Dispose previous controls if they exist
-            if (this.controls && typeof this.controls.dispose === 'function') {
-              this.controls.dispose();
-            }
-            
-            // Set camera back to initial position
-            this.camera.position = this.initialCameraPosition.clone();
-            this.camera.rotation = this.initialCameraRotation.clone();
-            
-            // Create new controls
-            this.controls = new SPLAT.OrbitControls(
-              this.camera,
-              canvas,
-              0.5,
-              0.5,
-              5,
-              true,
-              new SPLAT.Vector3(),
-              chosenInitAlpha,
-              chosenInitBeta,
-              chosenInitRadius
-            );
-            
-            // Set control constraints
-            this.controls.maxZoom = maxZoom;
-            this.controls.minZoom = minZoom;
-            this.controls.minAngle = minAngle;
-            this.controls.maxAngle = maxAngle;
-            this.controls.minAzimuth = minAzimuth;
-            this.controls.maxAzimuth = maxAzimuth;
-            this.controls.panSpeed = isMobile ? 0.5 : 1.2;
-            
-            // Update controls
-            this.controls.update();
-            
-            console.log("Camera reset successful");
-          } catch (error) {
-            console.error("Error resetting camera:", error);
-          }
-        },
-        
-        // Clean up resources
-        dispose() {
-          // Cancel animation frame
-          if (this.animFrameId) {
-            cancelAnimationFrame(this.animFrameId);
-            this.animFrameId = null;
-          }
-          
-          // Remove resize observer
-          if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-          }
-          
-          // Dispose controls
-          if (this.controls && typeof this.controls.dispose === 'function') {
-            try {
-              this.controls.dispose();
-            } catch (e) {
-              console.warn("Error disposing controls:", e);
-            }
-            this.controls = null;
-          }
-          
-          // Dispose renderer
-          if (this.renderer && typeof this.renderer.dispose === 'function') {
-            try {
-              this.renderer.dispose();
-            } catch (e) {
-              console.warn("Error disposing renderer:", e);
-            }
-            this.renderer = null;
-          }
-          
-          // Clear scene
-          if (this.scene) {
-            this.scene = null;
-          }
-          
-          // Clear camera
-          this.camera = null;
-          this.initialCameraPosition = null;
-          this.initialCameraRotation = null;
-          
-          console.log("Viewer resources disposed");
-        }
-      };
+      // Reset camera to default position
+      cameraInstance = new SPLAT.Camera();
       
-      // Initialize the viewer
-      const success = await window.viewer.init();
-      if (success) {
-        viewerActive = true;
-        console.log("PLY viewer started successfully");
-      } else {
-        viewerActive = false;
-        console.error("Failed to initialize PLY viewer");
-      }
+      // Create new controls
+      controlsInstance = new SPLAT.OrbitControls(
+        cameraInstance,
+        canvas,
+        0.5,
+        0.5,
+        5,
+        true,
+        new SPLAT.Vector3(),
+        chosenInitAlpha,
+        chosenInitBeta,
+        chosenInitRadius
+      );
+      
+      // Set control constraints
+      controlsInstance.maxZoom = maxZoom;
+      controlsInstance.minZoom = minZoom;
+      controlsInstance.minAngle = minAngle;
+      controlsInstance.maxAngle = maxAngle;
+      controlsInstance.minAzimuth = minAzimuth;
+      controlsInstance.maxAzimuth = maxAzimuth;
+      controlsInstance.panSpeed = isMobile ? 0.5 : 1.2;
+      
+      // Update controls
+      controlsInstance.update();
+      
+      console.log("Camera reset complete");
       
     } catch (error) {
-      console.error("Error in loadAndStartViewer:", error);
-      progressDialog.innerHTML = `<p style="color: red">Error initializing viewer: ${error.message}</p>`;
-      viewerActive = false;
+      console.error("Error resetting camera:", error);
     }
   }
   
-  // Stop the viewer and clean up resources
-  function stopViewer() {
-    if (!viewerActive) {
-      console.log("Viewer not active, nothing to stop");
-      return;
+  // 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;
     }
     
-    console.log("Stopping viewer...");
+    // Dispose controls
+    if (controlsInstance && typeof controlsInstance.dispose === 'function') {
+      try {
+        controlsInstance.dispose();
+      } catch (e) {
+        console.warn("Error disposing controls:", e);
+      }
+      controlsInstance = null;
+    }
     
-    // Dispose viewer resources
-    if (window.viewer && typeof window.viewer.dispose === 'function') {
-      window.viewer.dispose();
+    // Dispose renderer
+    if (rendererInstance && typeof rendererInstance.dispose === 'function') {
+      try {
+        rendererInstance.dispose();
+      } catch (e) {
+        console.warn("Error disposing renderer:", e);
+      }
+      rendererInstance = null;
     }
     
-    // Reset WebGL context if possible
+    // 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')) {
@@ -528,9 +390,143 @@
       }
     }
     
-    // Mark viewer as not active
-    viewerActive = false;
+    // 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) {
+      console.log("Viewer already initialized, skipping initialization");
+      return;
+    }
+    
+    console.log("Initializing PLY viewer...");
+    progressDialog.style.display = 'block';
+    progressIndicator.value = 0;
     
-    console.log("Viewer stopped");
+    try {
+      // Load the SPLAT library if not already loaded
+      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);
+      }
+      
+      // Create renderer
+      console.log("Creating WebGL renderer...");
+      rendererInstance = new SPLAT.WebGLRenderer(canvas);
+      console.log("Renderer created:", rendererInstance);
+      
+      // Create 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);
+      
+      // Set canvas background
+      console.log("Setting canvas background...");
+      canvas.style.background = config.canvas_background || "#FEFEFD";
+      
+      // Create controls
+      console.log("Creating orbit controls...");
+      controlsInstance = new SPLAT.OrbitControls(
+        cameraInstance,
+        canvas,
+        0.5,
+        0.5,
+        5,
+        true,
+        new SPLAT.Vector3(),
+        chosenInitAlpha,
+        chosenInitBeta,
+        chosenInitRadius
+      );
+      
+      // Set control constraints
+      controlsInstance.maxZoom = maxZoom;
+      controlsInstance.minZoom = minZoom;
+      controlsInstance.minAngle = minAngle;
+      controlsInstance.maxAngle = maxAngle;
+      controlsInstance.minAzimuth = minAzimuth;
+      controlsInstance.maxAzimuth = maxAzimuth;
+      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
+      handleResize();
+      
+      // Add resize event listener
+      resizeHandler = handleResize;
+      window.addEventListener('resize', resizeHandler);
+      console.log("Resize handler set up");
+      
+      // Load PLY file
+      console.log("Loading PLY file:", plyUrl);
+      try {
+        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);
+        }
+        
+      } catch (error) {
+        console.error("Error loading PLY file:", error);
+        progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
+        return;
+      }
+      
+      // Start animation loop
+      console.log("Starting animation loop...");
+      const animate = () => {
+        if (controlsInstance && sceneInstance && cameraInstance && rendererInstance) {
+          controlsInstance.update();
+          rendererInstance.render(sceneInstance, cameraInstance);
+          animFrameId = requestAnimationFrame(animate);
+        }
+      };
+      
+      animFrameId = requestAnimationFrame(animate);
+      console.log("Animation loop started with frame ID:", animFrameId);
+      
+      // Mark viewer as initialized
+      isViewerInitialized = 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();
+    }
   }
 })();