透明渐变

Three.js 星形与多边形透明渐变着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 Three.js 实现【星形与多边形透明渐变着色器】,具体要求:
【核心特效】
- 径向渐变透明效果(中心透明,边缘不透明)
- 五角星几何形状生成
- 随机多边形(4-8边)生成
【场景与光照】
- 渐变色天空背景(黑色到深蓝)
- 无需光源(自发光效果)
【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节颜色、亮度、UV缩放
【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- ShapeGeometry 自定义2D形状
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 五角星形状 | ShapeGeometry 手动绘制 |
| 核心特效 | 径向渐变透明 | smoothstep + length 函数 |
| 增强细节 | 多个随机多边形 | 循环生成4-8边形 |
| 背景 | 渐变天空 | Canvas 动态生成渐变纹理 |
🔧 核心技术点
1. 径向渐变透明算法
使用 length() 计算 UV 到中心的距离,配合 smoothstep() 实现平滑的透明度过渡。
glsl
1
2
3
4
5
6
void main(){
vec2 uv = vUv * uvScale;
float dist = length(uv); // 计算到中心的距离
float alpha = smoothstep(0.0, 1.0, dist); // 越中心越透明
gl_FragColor = vec4(color * intensity, alpha);
}
2. 五角星几何生成
通过交替使用外圆半径和内圆半径,手动构建五角星形状路径。
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createStarShape(rOuter, rInner, points){
const shape = new THREE.Shape();
const step = Math.PI * 2 / points;
for(let i=0;i<points;i++){
const aO = i * step;
const aI = aO + step * 0.5;
const xO = Math.cos(aO) * rOuter;
const yO = Math.sin(aO) * rOuter;
const xI = Math.cos(aI) * rInner;
const yI = Math.sin(aI) * rInner;
i===0 ? shape.moveTo(xO,yO) : shape.lineTo(xO,yO);
shape.lineTo(xI,yI);
}
shape.closePath();
return new THREE.ShapeGeometry(shape);
}
3. 动态渐变天空盒
使用 Canvas API 动态生成渐变纹理作为场景背景。
javascript
1
2
3
4
5
6
7
8
9
10
11
const createGradientSky = ()=>{
const cvs = document.createElement('canvas');
cvs.width = 512; cvs.height = 512;
const ctx = cvs.getContext('2d');
const g = ctx.createLinearGradient(0,0,0,512);
g.addColorStop(0,'#000');
g.addColorStop(1,'#003');
ctx.fillStyle = g; ctx.fillRect(0,0,512,512);
return new THREE.CanvasTexture(cvs);
};
scene.background = createGradientSky();
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 透明效果异常 | 渲染顺序错误,背面遮挡正面 | 设置 transparent: true 并调整 side: THREE.DoubleSide |
| 渐变范围不对 | 透明区域过大或过小 | 调整 uvScale 参数控制渐变范围 |
| 性能问题 | 大量形状导致帧率下降 | 使用 InstancedMesh 合并渲染多个相同形状 |
| 形状边缘锯齿 | 多边形边缘有毛刺 | 增加 ShapeGeometry 的细分精度 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 动态颜色变化 | 在动画循环中修改 color uniform |
⭐ |
| 脉冲发光效果 | 添加时间变量控制强度周期性变化 | ⭐⭐ |
| 旋转动画 | 在顶点着色器中添加旋转矩阵 | ⭐⭐ |
| 不规则星形 | 修改内圆半径为随机值 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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