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

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

代码语言：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 = mo.........完整代码请登录后点击上方下载按钮下载查看