three实现照片粒子化交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three实现照片粒子化交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body{
  margin: 0;
  cursor: none;
  overflow: hidden;
}

canvas{
  width: 100%;
  height: 100vh;
  display: block;
}

.content{
  overflow: hidden;
}

.cursor{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255,255,255, 0.7);
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="content">
  <div id="content-canvas"></div>
  <div class="cursor">
    <div class="pointer"></div>
  </div>
</div>  
<script id="vertexShader" type="f">
     #define TAU 6.28318530718
  
      precision highp float;

      attribute float pindex;
      attribute vec3 position;
      attribute vec3 offset;
      attribute vec2 uv;
      attribute float angle;

      uniform mat4 modelViewMatrix;
      uniform mat4 projectionMatrix;

      uniform float uTime;
      uniform float uRandom;
      uniform float uDepth;
      uniform float uSize;
      uniform vec3 uMouse;
      uniform vec2 uTextureSize;
      uniform sampler2D uTexture;
      uniform sampler2D uTouch;

      varying vec2 vPUv;
      varying vec2 vUv;

      // Description : Array and textureless GLSL 2D simplex noise function.
      //      Author : Ian McEwan, Ashima Arts.
      //  Maintainer : ijm
      //     Lastmod : 20110822 (ijm)
      //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
      //               Distributed under the MIT License. See LICENSE file.
      //               https://github.com/ashima/webgl-noise
      //

      vec3 mod289_1_0(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
      }

      vec2 mod289_1_0(vec2 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
      }

      vec3 permute_1_1(vec3 x) {
        return mod289_1_0(((x*34.0)+1.0)*x);
      }

      float snoise_1_2(vec2 v){
        const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                            0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                           -0.577350269189626,  // -1.0 + 2.0 * C.x
                            0.024390243902439); // 1.0 / 41.0
      // First corner
        vec2 i  = floor(v + dot(v, C.yy) );
        vec2 x0 = v -   i + dot(i, C.xx);

      // Other corners
        vec2 i1;
        //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
        //i1.y = 1.0 - i1.x;
        i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
        // x0 = x0 - 0.0 + 0.0 * C.xx ;
        // x1 = x0 - i1 + 1.0 * C.xx ;
        // x2 = x0 - 1.0 + 2.0 * C.xx ;
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;

      // Permutations
        i = mod289_1_0(i); // Avoid truncation effects in permutation
        vec3 p = permute_1_1( permute_1_1( i.y + vec3(0.0, i1.y, 1.0 ))
          + i.x + vec3(0.0, i1.x, 1.0 ));

        vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
        m = m*m ;
        m = m*m ;

      // Gradients: 41 points uniformly over a line, mapped onto a diamond.
      // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

        vec3 x = 2.0 * fract(p * C.www) - 1.0;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;

      // Normalise gradients implicitly by scaling m
      // Approximation of: m *= inversesqrt( a0*a0 + h*h );
        m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

      // Compute final noise value at P
        vec3 g;
        g.x  = a0.x  * x0.x  + h.x  * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130.0 * dot(m, g);
      }

      float random(float n){
          return fract(sin(n) * 43758.5453123);
      }

      void main() {
        	vUv = uv;

          // particle uv
          vec2 puv = offset.xy / uTextureSize;
          vPUv = puv;

          // pixel color
          vec4 colA = texture2D(uTexture, puv);
          float grey = dot(colA.rgb, vec3(0.299, 0.587, 0.114));

          // displacement
          vec3 displaced = offset;
          // randomise
          displaced.xy += vec2(random(pindex) - 0.5, random(offset.x + pindex) - 0.5) * uRandom;
          float rndz = (random(pindex) + snoise_1_2(vec2(pindex * 0.5, uTime * 0.5)));
          displaced.z += rndz * (random(pindex) * 2.0 * uDepth);
          // center
          displaced.xy -= uTextureSize * 0.5;

          // touch
          float t = texture2D(uTouch, puv).r;
          displaced.z += t * 20.0 * rndz;
          displaced.x += cos(angle) * t * 20.0 * rndz;
          displaced.y += sin(angle) * t * 20.0 * rndz;

          // particle size
          float psize = (snoise_1_2(vec2(uTime, pindex) * 0.5) + 2.0);
          psize *= max(grey, 0.2);
          psize *= uSize;

          vec3 dir = position - uMouse * .5;
          float dist = length(dir);
          float range = .5;
          
          if(dist < range){
            float ratio = clamp(1. - dist / range, 0., 1.);
            displaced -= dir * ratio * 10.;
          }

          displaced += position * psize;

          // final position
          vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
          vec4 finalPosition = projectionMatrix * mvPosition;

          gl_Position = finalPosition;
      }
