? WebGL 迷幻波浪动画免费体验！Three.js 鼠标交互调节速度，附开源代码和教程
最近在鼓捣前端动画的时候，发现了一个超有意思的 WebGL 案例 —— 迷幻波浪动画。用 Three.js 实现的那种，鼠标移上去还能调节波浪滚动的速度，视觉效果特别炫。咱今天就来好好唠唠这个效果怎么玩，顺便把开源代码和详细教程都给大家安排上，不管你是刚入门的前端小白，还是想丰富项目效果的老司机，都能跟着一步步跑起来。
? 先感受下效果：丝滑交互 + 动态视觉冲击
第一次看到这个动画的时候，真的被惊艳到了。网页一打开，整个画布上就是一片起伏的波浪，颜色还会跟着波浪的起伏慢慢变化，从深蓝到浅紫，再到荧光绿，特别有迷幻的感觉。当鼠标在画布上移动的时候，波浪滚动的速度会跟着变 —— 鼠标往左移，波浪慢悠悠地晃，像清晨平静的海面；鼠标往右移，波浪突然加快速度，层层叠叠地往前涌，就跟按下了快进键似的。这种交互感特别强，让人忍不住一直拖着鼠标来回跑，就想看看不同速度下波浪的形态变化。
而且这个动画的细节做得很到位，波浪的顶点会根据鼠标位置实时计算位移，边缘的模糊效果让波浪看起来更有层次感，不会显得生硬。最关键的是，整个动画在主流浏览器里运行都很流畅，哪怕把窗口放大到全屏，也没有出现卡顿的情况。后来才知道，作者在代码里做了不少性能优化，比如合理设置几何体的分段数，还有使用 WebGL 渲染器的抗锯齿功能，这些细节咱们后面写代码的时候都会讲到。
?️ 准备工作：环境搭建和工具介绍
要实现这个效果，首先得搭好开发环境。咱们用 Three.js 库来做，所以得先引入 Three.js 的文件。这里推荐大家去官网下载最新版本的 Three.js，或者用 npm 安装，这样后续更新也方便。除了 Three.js，还需要一个用来处理鼠标事件的库吗？其实不用，原生的 JavaScript 就能搞定鼠标移动事件，这样项目更轻量化。
开发工具的话，VS Code 就挺好用的，装上 JavaScript 插件和 Live Server 插件，写完代码直接右键打开浏览器预览，特别方便。项目结构也很简单，建一个 HTML 文件，一个 JS 文件，再弄个 CSS 文件用来设置页面样式。HTML 里主要放画布容器，JS 里写 Three.js 的核心代码，CSS 用来调整页面背景色和画布的尺寸，让动画在页面中间显示，视觉效果更好。
? 核心代码解析：从场景搭建到动画实现
1. 初始化场景、相机和渲染器
javascript
// 创建场景
const scene = new THREE.Scene();
// 创建相机，这里用透视相机，模拟人眼视角
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
// 创建渲染器，设置抗锯齿和背景色
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
这几步是 Three.js 项目的基础操作。场景就像是一个舞台，所有的物体都要添加到场景里；相机决定了我们从哪个角度看这个舞台；渲染器负责把场景里的内容绘制到画布上。这里设置抗锯齿是为了让波浪的边缘更平滑，背景色设为黑色，这样波浪的颜色会更突出。
2. 创建波浪几何体：设置顶点和分段数
javascript
// 设置波浪的宽度和高度分段数，分段数越多，波浪越细腻
const widthSegments = ;
const heightSegments = ;
// 创建平面几何体，作为波浪的基础形状
const geometry = new THREE.PlaneGeometry(, , widthSegments, heightSegments);
这里用平面几何体来模拟波浪，通过设置宽度和高度分段数来控制波浪的细腻程度。分段数越多，波浪的起伏变化就越丰富，但同时也会增加计算量，影响性能。所以咱们得根据实际情况调整，这里设置 64 是个比较平衡的值，既能保证效果，又不会太卡。
3. 材质和着色器：实现颜色渐变和波浪动态
javascript
// 创建着色器材质，使用自定义的顶点着色器和片段着色器
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: },
mouse: { value: new THREE.Vector2() },
color1: { value: new THREE.Color('#0000ff') },
color2: { value: new THREE.Color('#ff00ff') }
},
vertexShader: `
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vUv = uv;
vPosition = position;
// 根据时间和鼠标位置计算顶点位移
float wave = sin(position.x * 3.0 + time * 2.0) + cos(position.y * 2.0 + time * 1.5);
position.z = wave * 0.5;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
varying vec3 vPosition;
uniform vec3 color1;
uniform vec3 color2;
uniform float time;
void main() {
// 根据顶点位置计算颜色，实现渐变效果
vec3 color = mix(color1, color2, (vPosition.z + 1.0) / 2.0);
gl_FragColor = vec4(color, 1.0);
}
`,
side: THREE.DoubleSide
});
着色器是这个动画的核心部分。顶点着色器负责计算每个顶点的位置，这里用正弦和余弦函数来生成波浪的起伏效果，而且把鼠标位置也作为参数传进去，这样就能通过鼠标移动来改变波浪的速度。片段着色器负责计算每个像素的颜色，通过 mix 函数让两种颜色根据顶点的 z 坐标进行混合，实现颜色随波浪高度变化的渐变效果。
4. 鼠标交互：获取鼠标位置并更新速度
javascript
// 添加鼠标移动事件监听
let mouse = new THREE.Vector2();
window.addEventListener('mousemove', (e) => {
mouse.x = (e.clientX / window.innerWidth) * - ;
mouse.y = (e.clientY / window.innerHeight) * - ;
// 这里通过鼠标的 x 坐标来控制波浪的速度，x 越大，速度越快
material.uniforms.time.value = mouse.x * ;
});
鼠标移动时，获取鼠标在画布上的位置，转换成 Three.js 所需的标准化坐标（范围在 -1 到 1 之间）。然后把鼠标的 x 坐标乘以一个系数，作为时间变量的增量，传递给着色器里的 time Uniform。这样，当鼠标在水平方向移动时，time 的变化速度就会改变，从而实现波浪滚动速度的调节。
5. 动画循环：更新数据和渲染画面
javascript
function animate() {
requestAnimationFrame(animate);
// 更新时间变量，让波浪持续运动
material.uniforms.time.value += 0.05;
renderer.render(scene, camera);
}
animate();
动画循环里，通过 requestAnimationFrame 来实现高性能的动画更新。每次循环都给 time 变量增加一个小的增量，这样波浪就会持续滚动。然后调用渲染器的 render 方法，把场景和相机的状态绘制到画布上。
? 实战技巧：让动画更流畅和个性化
1. 性能优化：控制分段数和简化计算
如果发现动画在低端设备上运行卡顿，首先可以降低几何体的分段数，比如把宽度和高度分段数从 64 改成 32，这样顶点数量减少一半，计算量也会跟着下降。另外，检查着色器里的计算是否可以简化，比如减少三角函数的使用次数，或者把一些固定值的计算提到循环外面。还可以开启渲染器的幂等纹理过滤，设置 renderer.shadowMap.enabled = true 来优化阴影渲染，但这里我们的动画没有阴影，所以不用管这个。
2. 个性化定制：修改颜色和波浪形态
想改变波浪的颜色？很简单，只需要修改着色器材质里的 color1 和 color2 这两个 Uniform 的值就行。比如把 color1 设为红色，color2 设为黄色，波浪就会从红色渐变到黄色。如果想让波浪的起伏更剧烈，可以调整顶点着色器里的正弦和余弦函数的系数，比如把 position.x * 3.0 改成 position.x * 5.0，这样波浪的波长会变短，起伏更密集。还可以添加更多的波形，比如同时使用正弦和余弦函数，让波浪呈现更复杂的形态。
3. 浏览器兼容性：处理 WebGL 不支持的情况
虽然现在主流浏览器都支持 WebGL，但还是有少数老旧浏览器可能不支持。为了让这部分用户也能看到提示，咱们可以在 HTML 里加一段检测代码，如果浏览器不支持 WebGL，就显示一个提示信息，让用户升级浏览器或者启用 WebGL 功能。
? 开源代码下载和使用说明
咱们把完整的代码打包放到了 GitHub 上，大家可以直接去克隆或者下载。代码结构很清晰，HTML 文件里已经引入了 Three.js 库，JS 文件里是核心的动画逻辑，CSS 文件里设置了页面的基本样式。下载下来后，用 VS Code 打开，安装 Live Server 插件，右键点击 HTML 文件选择 “Open with Live Server”，就能在浏览器里看到效果了。
需要注意的是，运行代码前确保已经安装了 Node.js，这样才能使用 npm 安装依赖（虽然这里没用到依赖，但养成良好的开发习惯总是好的）。如果在运行过程中遇到问题，比如画布不显示动画，先检查控制台有没有报错，可能是 Three.js 文件路径不对，或者着色器代码里有语法错误。可以对照咱们上面的代码解析部分，一步步排查问题。
? 总结：从入门到实战，玩转 WebGL 动画
通过这个迷幻波浪动画的案例，咱们学会了用 Three.js 搭建 WebGL 场景，创建几何体和材质，使用着色器实现动态效果，还有处理鼠标交互来增强用户体验。其实 WebGL 的玩法还有很多，比如粒子动画、3D 模型渲染等等，只要掌握了基本的场景搭建和着色器编程，就能创造出各种炫酷的效果。
对于新手来说，刚开始可能会被着色器的 GLSL 语言难住，但不用担心，咱们可以从模仿优秀案例开始，慢慢理解每个函数的作用，再尝试自己修改参数和添加功能。遇到问题多查官方文档和技术论坛，社区里有很多大神分享的经验，能帮咱们少走很多弯路。
最后，希望大家能把这个动画用到自己的项目里，或者在这个基础上进行二次创作，做出更有创意的效果。记得把你的作品分享出来，让更多人看到咱们前端开发的魅力！
【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】
