Update js_scripts/index.js

js_scripts/index.js

@@ -61,6 +61,7 @@ const currentScriptTag = document.currentScript;
   let viewerInitialized = false;
   let wheelHandlers = [];
   let resizeHandler = null;
+  let progressChecker = null;
   
   // Generate a unique identifier for this widget instance.
   const instanceId = Math.random().toString(36).substr(2, 8);
@@ -151,7 +152,7 @@ const currentScriptTag = document.currentScript;
       <img id="preview-image-${instanceId}" alt="Preview" crossorigin="anonymous">
     </div>
     <!-- Viewer Container -->
-    <div id="viewer-container-${instanceId}" class="viewer-container">
+    <div id="viewer-container-${instanceId}" class="viewer-container" style="display: none;">
       <canvas id="canvas-${instanceId}" class="ply-canvas"></canvas>
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
         <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
@@ -207,31 +208,46 @@ const currentScriptTag = document.currentScript;
     `;
   }
   
-  // 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.
+  // Handle GIF configuration
   if (gifUrl) {
     previewImage.src = gifUrl;
-    viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
+    viewerContainer.style.display = 'none';
   } else {
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
     closeBtn.style.display = 'none';
-    initializeViewer();
+    // Initialize the viewer only when needed
+    setTimeout(() => {
+      initializeViewer();
+    }, 100);
   }
   
   // --- Button Event Handlers ---
   if (gifUrl) {
+    // Add click event to the GIF container
     gifPreview.addEventListener('click', function() {
+      console.log("GIF preview clicked, showing 3D viewer");
       gifPreview.style.display = 'none';
       viewerContainer.style.display = 'block';
-      initializeViewer();
+      
+      // Make sure we're not initializing again if already done
+      if (!viewerInitialized) {
+        initializeViewer();
+      }
     });
   }
   
-  // Function to clean up the viewer
+  // Function to clean up the viewer completely
   function cleanupViewer() {
+    console.log("Starting viewer cleanup...");
+    
+    // Clear any running intervals
+    if (progressChecker) {
+      clearInterval(progressChecker);
+      progressChecker = null;
+    }
+    
     // Remove wheel event listeners
     for (const handler of wheelHandlers) {
       const [element, func] = handler;
@@ -245,24 +261,31 @@ const currentScriptTag = document.currentScript;
       resizeHandler = null;
     }
     
+    // Reset the canvas context
+    if (canvas) {
+      const ctx = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      if (ctx && ctx.getExtension('WEBGL_lose_context')) {
+        try {
+          ctx.getExtension('WEBGL_lose_context').loseContext();
+        } catch (e) {
+          console.error("Error releasing WebGL context:", e);
+        }
+      }
+    }
+    
     // Destroy PlayCanvas app if it exists
     if (app) {
-      app.destroy();
+      try {
+        app.destroy();
+      } catch (e) {
+        console.error("Error destroying PlayCanvas app:", e);
+      }
       app = null;
     }
     
     // Reset entities
     cameraEntity = null;
     modelEntity = null;
-    viewerInitialized = false;
-    
-    // Reset the canvas
-    if (canvas) {
-      const ctx = canvas.getContext('webgl2') || canvas.getContext('webgl');
-      if (ctx) {
-        ctx.getExtension('WEBGL_lose_context')?.loseContext();
-      }
-    }
     
     // Mark the viewer as not initialized
     viewerInitialized = false;
@@ -270,7 +293,10 @@ const currentScriptTag = document.currentScript;
     console.log("Viewer cleanup complete");
   }
   
+  // Close button event handler
   closeBtn.addEventListener('click', function() {
+    console.log("Close button clicked");
+    
     // Handle fullscreen exit
     if (document.fullscreenElement === widgetContainer) {
       if (document.exitFullscreen) {
@@ -290,6 +316,7 @@ const currentScriptTag = document.currentScript;
     gifPreview.style.display = 'block';
   });
   
+  // Fullscreen toggle handler
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
       if (!widgetContainer.classList.contains('fake-fullscreen')) {
@@ -333,6 +360,7 @@ const currentScriptTag = document.currentScript;
     }
   });
   
+  // Help toggle button
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
@@ -340,12 +368,18 @@ const currentScriptTag = document.currentScript;
   
   // --- Camera Reset Function ---
   function resetCamera() {
-    if (!cameraEntity || !modelEntity || !app) return;
+    if (!cameraEntity || !modelEntity || !app) {
+      console.log("Cannot reset camera - missing entities or app");
+      return;
+    }
     
     try {
       // Get the orbit camera script
       const orbitCam = cameraEntity.script.orbitCamera;
-      if (!orbitCam) return;
+      if (!orbitCam) {
+        console.log("Cannot reset camera - missing orbit camera script");
+        return;
+      }
       
       // Store model position
       const modelPos = modelEntity.getPosition();
@@ -399,16 +433,20 @@ const currentScriptTag = document.currentScript;
       // Clean up
       tempEntity.destroy();
       
+      console.log("Camera reset complete");
+      
     } catch (error) {
       console.error("Error resetting camera:", error);
     }
   }
   
+  // Reset camera button event handler
   resetCameraBtn.addEventListener('click', function() {
-    console.log("Reset camera button clicked.");
+    console.log("Reset camera button clicked");
     resetCamera();
   });
   
+  // Escape key handler for fullscreen exit
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape' || e.key === 'Esc') {
       let wasFullscreen = false;
@@ -472,18 +510,21 @@ const currentScriptTag = document.currentScript;
     // Store handlers for later cleanup
     wheelHandlers.push([viewerContainer, handleWheel]);
     wheelHandlers.push([canvas, handleWheel]);
+    
+    console.log("Wheel handlers set up");
   }
   
   // --- Initialize the 3D PLY Viewer using PlayCanvas ---
   async function initializeViewer() {
     // Skip initialization if already initialized
-    if (viewerInitialized) {
-      console.log("Viewer already initialized, skipping");
+    if (viewerInitialized || app) {
+      console.log("Viewer already initialized or app exists, skipping initialization");
       return;
     }
     
     console.log("Initializing PLY viewer...");
     progressDialog.style.display = 'block';
+    progressIndicator.value = 0;
     
     // Initialize PlayCanvas
     const deviceType = "webgl2";
@@ -502,8 +543,8 @@ const currentScriptTag = document.currentScript;
       // Create app
       const createOptions = new pc.AppOptions();
       createOptions.graphicsDevice = device;
-      createOptions.mouse = new pc.Mouse(canvas); // Use canvas, not document.body
-      createOptions.touch = new pc.TouchDevice(canvas); // Use canvas, not document.body
+      createOptions.mouse = new pc.Mouse(canvas);
+      createOptions.touch = new pc.TouchDevice(canvas);
       createOptions.componentSystems = [
         pc.RenderComponentSystem,
         pc.CameraComponentSystem,
@@ -539,9 +580,17 @@ const currentScriptTag = document.currentScript;
       // Store resize handler for cleanup
       resizeHandler = resize;
       window.addEventListener('resize', resizeHandler);
+      
+      // Add cleanup when app is destroyed
       app.on('destroy', () => {
-        window.removeEventListener('resize', resizeHandler);
-        resizeHandler = null;
+        if (resizeHandler) {
+          window.removeEventListener('resize', resizeHandler);
+          resizeHandler = null;
+        }
+        if (progressChecker) {
+          clearInterval(progressChecker);
+          progressChecker = null;
+        }
       });
       
       // Load required assets
@@ -557,18 +606,27 @@ const currentScriptTag = document.currentScript;
       let lastProgress = 0;
       assets.model.on('load', (asset) => {
         progressDialog.style.display = 'none';
+        console.log("Model loaded successfully");
       });
       
       assets.model.on('error', (err) => {
         console.error("Error loading PLY file:", err);
         progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
+        viewerInitialized = false;
       });
       
       // Set up progress monitoring
       const checkProgress = () => {
+        if (!app) {
+          clearInterval(progressChecker);
+          progressChecker = null;
+          return;
+        }
+        
         if (app && assets.model.resource) {
           progressIndicator.value = 100;
           clearInterval(progressChecker);
+          progressChecker = null;
           progressDialog.style.display = 'none';
         } else if (assets.model.loading) {
           // Increment progress for visual feedback
@@ -578,15 +636,15 @@ const currentScriptTag = document.currentScript;
         }
       };
       
-      const progressChecker = setInterval(checkProgress, 100);
-      
-      // Store the interval for cleanup
-      app.once('destroy', () => {
-        clearInterval(progressChecker);
-      });
+      progressChecker = setInterval(checkProgress, 100);
       
       // Load assets and set up scene
       assetListLoader.load(() => {
+        if (!app) {
+          console.log("App was destroyed during asset loading");
+          return;
+        }
+        
         app.start();
         
         // Create model entity
@@ -693,6 +751,7 @@ const currentScriptTag = document.currentScript;
       console.error("Error initializing PlayCanvas viewer:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
       viewerInitialized = false;
+      app = null;
     }
   }
 })();