I'm trying to create an infinite loop of objects which are moving vertically up.

The objects are grids, or walls. I plan to delete the wall as soon it goes off the camera, and then create a new wall.

Right now I'm just repositioning the existing grid to the bottom, but the animation stops after that. What is the reason? Could someone explain how to do this properly? I also experimented with function that creates new grids, but it just doesn't work.

Here is my code. After if statement it just stops to move.

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.set(0, 0, 10) 

var Wall = new THREE.GridHelper( 10, 5 );
Wall.rotation.x = 180;
scene.add( Wall );

function animate( time ) {
    Wall.position.y = -15 + time / 200;

    if (Wall.position.y > 5) {
        Wall.position.y = 0
    } 
    //console.log(Wall.position.y)
    renderer.render( scene, camera );


}
renderer.setAnimationLoop( animate );