From b095ada2eaa5aa084bb2813fb614567865cb52b8 Mon Sep 17 00:00:00 2001
From: "mula.liu" <mula.liu@163.com>
Date: Mon, 1 Dec 2025 00:21:56 +0800
Subject: [PATCH] fix: Optimize Three.js rendering to reduce
 requestAnimationFrame latency (geometry reuse)

---
 frontend/src/components/Constellations.tsx | 6 ++++--
 frontend/src/components/Stars.tsx          | 9 +++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Constellations.tsx b/frontend/src/components/Constellations.tsx
index 3197039..6e09f63 100644
--- a/frontend/src/components/Constellations.tsx
+++ b/frontend/src/components/Constellations.tsx
@@ -82,6 +82,9 @@ export function Constellations() {
     });
   }, [constellations]);
 
+  // Reuse geometry
+  const sphereGeometry = useMemo(() => new THREE.SphereGeometry(15, 8, 8), []);
+
   if (constellationLines.length === 0) {
     return null;
   }
@@ -92,8 +95,7 @@ export function Constellations() {
         <group key={constellation.name}>
           {/* Render constellation stars */}
           {constellation.starPositions.map((pos, idx) => (
-            <mesh key={`${constellation.name}-star-${idx}`} position={pos}>
-              <sphereGeometry args={[15, 8, 8]} />
+            <mesh key={`${constellation.name}-star-${idx}`} position={pos} geometry={sphereGeometry}>
               <meshBasicMaterial color="#FFFFFF" transparent opacity={0.6} />
             </mesh>
           ))}
diff --git a/frontend/src/components/Stars.tsx b/frontend/src/components/Stars.tsx
index 1ffe857..35814d4 100644
--- a/frontend/src/components/Stars.tsx
+++ b/frontend/src/components/Stars.tsx
@@ -90,6 +90,9 @@ export function Stars() {
     });
   }, [stars]);
 
+  // Reuse geometry for all stars to improve performance
+  const sphereGeometry = useMemo(() => new THREE.SphereGeometry(1, 16, 16), []);
+
   if (starData.length === 0) {
     return null;
   }
@@ -99,8 +102,7 @@ export function Stars() {
       {starData.map((star) => (
         <group key={star.name}>
           {/* Star sphere */}
-          <mesh position={star.position}>
-            <sphereGeometry args={[star.size, 16, 16]} />
+          <mesh position={star.position} geometry={sphereGeometry} scale={[star.size, star.size, star.size]}>
             <meshBasicMaterial
               color={star.color}
               transparent
@@ -110,8 +112,7 @@ export function Stars() {
           </mesh>
 
           {/* Star glow */}
-          <mesh position={star.position}>
-            <sphereGeometry args={[star.size * 2, 16, 16]} />
+          <mesh position={star.position} geometry={sphereGeometry} scale={[star.size * 2, star.size * 2, star.size * 2]}>
             <meshBasicMaterial
               color={star.color}
               transparent