Hey there! I see you're trying to create a particle Earth with mixed pink, dark pink, and white hues using Three.js, but right now it's only showing a single color. Let's fix that—here's a step-by-step solution tailored to your needs:

Instead of using a single uniform color for all particles, we'll assign random colors from your target palette to individual vertices in the particle geometry, then configure the material to use these per-vertex colors.

1. Update Your Particle Material #

First, modify your PointsMaterial to enable vertex colors—this tells Three.js to use the color data stored on each vertex instead of a single global color:

var material = new THREE.PointsMaterial({
  size: 0.02, // Adjust based on your desired particle size
  vertexColors: THREE.VertexColors, // Critical: Enables per-vertex color usage
  transparent: true,
  opacity: 0.8,
  blending: THREE.AdditiveBlending // Optional: Creates softer color overlap
});

2. Add Color Data to Your Geometry #

Next, we'll iterate over the vertices of your sphere geometry and assign random colors from your pink/white palette. Make sure your geometry has enough subdivisions to create a dense particle effect:

// Create a sphere geometry with sufficient subdivisions
var geometry = new THREE.SphereGeometry(1, 64, 64);

// Define your target color palette
const colorPalette = [
  new THREE.Color(0xffc0cb), // Light pink
  new THREE.Color(0xff1493), // Dark pink
  new THREE.Color(0xffffff)  // White
];

// Add a color attribute to the geometry
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(geometry.attributes.position.count * 3), 3));
const colorArray = geometry.attributes.color.array;

// Assign random colors to each vertex
for (let i = 0; i < colorArray.length; i += 3) {
  const randomColor = colorPalette[Math.floor(Math.random() * colorPalette.length)];
  colorArray[i] = randomColor.r;
  colorArray[i + 1] = randomColor.g;
  colorArray[i + 2] = randomColor.b;
}

3. Assemble the Particle System and Animate #

Put it all together with your existing scene/camera setup, and add a simple rotation to make the Earth come alive:

// Initialize scene and camera (your existing code)
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Create particles and add to scene
var particles = new THREE.Points(geometry, material);
scene.add(particles);

// Renderer setup
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  particles.rotation.y += 0.001; // Slow rotation for the Earth
  renderer.render(scene, camera);
}
animate();

• Remove any global color property from your PointsMaterial—when vertexColors is enabled, the global color will be ignored.
• Adjust subdivision count (64, 64 in the sphere geometry) to control particle density. Higher values = more particles, but may impact performance.
• Tweak blending/opacity based on your reference image—AdditiveBlending creates a glowing, ethereal effect, while NormalBlending will give more distinct, solid particles.

内容的提问来源于stack exchange，提问作者Halina