点亮酷炫粒子光效：一个超简单指南

2024-02-16 08:35:47

准备好了吗？我们即将踏上打造令人惊叹的粒子光效之旅。这个指南旨在让你轻松上手，即使你是粒子效果的新手。我们使用的是three.js，一个功能强大的 JavaScript 库，它可以帮助我们创建引人入胜的 3D 场景和效果。

三步打造粒子光效

第一步：设置场景

import * as THREE from 'three';

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

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

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

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

第二步：创建粒子材质

// 创建粒子材质
const material = new THREE.PointsMaterial({
  size: 0.01,
  color: 0xffffff,
});

第三步：创建粒子系统

// 创建粒子几何体
const geometry = new THREE.BufferGeometry();

// 创建粒子位置数组
const positions = [];
for (let i = 0; i < 1000; i++) {
  positions.push(Math.random() - 0.5); // x
  positions.push(Math.random() - 0.5); // y
  positions.push(Math.random() - 0.5); // z
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

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

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

渲染循环

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转粒子系统
  particles.rotation.x += 0.01;
  particles.rotation.y += 0.01;

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

animate();

现在，你已经创建了一个基本的粒子效果。你可以通过调整材质属性（例如颜色、大小和透明度）和几何体属性（例如粒子数量和位置）来定制它。此外，你可以添加灯光和阴影，以增强光照效果。