2025 最新迷幻波浪动画免费玩！WebGL 鼠标交互调节颜色，Three.js 开源教程助力设计

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">script>
<canvas id="wave-canvas">canvas>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, 0.1, );
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('wave-canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

const geometry = new THREE.PlaneBufferGeometry(, , , );
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value:  },
    mouse: { value: new THREE.Vector2() },
    color1: { value: new THREE.Color('#ff0000') },
    color2: { value: new THREE.Color('#00ff00') }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      vec3 pos = position;
      pos.y = sin(pos.x * 5 + time) * 0.5;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    uniform float time;
    uniform vec2 mouse;
    uniform vec3 color1;
    uniform vec3 color2;
    void main() {
      float t = smoothstep(0.0, 1.0, vUv.y + time * 0.1);
      vec3 color = mix(color1, color2, t);
      gl_FragColor = vec4(color, 1.0);
    }
  `
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

window.addEventListener('mousemove', (e) => {
  const mouse = new THREE.Vector2();
  mouse.x = (e.clientX / window.innerWidth) *  - ;
  mouse.y = -(e.clientY / window.innerHeight) *  + ;
  material.uniforms.mouse.value = mouse;
});

function animate() {
  requestAnimationFrame(animate);
  material.uniforms.time.value += 0.05;
  renderer.render(scene, camera);
}
animate();