玩转Three.js粒子动效，打造酷炫粒子动画

2023-03-15 18:23:11

Three.js粒子动效的奇妙世界

探索Three.js的强大功能，让您打造出令人惊叹的粒子动画效果。Three.js是一个JavaScript库，使开发者能够创造和渲染出色的3D图形，而粒子动效便是其一大亮点。本文将深入探讨如何使用Three.js创建三个不同的粒子动效，并提供一些实用技巧，让您的动效更具逼真性和完整性。

一、粒子雨动画

粒子雨动画是一种常见的动效，常用来表现下雨、下雪等自然现象。

代码示例：

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

// 创建粒子几何体
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
for (var i = 0; i < 1000; i++) {
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  colors.push(Math.random() * 0.5 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

// 创建粒子材质
var material = new THREE.PointsMaterial({
  size: 10,
  vertexColors: THREE.VertexColors
});

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

// 渲染场景
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
  requestAnimationFrame(animate);
  particles.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

二、粒子爆炸动画

粒子爆炸动画可营造出震撼效果，常用于表现爆炸、烟花等场景。

代码示例：

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

// 创建粒子几何体
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
for (var i = 0; i < 1000; i++) {
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  colors.push(Math.random() * 1 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

// 创建粒子材质
var material = new THREE.PointsMaterial({
  size: 10,
  vertexColors: THREE.VertexColors
});

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

// 创建爆炸效果
var explosionPower = 100;
var explosionRadius = 500;
particles.position.y = 0;
function animate() {
  requestAnimationFrame(animate);
  var time = Date.now() * 0.005;
  particles.rotation.y += 0.01;
  for (var i = 0; i < particles.geometry.attributes.position.count; i++) {
    var particle = particles.geometry.attributes.position.array;
    var distance = Math.sqrt(particle[i * 3] ** 2 + particle[i * 3 + 1] **   2 + particle[i * 3 + 2] ** 2);
    if (distance < explosionRadius) {
      var force = explosionPower / (distance ** 2);
      particle[i * 3] += force * Math.sin(time);
      particle[i * 3 + 1] += force * Math.cos(time);
      particle[i * 3 + 2] += force * Math.sin(time);
    }
  }
  particles.geometry.attributes.position.needsUpdate = true;
  renderer.render(scene, camera);
}
animate();

三、粒子轨迹动画

粒子轨迹动画可呈现优美效果，常用于表现流星、烟花等场景。

代码示例：

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

// 创建粒子几何体
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
for (var i = 0; i < 1000; i++) {
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  positions.push(Math.random() * 1000 - 500);
  colors.push(Math.random() * 1 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
  colors.push(Math.random() * 0.5 + 0.5);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

// 创建粒子材质
var material = new THREE.PointsMaterial({
  size: 10,
  vertexColors: THREE.VertexColors,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  transparent: true
});

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

// 创建轨迹效果
var time = 0;
function animate() {
  requestAnimationFrame(animate);
  time += 0.01;
  for (var i = 0; i < particles.geometry.attributes.position.count; i++) {
    var particle = particles.geometry.attributes.position.array;
    particle[i * 3] += Math.sin(time) * 0.1;
    particle[i * 3 + 1] += Math.cos(time) * 0.1;
    particle[i * 3 + 2] += Math.sin(time) * 0.1;
  }
  particles.geometry.attributes.position.needsUpdate = true;
  renderer.render(scene, camera);
}
animate();