</script>
<script id="fragmentShader" type="f">
      precision highp float;

      uniform sampler2D uTexture;

      varying vec2 vPUv;
      varying vec2 vUv;

      void main() {
        vec4 color = vec4(0.0);
        vec2 uv = vUv;
        vec2 puv = vPUv;

        // pixel color
        vec4 colA = texture2D(uTexture, puv);

        // greyscale
        float grey = dot(colA.rgb, vec3(0.299, 0.587, 0.114));
        vec4 colB = vec4(vec3(grey), 1.0);

        // circle
        float border = 0.5;
        float radius = 0.5;
        float dist =  1. - distance(uv, vec2(0.5)) / radius;
        float t = smoothstep(0.0, border, dist);

        // final color
        color = colB;
        color.a = t;

        gl_FragColor = color;
      }
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script  >
    const easeOutSine = (t, b, c, d) => {
  return c * Math.sin(t / d * (Math.PI / 2)) + b;
};

class PositionMouseInCanvas {
  constructor(scene, group, camera) {
    this.scene = scene;
    this.group = group;
    this.camera = camera;
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2(0, 0);

    this.initPlane();
    this.initTouch();
  }

  initPlane() {
    const planeGeo = new THREE.PlaneGeometry(1, 1, 32);
    const planeMat = new THREE.MeshBasicMaterial({
      color: "#000",
      side: THREE.DoubleSide
    });

    this.plane = new THREE.Mesh(planeGeo, planeMat);
    this.group.add(this.plane);

    this.canvas = document.querySelector("#interactive-particles");
    this.cursor = document.querySelector(".cursor")
    
    this.boundCanvas = this.getBound(this.canvas)
    this.boundCursor = this.getBound(this.cursor)
    
    this.canvas.addEventListener("mousemove", e => this.onMouseMove(e));
    window.addEventListener("resize", () => this.onResize())
  }
  
  getBound(el){
    const bound = el.getBoundingClientRect()
    return {w: bound.width, h: bound.height, left: bound.left, top: bound.top}
  }
  
  onResize(){
    this.boundCanvas = this.getBound(this.canvas)
    this.boundCursor = this.getBound(this.cursor)
  }

  initTouch() {
    if (!this.touch) this.touch = new TouchTexture();

    const uniforms = this.group.children[0].material.uniforms;
    uniforms.uTouch.value = this.touch.texture;
  }

  onMouseMove(e) {
    const t = e.touches ? e.touches[0] : e;
    const touch = { x: t.clientX, y: t.clientY };

    this.mouse.x =
      touch.x / this.boundCanvas.w * 2 - 1;
    this.mouse.y =
      -(touch.y / this.boundCanvas.h) * 2 + 1;
    this.raycaster.setFromCamera(this.mouse, this.camera);

    const intersects = this.raycaster.intersectObjects([this.plane]);

    if (intersects.length > 0) {
      this.touch.addTouch(intersects[0].uv);
    }
    
    TweenMax.to(this.cursor, 0.5, {
      x: touch.x .........完整代码请登录后点击上方下载按钮下载查看