
Three.js 生物发光效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个生物发光效果着色器,模拟海洋生物发光效果,包含发光生物体和脉冲效果,提供三种生物类型可选。
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 八面体几何体 | OctahedronGeometry |
| 核心特效 | 多层生物发光 | 3层不同频率的发光场叠加 |
| 增强细节 | 生物体粒子 | 25个动态发光的生物体粒子 |
| 视觉效果 | 脉冲效果 | 可调节的生物发光脉冲节奏 |
| 交互控制 | 生物类型切换 | 绿色、蓝色、黄色三种发光颜色 |
🔧 核心技术点
顶点着色器
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uGlowIntensity;
uniform float uBioActivity;
uniform float uPulseFrequency;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
// 生物发光效果
float glow = sin(position.x * 3.0 + uTime * uGlowIntensity) *
cos(position.y * 4.0 + uTime * uGlowIntensity * 0.8) *
sin(position.z * 3.0 + uTime * uGlowIntensity * 0.6);
// 生物活性
float activity = sin(position.x * 5.0 + uTime * uBioActivity * 2.0) *
cos(position.z * 5.0 + uTime * uBioActivity * 2.0);
// 脉冲频率
float pulse = sin(position.x * uPulseFrequency * 6.0) *
cos(position.y * uPulseFrequency * 8.0);
vec3 newPosition = position + normal * (glow + activity * 0.5 + pulse * 0.3) * 0.15;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
生物发光效果
glsl
1
2
3
4
5
6
7
8
9
10
11
float bioluminescence(vec2 uv, float intensity) {
float bioField = 0.0;
// 多层生物发光
bioField += sin(uv.x * 4.0 + uTime * 0.3) *
cos(uv.y * 6.0 + uTime * 0.5);
bioField += sin(uv.x * 6.0 + uTime * 0.7) *
cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
bioField += sin(uv.x * 8.0 + uTime * 1.1) *
cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
return bioField * intensity;
}
生物体效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float organisms(vec2 uv, float density) {
float organismField = 0.0;
for(int i = 0; i < 25; i++) {
vec2 organismPos = vec2(
noise(vec2(float(i) * 0.234, 0.567)),
noise(vec2(float(i) * 0.567, 0.891))
);
float dist = distance(uv, organismPos);
float organismSize = noise(vec2(float(i) * 0.891, 0.234)) * 0.04 + 0.02;
float organismLife = mod(uTime * 1.8 + float(i) * 10.0, 6.28);
float organismIntensity = sin(organismLife) * 0.7 + 0.3;
organismField += exp(-dist * 50.0) * organismIntensity * density;
}
return organismField;
}
Uniforms
javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
uTime: { value: 0.0 },
uGlowIntensity: { value: 0.9 },
uBioActivity: { value: 0.8 },
uOrganismDensity: { value: 0.7 },
uLightColor: { value: 1.2 },
uPulseFrequency: { value: 0.6 },
uBioType: { value: 0 },
uShowOrganisms: { value: true }
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 着色器编译失败 | 黑屏或报错 | 检查 GLSL 语法和 uniform 定义 |
| 性能问题 | 帧率下降 | 减少噪声迭代次数或降低细分 |
| 晶体效果不明显 | 纹理太淡 | 调整生长速度和密度参数 |
| 动画卡顿 | 旋转不流畅 | 检查 GSAP 配置 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 多面体生长 | 使用不同的基础几何体 | ⭐ |
| 动态生长 | 添加生长动画过渡 | ⭐⭐ |
| 彩色晶体 | 添加多色折射效果 | ⭐⭐ |
| 发光晶体 | 添加自发光材质 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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