Update index_sans_gif.js

index_sans_gif.js

@@ -30,14 +30,12 @@
   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 +52,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 +60,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 +84,6 @@
     }
     /* Viewer Container styling */
     #viewer-container-${instanceId} {
-      /* Display the viewer by default */
       display: block;
       position: absolute;
       top: 0;
@@ -105,7 +100,7 @@
       height: 100%;
       display: block;
     }
-    /* Progress dialog styling (as a centered div) */
+    /* Progress dialog styling */
     #progress-dialog-${instanceId} {
       position: absolute;
       top: 50%;
@@ -147,8 +142,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 +157,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 +186,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 +197,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) {
@@ -247,13 +219,17 @@
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
   
+  // Update the reset button to use the JSON cameraPosition.
   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 (cameraInstance) {
+      if (config.cameraPosition &&
+          Array.isArray(config.cameraPosition) &&
+          config.cameraPosition.length === 3) {
+        cameraInstance.position.x = config.cameraPosition[0];
+        cameraInstance.position.y = config.cameraPosition[1];
+        cameraInstance.position.z = config.cameraPosition[2];
+        if (typeof cameraInstance.update === 'function') cameraInstance.update();
       }
       if (controlsInstance && typeof controlsInstance.update === 'function') {
         controlsInstance.update();
@@ -267,21 +243,17 @@
     progressDialog.style.display = 'block';
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
+    
+    // Create the camera with default initialization.
     const camera = new SPLAT.Camera();
+    // Do NOT set the camera's position from JSON here.
+    
+    // Create OrbitControls after the camera is created.
     const controls = new SPLAT.OrbitControls(camera, canvas);
-  
-    // Set the initial camera position from the config.
-    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];
-    }
-  
+    
     cameraInstance = camera;
     controlsInstance = controls;
+    // Capture the camera's default initial values.
     initialCameraPosition = camera.position.clone();
     initialCameraRotation = camera.rotation.clone();