Update index_2.js

index_2.js

@@ -21,52 +21,68 @@
   let controlsInstance = null;
   let initialCameraPosition = null;
   let initialCameraRotation = null;
+  // We'll save the imported SPLAT module here so we can reuse it later.
+  let SPLAT = 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");
-  var minAzimuth = config.minAzimuth !== undefined ? parseFloat(config.minAzimuth) : -Infinity;
-  var maxAzimuth = config.maxAzimuth !== undefined ? parseFloat(config.maxAzimuth) : Infinity;
+  const gifUrl = config.gif_url;
+  const plyUrl = config.ply_url;
+  const minZoom = parseFloat(config.minZoom || "0");
+  const maxZoom = parseFloat(config.maxZoom || "20");
+  const minAngle = parseFloat(config.minAngle || "0");
+  const maxAngle = parseFloat(config.maxAngle || "360");
+  const minAzimuth = config.minAzimuth !== undefined ? parseFloat(config.minAzimuth) : -Infinity;
+  const maxAzimuth = config.maxAzimuth !== undefined ? parseFloat(config.maxAzimuth) : Infinity;
 
+  // Read initial orbit parameters for desktop.
+  const initAlphaDesktop = config.initAlpha !== undefined ? parseFloat(config.initAlpha) : 0.5;
+  const initBetaDesktop  = config.initBeta  !== undefined ? parseFloat(config.initBeta)  : 0.5;
+  const initRadiusDesktop = config.initRadius !== undefined ? parseFloat(config.initRadius) : 5;
+  // Read initial orbit parameters for phone.
+  const initAlphaPhone = config.initAlphaPhone !== undefined ? parseFloat(config.initAlphaPhone) : initAlphaDesktop;
+  const initBetaPhone  = config.initBetaPhone  !== undefined ? parseFloat(config.initBetaPhone)  : initBetaDesktop;
+  const initRadiusPhone = config.initRadiusPhone !== undefined ? parseFloat(config.initRadiusPhone) : initRadiusDesktop;
+
+  // Detect if the device is iOS.
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  // Also detect Android devices.
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+  
+  // Choose the appropriate initial orbit values based on device type.
+  const chosenInitAlpha = isMobile ? initAlphaPhone : initAlphaDesktop;
+  const chosenInitBeta  = isMobile ? initBetaPhone  : initBetaDesktop;
+  const chosenInitRadius = isMobile ? initRadiusPhone : initRadiusDesktop;
+  
   // Determine the aspect ratio.
-  var aspectPercent = "100%";
+  let 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]);
+      const parts = config.aspect.split(":");
+      const w = parseFloat(parts[0]);
+      const h = parseFloat(parts[1]);
       if (!isNaN(w) && !isNaN(h) && w > 0) {
         aspectPercent = (h / w * 100) + "%";
       }
     } else {
-      var aspectValue = parseFloat(config.aspect);
+      const aspectValue = parseFloat(config.aspect);
       if (!isNaN(aspectValue) && aspectValue > 0) {
         aspectPercent = (100 / aspectValue) + "%";
       }
     }
   } else {
-    var parentContainer = scriptTag.parentNode;
-    var containerWidth = parentContainer.offsetWidth;
-    var containerHeight = parentContainer.offsetHeight;
+    const parentContainer = scriptTag.parentNode;
+    const containerWidth = parentContainer.offsetWidth;
+    const 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;
-  // Also detect Android devices.
-  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
-  
   // Inject CSS styles into the document head, scoped with the unique id.
-  var styleEl = document.createElement('style');
+  const styleEl = document.createElement('style');
   styleEl.textContent = `
     /* Widget container styling */
     #ply-widget-container-${instanceId} {
@@ -192,7 +208,7 @@
   document.head.appendChild(styleEl);
   
   // Create the widget container and set its inner HTML.
-  var widgetContainer = document.createElement('div');
+  const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.innerHTML = `
     <!-- GIF Preview Container -->
@@ -217,17 +233,17 @@
   scriptTag.parentNode.appendChild(widgetContainer);
   
   // Grab element references.
-  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);
+  const gifPreview = document.getElementById('gif-preview-container-' + instanceId);
+  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
+  const previewImage = document.getElementById('preview-image-' + instanceId);
+  const closeBtn = document.getElementById('close-btn-' + instanceId);
+  const fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
+  const helpToggle = document.getElementById('help-toggle-' + instanceId);
+  const resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
+  const menuContent = document.getElementById('menu-content-' + instanceId);
+  const canvas = document.getElementById('canvas-' + instanceId);
+  const progressDialog = document.getElementById('progress-dialog-' + instanceId);
+  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   
   // Set help instructions based on device type.
   if (isMobile) {
@@ -317,85 +333,84 @@
     menuContent.style.display = (menuContent.style.display === 'block') ? 'none' : 'block';
   });
   
