Add Joints component to visualize 3D pose data in Scene. Import pose data from JSON and implement Z-up to Y-up transformation for joint positioning. Update .gitignore to exclude public JSON files.

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+public/*.json

src/App.tsx

@@ -5,6 +5,10 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js'
 import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'
 import HelvetikerRegular from "three/examples/fonts/helvetiker_regular.typeface.json"
 import { useEffect, useRef, useState, JSX } from 'react'
+import POSE_3D_ from "../public/result_ae_01_ae_08.json"
+
+// F, 16, 3
+const POSE_3D: Array<Array<[number, number, number]>> = POSE_3D_ as [number, number, number][][]
 
 const THREE_ADDONS = {
   FontLoader,
@@ -30,6 +34,13 @@ const Z_UP_TO_Y_UP = new THREE.Matrix4().set(
   0, 0, 0, 1
 )
 
+const Z_UP_TO_Y_UP_PRIME = 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,
   0, 1, 0, 0,
@@ -198,6 +209,28 @@ const Scene = () => {
     return final
   }
 
+  interface JointsProps {
+    index: number
+    radius?: number
+  }
+  const Joints = ({ index, radius }: JointsProps) => {
+    const js = POSE_3D[index]
+    const r = radius ?? 0.1
+    const joint = js.map((j) => {
+      const [x, y, z] = j
+      const V = new THREE.Vector3(x, y, z)
+      const worldCvt = Z_UP_TO_Y_UP_PRIME.clone()
+      V.applyMatrix4(worldCvt)
+      // random pick a color
+      const color = `hsl(${Math.random() * 360}, 100%, 50%)`
+      return <mesh position={V}>
+        <sphereGeometry args={[r, 32, 32]} />
+        <meshStandardMaterial color={color} />
+      </mesh>
+    })
+    return <group>{joint}</group>
+  }
+
   const scene = (<group>
     {/* <OrbitControls /> */}
     <ambientLight intensity={0.05} />
@@ -211,6 +244,7 @@ const Scene = () => {
       return <CameraViewFromExtrinsic key={key} name={`${key}(${fov_x.toFixed(1)})`} extrinsic={preProcessExtrinsic(value)} fov={fov_x} aspect={IMAGE_WIDTH / IMAGE_HEIGHT} far={far} />
     })}
     <Axes />
+    <Joints index={12} radius={0.01} />
   </group>)
   return (
     // Note that we don't need to import anything, All three.js objects will be treated