three+gsap实现碎片幻灯片切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：three+gsap实现碎片幻灯片切换动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }

        .buttons {
            position: absolute;
            top: 50%;
            transform: translateY(30vh);
            text-align: center;
            left: 0;
            width: 100%;
            font-size: 24px;
            font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
            font-size: 24px;
        }

        span {
            cursor: pointer;
        }
    </style>


</head>

<body style="background-color: rgb(203, 218, 195); color: rgb(68, 68, 68);">
    <div class="buttons">
        <span class="prev">previous</span> ~
        <span class="next">next</span>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.122.js"></script>
    <script>
        const vertex = `
        float PI = 3.1415926535897932384626433;
        vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
        }

        vec4 mod289(vec4 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
        }

        vec4 permute(vec4 x) {
        return mod289(((x*34.0)+1.0)*x);
        }

        vec4 taylorInvSqrt(vec4 r){
        return 1.79284291400159 - 0.85373472095314 * r;
        }

        float snoise(vec3 v) {
        const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
        const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

        // First corner
        vec3 i  = floor(v + dot(v, C.yyy) );
        vec3 x0 =   v - i + dot(i, C.xxx) ;

        // Other corners
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min( g.xyz, l.zxy );
        vec3 i2 = max( g.xyz, l.zxy );

        //   x0 = x0 - 0.0 + 0.0 * C.xxx;
        //   x1 = x0 - i1  + 1.0 * C.xxx;
        //   x2 = x0 - i2  + 2.0 * C.xxx;
        //   x3 = x0 - 1.0 + 3.0 * C.xxx;
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
        vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

        // Permutations
        i = mod289(i);
        vec4 p = permute( permute( permute(
        i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
        + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
        + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

        // Gradients: 7x7 points over a square, mapped onto an octahedron.
        // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
        float n_ = 0.142857142857; // 1.0/7.0
        vec3  ns = n_ * D.wyz - D.xzx;

        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

        vec4 x_ = floor(j * ns.z);
        vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

        vec4 x = x_ *ns.x + ns.yyyy;
        vec4 y = y_ *ns.x + ns.yyyy;
        vec4 h = 1.0 - abs(x) - abs(y);

        vec4 b0 = vec4( x.xy, y.xy );
        vec4 b1 = vec4( x.zw, y.zw );

        //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
        //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
        vec4 s0 = floor(b0)*2.0 + 1.0;
        vec4 s1 = floor(b1)*2.0 + 1.0;
        vec4 sh = -step(h, vec4(0.0));

        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

        vec3 p0 = vec3(a0.xy,h.x);
        vec3 p1 = vec3(a0.zw,h.y);
        vec3 p2 = vec3(a1.xy,h.z);
        vec3 p3 = vec3(a1.zw,h.w);

        //Normalise gradients
        vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
        p0 *= norm.x;
        p1 *= norm.y;
        p2 *= norm.z;
        p3 *= norm.w;

        // Mix final noise value
        vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
        m = m * m;
        return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
        dot(p2,x2), dot(p3,x3) ) );
        }
        uniform vec3 p1v;
        uniform vec3 p1c;
        uniform vec3 p2v;
        uniform vec3 p2c;
        uniform vec3 p3v;
        uniform vec3 p3c;
        uniform vec3 p4v;
        uniform vec3 p4c;
        uniform vec3 p5v;
        uniform vec3 p5c;
        uniform vec3 p6v;
        uniform vec3 p6c;
        uniform vec3 p7v;
        uniform vec3 p7c;
        uniform vec3 p8v;
        uniform vec3 p8c;
        uniform vec3 p9v;
        uniform vec3 p9c;
        uniform vec3 p10v;
        uniform vec3 p10c;
        uniform vec3 p11v;
        uniform vec3 p11c;
        uniform vec3 p12v;
        uniform vec3 p12c;
        uniform vec3 p13v;
        uniform vec3 p13c;
        uniform vec3 p14v;
        uniform vec3 p14c;
        uniform vec3 p15v;
        uniform vec3 p15c;
        uniform vec3 p16v;
        uniform vec3 p16c;
        uniform vec3 p17v;
        uniform vec3 p17c;
        uniform vec3 p18v;
        uniform vec3 p18c;
        uniform vec3 p19v;
        uniform vec3 p19c;
        uniform vec3 p20v;
        uniform vec3 p20c;

        uniform float pointCount;
        uniform float progress;

        uniform float w;
        uniform float h;

        attribute vec3 aCoordinates;
        varying vec2 vCoordinates;
        varying vec3 vMvm;
        varying vec3 vPos;
        varying float delayedProgress;

        void main() {
        // voronoi
        float shortest = max(w,h) + 1.;
        vec3 color = vec3(0.,0.,0.);
        vec3 closest = vec3(0.,0.,0.);
        float d = 0.;
        d = distance(p1v,position); if ( d < shortest) { shortest = d; closest = p1v; color = p1c; }
        d = distance(p2v,position); if ( d < shortest) { shortest = d; closest = p2v; color = p2c; }
        d = distance(p3v,position); if ( d < shortest) { shortest = d; closest = p3v; color = p3c; }
        d = distance(p4v,position); if ( d < shortest) { shortest = d; closest = p4v; color = p4c; }
        d = distance(p5v,position); if ( d < shortest) { shortest = d; closest = p5v; color = p5c; }
        d = distance(p6v,position); if ( d < shortest) { shortest = d; closest = p6v; color = p6c; }
        d = distance(p7v,position); if ( d < shortest) { shortest = d; closest = p7v; color = p7c; }
        d = distance(p8v,position); if ( d < shortest) { shortest = d; closest = p8v; color = p8c; }
        d = distance(p9v,position); if ( d < shortest) { shortest = d; closest = p9v; color = p9c; }
        d = distance(p10v,position); if ( d < shortest) { shortest = d; closest = p10v; color = p10c; }
        d = distance(p11v,position); if ( d < shortest) { shor.........完整代码请登录后点击上方下载按钮下载查看