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/.


this is implemented in pure css3 for reference;

Preview address: use circle css to achieve ring effect

<!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>
Wouldn't it be easier to implement

with CSS ?


< H2 > answer is not the question, click on the link given by the subject is 404, so ignore < / H2 >

css , try

in mainstream browsers.
<!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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b33361-2b5f2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b33361-2b5f2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?