Three.js 是一个用于创建 3D 动画的 JavaScript 库。它提供了一组工具,用于处理 3D 世界中的几何形状、材质、光照和动画。在本文中,我们将介绍如何使用 Three.js 创造一个夜空中的 3D 粒子背景动画效果。

准备工作

我们需要从 Three.js 的官方网站下载 Three.js 库,并在项目中包含它。我们还需要创建一个 HTML 文件,并在其中创建一个 Canvas 元素。Canvas 将用于渲染我们的动画。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>夜空中的3D粒子背景动画特效</title>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

在 HTML 文件中,我们已经包含了 Three.js 库和一个名为 canvas 的元素。我们还为 Canvas 定义了一个 CSS 样式,让它占用整个屏幕。

写代码

在创建 main.js 文件后,的代码将在其中添加。

// 创建一个场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建粒子
const starGeometry = new THREE.SphereGeometry(1, 1, 1);
const starMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff
});
const stars = new THREE.Group();
for (let i = 0; i < 1000; i++) {
  const star = new THREE.Mesh(starGeometry, starMaterial);
  const x = Math.random() * 2000 - 1000;
  const y = Math.random() * 2000 - 1000;
  const z = Math.random() * 2000 - 1000;
  star.position.set(x, y, z);
  stars.add(star);
}
scene.add(stars);

// 创建动画
function animate() {
  requestAnimationFrame(animate);
  stars.rotation.z += 0.005;
  renderer.render(scene, camera);
}

animate();

在这个代码中,我们创建了一个 Three.js 场景,并添加了一个相机和一个渲染器。我们还创建了一个粒子组,其中包含了 1000 个星星。使用 MeshBasicMaterial 来创建星星的材质。我们将随机分配每个星星的位置,使它们在 3D 空间中分布不规则。

我们创建了一个动画循环,并使用 requestAnimationFrame 方法来不断更新我们的 3D 场景。在动画循环中,我们旋转星星组,使它们绕 Z 轴旋转。

结论

到此为止,我们已经成功地创作了一个夜空中的 3D 粒子背景动画特效。Three.js 提供了一个强大的工具集,能帮助我们轻松地处理 3D 移动世界的各种元素。使用 Three.js 创建这样的视觉效果只需要几行代码,让我们可以更轻松地为我们的网站添加更生动的 3D 动画。