Update js_scripts/index.js

js_scripts/index.js

@@ -1,4 +1,48 @@
-// Store the current script reference before the async function runs
+// Initialize the orbit controller
+        setTimeout(() => {
+          if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
+            // Calculate distance from camera to model
+            const modelPos = modelEntity.getPosition();
+            const camPos = cameraEntity.getPosition();
+            const distanceVec = new pc.Vec3();
+            distanceVec.sub2(camPos, modelPos);
+            const distance = distanceVec.length();
+            
+            // Set up the orbit controller
+            cameraEntity.script.orbitCamera.pivotPoint.copy(modelPos);
+            cameraEntity.script.orbitCamera.distance = distance;
+            cameraEntity.script.orbitCamera._removeInertia();
+            
+            // Log camera setup for debugging
+            console.log(`Camera initialized with pivot: (${modelPos.x}, ${modelPos.y}, ${modelPos.z}), distance: ${distance}`);
+          }
+        }, 100);
+        
+        app.root.addChild(cameraEntity);
+        
+        // Initial resize to match container
+        resize();
+        
+        // Set up wheel handlers
+        setupWheelHandlers();
+        
+        // Hide progress dialog when everything is set up
+        progressDialog.style.display = 'none';
+        
+        // Mark viewer as initialized
+        viewerInitialized = true;
+        
+        console.log("PLY viewer initialization complete");
+      });
+      
+    } catch (error) {
+      console.error("Error initializing PlayCanvas viewer:", error);
+      progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
+      viewerInitialized = false;
+      app = null;
+    }
+  }
+})(); Store the current script reference before the async function runs
 const currentScriptTag = document.currentScript;
 
 (async function() {
@@ -176,15 +220,15 @@ const currentScriptTag = document.currentScript;
   // Grab element references.
   const gifPreview = document.getElementById('gif-preview-container-' + instanceId);
   const viewerContainer = document.getElementById('viewer-container-' + instanceId);
-  const previewImage = document.getElementById('preview-image-' + instanceId);
+  let previewImage = document.getElementById('preview-image-' + instanceId);
   const closeBtn = document.getElementById('close-btn-' + instanceId);
   const fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle = document.getElementById('help-toggle-' + instanceId);
   const resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
   const menuContent = document.getElementById('menu-content-' + instanceId);
-  const canvas = document.getElementById('canvas-' + instanceId);
-  const progressDialog = document.getElementById('progress-dialog-' + instanceId);
-  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
+  let canvas = document.getElementById('canvas-' + instanceId);
+  let progressDialog = document.getElementById('progress-dialog-' + instanceId);
+  let progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   
   // Flag to track if mouse is over the viewer
   let isMouseOverViewer = false;
@@ -213,6 +257,28 @@ const currentScriptTag = document.currentScript;
     `;
   }
   
+  // Function to recreate the canvas - helps with WebGL context issues
+  function recreateCanvas() {
+    if (canvas) {
+      // Remove the old canvas
+      const oldCanvas = canvas;
+      const parent = oldCanvas.parentNode;
+      
+      // Create a new canvas with the same attributes
+      const newCanvas = document.createElement('canvas');
+      newCanvas.id = 'canvas-' + instanceId;
+      newCanvas.className = 'ply-canvas';
+      
+      // Replace the old canvas with the new one
+      parent.replaceChild(newCanvas, oldCanvas);
+      
+      // Update the canvas reference
+      canvas = newCanvas;
+      
+      console.log("Canvas recreated for fresh WebGL context");
+    }
+  }
+  
   // Handle GIF configuration
   if (gifUrl) {
     previewImage.src = gifUrl;
@@ -236,8 +302,14 @@ const currentScriptTag = document.currentScript;
       gifPreview.style.display = 'none';
       viewerContainer.style.display = 'block';
       
-      // Always initialize the viewer when the GIF is clicked
-      initializeViewer();
+      // Recreate canvas for a fresh WebGL context
+      recreateCanvas();
+      
+      // Small delay to ensure DOM updates before initialization
+      setTimeout(() => {
+        // Always initialize the viewer when the GIF is clicked
+        initializeViewer();
+      }, 100);
     });
   }
   
@@ -721,48 +793,4 @@ const currentScriptTag = document.currentScript;
           }
         });
         
-        // Initialize the orbit controller
-        setTimeout(() => {
-          if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
-            // Calculate distance from camera to model
-            const modelPos = modelEntity.getPosition();
-            const camPos = cameraEntity.getPosition();
-            const distanceVec = new pc.Vec3();
-            distanceVec.sub2(camPos, modelPos);
-            const distance = distanceVec.length();
-            
-            // Set up the orbit controller
-            cameraEntity.script.orbitCamera.pivotPoint.copy(modelPos);
-            cameraEntity.script.orbitCamera.distance = distance;
-            cameraEntity.script.orbitCamera._removeInertia();
-            
-            // Log camera setup for debugging
-            console.log(`Camera initialized with pivot: (${modelPos.x}, ${modelPos.y}, ${modelPos.z}), distance: ${distance}`);
-          }
-        }, 100);
-        
-        app.root.addChild(cameraEntity);
-        
-        // Initial resize to match container
-        resize();
-        
-        // Set up wheel handlers
-        setupWheelHandlers();
-        
-        // Hide progress dialog when everything is set up
-        progressDialog.style.display = 'none';
-        
-        // Mark viewer as initialized
-        viewerInitialized = true;
-        
-        console.log("PLY viewer initialization complete");
-      });
-      
-    } catch (error) {
-      console.error("Error initializing PlayCanvas viewer:", error);
-      progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
-      viewerInitialized = false;
-      app = null;
-    }
-  }
-})();
+        //