Angular+TypeScript开发Three.js旋转星场仅单星移动问题求助

问题根因 #

你在addStar函数内每次生成单颗星星时，都重新初始化了this.stars为全新的THREE.Group实例，并且把新的组单独添加到场景中。最终this.stars变量只会指向最后一次调用addStar生成的、仅包含1颗星星的组，所以旋转时只有最后一颗星星会动，剩下的199个星星各自属于独立的、没有被添加旋转动画的组，因此保持静止。

修复方案 #

调整星星组的初始化逻辑，全局仅创建1次星星组，所有星星都添加到同一个组内，仅将这个统一的组添加到场景1次即可。

修改后的代码参考：

private scene: THREE.Scene;
private stars: THREE.Group;

createScene = () => {
  // 原有场景初始化逻辑...

  // 全局仅初始化1次星星组
  this.stars = new THREE.Group();
  // 批量生成200颗星星
  Array(200).fill(undefined).forEach(this.addStar);
  // 整个星星组仅添加到场景1次
  this.scene.add(this.stars);

  // 原有其他逻辑...
}

addStar = () => {
  const geometry = new THREE.SphereGeometry(0.25, 24, 24);
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    emissive: 0xffffff,
    emissiveIntensity: 1,
    roughness: 0,
    metalness: 0.5
  });
  const star = new THREE.Mesh(geometry, material);

  const [x, y, z] = Array(3)
    .fill(undefined)
    .map(() => THREE.MathUtils.randFloatSpread(100));

  star.position.set(x, y, z);
  // 直接将星星添加到全局的星星组中，无需重复创建组和添加场景
  this.stars.add(star);
};

你原有动画逻辑this.stars.rotation.y += 0.005;无需修改，调整后所有星星都会跟随组统一旋转。

优化提示：可将星星的几何体、材质提取到addStar函数外全局复用，避免重复创建200份相同的资源，降低内存占用。

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