烟雾粒子动画效果

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用 Three.js 实现【烟雾粒子动画】,具体要求:

【核心特效】
- 大量二十面体粒子组成的粒子系统
- 粒子跟随动画效果,形成链式运动
- 粒子随机分布在三维空间中

【场景与光照】
- 半球光照明,营造暗色调氛围
- 黑色背景配合雾效增强深度感
- 点光源提供局部照明

【交互与控制】
- 无控制器,自动播放动画

【技术要求】
- Three.js 版本
- GSAP 动画库
- MeshBasicMaterial 材质

📖 效果拆解

层次 视觉效果 技术实现
基础 120个二十面体粒子 IcosahedronGeometry
核心特效 粒子链式跟随动画 GSAP 缓动动画
增强细节 整体旋转与浮动 requestAnimationFrame 循环
氛围营造 雾效与景深 THREE.Fog

🔧 核心技术点

1. 粒子系统初始化

创建大量粒子并随机分布在三维空间中:

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
var geometry = new THREE.IcosahedronGeometry(0.7, 3);
for (var i = 0; i < 120; i++) {
    var material = new THREE.MeshBasicMaterial({ color: 0xFFFF });
    var circle = new THREE.Mesh(geometry, material);
    // 随机位置分布
    circle.position.x = -Math.random() * circle_start + Math.random() * circle_start;
    circle.position.z = -Math.random() * circle_start + Math.random() * circle_start;
    circle.position.y = -Math.random() * circle_start + Math.random() * circle_start;
    world.add(circle);
}

2. GSAP 链式跟随动画

每个粒子跟随前一个粒子的位置,形成波浪式运动:

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
for (let i = 0, l = world.children.length; i < l; i++) {
    var object = world.children[i];
    var object_left = world.children[i - 1];
    if (i > 1) {
        gsap.to(object.position, 2, {
            x: Math.cos(object_left.position.x * Math.PI) * 1,
            y: Math.sin(object_left.position.y * Math.PI) * 1,
            z: Math.cos(object_left.position.z * Math.PI) * 1,
        });
    }
}

3. 场景整体动画

场景容器同时进行旋转和浮动:

JAVASCRIPT
1
2
3
4
5
6
7
function animation() {
    var time = Date.now() * 0.003;
    world.rotation.y = Math.sin(time) * Math.PI / 180;
    world.rotation.z = Math.cos(time) * Math.PI / 180;
    // ...
    requestAnimationFrame(animation);
}

💡 调试与优化

问题类型 表现形式 解决方案
性能问题 帧率下降明显 减少粒子数量或降低几何体细分
动画卡顿 GSAP 动画不流畅 降低动画持续时间或使用 WebGLRenderer 的 powerPreference
粒子重叠 视觉效果混乱 调整粒子大小和初始分布范围

🚀 扩展思路

变体效果 核心改动 难度
颜色渐变 修改粒子颜色,添加 HSL 颜色变化
粒子消散 添加透明度动画,实现粒子淡出效果 ⭐⭐
交互控制 添加鼠标/触摸交互,控制粒子运动 ⭐⭐
粒子爆炸 触发粒子向四周扩散的爆炸效果 ⭐⭐⭐

本文档由 ThreeLab 编辑整理,如需转载,请注明出处。