How to make screen space projection moved texture

Showcase
, , ,
1

I tried to repeat material from UE4

here link on example and code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - materials - shaders</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
  </head>
  <body>
    <div id="container"></div>

    <script id="fragmentShader" type="x-shader/x-fragment">

      uniform float time;

      uniform sampler2D map;

      varying vec2 vUv;

      void main( void ) {

        vec2 T2 = gl_FragCoord.xy / 100.0 + vec2( 0, 2.0 ) * time * -0.05;

        vec4 texelColor = texture2D( map, T2 );

        gl_FragColor = texelColor;


      }
    </script>

    <script id="vertexShader" type="x-shader/x-vertex">

      uniform vec2 uvScale;
      varying vec2 vUv;

      void main()
      {

        vUv = uvScale * uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;

      }
    </script>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

    <script type="module">
      let camera, renderer, composer, clock;

      let uniforms, mesh;
      const scene = new THREE.Scene();
      init();
      animate();
      var controls;
      function init() {
        const container = document.getElementById("container");

        camera = new THREE.PerspectiveCamera(
          35,
          window.innerWidth / window.innerHeight,
          1,
          3000
        );
 

        clock = new THREE.Clock();

        const textureLoader = new THREE.TextureLoader();

        uniforms = {
          time: { value: 1.0 },

          map: {
            value: textureLoader.load("https://i.imgur.com/ZVQvGqe.jpeg")
          }
        };

        uniforms["map"].value.wrapS = uniforms["map"].value.wrapT =
          THREE.RepeatWrapping;

        const material = new THREE.ShaderMaterial({
          uniforms: uniforms,
          vertexShader: document.getElementById("vertexShader").textContent,
          fragmentShader: document.getElementById("fragmentShader").textContent
        });

        mesh = new THREE.Mesh(new THREE.BoxGeometry(), material);

        scene.add(mesh);

        //

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);
        renderer.autoClear = false;

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        camera.position.set(0, 0, 4);
        controls.target.set(0, 0, 0);

        //

        onWindowResize();

        window.addEventListener("resize", onWindowResize);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      //

      function animate() {
        controls.update();

        requestAnimationFrame(animate);

        render();
      }

      function render() {
        const delta = 5 * clock.getDelta();

        uniforms["time"].value += 0.5 * delta;

        renderer.clear();
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>