threejs——粒子瀑布运动

想写粒子运动很久了，看网上的粒子运动都是从一个图形变成另一个图形的运动，好像不是很炫酷，于是自己搞一个即实用又炫酷的粒子运动…，兄弟们，走曲儿~

源码下载地址

在线体验地址

正文

首先准备一张透明背景的logo图片，尺寸为385*100，代码中会过滤透明像素，并将图片信息缩放至合适的位置。

获取图片信息

新增一个img标签并在图片的onload的回调中创建一个canvas，获取到图片的宽高并设置给canvas，并将图片绘制到canvas中。

 const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域情况，如果图片有跨域访问需求的话
img.onload = function () {
   
   
    const canvas = document.createElement('canvas');

    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    if (!ctx) {
   
   
        reject(new Error("无法获取canvas的2D上下文"));
        return;
    }
    ctx.drawImage(img, 0, 0);
    
    ...

接下来就是通过canvas获取图片的像素信息了

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

通过调用APIgetImageData，获取从canvas的起点0,0到canvas的终点的所有像素点信息，并遍历信息。

for (let y = 0; y < height; y++) {
   
    // 遍历图像的每一行
    for (let x = 0; x < width; x++) {
   
    // 遍历图像的每一列
        const index = (y * width + x) * 4; // 计算像素在数据数组中的索引
        const alpha = data[index + 3]; // 获取像素的 alpha 值
        if (alpha === 0) continue; // 过滤完全透明像素

        const r = data[index]; // 获取像素的红色值
        const g = data[index + 1]; // 获取像素的绿色值
        const b = data[index + 2]; // 获取像素的蓝色值
        pixels.push({
   
   
            x: (x - width / 2) / 500, // 计算像素的 x 坐标并进行归一化
            y: