Add detailed transformation sequence documentation in note.md and implement Z-up to Y-up conversion matrix in App.tsx. Update preProcessExtrinsic function to correctly apply transformation order for camera-to-world conversion.

src/App.tsx

@@ -21,6 +21,14 @@ const CV_TO_GL_MAT = new THREE.Matrix4().set(
   0, 0, 0, 1
 )
 
+// Z-up to Y-up conversion matrix
+// Rotate -90 degrees around X axis to convert from Z-up to Y-up
+const Z_UP_TO_Y_UP = new THREE.Matrix4().set(
+  1, 0, 0, 0,
+  0, 0, 1, 0,
+  0, -1, 0, 0,
+  0, 0, 0, 1
+)
 
 const DEFAULT_TRANSFORMATION_MATRIX = [
   1, 0, 0, 0,
@@ -154,12 +162,30 @@ const Scene = () => {
   }
 
   const preProcessExtrinsic = (extrinsic: number[]) => {
-    const Rt = new THREE.Matrix4()
+    // Create the initial world-to-camera transform
+    const worldToCamera = new THREE.Matrix4()
     // @ts-expect-error 16 elements
-    Rt.set(...extrinsic)
-    Rt.invert()
-    Rt.multiply(CV_TO_GL_MAT)
-    return Rt
+    worldToCamera.set(...extrinsic)
+
+    // Convert from Z-up to Y-up first (this affects world coordinates)
+    const worldZupToYup = Z_UP_TO_Y_UP.clone()
+
+    // Then handle OpenCV to OpenGL camera convention
+    const cameraConversion = CV_TO_GL_MAT.clone()
+
+    // Final transformation:
+    // 1. Convert world from Z-up to Y-up
+    // 2. Apply the camera transform
+    // 3. Convert camera coordinates from OpenCV to OpenGL
+    const final = new THREE.Matrix4()
+    final
+      .multiply(cameraConversion)
+      .multiply(worldToCamera)
+      .multiply(worldZupToYup)
+
+    // Invert to get the camera-to-world transform
+    final.invert()
+    return final
   }
 
   const scene = (<group>