bilca commited on
Commit
78a5bef
·
verified ·
1 Parent(s): ae60d54

Update js_scripts/index.js

Browse files
Files changed (1) hide show
  1. js_scripts/index.js +80 -52
js_scripts/index.js CHANGED
@@ -1,4 +1,48 @@
1
- // Store the current script reference before the async function runs
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  const currentScriptTag = document.currentScript;
3
 
4
  (async function() {
@@ -176,15 +220,15 @@ const currentScriptTag = document.currentScript;
176
  // Grab element references.
177
  const gifPreview = document.getElementById('gif-preview-container-' + instanceId);
178
  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
179
- const previewImage = document.getElementById('preview-image-' + instanceId);
180
  const closeBtn = document.getElementById('close-btn-' + instanceId);
181
  const fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
182
  const helpToggle = document.getElementById('help-toggle-' + instanceId);
183
  const resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
184
  const menuContent = document.getElementById('menu-content-' + instanceId);
185
- const canvas = document.getElementById('canvas-' + instanceId);
186
- const progressDialog = document.getElementById('progress-dialog-' + instanceId);
187
- const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
188
 
189
  // Flag to track if mouse is over the viewer
190
  let isMouseOverViewer = false;
@@ -213,6 +257,28 @@ const currentScriptTag = document.currentScript;
213
  `;
214
  }
215
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  // Handle GIF configuration
217
  if (gifUrl) {
218
  previewImage.src = gifUrl;
@@ -236,8 +302,14 @@ const currentScriptTag = document.currentScript;
236
  gifPreview.style.display = 'none';
237
  viewerContainer.style.display = 'block';
238
 
239
- // Always initialize the viewer when the GIF is clicked
240
- initializeViewer();
 
 
 
 
 
 
241
  });
242
  }
243
 
@@ -721,48 +793,4 @@ const currentScriptTag = document.currentScript;
721
  }
722
  });
723
 
724
- // Initialize the orbit controller
725
- setTimeout(() => {
726
- if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
727
- // Calculate distance from camera to model
728
- const modelPos = modelEntity.getPosition();
729
- const camPos = cameraEntity.getPosition();
730
- const distanceVec = new pc.Vec3();
731
- distanceVec.sub2(camPos, modelPos);
732
- const distance = distanceVec.length();
733
-
734
- // Set up the orbit controller
735
- cameraEntity.script.orbitCamera.pivotPoint.copy(modelPos);
736
- cameraEntity.script.orbitCamera.distance = distance;
737
- cameraEntity.script.orbitCamera._removeInertia();
738
-
739
- // Log camera setup for debugging
740
- console.log(`Camera initialized with pivot: (${modelPos.x}, ${modelPos.y}, ${modelPos.z}), distance: ${distance}`);
741
- }
742
- }, 100);
743
-
744
- app.root.addChild(cameraEntity);
745
-
746
- // Initial resize to match container
747
- resize();
748
-
749
- // Set up wheel handlers
750
- setupWheelHandlers();
751
-
752
- // Hide progress dialog when everything is set up
753
- progressDialog.style.display = 'none';
754
-
755
- // Mark viewer as initialized
756
- viewerInitialized = true;
757
-
758
- console.log("PLY viewer initialization complete");
759
- });
760
-
761
- } catch (error) {
762
- console.error("Error initializing PlayCanvas viewer:", error);
763
- progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
764
- viewerInitialized = false;
765
- app = null;
766
- }
767
- }
768
- })();
 
1
+ // Initialize the orbit controller
2
+ setTimeout(() => {
3
+ if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
4
+ // Calculate distance from camera to model
5
+ const modelPos = modelEntity.getPosition();
6
+ const camPos = cameraEntity.getPosition();
7
+ const distanceVec = new pc.Vec3();
8
+ distanceVec.sub2(camPos, modelPos);
9
+ const distance = distanceVec.length();
10
+
11
+ // Set up the orbit controller
12
+ cameraEntity.script.orbitCamera.pivotPoint.copy(modelPos);
13
+ cameraEntity.script.orbitCamera.distance = distance;
14
+ cameraEntity.script.orbitCamera._removeInertia();
15
+
16
+ // Log camera setup for debugging
17
+ console.log(`Camera initialized with pivot: (${modelPos.x}, ${modelPos.y}, ${modelPos.z}), distance: ${distance}`);
18
+ }
19
+ }, 100);
20
+
21
+ app.root.addChild(cameraEntity);
22
+
23
+ // Initial resize to match container
24
+ resize();
25
+
26
+ // Set up wheel handlers
27
+ setupWheelHandlers();
28
+
29
+ // Hide progress dialog when everything is set up
30
+ progressDialog.style.display = 'none';
31
+
32
+ // Mark viewer as initialized
33
+ viewerInitialized = true;
34
+
35
+ console.log("PLY viewer initialization complete");
36
+ });
37
+
38
+ } catch (error) {
39
+ console.error("Error initializing PlayCanvas viewer:", error);
40
+ progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
41
+ viewerInitialized = false;
42
+ app = null;
43
+ }
44
+ }
45
+ })(); Store the current script reference before the async function runs
46
  const currentScriptTag = document.currentScript;
47
 
48
  (async function() {
 
220
  // Grab element references.
221
  const gifPreview = document.getElementById('gif-preview-container-' + instanceId);
222
  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
223
+ let previewImage = document.getElementById('preview-image-' + instanceId);
224
  const closeBtn = document.getElementById('close-btn-' + instanceId);
225
  const fullscreenToggle = document.getElementById('fullscreen-toggle-' + instanceId);
226
  const helpToggle = document.getElementById('help-toggle-' + instanceId);
227
  const resetCameraBtn = document.getElementById('reset-camera-btn-' + instanceId);
228
  const menuContent = document.getElementById('menu-content-' + instanceId);
229
+ let canvas = document.getElementById('canvas-' + instanceId);
230
+ let progressDialog = document.getElementById('progress-dialog-' + instanceId);
231
+ let progressIndicator = document.getElementById('progress-indicator-' + instanceId);
232
 
233
  // Flag to track if mouse is over the viewer
234
  let isMouseOverViewer = false;
 
257
  `;
258
  }
259
 
260
+ // Function to recreate the canvas - helps with WebGL context issues
261
+ function recreateCanvas() {
262
+ if (canvas) {
263
+ // Remove the old canvas
264
+ const oldCanvas = canvas;
265
+ const parent = oldCanvas.parentNode;
266
+
267
+ // Create a new canvas with the same attributes
268
+ const newCanvas = document.createElement('canvas');
269
+ newCanvas.id = 'canvas-' + instanceId;
270
+ newCanvas.className = 'ply-canvas';
271
+
272
+ // Replace the old canvas with the new one
273
+ parent.replaceChild(newCanvas, oldCanvas);
274
+
275
+ // Update the canvas reference
276
+ canvas = newCanvas;
277
+
278
+ console.log("Canvas recreated for fresh WebGL context");
279
+ }
280
+ }
281
+
282
  // Handle GIF configuration
283
  if (gifUrl) {
284
  previewImage.src = gifUrl;
 
302
  gifPreview.style.display = 'none';
303
  viewerContainer.style.display = 'block';
304
 
305
+ // Recreate canvas for a fresh WebGL context
306
+ recreateCanvas();
307
+
308
+ // Small delay to ensure DOM updates before initialization
309
+ setTimeout(() => {
310
+ // Always initialize the viewer when the GIF is clicked
311
+ initializeViewer();
312
+ }, 100);
313
  });
314
  }
315
 
 
793
  }
794
  });
795
 
796
+ //