Fix camera target by transforming original center with SplatMesh matrix

static/viewer/viewer.html

@@ -157,6 +157,24 @@
           const cz = parseFloat(urlParams.get("cz") || "0");
           const r = parseFloat(urlParams.get("r") || "2");
 
+          const splat = new SplatMesh({
+            url: url,
+            onLoad: () => {
+              loadingEl.style.display = "none";
+            },
+          });
+
+          // Re-orient for Three.js (+Y up)
+          splat.rotation.y = Math.PI / 2;
+          splat.rotation.x = Math.PI;
+          scene.add(splat);
+          splat.updateMatrixWorld(true);
+
+          // The center is in the original unrotated coordinates
+          const center = new THREE.Vector3(cx, cy, cz);
+          // Apply the splat's transform so the camera looks at the correct world position
+          center.applyMatrix4(splat.matrixWorld);
+
           // Setup Camera and OrbitControls
           const camera = new THREE.PerspectiveCamera(
             45,
@@ -165,9 +183,6 @@
             Math.max(1000, r * 10),
           );
 
-          // ZipSplat generates Gaussians in OpenCV Y-down frame, and we rotate them by Math.PI around X.
-          // The effective target center in Three.js space is thus (cx, -cy, -cz)
-          const center = new THREE.Vector3(cx, -cy, -cz);
           const dist = Math.max(r * 2.0, 0.5);
           camera.position.copy(center).add(new THREE.Vector3(0, r * 0.2, dist));
 
@@ -179,19 +194,6 @@
           controls.target.copy(center);
           controls.update();
 
-          const splat = new SplatMesh({
-            url: url,
-            onLoad: () => {
-              loadingEl.style.display = "none";
-            },
-          });
-
-          // Re-orient for Three.js (+Y up)
-          splat.rotation.y = Math.PI / 2;
-          splat.rotation.x = Math.PI;
-          scene.add(splat);
-          splat.updateMatrixWorld(true);
-
           window.addEventListener("resize", () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();