three.js实现鼠标位置周边区域的模糊特效

mouse area blur effects with three.js

three, mouse, blur

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3004
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

uniforms: {

"tDiffuse": {
        value: null
      },
      "h": {
        value: 1.0 / 256.0
      },
      "mouse": {
        value: new THREE.Vector2()
      },
      "ratio": {
        value: window.innerWidth / window.innerHeight
      }
    },

vertexShader: `
    varying vec2 vUv;
    
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }`,
    fragmentShader: `
		uniform sampler2D tDiffuse;
		uniform float h;
    uniform vec2 mouse;
    uniform float ratio;
		varying vec2 vUv;

void main() {
      vec2 uv = vUv;
      uv = -1. + 2. * uv;
      uv -= mouse;
      uv.x *= ratio;
      if ( length(uv) > 0.25 ) {
        gl_FragColor = texture2D(tDiffuse, vUv);
      } 
      else{

vec4 sum = vec4( 0.0 );

sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * h, vUv.y ) ) * 0.051;
        sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * h, vUv.y ) ) * 0.0918;
        sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * h, vUv.y ) ) * 0.12245;
        sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * h, vUv.y ) ) * 0.1531;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
        sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * h, vUv.y ) ) * 0.1531;
        sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * h, vUv.y ) ) * 0.12245;
        sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * h, vUv.y ) ) * 0.0918;
        sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * h, vUv.y ) ) * 0.051;

gl_FragColor = sum;
      }

}`
  };
</script>
<script>
  THREE.VerticalBlurShader = {

uniforms: {

"tDiffuse": {
        value: null
      },
      "v": {
        value: 1.0 / 256.0
      },
      "mouse": {
        value: new THREE.Vector2()
      },
      "ratio": {
        value: window.innerWidth / window.innerHeight
      }

vertexShader: `
    varying vec2 vUv;
    
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }`,

fragmentShader: `

uniform sampler2D tDiffuse;
		uniform float v;
    uniform vec2 mouse;
    uniform float ratio;
		varying vec2 vUv;

void main() {
      vec2 uv = vUv;
      uv = -1. + 2. * uv;
      uv -= mouse;
      uv.x *= ratio;
      if ( length(uv) > 0.25 ) {
        gl_FragColor = texture2D(tDiffuse, vUv);
      } 
      else{
        vec4 sum = vec4( 0.0 );

sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 4.0 * v ) ) * 0.051;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.0 * v ) ) * 0.0918;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 2.0 * v ) ) * 0.12245;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.0 * v ) ) * 0.1531;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.0 * v ) ) * 0.1531;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 2.0 * v ) ) * 0.12245;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.0 * v ) ) * 0.0918;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 4.0 * v ) ) * 0.051;

gl_FragColor = sum;
      }

}`
  };
</script>

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var cubes = [];

for (let i = 0; i < 500; i++) {
  let cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
    color: Math.random() * 0x777777 + 0x777777,
    wireframe: true
  }));
  cube.position.set(THREE.Math.randFloatSpread(10), THREE.Math.randFloatSpread(10), THREE.Math.randFloatSpread(10));
  scene.add(cube);
  cubes.push(cube);
}

var composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));

var hblur = new THREE.ShaderPass(THREE.HorizontalBlurShader);
composer.addPass(hblur);

var vblur = new THREE.ShaderPass(THREE.VerticalBlurShader);
console.log(vblur);
vblur.renderToScreen = true;
composer.addPass(vblur);

var mouse = new THREE.Vector2();

window.addEventListener("mousemove", function(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}, false)

render();

function render() {
  requestAnimationFrame(render);
  cubes.forEach((cube, index) => {
    cube.rotation.x += 0.0001 * index;
    cube.rotation.y += 0.0001 * index;
    cube.rotation.z += 0.0001 * index;
  });
  hblur.uniforms.mouse.value.copy(mouse);
  vblur.uniforms.mouse.value.copy(mouse);
  composer.render(scene, camera);
}
</script>

mouse area blur effects with three.js

three, mouse, blur

编辑器支持Emmet

快捷键

mouse area blur effects with three.js

three, mouse, blur

Three.js实现的跟着鼠标走的粒子云流动效

基于Three.js实现的体积光线前进特效 - 麻花（沙琪玛）模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：