Enhance text rendering in Scene component by adding a reference for dynamic camera alignment and refactoring mesh creation for improved clarity.

src/App.tsx

@@ -97,21 +97,27 @@ const Scene = () => {
     const helper = <cameraHelper args={[camera]} />
     // @ts-expect-error 16 elements
     camera.applyMatrix4(new THREE.Matrix4(...extrinsic))
+
+    const textRef = useRef<THREE.Mesh>(null)
+    const { camera: viewCamera } = useThree()
+
+    useFrame(() => {
+      if (textRef.current) {
+        textRef.current.lookAt(viewCamera.position)
+      }
+    })
+
     let text: JSX.Element | null = null
     if (name) {
-      // https://github.com/pmndrs/react-three-fiber/discussions/832
       const geo = new THREE_ADDONS.TextGeometry(name ?? "", { font, size: textSize ?? 0.1, depth: 0.001 })
-
-      // Extract camera position from extrinsic matrix
       const matrix = new THREE.Matrix4()
       // @ts-expect-error 16 elements
       matrix.set(...extrinsic)
       const position = new THREE.Vector3()
       position.setFromMatrixPosition(matrix)
 
-      // Create text without applying camera matrix transformation
       text = (
-        <mesh position={position}>
+        <mesh ref={textRef} position={position}>
           <primitive object={geo} />
           <meshStandardMaterial color="black" />
         </mesh>