WebGL 迷幻波浪动画免费体验！Three.js 鼠标交互调节速度，附开源代码和教程

// 创建场景
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);

// 设置波浪的宽度和高度分段数，分段数越多，波浪越细腻
const widthSegments = ;
const heightSegments = ;
// 创建平面几何体，作为波浪的基础形状
const geometry = new THREE.PlaneGeometry(, , widthSegments, heightSegments);

// 创建着色器材质，使用自定义的顶点着色器和片段着色器
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
});

// 添加鼠标移动事件监听
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 * ;
});

function animate() {
  requestAnimationFrame(animate);
  // 更新时间变量，让波浪持续运动
  material.uniforms.time.value += 0.05;
  renderer.render(scene, camera);
}
animate();