当前位置：首页 > news >正文

three.js 开发粒子系统

news 2025/5/24 2:35:42

在 three.js 中开发粒子系统，你通常会使用 THREE.Points 和 THREE.PointsMaterial。这些组件允许你创建一个由大量点组成的系统，每个点都可以代表一个粒子，并可以自定义其大小、颜色、透明度等属性。以下是一个基本的步骤指南，用于在 three.js 中设置粒子系统：

1. 准备场景、相机和渲染器

首先，你需要设置基本的 three.js 场景、相机和渲染器。

import * as THREE from 'three';const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);camera.position.z = 5;

2. 创建粒子几何体

使用 THREE.BufferGeometry 来创建一个粒子几何体。为了简单起见，你可以使用 THREE.BufferAttribute 来手动设置粒子的位置。

const particlesCount = 10000;
const particlesGeometry = new THREE.BufferGeometry();
const particlesPositions = new Float32Array(particlesCount * 3);// 初始化粒子位置，这里简单地将它们随机分布在一定空间内
for (let i = 0; i < particlesCount; i++) {particlesPositions[i * 3] = Math.random() * 2 - 1; // x坐标，范围-1到1particlesPositions[i * 3 + 1] = Math.random() * 2 - 1; // y坐标，范围-1到1particlesPositions[i * 3 + 2] = Math.random() * 2 - 1; // z坐标，范围-1到1
}particlesGeometry.setAttribute('position', new THREE.BufferAttribute(particlesPositions, 3));

3. 创建粒子材质

使用 THREE.PointsMaterial 为粒子创建材质。你可以设置粒子的颜色、大小等。

const particlesMaterial = new THREE.PointsMaterial({color: 0xffffff,size: 0.1,sizeAttenuation: true, // 粒子大小是否随距离衰减blending: THREE.AdditiveBlending, // 叠加混合，使粒子看起来更亮transparent: true
});

4. 创建粒子系统

将几何体和材质结合成粒子系统。

const particleSystem = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particleSystem);

5. 渲染循环和动画

通常，你会想要让粒子系统动起来。这可以通过在渲染循环中更新粒子的位置来实现。

function animate() {requestAnimationFrame(animate);// 更新粒子位置（这里可以根据需要实现复杂的粒子动画）// 例如，简单地在每个方向上随机移动粒子for (let i = 0; i < particlesCount; i++) {particlesPositions[i * 3] += (Math.random() - 0.5) * 0.01;particlesPositions[i * 3 + 1] += (Math.random() - 0.5) * 0.01;particlesPositions[i * 3 + 2] += (Math.random() - 0.5) * 0.01;// 注意：这里需要更新BufferAttribute的数据particlesGeometry.attributes.position.needsUpdate = true;}renderer.render(scene, camera);
}animate();