javascript - THREEjs 旋转星域

Question

我有一个 threejs 场景，在 Angular 应用程序的打字稿中创建。我有一个灯、相机和一个圆环结。圆环结旋转。

我用这个功能添加了一个星空

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

  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 = new THREE.Group();
    this.stars.add(star);
    this.scene.add(this.stars);
  };

然后，在我的 createScene 函数中，我调用它

    Array(200).fill(undefined).forEach(this.addStar);

并且确实在我的场景中添加了 200 颗星，如预期的那样在随机位置。

但是，在我的动画功能中，我试图围绕其中心旋转起始组

    this.stars.rotation.y += 0.005;

但我只看到 1 颗星在移动。我错过了什么？

标签： javascripttypescriptthree.js