🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现【中国国旗3D动画】，具体要求：

【核心特效】
- 顶点级波浪动画效果
- 波浪衰减从旗杆到旗尾逐渐增强
- 动态暗部阴影模拟

【场景与光照】
- 环境光 + 方向光组合
- 木质旗杆 + 金色顶部装饰
- 深色背景突出国旗

【交互与控制】
- OrbitControls 轨道控制器
- 暂停/继续、重置、缩放按钮

【技术要求】
- Three.js 最新版本
- RawShaderMaterial 自定义着色器
- TextureLoader 加载国旗纹理

📖 效果拆解

层次 视觉效果 技术实现
基础 3D平面旗帜 PlaneGeometry + 高细分(64x64)
核心特效 波浪飘动动画 顶点着色器正弦函数位移
增强细节 动态阴影效果 根据波浪强度调整颜色亮度
场景元素 旗杆与装饰 CylinderGeometry + ConeGeometry

🔧 核心技术点

1. 顶点着色器波浪计算

实现真实旗帜波浪的核心在于顶点级位移计算。使用正弦函数模拟波浪运动，并通过衰减因子实现从旗杆到旗尾的渐变效果。

GLSL
1
2
3
4
5
6
7
8
9
10
// 波浪衰减因子 - 从旗杆到旗尾逐渐增强
float xFactor = clamp((modelPosition.x + 1.25) / 2.0, 0.0, 2.0);

// 主波浪计算
float vWave = sin(modelPosition.x * uFrequency.x - uTime) * xFactor * uStrength;
// 叠加次要波浪，使效果更自然
vWave += sin(modelPosition.y * uFrequency.y - uTime) * xFactor * uStrength * 0.5;

// 应用到Z轴
modelPosition.z += vWave;

2. RawShaderMaterial 自定义着色器

使用 RawShaderMaterial 而非 ShaderMaterial，需要手动提供所有矩阵和属性定义，获得更精细的控制。

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
const flagMaterial = new THREE.RawShaderMaterial({
    vertexShader: `...`,
    fragmentShader: `...`,
    side: THREE.DoubleSide,
    uniforms: {
        uFrequency: { value: new THREE.Vector2(3, 3) },
        uTime: { value: 0 },
        uTexture: { value: flagTexture },
        uStrength: { value: 0.2 }
    }
})

3. 动态阴影模拟

在片段着色器中根据波浪强度动态调整颜色亮度，模拟旗帜飘动时的光影变化。

GLSL
1
2
// 根据波浪高度调整亮度
textColor.rgb *= vDark + 0.85;

💡 调试与优化

问题类型 表现形式 解决方案
着色器编译失败 材质显示黑色或报错 检查矩阵命名是否正确（projectionMatrix、modelMatrix、viewMatrix）
波浪效果不明显 旗帜几乎不动 增加 uStrength 值或调整 uFrequency 频率参数
纹理模糊 国旗图案不清晰 设置 flagTexture.anisotropy = renderer.capabilities.getMaxAnisotropy()
性能问题 高细分平面帧率下降 降低 PlaneGeometry 细分参数，或使用 LOD 技术

🚀 扩展思路

变体效果 核心改动 难度
风力变化 添加随机风力扰动参数，动态调整波浪强度 ⭐⭐
旗帜撕裂效果 在边缘添加随机顶点位移，模拟撕裂 ⭐⭐⭐
雨滴效果 在片段着色器中添加雨滴纹理叠加 ⭐⭐
昼夜切换 添加环境光颜色动态变化，模拟不同时段光照 ⭐

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。