three.js 开发粒子系统

在 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到1
    particlesPositions[i * 3 + 1] = Math.random() * 2 - 1; // y坐标，范围-1到1
    particlesPositions[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();

效果如下：

结论

以上是一个在 three.js 中设置基本粒子系统的步骤。你可以通过修改粒子的位置更新逻辑、添加粒子间的交互、使用不同的着色器材料等方式来丰富你的粒子效果。