Update index_2.js

index_2.js

@@ -1,37 +1,90 @@
-(function() {
-  // 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) {
-      var queryString = document.currentScript.src.split('?')[1];
-      params = new URLSearchParams(queryString);
-    } else {
-      params = new URLSearchParams(window.location.search);
+(async function() {
+  // Retrieve the current script tag and load the JSON configuration file from the data-config attribute.
+  const scriptTag = document.currentScript;
+  const configUrl = scriptTag.getAttribute("data-config");
+  let config = {};
+  if (configUrl) {
+    try {
+      const response = await fetch(configUrl);
+      config = await response.json();
+    } catch (error) {
+      console.error("Error loading config file:", error);
+      return;
     }
-    return params.get(param);
+  } else {
+    console.error("No config file provided. Please set a data-config attribute on the script tag.");
+    return;
   }
 
-  // Read required URLs and optional limits from the query parameters.
-  var gifUrl = getScriptQueryParam("gif_url");
-  var plyUrl = getScriptQueryParam("ply_url");
-  // Optional parameters for zoom and angle limits:
-  var minZoom = parseFloat(getScriptQueryParam("minZoom")) || 1.5;
-  var maxZoom = parseFloat(getScriptQueryParam("maxZoom")) || 5;
-  var minAngle = parseFloat(getScriptQueryParam("minAngle")) || 0;
-  var maxAngle = parseFloat(getScriptQueryParam("maxAngle")) || 90;
+  // --- 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);
+  
+  // Read configuration values from the JSON file.
+  var gifUrl = config.gif_url;
+  var plyUrl = config.ply_url;
+  var minZoom = parseFloat(config.minZoom || "0");
+  var maxZoom = parseFloat(config.maxZoom || "20");
+  var minAngle = parseFloat(config.minAngle || "0");
+  var maxAngle = parseFloat(config.maxAngle || "360");
 
-  // Inject CSS styles into the document head.
+  // Determine the aspect ratio.
+  // Default: 1:1 (i.e. 100% padding-bottom)
+  var aspectPercent = "100%";
+  if (config.aspect) {
+    if (config.aspect.indexOf(":") !== -1) {
+      var parts = config.aspect.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(config.aspect);
+      if (!isNaN(aspectValue) && aspectValue > 0) {
+        aspectPercent = (100 / aspectValue) + "%";
+      }
+    }
+  } else {
+    // If no aspect is provided, compute from the parent container.
+    var parentContainer = scriptTag.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 = `
     /* Widget container styling */
-    #ply-widget-container {
+    #ply-widget-container-${instanceId} {
       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 {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      padding-bottom: 0 !important;
+      z-index: 9999 !important;
     }
     /* GIF Preview styling */
-    #gif-preview-container {
+    #gif-preview-container-${instanceId} {
       position: absolute;
       top: 0;
       left: 0;
@@ -42,31 +95,31 @@
       overflow: hidden;
       cursor: pointer;
     }
-    #gif-preview-container img {
+    #gif-preview-container-${instanceId} img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
     /* Viewer Container styling */
-    #viewer-container {
+    #viewer-container-${instanceId} {
       display: none;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      background: #ffffff; /* white background */
+      background: #FEFEFD;
       border: 1px solid #474558;
       border-radius: 10px;
     }
     /* Canvas fills the viewer container */
-    #canvas {
+    #canvas-${instanceId} {
       width: 100%;
       height: 100%;
       display: block;
     }
     /* Progress dialog styling (as a centered div) */
-    #progress-dialog {
+    #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -79,11 +132,11 @@
       display: none;
     }
     /* Menu (instructions) content styling */
-    #menu-content {
+    #menu-content-${instanceId} {
       display: none;
       position: absolute;
-      top: 62px;
-      right: 70px;
+      top: 70px;
+      right: 15px;
       background: #FFFEF4;
       border: 1px solid #474558;
       border-radius: 5px;
@@ -107,107 +160,138 @@
       align-items: center;
       justify-content: center;
     }
-    /* Positions: Close at top-left, fullscreen at top-right, help (instructions) below fullscreen */
-    #close-btn {
+    /* Positions: Close at top-left, fullscreen at top-right, help and reset buttons */
+    #close-btn-${instanceId} {
       top: 17px;
       left: 15px;
     }
-    #fullscreen-toggle {
+    #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
     }
-    #help-toggle {
-      top: 72px;
-      right: 15px;
+    #help-toggle-${instanceId} {
+      top: 17px;
+      right: 70px;
+      font-size: 22px;
+    }
+    #reset-camera-btn-${instanceId} {
+      top: 17px;
+      right: 123px;
+      font-size: 22px;
+      line-height: normal;
+      padding: 0;
+    }
+    /* Adjust the reset icon position: move it slightly upward */
+    .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';
+  widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.innerHTML = `
     <!-- GIF Preview Container -->
-    <div id="gif-preview-container">
-      <img id="preview-image" alt="Preview" crossorigin="anonymous">
+    <div id="gif-preview-container-${instanceId}">
+      <img id="preview-image-${instanceId}" alt="Preview" crossorigin="anonymous">
     </div>
     <!-- Viewer Container -->
-    <div id="viewer-container">
-      <canvas id="canvas"></canvas>
-      <div id="progress-dialog">
-        <progress id="progress-indicator" max="100" value="0"></progress>
+    <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="close-btn" class="widget-button">X</button>
-      <button id="fullscreen-toggle" class="widget-button">⇱</button>
-      <button id="help-toggle" class="widget-button">?</button>
-      <div id="menu-content">
+      <button id="close-btn-${instanceId}" class="widget-button">X</button>
+      <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">
+        <span class="reset-icon">⟲</span>
+      </button>
+      <div id="menu-content-${instanceId}">
         - Rotate with right click<br>
         - Zoom in/out with middle click<br>
         - Translate with left click
       </div>
     </div>
   `;
-  // Append widgetContainer to the current script's parent so it appears in place.
-  document.currentScript.parentNode.appendChild(widgetContainer);
-
+  scriptTag.parentNode.appendChild(widgetContainer);
+  
   // Grab element references.
-  var gifPreview = document.getElementById('gif-preview-container');
-  var viewerContainer = document.getElementById('viewer-container');
-  var previewImage = document.getElementById('preview-image');
-  var closeBtn = document.getElementById('close-btn');
-  var fullscreenToggle = document.getElementById('fullscreen-toggle');
-  var helpToggle = document.getElementById('help-toggle');
-  var menuContent = document.getElementById('menu-content');
-  var canvas = document.getElementById('canvas');
-  var progressDialog = document.getElementById('progress-dialog');
-  var progressIndicator = document.getElementById('progress-indicator');
-
-  // Set the preview image if provided.
+  var gifPreview = document.getElementById('gif-preview-container-' + instanceId);
+  var viewerContainer = document.getElementById('viewer-container-' + instanceId);
+  var previewImage = document.getElementById('preview-image-' + instanceId);
+  var closeBtn = document.getElementById('close-btn-' + 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);
+  
+  // 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.
   if (gifUrl) {
     previewImage.src = gifUrl;
-  }
-
-  // --- Button Event Handlers ---
-
-  // When the preview image is clicked, hide it, show the viewer, and initialize the 3D viewer.
-  gifPreview.addEventListener('click', function() {
+  } else {
     gifPreview.style.display = 'none';
     viewerContainer.style.display = 'block';
+    closeBtn.style.display = 'none';
+    // Start the viewer immediately.
     initializeViewer();
-  });
-
-  // Close button: hide the viewer and show the preview.
+  }
+  
+  // --- Button Event Handlers ---
+  // Only add the preview click handler if a gif_url exists.
+  if (gifUrl) {
+    gifPreview.addEventListener('click', function() {
+      gifPreview.style.display = 'none';
+      viewerContainer.style.display = 'block';
+      initializeViewer();
+    });
+  }
+  
   closeBtn.addEventListener('click', function() {
-    // Exit fullscreen if active.
     if (document.fullscreenElement === widgetContainer) {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       }
     }
+    widgetContainer.classList.remove('fake-fullscreen');
     viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
   });
-
-  // Fullscreen toggle: toggle fullscreen on the widget container.
+  
   fullscreenToggle.addEventListener('click', function() {
-    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();
+    if (isIOS) {
+      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.exitFullscreen) {
-        document.exitFullscreen();
+      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();
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
       }
     }
   });
-
-  // Update the fullscreen button icon on fullscreen change.
+  
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';
@@ -215,47 +299,78 @@
       fullscreenToggle.textContent = '⇱';
     }
   });
-
-  // Help (instructions) toggle: show/hide the instructions.
+  
   helpToggle.addEventListener('click', function(e) {
     e.stopPropagation();
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
-
-  // --- Initialize the 3D PLY Viewer using PlayCanvas Model Viewer ---
+  
+  resetCameraBtn.addEventListener('click', function() {
+    console.log("Reset camera button clicked.");
+    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();
+      }
+    }
+  });
+  
+  // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
-    // Dynamically import the PlayCanvas Model Viewer module.
-    const { ModelViewer } = await import("https://cdn.jsdelivr.net/npm/@playcanvas/model-viewer/dist/model-viewer.module.js");
-
-    // Display the progress dialog.
+    const SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest");
     progressDialog.style.display = 'block';
-
-    // Create a new instance of the ModelViewer.
-    // The options below set a white background and disable the grid.
-    const viewer = new ModelViewer(canvas, {
-      backgroundColor: '#ffffff',
-      grid: false,
-      // Pass zoom and orbit (angle) limits; note that the property names here
-      // assume the ModelViewer accepts these options. Adjust names as per the library docs.
-      minZoom: minZoom,
-      maxZoom: maxZoom,
-      minOrbitPitch: minAngle,
-      maxOrbitPitch: maxAngle
-    });
-
-    // Load the PLY model from the provided URL.
-    // Assume that the `load` method accepts a progress callback.
-    viewer.load(plyUrl, function(progress) {
-      progressIndicator.value = progress * 100;
-    }).then(function() {
-      // Hide the progress dialog once the model is loaded.
+    const renderer = new SPLAT.WebGLRenderer(canvas);
+    const scene = new SPLAT.Scene();
+    const camera = new SPLAT.Camera();
+    const controls = new SPLAT.OrbitControls(camera, canvas);
+  
+    cameraInstance = camera;
+    controlsInstance = controls;
+    // Capture the camera's default initial position and rotation.
+    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,
+        scene,
+        (progress) => {
+          progressIndicator.value = progress * 100;
+        }
+      );
       progressDialog.style.display = 'none';
-    }).catch(function(error) {
+    } catch (error) {
       console.error("Error loading PLY file:", error);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
-    });
-
-    // Start the viewer's render loop.
-    viewer.start();
+    }
+  
+    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);
   }
+  
+  // If a gif_url exists, the viewer is started on preview click;
+  // otherwise, it was already started above.
 })();