title: How to create an infinite floor (skyline) in Three.js?
body: <p><strong>QUESTION:</strong></p>
  
  <p>So I came across this: </p>
  
  <p><a href="https://skin-tracker.com/pubg/outfit?no=000000000000000000000000000&amp;set=1&amp;char=1" rel="nofollow noreferrer">https://skin-tracker.com/pubg/outfit?no=000000000000000000000000000&amp;set=1&amp;char=1</a></p>
  
  <p>I have the central ground area which is textured already in my code. But I have no idea how to make it extend up to the horizon like seen in the link.</p>
  
  <p>It seems the person who coded what you see in the link hit some kind of limitation and had to use a single color for what extends beyond the central floor area.</p>
  
  <p>How can I make my floor extend to the horizon/ create a skyline ?</p>
  
  <hr>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>var floorTexture = new THREE.ImageUtils.loadTexture( '../../public/assets/grassTile.jpg' );
  floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
  floorTexture.repeat.set( 10, 10 );
  var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
  var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
  var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
  mesh.rotation.x = - Math.PI / 2;
  mesh.receiveShadow = true;
  scene.add( mesh );
  </code></pre>