浮雕图像

Three.js 浮雕图像效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 Three.js 实现【浮雕图像效果】,具体要求:
【核心特效】
- 边缘检测实现浮雕效果
- 可调节浮雕强度
- 基于亮度差异计算
【场景与光照】
- 无光源(自发光效果)
- 中性灰色背景
【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节强度
【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- TextureLoader 加载图片
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 平面几何体 | PlaneGeometry |
| 核心特效 | 浮雕效果 | 像素差分 + 亮度计算 |
| 交互 | 参数调节 | lil-gui 控制面板 |
🔧 核心技术点
1. 浮雕算法核心
通过计算相邻像素的亮度差异实现浮雕效果。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721); // 亮度系数
const vec4 bkColor = vec4(0.5, 0.5, 0.5, 1.0); // 背景色
void main() {
vec2 upLeftUV = vec2(vUv.x - 1.0/fScale, vUv.y - 1.0/fScale);
vec4 curColor = texture2D(tDiffuse, vUv);
vec4 upLeftColor = texture2D(tDiffuse, upLeftUV);
// 计算像素差异
vec4 delColor = curColor - upLeftColor;
// 转换为亮度值
float luminance = dot(delColor.rgb, W);
// 组合背景色和边缘亮度
gl_FragColor = vec4(vec3(luminance), 0.0) + bkColor;
}
2. GUI 交互控制
使用 lil-gui 添加参数调节面板。
javascript
1
2
3
4
const gui = new GUI();
gui.add(cubeMaterial.uniforms['fScale'], 'value', 50.0, 500.0)
.step(1.0)
.name('fScale');
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 浮雕效果不明显 | 画面几乎无变化 | 降低 fScale 值 |
| 画面噪点多 | 有明显颗粒感 | 增大 fScale 值或添加平滑处理 |
| 图片加载失败 | 画面黑色 | 检查图片路径 |
| 性能问题 | 大尺寸图片帧率下降 | 使用较小分辨率图片 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 动态浮雕 | 添加时间变量控制强度变化 | ⭐⭐ |
| 彩色浮雕 | 保留原始颜色 | ⭐⭐ |
| 边缘增强 | 添加边缘检测算法 | ⭐⭐⭐ |
| 凹凸贴图 | 使用浮雕结果作为法线贴图 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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