液态金属

Three.js 液态金属特效 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现液态金属特效,具体要求:
**核心特效**
- 金属立方体变形
- 表面张力效果
- 涟漪传播效果
- 金属类型切换 (水银/黄金/铜)
- 7个实时参数
**场景与光照**
- 深灰径向背景
- 加法混合发光
- 立方体自旋转
**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 流动性/表面张力/涟漪效果
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- BoxGeometry 立方体
- 金属反射模型
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 金属立方体 | BoxGeometry |
| 流动 | 多层正弦叠加 | sin * cos 组合 |
| 张力 | 径向波动 | sin(length(position)) |
| 涟漪 | 同心圆扩散 | sin(dist * 15.0 - time) |
| 反射 | 视线反射 | pow(1.0 - abs(dot(normal, viewDir)), intensity) |
🔧 核心技术点
1. 液态流动
为什么需要这个技术:三个方向的正弦波叠加创造液态金属的流动感。
glsl
1
2
3
float fluidFlow = sin(position.x * 3.0 + uTime * uFluidity)
* cos(position.y * 3.0 + uTime * uFluidity)
* sin(position.z * 3.0 + uTime * uFluidity);
2. 表面张力
为什么需要这个技术:模拟液体表面的张力效果。
glsl
1
float tension = sin(length(position) * 4.0 + uTime * uSurfaceTension);
3. 金属反射
为什么需要这个技术:用视线反射创造金属光泽感。
glsl
1
2
3
4
float metalReflection(vec3 normal, vec3 viewDir, float intensity) {
float reflection = dot(normal, viewDir);
return pow(1.0 - abs(reflection), intensity);
}
4. 涟漪效果
为什么需要这个技术:模拟液体表面的涟漪传播。
glsl
1
2
3
4
5
6
7
8
9
10
float ripples(vec2 uv, float effect) {
float ripple = 0.0;
for(int i = 0; i < 3; i++) {
vec2 center = vec2(0.5, 0.5);
float dist = distance(uv, center);
float wave = sin(dist * 15.0 - uTime * effect * 3.0 + float(i) * 2.0);
ripple += wave * 0.1;
}
return ripple;
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 变形过大 | 几何体自相交 | 降低 uFluidity |
| 涟漪过密 | 画面闪烁 | 减少涟漪迭代或降低频率 |
| 金属感不足 | 像塑料 | 增加 uReflection |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 液态星球 | 球体几何 | ⭐ |
| 金属流体 | 平面几何 | ⭐ |
| 滴落效果 | 重力动画 | ⭐⭐ |
| 合金材质 | 多金属混合 | ⭐⭐ |
| 液态雕塑 | 复杂几何体 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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