From 76a530b293a5231dff5d3a3cd1a7595607728baa Mon Sep 17 00:00:00 2001
From: crosstyan <crosstyan@outlook.com>
Date: Mon, 24 Mar 2025 15:42:05 +0800
Subject: [PATCH] Enhance text rendering in Scene component by adding a
 reference for dynamic camera alignment and refactoring mesh creation for
 improved clarity.

---
 src/App.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 049370c..a798b1e 100644
--- a/src/App.tsx
+++ b/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>