Update index_sans_gif.js

index_sans_gif.js

@@ -1,9 +1,14 @@
 (function() {
+  // --- Outer scope variables for camera state ---
   let cameraInstance = null;
   let controlsInstance = null;
   let initialCameraPosition = null;
   let initialCameraRotation = null;
+  
+  // Generate a unique identifier for this widget instance.
+  const instanceId = Math.random().toString(36).substr(2, 8);
 
+  // Helper: Get query parameters from THIS script’s src URL.
   function getScriptQueryParam(param) {
     var params = new URLSearchParams("");
     if (document.currentScript && document.currentScript.src.indexOf('?') !== -1) {
@@ -15,40 +20,74 @@
     return params.get(param);
   }
 
+  // Read required URLs.
+  // The gifUrl is no longer used.
   var plyUrl = getScriptQueryParam("ply_url");
+
+  // Optional parameters for zoom and rotation limits.
+  // Defaults: zoom from 0 to 20; rotation from 0 to 360.
   var minZoom = parseFloat(getScriptQueryParam("minZoom") || "0");
   var maxZoom = parseFloat(getScriptQueryParam("maxZoom") || "20");
   var minAngle = parseFloat(getScriptQueryParam("minAngle") || "0");
   var maxAngle = parseFloat(getScriptQueryParam("maxAngle") || "360");
+
+  // Detect if the device is iOS.
   var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
+  // Inject CSS styles into the document head, scoped with the unique id.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
-    #viewer-container {
+    /* Widget container styling */
+    #ply-widget-container-${instanceId} {
       position: relative;
       width: 100%;
-      height: 100vh;
+      height: 0;
+      padding-bottom: 100%;
+    }
+    /* When in fake fullscreen mode (iOS fallback) */
+    #ply-widget-container-${instanceId}.fake-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      padding-bottom: 0 !important;
+      z-index: 9999 !important;
+    }
+    /* Viewer Container styling */
+    #viewer-container-${instanceId} {
+      /* Display the viewer by default */
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       background: #FEFEFD;
       border: 1px solid #474558;
       border-radius: 10px;
     }
-    #canvas {
+    /* Canvas fills the viewer container */
+    #canvas-${instanceId} {
       width: 100%;
       height: 100%;
       display: block;
     }
-    #progress-dialog {
+    /* Progress dialog styling (as a centered div) */
+    #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      border: none;
       background: rgba(255,255,255,0.9);
       padding: 20px;
       border-radius: 5px;
       z-index: 1000;
       display: none;
     }
-    #menu-content {
+    /* Menu (instructions) content styling */
+    #menu-content-${instanceId} {
       display: none;
       position: absolute;
       top: 62px;
@@ -61,6 +100,7 @@
       line-height: 1.4;
       color: #474558;
     }
+    /* Button styling */
     .widget-button {
       position: absolute;
       width: 45px;
@@ -75,69 +115,112 @@
       align-items: center;
       justify-content: center;
     }
-    #fullscreen-toggle { top: 17px; right: 15px; }
-    #help-toggle { top: 72px; right: 15px; }
-    #reset-camera-btn { top: 127px; right: 15px; }
+    /* Positions: fullscreen at top-right, help (instructions) below fullscreen,
+       and reset camera below help */
+    #fullscreen-toggle-${instanceId} {
+      top: 17px;
+      right: 15px;
+    }
+    #help-toggle-${instanceId} {
+      top: 72px;
+      right: 15px;
+    }
+    #reset-camera-btn-${instanceId} {
+      top: 127px;
+      right: 15px;
+    }
   `;
   document.head.appendChild(styleEl);
 
-  var viewerContainer = document.createElement('div');
-  viewerContainer.id = 'viewer-container';
-  viewerContainer.innerHTML = `
-    <canvas id="canvas"></canvas>
-    <div id="progress-dialog">
-      <progress id="progress-indicator" max="100" value="0"></progress>
-    </div>
-    <button id="fullscreen-toggle" class="widget-button">⇱</button>
-    <button id="help-toggle" class="widget-button">?</button>
-    <button id="reset-camera-btn" class="widget-button">⟲</button>
-    <div id="menu-content">
-      - Rotate with right click<br>
-      - Zoom in/out with middle click<br>
-      - Translate with left click
+  // Create the widget container and set its inner HTML.
+  var widgetContainer = document.createElement('div');
+  widgetContainer.id = 'ply-widget-container-' + instanceId;
+  widgetContainer.innerHTML = `
+    <!-- Viewer Container (displayed directly) -->
+    <div id="viewer-container-${instanceId}">
+      <canvas id="canvas-${instanceId}"></canvas>
+      <div id="progress-dialog-${instanceId}">
+        <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
+      </div>
+      <button id="fullscreen-toggle-${instanceId}" class="widget-button">⇱</button>
+      <button id="help-toggle-${instanceId}" class="widget-button">?</button>
+      <button id="reset-camera-btn-${instanceId}" class="widget-button">⟲</button>
+      <div id="menu-content-${instanceId}">
+        - Rotate with right click<br>
+        - Zoom in/out with middle click<br>
+        - Translate with left click
+      </div>
     </div>
   `;
