鼠标波

更多有趣示例 尽在 小红砖社区

示例

代码

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

JS

// Inspired by Mystro https://codepen.io/mystroken/pen/daWMwN

const vertex = `precision mediump float;
uniform float u_time;
varying vec3 texcoords;
uniform float u_amplitude;
uniform float u_freq;
uniform vec2 u_mouse;

void main() {
  vec2 st = position.xy / 30.;
  vec2 mc = u_mouse - 0.5;

  vec2 point = vec2(0.5);

  float l = length(vec2(st.x - mc.x, st.y + mc.y));
  float angle = (u_time*0.5 + l*30.) * u_freq;

  float oscillation =  sin(angle) * u_amplitude;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy, oscillation, 1.0);
  texcoords =  vec3(position.xy, oscillation);
}
`;

const fragment =  `precision mediump float;
uniform vec2 u_res; 
uniform sampler2D u_texture;
varying vec3 texcoords;
uniform float u_amplitude;

void main() {
  vec2 a = texcoords.xy / 30. + 0.5;
  gl_FragColor = mix(texture2D(u_texture, a), vec4(vec3(0.),1.),-texcoords.z/u_amplitude/8.);
}
`;
const src = 'https://images.unsplash.com/photo-1549755169-2f98d3ec4f99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80';

const texture = new THREE.TextureLoader().load(src)

let scene = new THREE.Scene();
var VIEW_ANGLE = 45,
  ASPECT = window.innerWidth / window.innerHeight,
  NEAR = 0.1,
  FAR = 10000;

let camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
const segments = 64;
var geometry = new THREE.PlaneBufferGeometry( 30, 30, segments,segments );
var material = new THREE.MeshBasicMaterial( { color: 0xfa0afa, side:  THREE.DoubleSide } );
let uniforms = {
   u_time: {type:'f', value: 0},
  u_res: {type:'v2', value: new THREE.Vector2() },
  u_texture: {type:"t", value: texture},
  u_amplitude: {type:'f', value: 4},
  u_freq: { type:'f', value: 0.4 },
  u_mouse: {type: 'v2', value: new THREE.Vector2(0.5,0.5) }
}

let shader = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: vertex,
  fragmentShader: fragment,
})

var cube = new THREE.Mesh( geometry, shader );
scene.add( cube );
  camera.position.z = 50;
  let renderer = new THREE.WebGLRenderer({ alpha: true});

let onResize = ()=>{
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.u_res.value.x = renderer.domElement.width;
  uniforms.u_res.value.y = renderer.domElement.height;
  camera.aspect = window.innerWidth / window.innerHeight;
  
}
onResize();
window.addEventListener('resize', onResize);
window.addEventListener('mousemove',(e)=>{
  console.log('move', uniforms.u_mouse)
  uniforms.u_mouse.value.x = e.clientX/window.innerWidth;
  uniforms.u_mouse.value.y = e.clientY/window.innerHeight;
})
document.body.appendChild(renderer.domElement);

function draw(){
  uniforms.u_time.value += 0.25;
	renderer.render( scene, camera );
  requestAnimationFrame(draw)
}
function init(){
  requestAnimationFrame(draw)
}
init();