生物发光

Three.js 生物发光效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 Three.js 实现生物发光效果,具体要求:
【核心特效】
- 生物发光细胞网络
- 脉动发光效果
- 深海波动模拟
【场景与光照】
- 纯黑色背景
- 自发光效果
- 水波折射
【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- GSAP 自动旋转动画
【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
- GSAP 动画库
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 圆环结几何体 | TorusKnotGeometry(2, 0.5, 100, 16) |
| 核心特效 | 发光细胞网络 | 多层细胞叠加 |
| 增强细节 | 脉动效果 | 正弦波控制 |
| 动画层 | 自动旋转 | GSAP timeline |
🔧 核心技术点
1. 生物发光细胞
基于网格的发光细胞生成。
glsl
1
2
3
4
5
6
7
float bioCell(vec2 p, float seed) {
vec2 cellPos = floor(p * organismDensity);
float cellValue = sin(dot(cellPos, vec2(12.9898, 78.233)) + seed) * 0.5 + 0.5;
vec2 localPos = fract(p * organismDensity) - 0.5;
float dist = length(localPos);
return smoothstep(0.3, 0.0, dist) * cellValue;
}
2. 生物发光网络
多层细胞叠加形成网络效果。
glsl
1
2
3
4
5
6
7
8
9
float bioNetwork(vec2 uv, float time) {
float network = 0.0;
for (int i = 0; i < 5; i++) {
float seed = float(i) * 10.0;
float cell = bioCell(uv + sin(time * 0.5 + seed) * 0.1, seed);
network += cell * (1.0 - float(i) * 0.15);
}
return network;
}
3. 脉动效果
glsl
1
2
3
4
5
6
float pulseEffect(vec2 uv, float time) {
vec2 center = vec2(0.5, 0.5);
float dist = length(uv - center);
float pulse = sin(time * pulseSpeed) * 0.5 + 0.5;
return smoothstep(0.4, 0.0, dist) * pulse;
}
4. 深海波动
glsl
1
2
3
4
5
float deepSeaWave(vec2 uv, float time) {
float wave = sin(uv.x * 5.0 + time * 0.3) *
sin(uv.y * 5.0 + time * 0.4) * 0.2 + 0.8;
return wave;
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 着色器编译失败 | 黑屏或报错 | 检查 GLSL 语法和 uniform 定义 |
| 性能问题 | 帧率下降 | 减少细胞数量或降低细分 |
| 发光效果不明显 | 颜色太淡 | 调整发光强度参数 |
| 动画卡顿 | 旋转不流畅 | 检查 GSAP 配置 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 动态细胞 | 添加细胞生长和消亡动画 | ⭐⭐⭐ |
| 海洋生物 | 将几何体改为海洋生物形状 | ⭐⭐ |
| 粒子系统 | 使用粒子模拟浮游生物 | ⭐⭐⭐ |
| 颜色渐变 | 添加多种发光颜色 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!