How to use three.js to achieve seamless rowing banner effect (website example)?

problem description

I want to implement the background effect in https://www.with.in/.

the environmental background of the problems and what methods you have tried

tried a lot of methods, currently implemented mobile, but did not figure out how to implement

related codes

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script src="js/three.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var img = new Image();
        img.src = "img/2.jpeg";

        var crateTexture = new THREE.ImageUtils.loadTexture("img/2.jpeg");
        let geometry = new THREE.PlaneGeometry(img.width * 2, img.height);
        let material = new THREE.MeshBasicMaterial({
            map: crateTexture,
        });
        let rect = new THREE.Mesh(geometry, material);

        scene.add(rect);

        camera.position.z = 500;
        camera.position.y = 0;
        camera.position.x = 0;
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 0;
        rect.rotation.x = -0.1;
        rect.rotation.y = -0.3;
        rect.rotation.z = -0.35;

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        //render
        render();

        var position2 = {
            x: 0
        }

        var tween2 = new TWEEN.Tween(position2);

        tween2.to({
            x: 200
        }, 500000);

        tween2.easing(TWEEN.Easing.Linear.None)
        tween2.start();
        animate();


        tween2.onUpdate(function () {
            rect.translateX(-this.x);
        });


        function animate() {
            requestAnimationFrame(animate);
            TWEEN.update();
        }
    </script>
</body>

what result do you expect? What is the error message actually seen?

I want to implement the background effect in https://www.with.in/.

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .spotlight { position: relative; } h1 { display: inline-block; text-transform: uppercase; letter-spacing: 4px; font-size: 84px; line-height: 96px; opacity: .1; font-size: 48px; line-height: 60px; font-weight: 100; margin-bottom: 36px; } span { display: block; } h1.searchable { position: absolute; left: 0; opacity: 1; -webkit-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955); -moz-animation: spotlight 5s cubic-bezier(.455,.03,.515,.955); animation: spotlight 5s cubic-bezier(.455,.03,.515,.955); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes spotlight { 0% { clip-path: circle(47.5% at 0 33%); } 45% { clip-path: circle(52.5% at 100% 33%); } 50% { clip-path: circle(45% at 0 66%); } 95% { clip-path: circle(55% at 100% 66%); } 100% { clip-path: circle(47.5% at 0 33%); } } </style> </head> <body> <div class="spotlight"> <h1> <span>Page</span> <span>Not</span> <span>Found</span> </h1> <h1 class="searchable"> <span>Page</span> <span>Not</span> <span>Found</span> </h1> </div> </body> </html>

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0} .show{ text-transform: uppercase; font-size: 84px; line-height: 96px; opacity: .1; color: -sharpfff; width:300px; } -sharpspotlight{ display: block; width: 150px; height: 150px; position:absolute; top:50px; left:0; opacity: 1; overflow: hidden; border-radius: 50%; } -sharpspotlightHelper{ width: 150px; height: 150px; position:absolute; top:-50px; } </style> </head> <body style="background: -sharp0c0a15"> <div> <div class="show"> <span>Page</span> <span>Not</span> <span>Found</span> </div> <div class="show" id="spotlight"> <div id="spotlightHelper"> <span>Page</span> <span>Not</span> <span>Found</span> </div> </div> </div> <script> let sl=document.getElementById('spotlight'), slAttr=sl.getBoundingClientRect(), slW=slAttr.width, slH=slAttr.height; let slHelper=document.getElementById('spotlightHelper') document.onmousemove=function (e) { let curX=e.clientX-slW/2,curY=e.clientY-slH/2 sl.style.cssText=`top:${curY}px;left:${curX}px;` slHelper.style.cssText=`top:${-curY}px;left:${-curX}px;` } </script> </body> </html>