fix: pin GSPLAT version and simplify loader for visibility

This commit is contained in:
Andrey Flat 2026-04-23 15:14:32 +08:00
parent 3bdaa4fc53
commit fcfb8c40e6

View file

@ -120,7 +120,8 @@
</div> </div>
<script type="module"> <script type="module">
import * as GSPLAT from 'https://cdn.jsdelivr.net/npm/gsplat@latest/dist/index.js'; // Using a pinned version for stability
import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@1.2.9/dist/index.es.min.js";
async function init() { async function init() {
const container = document.getElementById('container'); const container = document.getElementById('container');
@ -128,23 +129,12 @@
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
try { try {
// Initialize Scene const renderer = new SPLAT.WebGLRenderer();
const scene = new GSPLAT.Scene();
const camera = new GSPLAT.Camera();
const renderer = new GSPLAT.WebGLRenderer();
container.appendChild(renderer.canvas); container.appendChild(renderer.canvas);
const controls = new GSPLAT.OrbitControls(camera, renderer.canvas); const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
// Set camera position safely const controls = new SPLAT.OrbitControls(camera, renderer.canvas);
const pos = camera.position || (camera.data ? camera.data.position : null);
if (pos) {
pos.x = 0;
pos.y = 0;
pos.z = 5;
}
if (controls.update) controls.update();
// Resize handler // Resize handler
const resize = () => { const resize = () => {
@ -154,32 +144,20 @@
resize(); resize();
// Load the Splat file // Load the Splat file
status.innerText = "Downloading compressed Splat..."; status.innerText = "Downloading Splat...";
await SPLAT.Loader.LoadAsync("/models/gs/nebula_rnd1.splat", scene, (progress) => {
status.innerText = `Loading: ${Math.round(progress * 100)}%`;
});
// Using the .splat file provided by user
console.log("GSPLAT object:", GSPLAT);
const loader = GSPLAT.Loader ? GSPLAT.Loader : GSPLAT;
console.log("Selected loader:", loader);
// Try various loading methods
if (typeof GSPLAT.loadAsync === "function") {
await GSPLAT.loadAsync("/models/gs/nebula_rnd1.splat", scene, (progress) => {
status.innerText = `Loading: ${Math.round(progress * 100)}%`;
});
} else if (GSPLAT.Loader && typeof GSPLAT.Loader.LoadAsync === "function") {
await GSPLAT.Loader.LoadAsync("/models/gs/nebula_rnd1.splat", scene, (progress) => {
status.innerText = `Loading: ${Math.round(progress * 100)}%`;
});
} else if (typeof GSPLAT.PLYLoader === "object" && GSPLAT.PLYLoader.LoadAsync) {
await GSPLAT.PLYLoader.LoadAsync("/models/gs/nebula_rnd1.splat", scene, (progress) => {
status.innerText = `Loading: ${Math.round(progress * 100)}%`;
});
} else {
throw new Error("No valid loader found in GSPLAT library. Check console for structure.");
}
loading.style.display = 'none'; loading.style.display = 'none';
// Animation loop // Set initial camera position AFTER loading,
// because some models might be very far from origin
camera.position.z = 5;
camera.position.y = 1;
controls.update();
const frame = () => { const frame = () => {
controls.update(); controls.update();
renderer.render(scene, camera); renderer.render(scene, camera);
@ -187,9 +165,11 @@
}; };
requestAnimationFrame(frame); requestAnimationFrame(frame);
console.log("Splat loaded successfully into scene", scene);
} catch (error) { } catch (error) {
console.error(error); console.error("Error in GSPLAT init:", error);
status.innerText = "Error loading splat: " + error.message; status.innerText = "Error: " + error.message;
status.style.color = "#ff4444"; status.style.color = "#ff4444";
document.querySelector('.spinner').style.display = 'none'; document.querySelector('.spinner').style.display = 'none';
} }