fix: Optimize Three.js rendering to reduce requestAnimationFrame latency (geometry reuse)

main
mula.liu 2025-12-01 00:21:56 +08:00
parent cb1f03794e
commit b095ada2ea
2 changed files with 9 additions and 6 deletions

View File

@ -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>
))}

View File

@ -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