烟雾粒子动画效果
🎯 提示词
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. 粒子系统初始化
创建大量粒子并随机分布在三维空间中:
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 链式跟随动画
每个粒子跟随前一个粒子的位置,形成波浪式运动:
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. 场景整体动画
场景容器同时进行旋转和浮动:
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 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!