正文

如何用 Three.js 制作迷幻波浪动画？WebGL 鼠标交互调节颜色，免费体验 + 开源代码

AI资讯V管理员 /阅读
07 02

? 手把手教你用 Three.js 做迷幻波浪动画，还能鼠标调节颜色，附开源代码！


最近在研究 WebGL 动画的时候，发现用 Three.js 做波浪效果特别酷，尤其是加上鼠标交互变色后，视觉效果直接拉满。很多小伙伴问我怎么实现，今天就把整个过程拆解开来，哪怕你是 Three.js 新手也能跟着一步步做出来。咱们不仅会讲清楚每一步代码的作用，最后还会给大家提供免费体验地址和完整开源代码，直接拿走就能跑起来。

?️ 准备工作：先搭好项目框架


首先得确保你电脑里装了 Node.js，这是跑 Three.js 项目的基础。打开终端，新建一个项目文件夹，比如叫 wave-animation，然后进去初始化项目：npm init -y，这一步会生成 package.json 文件，记录项目的基本信息。

接下来安装必要的依赖，Three.js 肯定是必须的，还有用于处理三维数学的 three/addons/math/Vector2.js，以及监听鼠标事件需要用到的工具库。输入命令 npm install three 就行，安装完后，在项目里新建 index.html 和 src 文件夹，src 里放 main.js 作为入口文件。

在 index.html 里，先把基本的 HTML 结构写好，引入 Three.js 的库，注意这里用 ES6 模块的方式引入，代码大概是这样：

html
DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>迷幻波浪动画title>
    <style>
        body { margin: ; }
        canvas { display: block; }
    style>
head>
<body>
    <script type="module" src="./src/main.js">script>
body>
html>

这样基本的页面框架就搭好了，接下来就要在 main.js 里写核心的 Three.js 代码了。

? 第一步：创建场景、相机和渲染器


Three.js 里所有东西都要放在场景里，所以先创建一个场景 const scene = new THREE.Scene();。相机就像我们的眼睛，这里用透视相机，视角设为 75 度，宽高比用窗口的宽高比，近裁剪面设为 0.1，远裁剪面设为 1000，代码是 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);，相机的位置稍微往后退一点，比如 camera.position.z = 5;，这样能看得更清楚。

渲染器选择 WebGL 渲染器，设置一下尺寸，让它和窗口一样大，const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight);，然后把渲染器的 DOM 元素添加到页面 body 里，document.body.appendChild(renderer.domElement);。

? 第二步：生成波浪几何体


波浪动画的关键在于顶点的位置变化，所以我们要用 BufferGeometry 来创建自定义的几何体。先确定波浪的网格大小，比如宽度和高度方向各有 100 个点，const widthSegments = 100; const heightSegments = 100;。

然后创建顶点坐标数组，每个顶点的 x、y、z 坐标，这里 y 坐标暂时都设为 0，后面通过着色器来动态计算波浪的高度。代码大概是这样：

javascript
const geometry = new THREE.BufferGeometry();
const positions = [];
for (let y = ; y <= heightSegments; y++) {
    for (let x = ; x <= widthSegments; x++) {
        const px = (x / widthSegments) *  - ; // x 范围在 -2 到 2 之间
        const pz = (y / heightSegments) *  - ; // z 范围在 -2 到 2 之间
        positions.push(px, , pz); // y 暂时为 0
    }
}

把顶点坐标数组赋值给几何体的位置属性，geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));。

? 第三步：编写着色器实现波浪效果


接下来是重点，用着色器来让顶点动起来。先定义顶点着色器，需要接收时间 time 作为 uniform 变量，然后根据顶点的 x 和 z 坐标计算波浪的高度，这里用正弦函数来生成波浪，比如 y = Math.sin(x * 3 + time) * 0.5 + Math.sin(z * 3 + time) * 0.5;，这样就能形成一个立体的波浪效果。

顶点着色器的代码大概是这样：

glsl
varying vec2 vUv;
uniform float time;

