? 免费体验沉浸式迷幻波浪动画！WebGL+Three.js 支持鼠标交互调节，2025 最新开源教程来袭

? 为什么选择 WebGL+Three.js？

WebGL 是浏览器原生的 3D 渲染技术，而 Three.js 则是基于 WebGL 的 JavaScript 库，它将复杂的底层操作封装成简单易用的 API，让开发者无需深入了解 WebGL 细节，就能轻松创建 3D 场景、动画和交互效果。Three.js 的优势在于 跨平台兼容性、高性能渲染以及 丰富的社区资源，无论是网页游戏、数据可视化还是艺术展示，都能轻松胜任。

2025 年，Three.js 迎来了重大更新，例如 r175 版本对性能优化、WebGPU 支持和材质系统进行了改进，让 3D 开发更加高效和灵活。

?️ 环境搭建：从零开始

1. 项目初始化

创建 HTML 文件：

html

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>沉浸式波浪动画title>
    <style>
        body { margin: ; }
        #container { width: vw; height: vh; }
    style>
head>
<body>
    <div id="container">div>
    <script type="module">
        // 代码将在这里编写
    script>
body>
html>

引入 Three.js 库：通过 CDN 或本地下载，在 script 标签中引入 Three.js。例如：

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r175/three.min.js">script>

2. 核心组件初始化

场景（Scene）：场景是所有 3D 对象的容器，用于组织和管理物体、灯光等元素。

javascript

const scene = new THREE.Scene();

相机（Camera）：常用的有 PerspectiveCamera（透视相机）和 OrthographicCamera（正交相机）。这里我们使用透视相机来模拟真实视角：

javascript

const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
camera.position.z = ; // 相机位置

渲染器（Renderer）：将场景和相机渲染到网页上：

javascript

const renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染区域大小
document.getElementById('container').appendChild(renderer.domElement); // 将渲染器添加到页面

? 波浪动画核心实现

1. 创建波浪平面

几何体（Geometry）：使用 PlaneGeometry 创建一个平面，并设置足够的细分段数（例如 200×200），以保证波浪的平滑度：

javascript

const planeGeometry = new THREE.PlaneGeometry(, , , ); // 平面尺寸和细分

材质（Material）：使用 MeshStandardMaterial 来模拟水面效果，设置颜色、粗糙度和金属度等属性：

javascript

const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ffff, // 水的颜色
    roughness: 0.2, // 粗糙度
    metalness: 0.3, // 金属度
    envMap: envMapTexture, // 环境贴图（可选）
});

网格（Mesh）：将几何体和材质组合成网格，并添加到场景中：

javascript

const wavePlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(wavePlane);

2. 顶点位移实现波浪效果

波浪效果的核心是通过正弦和余弦函数动态改变平面顶点的位置。在动画循环中，对每个顶点的 z 坐标进行位移：

javascript

// 定义波浪参数
let time = ;
const waveSpeed = 0.05; // 波浪速度
const waveAmplitude = 0.5; // 波浪振幅

function animate() {
    requestAnimationFrame(animate);
    time += waveSpeed;

    // 获取平面顶点数据
    const vertices = wavePlane.geometry.attributes.position.array;

    // 遍历每个顶点，计算位移
    for (let i = ; i < vertices.length; i += ) {
        const x = vertices[i];
        const z = vertices[i + ];

        // 波浪公式：y = amplitude * sin(x * frequency + time * speed) + cos(z * frequency + time * speed)
        const waveY = waveAmplitude * (Math.sin(x *  + time) + Math.cos(z *  + time));
        vertices[i + ] = waveY; // 更新 y 坐标
    }

    // 通知 Three.js 顶点数据已更新
    wavePlane.geometry.attributes.position.needsUpdate = true;
    wavePlane.geometry.computeVertexNormals(); // 重新计算法线，确保光照正确

    renderer.render(scene, camera);
}
animate();

?️ 鼠标交互调节

1. 基础交互：旋转、缩放和平移

使用 Three.js 提供的 OrbitControls 类来实现基础的相机控制：

javascript

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 引入控件

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼，使动画更平滑
controls.dampingFactor = 0.05; // 阻尼系数
controls.autoRotate = false; // 是否自动旋转
controls.autoRotateSpeed = 2.0; // 自动旋转速度

// 在动画循环中更新控件
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 更新控件状态
    // ...其他动画逻辑
    renderer.render(scene, camera);
}

2. 自定义交互：调节波浪参数

通过监听鼠标事件（如滚轮、点击），动态改变波浪的速度、振幅等参数：

滚轮控制波浪速度：

javascript

window.addEventListener('wheel', (event) => {
    event.preventDefault();
    waveSpeed += event.deltaY * 0.001; // 根据滚轮方向调整速度
    waveSpeed = Math.max(0.01, Math.min(0.2, waveSpeed)); // 限制速度范围
});

点击改变波浪颜色：

javascript

renderer.domElement.addEventListener('click', (event) => {
    // 将鼠标坐标转换为归一化设备坐标（NDC）
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) *  - ;
    mouse.y = -(event.clientY / window.innerHeight) *  + ;

    // 创建射线投射器
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    // 检测与波浪平面的交点
    const intersects = raycaster.intersectObjects([wavePlane]);
    if (intersects.length > ) {
        // 生成随机颜色
        const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random());
        wavePlane.material.color.set(randomColor);
    }
});