-  document.currentScript.parentNode.appendChild(viewerContainer);
+  document.currentScript.parentNode.appendChild(widgetContainer);
 
-  var fullscreenToggle = document.getElementById('fullscreen-toggle');
-  var helpToggle = document.getElementById('help-toggle');
-  var resetCameraBtn = document.getElementById('reset-camera-btn');
-  var menuContent = document.getElementById('menu-content');
-  var canvas = document.getElementById('canvas');
-  var progressDialog = document.getElementById('progress-dialog');
-  var progressIndicator = document.getElementById('progress-indicator');
+  // Grab element references using the unique IDs.
+  var viewerContainer = document.getElementById('viewer-container-' + instanceId);
+  var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
+  var helpToggle = document.getElementById('help-toggle-' + instanceId);
+  var resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
+  var menuContent = document.getElementById('menu-content-' + instanceId);
+  var canvas = document.getElementById('canvas-' + instanceId);
+  var progressDialog = document.getElementById('progress-dialog-' + instanceId);
+  var progressIndicator = document.getElementById('progress-indicator-' + instanceId);
+
+  // --- Button Event Handlers ---
 
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      viewerContainer.classList.toggle('fake-fullscreen');
-      fullscreenToggle.textContent = viewerContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
+      if (!widgetContainer.classList.contains('fake-fullscreen')) {
+        widgetContainer.classList.add('fake-fullscreen');
+      } else {
+        widgetContainer.classList.remove('fake-fullscreen');
+      }
+      fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
       if (!document.fullscreenElement) {
-        viewerContainer.requestFullscreen();
+        if (widgetContainer.requestFullscreen) {
+          widgetContainer.requestFullscreen();
+        } else if (widgetContainer.webkitRequestFullscreen) {
+          widgetContainer.webkitRequestFullscreen();
+        } else if (widgetContainer.mozRequestFullScreen) {
+          widgetContainer.mozRequestFullScreen();
+        } else if (widgetContainer.msRequestFullscreen) {
+          widgetContainer.msRequestFullscreen();
+        }
       } else {
-        document.exitFullscreen();
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
       }
     }
   });
 
   document.addEventListener('fullscreenchange', function() {
-    fullscreenToggle.textContent = document.fullscreenElement ? '⇲' : '⇱';
+    if (document.fullscreenElement === widgetContainer) {
+      fullscreenToggle.textContent = '⇲';
+    } else {
+      fullscreenToggle.textContent = '⇱';
+    }
   });
 
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
-    menuContent.style.display = menuContent.style.display === 'block' ? 'none' : 'block';
+    menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
 
   resetCameraBtn.addEventListener('click', function() {
+    console.log("Reset camera button clicked.");
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
-      cameraInstance.position.copy(initialCameraPosition);
-      cameraInstance.rotation.copy(initialCameraRotation);
-      if (typeof cameraInstance.update === 'function') cameraInstance.update();
-      if (controlsInstance && typeof controlsInstance.update === 'function') controlsInstance.update();
+      cameraInstance.position = initialCameraPosition.clone();
+      cameraInstance.rotation = initialCameraRotation.clone();
+      if (typeof cameraInstance.update === 'function') {
+        cameraInstance.update();
+      }
+      if (controlsInstance && typeof controlsInstance.update === 'function') {
+        controlsInstance.update();
+      }
     }
   });
 
+  // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
     progressDialog.style.display = 'block';
@@ -156,12 +239,17 @@
     controls.minZoom = minZoom;
     controls.minAngle = minAngle;
     controls.maxAngle = maxAngle;
+
     controls.update();
 
     try {
-      await SPLAT.PLYLoader.LoadAsync(plyUrl, scene, (progress) => {
-        progressIndicator.value = progress * 100;
-      });
+      await SPLAT.PLYLoader.LoadAsync(
+        plyUrl,
+        scene,
+        (progress) => {
+          progressIndicator.value = progress * 100;
+        }
+      );
       progressDialog.style.display = 'none';
     } catch (error) {
       console.error("Error loading PLY file:", error);
@@ -174,8 +262,15 @@
       requestAnimationFrame(frame);
     };
 
-    window.addEventListener("resize", () => renderer.setSize(canvas.clientWidth, canvas.clientHeight));
+    const handleResize = () => {
+      renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
     requestAnimationFrame(frame);
   }
+
+  // Initialize the viewer immediately.
   initializeViewer();
 })();