Spaces:
Running
Running
Update js_scripts/index.js
Browse files- js_scripts/index.js +80 -52
js_scripts/index.js
CHANGED
@@ -1,4 +1,48 @@
|
|
1 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
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 |
-
|
186 |
-
|
187 |
-
|
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 |
-
//
|
240 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
241 |
});
|
242 |
}
|
243 |
|
@@ -721,48 +793,4 @@ const currentScriptTag = document.currentScript;
|
|
721 |
}
|
722 |
});
|
723 |
|
724 |
-
//
|
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 |
+
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|