Three.js 图像粒子飞线效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

创建一个图像粒子飞线效果，将图像转换为粒子系统，粒子沿贝塞尔曲线飞行，创造动态视觉效果。

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个将图像转换为粒子系统并沿贝塞尔曲线飞行的效果，通过自定义动画实现粒子的分块飞散，创造出震撼的视觉效果。

效果特性

图像转粒子：将图像分解为粒子系统
贝塞尔曲线动画：粒子沿三次贝塞尔曲线飞行
分块飞散：粒子按三角形面分组飞散
周期性循环：4秒周期自动重置
3D视角控制：OrbitControls支持3D旋转查看

核心参数

参数	说明
宽度	200
高度	100
周期	1500ms
纹理	earth.jpeg

核心代码解析

BufferGeometry配置

javascript 复制代码

let bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(positionArr), 3));
bufferGeometry.setAttribute("originPosition", new THREE.BufferAttribute(new Float32Array(positionArr), 3));
bufferGeometry.setAttribute("normal", new THREE.BufferAttribute(new Float32Array(normalArr), 3));
bufferGeometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(uvArr), 2));
bufferGeometry.faceAnimateArr = [];

贝塞尔曲线计算

javascript 复制代码

function bezier(P0, P1, P2, P3, t) {
    const x = P0.x * (1 - t) * (1 - t) * (1 - t) +
              3 * P1.x * t * (1 - t) * (1 - t) +
              3 * P2.x * t * t * (1 - t) +
              P3.x * t * t * t;
    const y = P0.y * (1 - t) * (1 - t) * (1 - t) +
              3 * P1.y * t * (1 - t) * (1 - t) +
              3 * P2.y * t * t * (1 - t) +
              P3.y * t * t * t;
    const z = P0.z * (1 - t) * (1 - t) * (1 - t) +
              3 * P1.z * t * (1 - t) * (1 - t) +
              3 * P2.z * t * t * (1 - t) +
              P3.z * t * t * t;
    return { x, y, z };
}

粒子飞行动画

javascript 复制代码

bufferGeometry.faceAnimateArr.forEach((face, index) => {
    const tArr = bufferGeometry.attributes.originPosition.array;
    const face_firstVertex = {
        x: tArr[index * 3 * 3],
        y: tArr[index * 3 * 3 + 1],
        z: tArr[index * 3 * 3 + 2]
    };

    if (!face.startTime && face_firstVertex.x < currX) {
        face.startTime = Date.now();
    }

    if (face.startTime && face.progress < 1) {
        face.progress = (Date.now() - face.startTime) / face.circle;
        if (face.progress > 1) face.progress = 1;

        for (let i = 0; i < 3; i++) {
            const currVertexIndex = index * 3 + i;
            const originPos = {
                x: tArr[currVertexIndex * 3],
                y: tArr[currVertexIndex * 3 + 1],
                z: tArr[currVertexIndex * 3 + 2]
            };
            const { start, control1, control2, end } = bufferGeometry.faceAnimateArr[index].bezier;
            const bezierPos = bezier(start, control1, control2, end, face.progress);
            const newPos = {
                x: originPos.x + bezierPos.x,
                y: originPos.y + bezierPos.y,
                z: originPos.z + bezierPos.z
            };
            bufferGeometry.attributes.position.setXYZ(currVertexIndex, newPos.x, newPos.y, newPos.z);
        }
    }
});
plane.geometry.dispose();
plane.geometry = bufferGeometry.clone();

控制点生成

javascript 复制代码

let control1 = {
    x: Math.random() * 50,
    y: y_sign * (Math.random() * 80),
    z: 0
};
let control2 = {
    x: Math.random() * 50,
    y: -y_sign * 20,
    z: 0
};
obj.bezier = { start, control1, control2, end };

技术亮点

图像粒子化：将图像纹理应用于几何体并分解为粒子
贝塞尔曲线动画：三次贝塞尔曲线创造平滑的飞行动画
分组飞散：按三角形面分组，创造整体飞散效果
实时几何更新：动态更新几何体属性实现动画
周期性重置：自动循环创造持续视觉效果

调试技巧

周期调节：修改circle变量调整动画周期
控制点范围：调整Math.random范围改变飞行轨迹
纹理替换：更换earth.jpeg可实现不同图像效果
几何体精度：调整PlaneGeometry分段数改变粒子密度
飞散方向：调整控制点y值改变飞散方向

扩展方向

多种纹理：添加多张图像实现切换效果
交互触发：鼠标点击触发飞散动画
粒子特效：添加粒子尾迹效果增强视觉
声音同步：添加音频分析与粒子效果同步
3D模型：将图像替换为3D模型实现更复杂效果

本文档由 ThreeLab 编辑整理，专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载，请注明出处。