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 编辑整理,如需转载,请注明出处。