? 2025 最新迷幻波浪动画免费玩！WebGL 鼠标交互调节颜色，Three.js 开源教程助力设计
今年 WebGL 和 Three.js 技术又有了新突破，最近我发现了一款超酷的迷幻波浪动画，不仅能免费体验，还支持鼠标交互调节颜色，特别适合设计师和开发者用来提升作品的视觉冲击力。今天我就把这个宝藏项目拆解给大家，从技术原理到实际应用，手把手教你做出同款效果。
? 技术核心：WebGL 与 Three.js 的完美结合
要理解这个迷幻波浪动画，得先搞清楚背后的技术栈。WebGL 是浏览器实现 3D 图形渲染的核心技术，而 Three.js 则是基于 WebGL 的开源库，把复杂的底层操作封装成了简单的 JavaScript 接口。简单来说，WebGL 是引擎，Three.js 就是方向盘，让你轻松驾驭 3D 图形开发。
这次的波浪动画主要用到了 Three.js 的顶点着色器和片元着色器。顶点着色器负责控制波浪的形状，通过正弦函数和时间参数让顶点位置动态变化；片元着色器则处理颜色，结合鼠标位置实时调整 HSL 值，实现色彩渐变效果。这种组合让波浪既有动态的形态，又能随交互改变颜色，视觉效果直接拉满。
? 手把手教程：从零搭建迷幻波浪动画
别被技术术语吓到，其实实现过程并不复杂。我给大家整理了一份极简版教程，就算是新手也能快速上手。
第一步：引入 Three.js 库
首先得在 HTML 里引入 Three.js，你可以从官方 GitHub 仓库下载，或者用 CDN 链接。记得创建一个 Canvas 容器，用来显示动画。
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">script>
<canvas id="wave-canvas">canvas>
第二步：初始化场景和相机
接下来在 JavaScript 里初始化 Three.js 的基本组件：场景、相机和渲染器。场景就像舞台，相机决定视角，渲染器负责把画面输出到 Canvas。
javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('wave-canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
第三步：创建波浪平面
用 Three.js 的 PlaneBufferGeometry 创建一个平面作为波浪的基础形状，然后通过 MeshStandardMaterial 添加材质。这里要注意细分段数，数值越大波浪越平滑，但性能消耗也会增加。
javascript
const geometry = new THREE.PlaneBufferGeometry(, , , );
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: },
mouse: { value: new THREE.Vector2() },
color1: { value: new THREE.Color('#ff0000') },
color2: { value: new THREE.Color('#00ff00') }
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
vec3 pos = position;
pos.y = sin(pos.x * 5 + time) * 0.5;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform float time;
uniform vec2 mouse;
uniform vec3 color1;
uniform vec3 color2;
void main() {
float t = smoothstep(0.0, 1.0, vUv.y + time * 0.1);
vec3 color = mix(color1, color2, t);
gl_FragColor = vec4(color, 1.0);
}
`
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
第四步：添加鼠标交互
为了实现颜色调节，我们需要监听鼠标移动事件，把鼠标位置实时传递给着色器。这里用 THREE.Vector2 来记录鼠标坐标，并归一化到 [-1, 1] 的范围。
javascript
window.addEventListener('mousemove', (e) => {
const mouse = new THREE.Vector2();
mouse.x = (e.clientX / window.innerWidth) * - ;
mouse.y = -(e.clientY / window.innerHeight) * + ;
material.uniforms.mouse.value = mouse;
});
第五步：动画循环
最后，用 requestAnimationFrame 创建动画循环，不断更新时间参数，让波浪动起来。
javascript
function animate() {
requestAnimationFrame(animate);
material.uniforms.time.value += 0.05;
renderer.render(scene, camera);
}
animate();
? 进阶玩法：让波浪更酷炫
基础效果实现后，还可以通过调整参数和添加特效让动画更惊艳。比如增加波浪的振幅和频率，添加法线贴图模拟水的质感，或者引入粒子系统制造水花效果。Three.js 的社区里有很多现成的插件和资源，像 OrbitControls 可以实现相机自由旋转，OBJLoader 支持加载 3D 模型，都能轻松集成到项目中。
? 应用场景：从网页到艺术创作
这个迷幻波浪动画的应用范围非常广。在网页设计中，它可以作为背景或加载动画，提升用户体验；在艺术创作领域，结合 WebGL 的高性能渲染，能做出沉浸式的数字艺术作品；甚至在虚拟现实（VR）和增强现实（AR）中，也能利用它打造逼真的流体效果。我最近就在一个音乐可视化项目中用了类似技术，随着音乐节奏变化的波浪颜色和形态，让观众直呼过瘾。
? 性能优化：流畅运行的秘诀
虽然 Three.js 已经做了很多优化，但复杂的 3D 动画还是可能遇到性能问题。这里给大家分享几个实用技巧：
- 减少顶点数：适当降低平面的细分段数，或者使用 LOD（细节层次）技术，根据距离动态调整模型精度。
- 纹理压缩：对使用的贴图进行压缩，减小文件体积，加快加载速度。
- GPU 加速：利用 WebGL 的离屏渲染和异步计算，把部分任务交给 GPU 处理，减轻 CPU 负担。
- 避免过度绘制：合理设置相机的近远截面，剔除不可见的物体，减少渲染量。
? 学习资源推荐
如果你想深入学习 Three.js 和 WebGL，以下资源绝对不能错过：
- Three.js 官方文档：详细的 API 说明和示例，是入门的最佳选择。
- ShaderToy：在线着色器编辑器，能实时预览效果，适合创意实验。
- YouTube 频道 Three.js Journey：由资深开发者 Bruno Simon 主讲，从基础到进阶的系列教程。
- GitHub 项目：搜索 “three.js examples”，有海量开源项目可供参考。
该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具
