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

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

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