three+gsap+gsap及webgl实现无限拖动滚动循环的照片墙效果代码-html代码-BFW代码库

代码语言：html

代码描述：three+gsap+gsap及webgl实现无限拖动滚动循环的照片墙效果代码，不管用鼠标拖动还是滚动鼠标，都能无边界无尽头展示照片。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
        html, body {
          height: 100%;
          height: 100%;
          overflow: hidden;
        }
        
        html {
          font-size: 1vw;
        }
        
        body {
          padding: 0;
          margin: 0;
          cursor: -webkit-grab;
          cursor: grab;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        
        .grid {
          position: fixed;
          top: 0;
          left: 0;
          width: 150%;
          height: 150%;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
        }
        .grid > div {
          position: relative;
        }
        
        canvas {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        
        figure {
          position: absolute;
          inset: 0.5rem;
          padding: 0;
          margin: 0;
        }
    </style>



</head>

<body >
    <div class="grid js-grid">
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
              <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
               <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
               <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
               <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
    </div>

    <div class="page js-page">

    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/virtualscroll.min.js"></script>
    <script>
        function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}console.clear();
        
        let ww = window.innerWidth;
        let wh = window.innerHeight;
        
        const isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
        const isWindows = navigator.appVersion.indexOf("Win") != -1;
        
        const mouseMultiplier = .6;
        const firefoxMultiplier = 20;
        
        const multipliers = {
          mouse: isWindows ? mouseMultiplier * 2 : mouseMultiplier,
          firefox: isWindows ? firefoxMultiplier * 2 : firefoxMultiplier };
        
        
        /** CORE **/
        class Core {
        
          constructor() {_defineProperty(this, "tick",
        

        
            () => {
              const xDiff = this.tx - this.cx;
              const yDiff = this.ty - this.cy;
        
              this.cx += xDiff * 0.085;
              this.cx = Math.round(this.cx * 100) / 100;
        
              this.cy += yDiff * 0.085;
              this.cy = Math.round(this.cy * 100) / 100;
        
              this.diff = Math.max(
              Math.abs(yDiff * 0.0001),
              Math.abs(xDiff * 0.0001));
        
        
              this.planes.length &&
              this.planes.forEach((plane) =>
              plane.update(this.cx, this.cy, this.max, this.diff));
        
              this.renderer.render(this.scene, this.camera);
            });_defineProperty(this, "onMouseMove",
        
            ({ clientX, clientY }) => {
              if (!this.isDragging) return;
        
              this.tx = this.on.x + clientX * 2.5;
              this.ty = this.on.y - clientY * 2.5;
            });_defineProperty(this, "onMouseDown",
        
            ({ clientX, clientY }) => {
              if (thi.........完整代码请登录后点击上方下载按钮下载查看