Update index_sans_gif.js

index_sans_gif.js

@@ -26,18 +26,13 @@
   const instanceId = Math.random().toString(36).substr(2, 8);
   
   // Read required URLs and parameters from the config.
-  // The gifUrl is no longer used.
   var plyUrl = config.ply_url;
-  
-  // Optional parameters for zoom and rotation limits.
-  // Defaults: zoom from 0 to 20; rotation from 0 to 360.
   var minZoom = parseFloat(config.minZoom || "0");
   var maxZoom = parseFloat(config.maxZoom || "20");
   var minAngle = parseFloat(config.minAngle || "0");
   var maxAngle = parseFloat(config.maxAngle || "360");
   
   // Determine the aspect ratio.
-  // Default aspect: 1:1 (i.e. 100% padding-bottom)
   var aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.indexOf(":") !== -1) {
@@ -54,7 +49,6 @@
       }
     }
   } else {
-    // If no aspect parameter is provided, compute the aspect ratio from the parent element.
     var parentContainer = scriptTag.parentNode;
     var containerWidth = parentContainer.offsetWidth;
     var containerHeight = parentContainer.offsetHeight;
@@ -63,10 +57,9 @@
     }
   }
   
-  // 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.
+  // Inject CSS styles into the document head.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
     /* Widget container styling */
@@ -88,7 +81,6 @@
     }
     /* Viewer Container styling */
     #viewer-container-${instanceId} {
-      /* Display the viewer by default */
       display: block;
       position: absolute;
       top: 0;
@@ -105,7 +97,7 @@
       height: 100%;
       display: block;
     }
-    /* Progress dialog styling (as a centered div) */
+    /* Progress dialog styling */
     #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
@@ -118,7 +110,7 @@
       z-index: 1000;
       display: none;
     }
-    /* Menu (instructions) content styling */
+    /* Menu content styling */
     #menu-content-${instanceId} {
       display: none;
       position: absolute;
@@ -147,8 +139,6 @@
       align-items: center;
       justify-content: center;
     }
-    /* Positions: fullscreen at top-right, help (instructions) below fullscreen,
-       and reset camera below help */
     #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
@@ -164,18 +154,16 @@
       line-height: 1;
       padding: 0;
     }
-    /* Adjust the ⟲ icon position within the reset camera button */
     .reset-icon {
       display: inline-block;
     }
   `;
   document.head.appendChild(styleEl);
   
-  // Create the widget container and set its inner HTML.
+  // Create the widget container.
   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}">
@@ -195,7 +183,7 @@
   `;
   scriptTag.parentNode.appendChild(widgetContainer);
   
-  // Grab element references using the unique IDs.
+  // Grab element references.
   var viewerContainer = document.getElementById('viewer-container-' + instanceId);
   var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
   var helpToggle = document.getElementById('help-toggle-' + instanceId);
@@ -206,40 +194,21 @@
   var progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   
   // --- Button Event Handlers ---
-  
   fullscreenToggle.addEventListener('click', function() {
     if (isIOS) {
-      if (!widgetContainer.classList.contains('fake-fullscreen')) {
-        widgetContainer.classList.add('fake-fullscreen');
-      } else {
-        widgetContainer.classList.remove('fake-fullscreen');
-      }
+      widgetContainer.classList.toggle('fake-fullscreen');
       fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
       if (!document.fullscreenElement) {
-        if (widgetContainer.requestFullscreen) {
-          widgetContainer.requestFullscreen();
-        } else if (widgetContainer.webkitRequestFullscreen) {
-          widgetContainer.webkitRequestFullscreen();
-        } else if (widgetContainer.mozRequestFullScreen) {
-          widgetContainer.mozRequestFullScreen();
-        } else if (widgetContainer.msRequestFullscreen) {
-          widgetContainer.msRequestFullscreen();
-        }
+        widgetContainer.requestFullscreen ? widgetContainer.requestFullscreen() : null;
       } else {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        }
+        document.exitFullscreen ? document.exitFullscreen() : null;
       }
     }
   });
   
   document.addEventListener('fullscreenchange', function() {
-    if (document.fullscreenElement === widgetContainer) {
-      fullscreenToggle.textContent = '⇲';
-    } else {
-      fullscreenToggle.textContent = '⇱';
-    }
+    fullscreenToggle.textContent = (document.fullscreenElement === widgetContainer) ? '⇲' : '⇱';
   });
   
   helpToggle.addEventListener('click', function(e) {
@@ -252,12 +221,8 @@
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
       cameraInstance.position = initialCameraPosition.clone();
       cameraInstance.rotation = initialCameraRotation.clone();
-      if (typeof cameraInstance.update === 'function') {
-        cameraInstance.update();
-      }
-      if (controlsInstance && typeof controlsInstance.update === 'function') {
-        controlsInstance.update();
-      }
+      if (typeof cameraInstance.update === 'function') cameraInstance.update();
+      if (controlsInstance && typeof controlsInstance.update === 'function') controlsInstance.update();
     }
   });
   
@@ -265,23 +230,29 @@
   async function initializeViewer() {
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
     progressDialog.style.display = 'block';
+    
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
+    
+    // Create the camera.
     const camera = new SPLAT.Camera();
-    const controls = new SPLAT.OrbitControls(camera, canvas);
-  
-    // Set the initial camera position from the config.
+    // Set the initial camera position from the config BEFORE creating OrbitControls.
     if (config.cameraPosition &&
         Array.isArray(config.cameraPosition) &&
         config.cameraPosition.length === 3) {
-      // Since camera.position.set is not available, assign each coordinate.
       camera.position.x = config.cameraPosition[0];
       camera.position.y = config.cameraPosition[1];
       camera.position.z = config.cameraPosition[2];
+      // Optionally, update the camera if needed.
+      if (typeof camera.update === 'function') camera.update();
     }
-  
+    
+    // Create OrbitControls AFTER the camera's position is set.
+    const controls = new SPLAT.OrbitControls(camera, canvas);
+    
     cameraInstance = camera;
     controlsInstance = controls;
+    // Capture the adjusted initial camera values.
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();