title: Three.js - Spawn an object every x seconds and move each object forward (along Z)
body: <p>I am making an endless runner style game using Three.js. The basic set up of the scene and idea for the game is a long moving road with cars coming towards you that you have to dodge out of the way of. I am still at the early stages of creating this game, and so my first problem is that I need the hero character (who is dodging the cars) to seem like he is moving forwards, and at the same time have the cars seem like they are moving (faster) towards the hero character.</p>
  
  <p>My thinking was to create road strip objects (the white lines in the middle of a road), and have them move towards the hero character, who is at (0, 0), at a certain speed.</p>
  
  <p>I have successfully created a road strip object and positioned it at the very back of the road (<code>RoadStrip.mesh.position.z = -5000;</code>). Here is my code for that:</p>
  
  <pre><code>var objectRoadStrip = function() {
      this.mesh = new THREE.Object3D();
      this.mesh.name = "roadStrip";
  
      geomRoadStrip = new THREE.BoxGeometry(20, 11, 300);
      matRoadStrip = new THREE.MeshPhongMaterial({color: Colors.white});
  
      RoadStrip = new THREE.Mesh(geomRoadStrip, matRoadStrip);
      RoadStrip.name = 'roadStripName';
      this.mesh.add(RoadStrip);
  }
  
  function createRoadStrip() {
  
      new objectRoadStrip();
      RoadStrip.position.y = -72.5;
      RoadStrip.position.z = -5000;
  
      scene.add(RoadStrip);
  
  }
  </code></pre>
  
  <p>In the <code>render()</code> function, which is the function that loops over every frame and is called last to make sure the camera and scene update every frame, I am able to successfully move this strip forwards along the <code>z</code> axis by <code>10</code> every time <code>render()</code> is called. I also added some code so that when the <code>RoadStrip</code> touches (0,0), it is removed from the scene. See this below:</p>
  
  <pre><code>function render(){
  
      // moves RoadStrip towards (0,0). When it reaches z = -150, remove that strip from the scene
  
      if (RoadStrip.position.z &lt;= -150) {
          RoadStrip.position.z += 10;
      } else {
          scene.remove(RoadStrip);
      }
  
      renderer.render(scene, camera);
      requestAnimationFrame(render);
  }
  </code></pre>
  
  <p>I have also added the following code to the <code>init()</code> function which creates a <code>RoadStrip</code> when the scene is created, and the continues to create a <code>RoadStrip</code> every 10 seconds (roughly every time the <code>RoadStrip</code> reaches (0,0).</p>
  
  <pre><code>createRoadStrip();
  setInterval( function() {
      createRoadStrip();
  }, 10000);
  </code></pre>
  
  <p>This is similar to the effect I'm going for, but read <em>The Problem</em> section below where I explain what I truly need.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>I need to spawn a <code>RoadStrip</code> every x amount of seconds (still to be decided once I get it working, but lets say 3 seconds for now) continuously. Each <code>RoadStrip</code> needs to move towards (0,0) with <code>z += 10</code> independently. When a <code>RoadStrip</code> instance reaches (0,0), it should be removed from the scene, but other <code>RoadStrips</code> should continue to spawn regardless every 3 seconds at the original position (<code>z = -5000</code>).</p>
  
  <p><strong>My Attempts / Solution Ideas</strong></p>
  
  <p>I've done a lot of reading on this, trawling through code from other people's endless runner games and reading through SO answers but nothing seems to have worked. Below are some of the things I have tried, or some things that I feel would work but I am not doing right/don't have a good understanding of:</p>
  
  <ol>
  <li><strong>Idea:</strong> Instead of calling the <code>createRoadStrip()</code> function inside a <code>setInterval</code>, push a <code>RoadStrip</code> object to an array every 3 seconds, and then call that array and move the array along the <code>z</code> axis by <code>+= 10</code>.</li>
  <li><strong>Possible solution help:</strong> I tried changing the <code>setInterval</code> to less than 2 seconds instead of 10 seconds. This caused the <code>RoadStrip</code> to move along the <code>Z</code> axis for 2 seconds as expected, but of course, after 2 seconds another <code>RoadStrip</code> was spawned, and so the first <code>RoadStrip</code> stopped moving along the <code>Z</code> axis, and the new one did instead (for 2 seconds as well) and this process repeated infinitely. This is so close to what I need, but I need each <code>RoadStrip</code> to continue moving, and be remove from the scene when it reaches (0,0)</li>
  </ol>
  
  <p>Thanks for taking the time to read my Question, I look forward to your solutions!</p>
  
  <p><strong>Examples of similar style games:</strong> <a href="https://codepen.io/anon/pen/Qwpqex" rel="nofollow noreferrer">First</a>, <a href="https://codepen.io/Fischaela/pen/QwBLvG" rel="nofollow noreferrer">Second</a>.</p>