void main() {
    vUv = uv;
    vec3 pos = position;
    pos.y = sin(pos.x * 3.0 + time) * 0.5 + sin(pos.z * 3.0 + time) * 0.5; // 计算波浪高度
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

片元着色器负责颜色渲染，这里先暂时用一个基础的颜色，后面再加上鼠标交互变色的逻辑。片元着色器可以先返回一个蓝色，比如 gl_FragColor = vec4(0.2, 0.5, 0.8, 1.0);。

然后创建 ShaderMaterial，把顶点着色器和片元着色器传进去，同时设置一些材质属性，比如透明度、混合模式等，const material = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: { time: { value: 0 }, mouse: { value: new THREE.Vector2() } // 后面用于鼠标位置 }, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending });

?️ 第四步：实现鼠标交互调节颜色


现在要让鼠标移动时波浪的颜色跟着变化，首先得监听鼠标移动事件。在窗口上添加 mousemove 事件监听，获取鼠标在画布上的坐标，注意坐标要转换为 Three.js 所需的范围，x 和 y 都从 -1 到 1，window.addEventListener('mousemove', (e) => { material.uniforms.mouse.value.x = (e.clientX / window.innerWidth) * 2 - 1; material.uniforms.mouse.value.y = -((e.clientY / window.innerHeight) * 2 - 1); // y 轴反转 });

然后在片元着色器里，根据鼠标位置来计算颜色，这里可以用鼠标位置作为颜色的 RGB 分量，或者做一些更复杂的计算，比如 vec3 color = vec3(mouse.x * 0.5 + 0.5, mouse.y * 0.5 + 0.5, 0.8);，这样鼠标移动时颜色就会跟着变化。

? 第五步：动画循环和时间更新


在动画循环里，首先要更新时间变量，让波浪动起来，material.uniforms.time.value += 0.05;，然后渲染场景和相机，renderer.render(scene, camera);，最后用 requestAnimationFrame(animate); 来循环调用动画函数。

同时，为了让波浪在窗口 Resize 时也能适配，添加窗口 Resize 事件监听，更新相机的宽高比和渲染器的尺寸，window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

? 第六步：组合所有元素并添加到场景


把创建好的几何体和材质组合成网格对象，const mesh = new THREE.Mesh(geometry, material);，然后添加到场景里，scene.add(mesh);。

现在整个项目的核心代码就写完了，接下来把所有代码整合到 main.js 里，确保没有语法错误。

✅ 免费体验和开源代码获取


写完代码后，我们可以用 npx serve 命令启动一个本地服务器，在浏览器里访问 http://localhost:3000 就能看到效果啦。鼠标移动到画布上，波浪的颜色会跟着变化，呈现出迷幻的效果。

如果你想获取完整的开源代码，可以到我的 GitHub 仓库下载，地址是 https://github.com/your-username/wave-animation-threejs（这里记得替换成你实际的仓库地址）。仓库里不仅有完整的代码，还有详细的安装步骤和说明，新手也能轻松跑起来。

? 注意事项和优化建议


在制作过程中，可能会遇到一些问题，比如波浪的起伏不够明显，这时候可以调整顶点着色器里的正弦函数的频率和振幅，比如把 3.0 改成 4.0 或者 2.0，看看效果变化。还有颜色的调节，可以在片元着色器里加入更多的计算，比如使用 HSV 颜色模型，让颜色变化更丰富。

另外，性能方面，如果网格的分段数太高，可能会影响运行速度，尤其是在低端设备上。可以根据实际情况调整 widthSegments 和 heightSegments 的值，比如从 100 改成 50，看看性能和效果的平衡。

最后，记得在生产环境中压缩代码，优化资源加载，比如使用 Webpack 或者 Rollup 进行打包，提高页面加载速度。

这样，一个带鼠标交互变色的迷幻波浪动画就完成啦！整个过程其实并不复杂，只要按照步骤一步步来，理解每个部分的作用，就能做出炫酷的 WebGL 动画。赶紧动手试试吧，有问题可以在评论区留言，大家一起讨论解决。

【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】