-  resetCameraBtn.addEventListener('click', function() {
+  // Modified reset button: re-creates the OrbitControls with the original parameters.
+  resetCameraBtn.addEventListener('click', async function() {
     console.log("Reset camera button clicked.");
     if (cameraInstance && initialCameraPosition && initialCameraRotation) {
+      // Reset camera position and rotation.
       cameraInstance.position = initialCameraPosition.clone();
       cameraInstance.rotation = initialCameraRotation.clone();
       if (typeof cameraInstance.update === 'function') {
         cameraInstance.update();
       }
-      if (controlsInstance && typeof controlsInstance.update === 'function') {
-        controlsInstance.update();
+      // Dispose of the current controls.
+      if (controlsInstance && typeof controlsInstance.dispose === 'function') {
+        controlsInstance.dispose();
       }
+      // Re-create OrbitControls with the original chosen parameters.
+      controlsInstance = new SPLAT.OrbitControls(
+        cameraInstance,
+        canvas,
+        0.5,  // default alpha fallback
+        0.5,  // default beta fallback
+        5,    // default radius fallback
+        true,
+        new SPLAT.Vector3(),
+        chosenInitAlpha,
+        chosenInitBeta,
+        chosenInitRadius
+      );
+      controlsInstance.maxZoom = maxZoom;
+      controlsInstance.minZoom = minZoom;
+      controlsInstance.minAngle = minAngle;
+      controlsInstance.maxAngle = maxAngle;
+      controlsInstance.minAzimuth = minAzimuth;
+      controlsInstance.maxAzimuth = maxAzimuth;
+      controlsInstance.panSpeed = isMobile ? 0.5 : 1.2;
+      controlsInstance.update();
     }
   });
   
   // --- Initialize the 3D PLY Viewer ---
   async function initializeViewer() {
-    const SPLAT = await import("https://bilca-gsplat-library.static.hf.space/dist/index.js");
+    // Import SPLAT and store it globally.
+    SPLAT = await import("https://bilca-gsplat-library.static.hf.space/dist/index.js");
     progressDialog.style.display = 'block';
     const renderer = new SPLAT.WebGLRenderer(canvas);
     const scene = new SPLAT.Scene();
 
-    // --- Compute the initial camera position based on device type ---
-    let camPosArray;
-    if (isMobile && config.cameraPositionPhone && Array.isArray(config.cameraPositionPhone) && config.cameraPositionPhone.length === 3) {
-      camPosArray = config.cameraPositionPhone;
-    } else if (config.cameraPositionComputer && Array.isArray(config.cameraPositionComputer) && config.cameraPositionComputer.length === 3) {
-      camPosArray = config.cameraPositionComputer;
-    } else {
-      // Fallback to a default position if none provided.
-      camPosArray = [1, 1, 5];
-    }
-    const camPos = new SPLAT.Vector3(camPosArray[0], camPosArray[1], camPosArray[2]);
-
-    // --- Compute orbit parameters (alpha, beta, radius) using target = (0,0,0) ---
-    const target = new SPLAT.Vector3(0, 0, 0);
-    const dx = camPos.x - target.x;
-    const dy = camPos.y - target.y;
-    const dz = camPos.z - target.z;
-    const computedRadius = Math.sqrt(dx * dx + dy * dy + dz * dz);
-    // Note: OrbitControls expects: camera.y = target.y - radius*sin(beta)
-    // Thus, beta is computed as:
-    const computedBeta = -Math.asin(dy / computedRadius);
-    // And for alpha, using:
-    // camera.x = target.x + radius*sin(alpha)*cos(beta)
-    // camera.z = target.z - radius*cos(alpha)*cos(beta)
-    const computedAlpha = Math.atan2(dx, -dz);
-  
-    // Construct the camera using the computed position.
-    const camera = new SPLAT.Camera(undefined, camPos);
-
-    // Construct OrbitControls using the computed alpha, beta, and radius.
-    const controls = new SPLAT.OrbitControls(
+    // Construct the camera (no custom position since it's no longer in the JSON).
+    const camera = new SPLAT.Camera();
+    
+    // Construct OrbitControls with the chosen initial orbit parameters.
+    controlsInstance = new SPLAT.OrbitControls(
       camera,
       canvas,
-      computedAlpha,
-      computedBeta,
-      computedRadius,
+      0.5, // default alpha fallback
+      0.5, // default beta fallback
+      5,   // default radius fallback
       true,
-      target
+      new SPLAT.Vector3(),
+      chosenInitAlpha,
+      chosenInitBeta,
+      chosenInitRadius
     );
   
     cameraInstance = camera;
-    controlsInstance = controls;
-    // Save the initial state for the reset button.
+    // Save the initial camera state (after controls are created)
     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.minAzimuth = minAzimuth;
-    controls.maxAzimuth = maxAzimuth;
-
-    // Set panSpeed: 0.5 on mobile, 1.2 on computer.
-    controls.panSpeed = isMobile ? 0.5 : 1.2;
+    controlsInstance.maxZoom = maxZoom;
+    controlsInstance.minZoom = minZoom;
+    controlsInstance.minAngle = minAngle;
+    controlsInstance.maxAngle = maxAngle;
+    controlsInstance.minAzimuth = minAzimuth;
+    controlsInstance.maxAzimuth = maxAzimuth;
+    controlsInstance.panSpeed = isMobile ? 0.5 : 1.2;
   
-    controls.update();
+    controlsInstance.update();
   
     try {
       await SPLAT.PLYLoader.LoadAsync(
@@ -412,7 +427,7 @@
     }
   
     const frame = () => {
-      controls.update();
+      controlsInstance.update();
       renderer.render(scene, camera);
       requestAnimationFrame(frame);
     };