嘿，我懂你遇到的这个坑——本来想让行星纹理作为整个球体的“外壳”，结果纹理却被分配到了每个粒子里，这其实是粒子系统和普通网格材质的渲染逻辑差异导致的，咱们来一步步解决：

1. 拆分两个独立的层级：行星球体 + 粒子系统 #

你需要创建两个完全独立的3D对象，各司其职：

• 底层行星球体：用SphereGeometry搭配带纹理的网格材质（比如MeshStandardMaterial），把世界地图纹理贴在这个球体上，作为背景“外壳”。
• 上层粒子系统：保留你现有的粒子逻辑，但粒子材质只负责粒子自身的视觉效果（比如纯色、半透明），不要给它用行星纹理。

2. 同步两个对象的位置与尺寸 #

确保粒子系统和行星球体的位置、缩放、旋转完全一致，这样粒子就能精准覆盖在行星表面：

// 让粒子系统和行星球体的变换完全同步
particleSystem.position.copy(planetMesh.position);
particleSystem.scale.copy(planetMesh.scale);
particleSystem.rotation.copy(planetMesh.rotation);

3. 调整渲染顺序与透明度 #

默认Three.js会按对象添加顺序渲染，你可以通过renderOrder确保行星先被绘制，粒子在它之上；同时给粒子材质开启透明度，让底层的行星纹理能透出来：

// 设置渲染顺序：行星先画，粒子后画
planetMesh.renderOrder = 0;
particleSystem.renderOrder = 1;

// 粒子材质开启透明度
const particleMaterial = new THREE.PointsMaterial({
  color: 0x42a5f5, // 粒子颜色，可自定义
  transparent: true,
  opacity: 0.7, // 调整透明度让行星纹理可见
  size: 0.2
});

4. 避免粒子材质误用纹理 #

你之前大概率是把行星纹理直接传给了PointsMaterial，这会导致每个粒子都渲染整个纹理。记住：行星纹理只给底层的Mesh用，粒子材质只处理粒子自身的样式。

$(document).ready(function() {
  const globe = document.getElementById('globe');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, globe.clientWidth / globe.clientHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(globe.clientWidth, globe.clientHeight);
  globe.appendChild(renderer.domElement);

  // 1. 创建带纹理的行星球体
  const planetGeometry = new THREE.SphereGeometry(5, 32, 32);
  const textureLoader = new THREE.TextureLoader();
  const planetTexture = textureLoader.load('your-world-map.jpg'); // 替换成你的纹理路径
  const planetMaterial = new THREE.MeshStandardMaterial({ map: planetTexture });
  const planetMesh = new THREE.Mesh(planetGeometry, planetMaterial);
  scene.add(planetMesh);

  // 2. 创建粒子系统（你的原有粒子逻辑）
  const particleCount = 1000;
  const particleGeometry = new THREE.BufferGeometry();
  const positions = new Float32Array(particleCount * 3);
  
  // 生成在行星表面的粒子位置（半径和行星一致，这里是5）
  for (let i = 0; i < particleCount * 3; i += 3) {
    const theta = Math.random() * Math.PI * 2;
    const phi = Math.random() * Math.PI;
    positions[i] = 5 * Math.sin(phi) * Math.cos(theta);
    positions[i + 1] = 5 * Math.sin(phi) * Math.sin(theta);
    positions[i + 2] = 5 * Math.cos(phi);
  }
  particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

  const particleMaterial = new THREE.PointsMaterial({
    color: 0x42a5f5,
    transparent: true,
    opacity: 0.7,
    size: 0.2
  });
  const particleSystem = new THREE.Points(particleGeometry, particleMaterial);
  scene.add(particleSystem);

  // 3. 同步两个对象的变换
  particleSystem.position.copy(planetMesh.position);
  particleSystem.scale.copy(planetMesh.scale);
  particleSystem.rotation.copy(planetMesh.rotation);

  // 相机与渲染循环
  camera.position.z = 15;
  function animate() {
    requestAnimationFrame(animate);
    // 让行星和粒子同步旋转
    planetMesh.rotation.y += 0.005;
    particleSystem.rotation.y += 0.005;
    renderer.render(scene, camera);
  }
  animate();
});

• 如果粒子需要有“吸附”在行星表面的动态效果，可以在动画循环里更新粒子位置时，保持其与行星球体的半径一致。
• 如果你的粒子需要更复杂的效果（比如发光），可以给粒子材质添加additiveBlending，增强视觉层次感。

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