Spaces:
Running
Running
Update index_2.js
Browse files- index_2.js +28 -24
index_2.js
CHANGED
@@ -55,7 +55,7 @@
|
|
55 |
left: 0;
|
56 |
width: 100%;
|
57 |
height: 100%;
|
58 |
-
background: #
|
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 |
-
//
|
228 |
-
|
229 |
|
230 |
-
|
231 |
-
|
232 |
-
const { ModelViewer } = await import("https://cdn.jsdelivr.net/npm/@playcanvas/model-viewer@latest/dist/model-viewer.module.js");
|
233 |
|
234 |
-
|
235 |
-
|
236 |
-
|
237 |
-
|
238 |
-
|
239 |
-
|
240 |
-
|
241 |
-
|
242 |
-
|
243 |
-
|
244 |
-
|
245 |
-
|
246 |
-
});
|
247 |
|
248 |
-
|
249 |
-
|
|
|
|
|
|
|
250 |
// Hide the progress dialog once the model is loaded.
|
251 |
progressDialog.style.display = 'none';
|
252 |
-
}
|
253 |
-
console.error("Error loading
|
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 |
})();
|