3. 移动端适配

为了支持移动端的触摸交互，需要监听 touchstart、touchmove 和 touchend 事件，并处理双指缩放和单指旋转：

javascript

renderer.domElement.addEventListener('touchstart', (event) => {
    event.preventDefault(); // 阻止默认触摸行为
    if (event.touches.length === ) {
        // 单指旋转
        const touch = event.touches[];
        controls.handleTouchStartRotate(touch);
    } else if (event.touches.length === ) {
        // 双指缩放和平移
        const touch0 = event.touches[];
        const touch1 = event.touches[];
        controls.handleTouchStartDollyPan(touch0, touch1);
    }
});

renderer.domElement.addEventListener('touchmove', (event) => {
    event.preventDefault();
    if (event.touches.length === ) {
        controls.handleTouchMoveRotate(event.touches[]);
    } else if (event.touches.length === ) {
        controls.handleTouchMoveDollyPan(event.touches[], event.touches[]);
    }
});

? 高级优化与效果增强

1. 光照与阴影设置

环境光（AmbientLight）：提供场景整体照明：

javascript

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 颜色和强度
scene.add(ambientLight);

平行光（DirectionalLight）：模拟太阳光，产生阴影：

javascript

const directionalLight = new THREE.DirectionalLight(0xffffff, );
directionalLight.position.set(, , ); // 光源位置
directionalLight.castShadow = true; // 开启阴影
directionalLight.shadow.mapSize.set(, ); // 阴影贴图分辨率
scene.add(directionalLight);

设置物体投射和接收阴影：

javascript

wavePlane.castShadow = true; // 波浪平面投射阴影
wavePlane.receiveShadow = true; // 波浪平面接收阴影
renderer.shadowMap.enabled = true; // 渲染器启用阴影

2. 材质与纹理优化

法线贴图（NormalMap）：增强波浪表面的细节和立体感：

javascript

const normalTexture = new THREE.TextureLoader().load('water_normal.jpg');
planeMaterial.normalMap = normalTexture;
planeMaterial.normalScale.set(0.1, 0.1); // 法线强度

置换贴图（DisplacementMap）：通过纹理控制顶点位移，使波浪效果更真实：

javascript

const displacementTexture = new THREE.TextureLoader().load('water_displacement.jpg');
planeMaterial.displacementMap = displacementTexture;
planeMaterial.displacementScale = 0.2; // 置换强度

3. 性能优化

几何体合并：如果场景中有多个相似的波浪平面，可以使用 BufferGeometryUtils.mergeBufferGeometries 合并几何体，减少渲染调用次数。
纹理压缩：使用压缩格式的纹理（如 ETC、ASTC），减小文件大小，加快加载速度。
LOD（Level of Detail）：根据物体与相机的距离，动态切换不同细节层次的模型，提升性能。

? 开源项目与资源推荐

Three.js 官方仓库：GitHub - mrdoob/three.js，包含完整的文档、示例和源码。
波浪动画示例：CSDN 博客 - three.js 波浪效果实践，提供完整的代码示例和详细解释。
材质与纹理资源：AmbientCG，提供高质量的 PBR 材质和纹理。

? 总结

通过 WebGL 和 Three.js，我们可以轻松创建出沉浸式的迷幻波浪动画，并通过鼠标交互实现参数调节。从基础的环境搭建到高级的光照、材质优化，Three.js 提供了丰富的工具和 API，让 3D 开发变得简单而高效。无论是网页开发者、设计师还是创意人员，都能通过这个教程快速上手，打造出令人惊艳的 3D 交互效果。

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

正文

免费体验沉浸式迷幻波浪动画！WebGL+Three.js 支持鼠标交互调节，2025 最新开源教程来袭

? 免费体验沉浸式迷幻波浪动画！WebGL+Three.js 支持鼠标交互调节，2025 最新开源教程来袭

? 为什么选择 WebGL+Three.js？

?️ 环境搭建：从零开始

1. 项目初始化

2. 核心组件初始化

? 波浪动画核心实现

1. 创建波浪平面

2. 顶点位移实现波浪效果

?️ 鼠标交互调节

1. 基础交互：旋转、缩放和平移

2. 自定义交互：调节波浪参数

3. 移动端适配

? 高级优化与效果增强

1. 光照与阴影设置

2. 材质与纹理优化

3. 性能优化

? 开源项目与资源推荐

? 总结

相关阅读

财经公众号如何培养用户的长期主义投资观？

2025年，公众号冷启动就像一场“小规模战役”，准备好了吗？

有一云AI公众号编辑器评测：它与传统编辑器到底有何不同？

查重报告中的“引用”算重复率吗？正确格式解读与修改

在线代码测试工具推荐：支持 Go/NodeJS 等数十种语言，代码格式化 + 沙箱安全，快速调试！

Miro AI 智能模板与无限画布使用教程：远程团队效率提升指南

会读 ReadFlow 功能全解析：分类管理 + 多平台支持，优化阅读流程新选择

ThinkSAAS 论坛搭建快速入门：SNS 垂直社区开发全流程教程