bilca commited on
Commit
e892761
·
verified ·
1 Parent(s): 6e1df5f

Update index_2.js

Browse files
Files changed (1) hide show
  1. index_2.js +28 -24
index_2.js CHANGED
@@ -55,7 +55,7 @@
55
  left: 0;
56
  width: 100%;
57
  height: 100%;
58
- background: #FEFEFD;
59
  border: 1px solid #474558;
60
  border-radius: 10px;
61
  }
@@ -224,34 +224,38 @@
224
 
225
  // --- Initialize the 3D PLY Viewer using PlayCanvas Model Viewer ---
226
  async function initializeViewer() {
227
- // Show the progress dialog.
228
- progressDialog.style.display = 'block';
229
 
230
- try {
231
- // Dynamically import the PlayCanvas Model Viewer module.
232
- const { ModelViewer } = await import("https://cdn.jsdelivr.net/npm/@playcanvas/model-viewer@latest/dist/model-viewer.module.js");
233
 
234
- // Create a new ModelViewer instance on the canvas.
235
- const viewer = new ModelViewer(canvas, {
236
- url: plyUrl, // URL of the PLY model to load
237
- backgroundColor: "#FEFEFD",
238
- minZoom: minZoom,
239
- maxZoom: maxZoom,
240
- minAngle: minAngle,
241
- maxAngle: maxAngle,
242
- // Callback to update the progress indicator (value between 0 and 1)
243
- onProgress: function(progress) {
244
- progressIndicator.value = progress * 100;
245
- }
246
- });
247
 
248
- // Load the model.
249
- await viewer.load();
 
 
 
250
  // Hide the progress dialog once the model is loaded.
251
  progressDialog.style.display = 'none';
252
- } catch (error) {
253
- console.error("Error loading model:", error);
254
  progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
255
- }
 
 
 
256
  }
257
  })();
 
55
  left: 0;
56
  width: 100%;
57
  height: 100%;
58
+ background: #ffffff; /* white background */
59
  border: 1px solid #474558;
60
  border-radius: 10px;
61
  }
 
224
 
225
  // --- Initialize the 3D PLY Viewer using PlayCanvas Model Viewer ---
226
  async function initializeViewer() {
227
+ // Dynamically import the PlayCanvas Model Viewer module.
228
+ const { ModelViewer } = await import("https://cdn.jsdelivr.net/npm/@playcanvas/model-viewer/dist/model-viewer.module.js");
229
 
230
+ // Display the progress dialog.
231
+ progressDialog.style.display = 'block';
 
232
 
233
+ // Create a new instance of the ModelViewer.
234
+ // The options below set a white background and disable the grid.
235
+ const viewer = new ModelViewer(canvas, {
236
+ backgroundColor: '#ffffff',
237
+ grid: false,
238
+ // Pass zoom and orbit (angle) limits; note that the property names here
239
+ // assume the ModelViewer accepts these options. Adjust names as per the library docs.
240
+ minZoom: minZoom,
241
+ maxZoom: maxZoom,
242
+ minOrbitPitch: minAngle,
243
+ maxOrbitPitch: maxAngle
244
+ });
 
245
 
246
+ // Load the PLY model from the provided URL.
247
+ // Assume that the `load` method accepts a progress callback.
248
+ viewer.load(plyUrl, function(progress) {
249
+ progressIndicator.value = progress * 100;
250
+ }).then(function() {
251
  // Hide the progress dialog once the model is loaded.
252
  progressDialog.style.display = 'none';
253
+ }).catch(function(error) {
254
+ console.error("Error loading PLY file:", error);
255
  progressDialog.innerHTML = `<p style="color: red">Error loading model: ${error.message}</p>`;
256
+ });
257
+
258
+ // Start the viewer's render loop.
259
+ viewer.start();
260
  }
261
  })();