沉浸式迷幻波浪动画免费探索！WebGL 技术支持动态艺术效果，Three.js 教程轻松定制

// 创建场景，相当于舞台
const scene = new THREE.Scene();
// 创建透视相机，就像观众的眼睛位置
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
// 创建渲染器，把内容画到网页上
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸，填满整个窗口
renderer.setSize(window.innerWidth, window.innerHeight);
// 把渲染器的 DOM 元素加到网页 body 里
document.body.appendChild(renderer.domElement);

// 创建平面几何，宽度和高度设为 100，宽度分段和高度分段都设为 100，这样顶点足够多
const geometry = new THREE.PlaneGeometry(, , , );
// 材质用 MeshPhongMaterial，能有光影效果，颜色设为浅蓝色
const material = new THREE.MeshPhongMaterial({ color: 0x87ceeb });
// 创建网格对象，把几何和材质绑在一起
const waveMesh = new THREE.Mesh(geometry, material);
// 把网格添加到场景里
scene.add(waveMesh);

// 在动画循环里更新顶点
function animate() {
  requestAnimationFrame(animate);
  // 遍历每个顶点
  for (let i = ; i < geometry.vertices.length; i++) {
    const vertex = geometry.vertices[i];
    // X 和 Z 坐标决定波浪的位置，用时间戳让波浪移动
    const x = vertex.x;
    const z = vertex.z;
    // 波浪的高度随时间和位置变化，振幅设为 5，频率设为 0.1
    vertex.y = Math.sin(x * 0.1 + Date.now() * 0.005) *  + Math.sin(z * 0.1 + Date.now() * 0.005) * ;
  }
  // 更新几何的顶点数据，不然变化不生效
  geometry.verticesNeedUpdate = true;
  // 渲染场景和相机
  renderer.render(scene, camera);
}
// 启动动画
animate();

const textureLoader = new THREE.TextureLoader();
const waterNormal = textureLoader.load('water_normal.jpg');
// 把法线纹理应用到材质上
material.normalMap = waterNormal;

// 环境光，让整个场景有基础亮度
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 点光源，模拟阳光，位置放在波浪上方
const pointLight = new THREE.PointLight(0xffffff, );
pointLight.position.set(, , );
scene.add(pointLight);

// 监听鼠标移动
let mouseX = , mouseY = ;
window.addEventListener('mousemove', (e) => {
  mouseX = (e.clientX - window.innerWidth / ) / ;
  mouseY = (e.clientY - window.innerHeight / ) / ;
});

// 在动画循环里，根据鼠标位置添加额外的波浪扰动
for (let i = ; i < geometry.vertices.length; i++) {
  const vertex = geometry.vertices[i];
  // 原来的波浪计算
  const baseY = Math.sin(x * 0.1 + time) *  + Math.sin(z * 0.1 + time) * ;
  // 鼠标位置对应的扰动，距离越近振幅越大
  const distance = Math.sqrt((x - mouseX * ) **  + (z - mouseY * ) ** );
  const disturbY = ( / distance) * ; // 距离越近，扰动越大
  vertex.y = baseY + disturbY;
}

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioElement = new Audio('music.mp3');
const source = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);

const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
const lowFrequency = frequencyData.slice(, ).reduce((a, b) => a + b, ) / ;
vertex.y = Math.sin(x * 0.1 + time) * (lowFrequency /  * ) + Math.sin(z * 0.1 + time) * (lowFrequency /  * );

// 用 MeshBasicMaterial 开启发光效果
const glowMaterial = new THREE.MeshBasicMaterial({ 
  color: 0x00ffff, 
  emissive: 0x00ffff, 
  emissiveIntensity: ,
  transparent: true,
  opacity: 0.8
});
// 给波浪顶点设置不同的颜色，根据 Y 轴高度渐变
for (let i = ; i < geometry.vertices.length; i++) {
  const y = geometry.vertices[i].y;
  const color = new THREE.Color();
  color.setHSL((y + ) / , , 0.5); // 色相随高度变化
  geometry.colors[i] = color;
}
glowMaterial.vertexColors = THREE.VertexColors; // 应用顶点颜色

let alpha = , beta = ;
window.addEventListener('deviceorientation', (e) => {
  alpha = e.alpha; // 绕 Z 轴旋转角度
  beta = e.beta; // 绕 X 轴旋转角度
});

// 在动画循环里，根据倾斜角度调整相机位置，让波浪看起来像在流动
camera.position.x = Math.sin(alpha * 0.01) * ;
camera.position.z = Math.cos(beta * 0.01) * ;