Update index.js

index.js

@@ -4,6 +4,9 @@
   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);
 
   // Helper: Get query parameters from THIS script’s src URL.
   function getScriptQueryParam(param) {
@@ -31,18 +34,18 @@
   // Detect if the device is iOS.
   var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
-  // Inject CSS styles into the document head.
+  // 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%;
     }
     /* When in fake fullscreen mode (iOS fallback) */
-    #ply-widget-container.fake-fullscreen {
+    #ply-widget-container-${instanceId}.fake-fullscreen {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
@@ -52,7 +55,7 @@
       z-index: 9999 !important;
     }
     /* GIF Preview styling */
-    #gif-preview-container {
+    #gif-preview-container-${instanceId} {
       position: absolute;
       top: 0;
       left: 0;
@@ -63,13 +66,13 @@
       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;
@@ -81,13 +84,13 @@
       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%;
@@ -100,7 +103,7 @@
       display: none;
     }
     /* Menu (instructions) content styling */
-    #menu-content {
+    #menu-content-${instanceId} {
       display: none;
       position: absolute;
       top: 62px;
@@ -129,20 +132,20 @@
       justify-content: center;
     }
     /* Positions: Close at top-left, fullscreen at top-right, help (instructions) below fullscreen */
-    #close-btn {
+    #close-btn-${instanceId} {
       top: 17px;
       left: 15px;
     }
-    #fullscreen-toggle {
+    #fullscreen-toggle-${instanceId} {
       top: 17px;
       right: 15px;
     }
-    #help-toggle {
+    #help-toggle-${instanceId} {
       top: 72px;
       right: 15px;
     }
-    /* New Reset Camera Button below the help button */
-    #reset-camera-btn {
+    /* Reset Camera Button below the help button */
+    #reset-camera-btn-${instanceId} {
       top: 127px;
       right: 15px;
     }
@@ -151,23 +154,23 @@
 
   // 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>
-      <button id="reset-camera-btn" 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">🗘</button>
+      <div id="menu-content-${instanceId}">
         - Rotate with right click<br>
         - Zoom in/out with middle click<br>
         - Translate with left click
@@ -176,18 +179,18 @@
   `;
   document.currentScript.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 resetCameraBtn = document.getElementById('reset-camera-btn');
-  var menuContent = document.getElementById('menu-content');
-  var canvas = document.getElementById('canvas');
-  var progressDialog = document.getElementById('progress-dialog');
-  var progressIndicator = document.getElementById('progress-indicator');
+  // Grab element references using the unique IDs.
+  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);
 
   // Set the preview image if provided.
   if (gifUrl) {
@@ -303,10 +306,8 @@
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
     }
 
-
     const frame = () => {
       controls.update();
-      
       renderer.render(scene, camera);
       requestAnimationFrame(frame);
     };