Update index_sans_gif.js

index_sans_gif.js

@@ -7,7 +7,7 @@
   
   // 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("");
@@ -19,21 +19,49 @@
     }
     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");
-
+  
+  // Determine the aspect ratio.
+  // Default aspect: 1:1 (i.e. 100% padding-bottom)
+  var aspectPercent = "100%";
+  var aspectParam = getScriptQueryParam("aspect");
+  if (aspectParam) {
+    if (aspectParam.indexOf(":") !== -1) {
+      var parts = aspectParam.split(":");
+      var w = parseFloat(parts[0]);
+      var h = parseFloat(parts[1]);
+      if (!isNaN(w) && !isNaN(h) && w > 0) {
+        aspectPercent = (h / w * 100) + "%";
+      }
+    } else {
+      var aspectValue = parseFloat(aspectParam);
+      if (!isNaN(aspectValue) && aspectValue > 0) {
+        aspectPercent = (100 / aspectValue) + "%";
+      }
+    }
+  } else {
+    // If no aspect parameter is provided, compute the aspect ratio from the parent element.
+    var parentContainer = document.currentScript.parentNode;
+    var containerWidth = parentContainer.offsetWidth;
+    var containerHeight = parentContainer.offsetHeight;
+    if (containerWidth > 0 && containerHeight > 0) {
+      aspectPercent = (containerHeight / containerWidth * 100) + "%";
+    }
+  }
+  
   // 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 = `
@@ -42,7 +70,7 @@
       position: relative;
       width: 100%;
       height: 0;
-      padding-bottom: 100%;
+      padding-bottom: ${aspectPercent};
     }
     /* When in fake fullscreen mode (iOS fallback) */
     #ply-widget-container-${instanceId}.fake-fullscreen {
@@ -135,10 +163,11 @@
     /* Adjust the ⟲ icon position within the reset camera button */
     .reset-icon {
       display: inline-block;
+      transform: translateY(-3px);
     }
   `;
   document.head.appendChild(styleEl);
-
+  
   // Create the widget container and set its inner HTML.
   var widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
@@ -162,7 +191,7 @@
     </div>
   `;
   document.currentScript.parentNode.appendChild(widgetContainer);
-
+  
   // Grab element references using the unique IDs.
   var viewerContainer = document.getElementById('viewer-container-' + instanceId);
   var fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
@@ -172,9 +201,9 @@
   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) {
       if (!widgetContainer.classList.contains('fake-fullscreen')) {
@@ -201,7 +230,7 @@
       }
     }
   });
-
+  
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';
@@ -209,12 +238,12 @@
       fullscreenToggle.textContent = '⇱';
     }
   });
-
+  
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
-
+  
   resetCameraBtn.addEventListener('click', function() {
     console.log("Reset camera button clicked.");
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
@@ -228,7 +257,7 @@
       }
     }
   });
-
+  
   // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
     const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
@@ -237,20 +266,20 @@
     const scene = new SPLAT.Scene();
     const camera = new SPLAT.Camera();
     const controls = new SPLAT.OrbitControls(camera, canvas);
-
+  
     cameraInstance = camera;
     controlsInstance = controls;
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();
-
+  
     canvas.style.background = "#FEFEFD";
     controls.maxZoom = maxZoom;
     controls.minZoom = minZoom;
     controls.minAngle = minAngle;
     controls.maxAngle = maxAngle;
-
+  
     controls.update();
-
+  
     try {
       await SPLAT.PLYLoader.LoadAsync(
         plyUrl,
@@ -264,22 +293,22 @@
       console.error("Error loading PLY file:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
     }
-
+  
     const frame = () => {
       controls.update();
       renderer.render(scene, camera);
       requestAnimationFrame(frame);
     };
-
+  
     const handleResize = () => {
       renderer.setSize(canvas.clientWidth, canvas.clientHeight);
     };
-
+  
     handleResize();
     window.addEventListener("resize", handleResize);
     requestAnimationFrame(frame);
   }
-
+  
   // Initialize the viewer immediately.
   initializeViewer();
 })();