First:
::
// Star colors (white, blue, yellow, red)
const colorType = Math.random();
const color = new THREE.Color();
if (colorType < 0.6) {
color.setHSL(0.6, 0.2, 0.8 + Math.random() * 0.2); // White/blue
} else if (colorType < 0.8) {
color.setHSL(0.15, 0.8, 0.7); // Yellow
} else {
color.setHSL(0.0, 0.8, 0.6); // Red
}
starColors[i3] = color.r;
starColors[i3 + 1] = color.g;
starColors[i3 + 2] = color.b;
// Store original colors for twinkling
starOriginalColors[i3] = color.r;
starOriginalColors[i3 + 1] = color.g;
starOriginalColors[i3 + 2] = color.b;
// Update star brightness twinkling
const starColorsArray = starSystem.geometry.attributes.color.array;
for (let i = 0; i < starCount; i++) {
const i3 = i * 3;
const brightness = 0.5 + 0.5 Math.sin(time 2 + i);
starColorsArray[i3] = starOriginalColors[i3] * brightness;
starColorsArray[i3 + 1] = starOriginalColors[i3 + 1] * brightness;
starColorsArray[i3 + 2] = starOriginalColors[i3 + 2] * brightness;
}
starSystem.geometry.attributes.color.needsUpdate = true;
::
How it works:
60% of stars are white/blue (hue 0.6)
20% are yellow (hue 0.15)
20% are red (hue 0.0)
Each star twinks independently using Math.sin(time * 2 + i) where i creates phase offset
Original colors are preserved to prevent permanent dimming
Brightness oscillates between 0.5 and 1.0
5
5w9KWksX5w9KWksXOP·