Galaxy 星系：揭秘 Three.js 中的壮丽银河系生成器

2024-02-10 21:50:22

Three.js 中的星系生成：释放无限创意

Three.js 的粒子系统为创建令人着迷的星系效果提供了无限的可能性。在这个教程中，我们将深入探讨如何使用粒子来模拟浩瀚的星系，点亮您的 Three.js 项目。

从头开始构建粒子系统

首先，让我们创建粒子立方体作为我们银河系的画布。使用 debug UI 调整立方体的尺寸和粒子数量，设置形状和增加半径。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.PointsMaterial({
  size: 0.01,
  color: 0xffffff,
});

const particles = new THREE.Points(geometry, material);

创建旋转粒子

为了让我们的星系充满活力，让我们添加旋转效果。通过设置粒子的速度和角速度，我们可以模拟星系中恒星的运动。

particles.rotation.x = Math.PI / 2;
particles.rotation.y = Math.PI / 4;

particles.userData.speed = 0.001;
particles.userData.angularSpeed = 0.0005;

引入引力

为了让我们的星系更具真实感，让我们加入引力。通过计算每个粒子之间的引力并更新其速度，我们可以模拟星系中恒星的相互作用。

const gravitationalConstant = 0.0001;

function updateGravity() {
  for (let i = 0; i < particles.count; i++) {
    const particleA = particles.geometry.attributes.position.array[i * 3];

    for (let j = i + 1; j < particles.count; j++) {
      const particleB = particles.geometry.attributes.position.array[j * 3];

      const distance = Math.sqrt(
        (particleA[0] - particleB[0]) ** 2 +
          (particleA[1] - particleB[1]) ** 2 +
          (particleA[2] - particleB[2]) ** 2
      );

      const force = gravitationalConstant / (distance ** 2);

      particleA[0] += force * (particleB[0] - particleA[0]);
      particleA[1] += force * (particleB[1] - particleA[1]);
      particleA[2] += force * (particleB[2] - particleA[2]);
    }
  }
}

纹理粒子

为了让我们的星系更加丰富多彩，让我们应用纹理。通过使用粒子系统中可用的纹理功能，我们可以为每个粒子赋予独特的视觉外观。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./star.png');

material.map = texture;

动态更新

为了使我们的星系保持活跃，我们需要动态更新粒子的位置和速度。使用 Three.js 的动画循环，我们可以实时渲染星系并模拟其行为。

function animate() {
  requestAnimationFrame(animate);

  updateGravity();

  // 更新粒子位置和速度
  particles.geometry.attributes.position.needsUpdate = true;
  particles.rotation.x += particles.userData.angularSpeed;
  particles.rotation.y += particles.userData.angularSpeed;
  particles.rotation.z += particles.userData.angularSpeed;
}