三步轻松实现炫光路径粒子动画效果，新年发光迎福

2024-01-12 11:06:48

概述

three.js 是一个流行的 JavaScript 库，用于创建和渲染 3D 图形。它可以用来创建各种各样的 3D 效果，包括粒子动画。

粒子动画是一种非常流行的动画技术，它可以用来创建各种各样的效果，比如爆炸、烟雾和火花。粒子动画通常使用粒子系统来创建，粒子系统是由许多微小的粒子组成的。这些粒子可以根据各种各样的规则移动和变化，从而创建出各种各样的动画效果。

实现步骤

1. 创建场景

首先，我们需要创建一个场景来容纳我们的粒子动画。场景是一个 3D 空间，它可以包含各种各样的对象，比如几何体、灯光和粒子系统。

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

2. 创建粒子系统

接下来，我们需要创建一个粒子系统来创建我们的粒子动画。粒子系统是由许多微小的粒子组成的，这些粒子可以根据各种各样的规则移动和变化。

// 创建粒子系统
const particles = new THREE.Points(geometry, material);

3. 创建路径

接下来，我们需要创建一个路径来让粒子沿着它移动。路径可以是任何形状，比如直线、圆形或曲线。

// 创建路径
const path = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(10, 10, 0)
]);

4. 让粒子沿着路径移动

最后，我们需要让粒子沿着路径移动。我们可以通过使用粒子系统的 position 属性来实现这一点。

// 让粒子沿着路径移动
particles.position.copy(path.getPointAt(time));

5. 渲染场景

最后，我们需要渲染场景才能看到我们的粒子动画。我们可以通过使用渲染器来实现这一点。

// 渲染场景
renderer.render(scene, camera);

完整代码

import * as THREE from 'three';

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

// 创建粒子系统
const geometry = new THREE.BufferGeometry();
const material = new THREE.PointsMaterial({
  size: 1,
  color: 0xffffff
});
const particles = new THREE.Points(geometry, material);

// 创建路径
const path = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(10, 10, 0)
]);

// 让粒子沿着路径移动
let time = 0;
function animate() {
  time += 0.01;
  particles.position.copy(path.getPointAt(time));
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到文档中
document.body.appendChild(renderer.domElement);

// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 100;

// 将粒子系统添加到场景中
scene.add(particles);

// 启动动画
animate();